@gem-sdk/components 19.0.0-staging.8 → 19.1.0-dev.0

package/dist/esm/product/components/product-images-v2/components/feature-gallery/FeatureImageWithGallery.liquid.js

@@ -1,4 +1,4 @@
-import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import l from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as M,Liquid as _,If as $}from"@gem-sdk/system";import b from"../../../../../carousel/components/root/Carousel.liquid.js";import w from"../../../../../carousel/components/item/CarouselItem.liquid.js";let v=({builderPropUID:v,children:I,enableLazyLoadImage:x,...q})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:j,featuredCarouselItemClasses:S}=f(q),{featuredImageCarouselStyle:R,featureImageStyle:P,featureImageCarouselOnlyOneImageStyle:W,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:T}=c(q),{featuredImageCarouselSettingAttrs:L}=h(q),N=t(q.ftShape),k=()=>`
+import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import l from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as M,Liquid as _,If as $}from"@gem-sdk/system";import b from"../../../../../carousel/components/root/Carousel.liquid.js";import w from"../../../../../carousel/components/item/CarouselItem.liquid.js";let v=({builderPropUID:v,children:I,pageContext:x,...q})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:j,featuredCarouselItemClasses:S}=f(q),{featuredImageCarouselStyle:R,featureImageStyle:P,featureImageCarouselOnlyOneImageStyle:W,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:T}=c(q),{featuredImageCarouselSettingAttrs:L}=h(q),N=t(q.ftShape),k=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${D()}
@@ -13,7 +13,7 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
       {% else %}
         ${H()}
     {% endcase %}
-    `,E=()=>l({src:y("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:N}),O=()=>p({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:N}),A=()=>m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,style:{width:"100%","max-height":"100%"},className:"gp-invisible"}),D=()=>i`
+    `,E=()=>l({src:y("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:N}),O=()=>p({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:N}),A=()=>m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,style:{width:"100%","max-height":"100%"},className:"gp-invisible",pageContext:x}),D=()=>i`
       ${V(a("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==q.hoverEffect},"{{shouldHidden}}"))}
       ${$(q?.hoverEffect!=="none",`<div class="${a("zoom-element !gp-max-w-none",o())}">
             ${V("image-zoom",!0)}
@@ -29,8 +29,8 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
       {% assign otherImage = product.media[other_image_index] %}
       ${y("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${g({srcIsLiquidCode:!0,src:y("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:y("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e}`,enableLazyLoadImage:x})}`,H=()=>i`
-    ${g({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:x})}`,F=r(q.ftShape),G=d(q),J="gp-featured-image-wrapper",B=y("product.media.size > 0",`${I||""} {% assign largestRatio = 0 %}
+    ${g({srcIsLiquidCode:!0,src:y("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:y("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e}`,pageContext:x})}`,H=()=>i`
+    ${g({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",pageContext:x})}`,F=r(q.ftShape),G=d(q),J="gp-featured-image-wrapper",B=y("product.media.size > 0",`${I||""} {% assign largestRatio = 0 %}
       ${M("featureMedia in product.media",`
           {% assign height = featureMedia.height | times: 1.0 %}
           {% assign width = featureMedia.width | times: 1.0 %}
@@ -54,7 +54,7 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
         ${k()}
       </div>
       `})}`)}
-    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:q?.preload,setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:x}));return _(`
+    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:q?.preload,setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,pageContext:x}));return _(`
     {% capture featureImageOnlyOne %}
       ${_(`
         {% assign featureMedia = variant.featured_media %}

package/dist/esm/product/components/product-images-v2/components/gallery-carousel/GalleryCarousel.liquid.js

@@ -1,4 +1,4 @@
-import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getAspectRatio as s,getDisplayStyle as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,getZoomDisplay as m,checkDisplayGalleryByWidth as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let w=({builderPropUID:w,children:L,enableLazyLoadImage:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),M=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",customLazyload:!0,style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:F})}`,Z=r(V),q=e=>`
+import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getAspectRatio as s,getDisplayStyle as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,getZoomDisplay as m,checkDisplayGalleryByWidth as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let w=({builderPropUID:w,children:L,pageContext:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),M=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",customLazyload:!0,style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",pageContext:F})}`,Z=r(V),q=e=>`
     ${y("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
     ${y("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
     ${y("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}

package/dist/esm/product/components/product-images-v2/components/gallery-grid/GalleryGrid.liquid.js

@@ -1,12 +1,12 @@
-import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(e=>{let o=a(L?.position,e)||"",s="one-col"===o||"two-col"===o;t[e]=(i?!s:s)?"block":"none"}),e("d",t)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
-      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}
+import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,pageContext:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(e=>{let o=a(L?.position,e)||"",s="one-col"===o||"two-col"===o;t[e]=(i?!s:s)?"block":"none"}),e("d",t)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
+      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,pageContext:x})}
       ${r(L?.galleryHoverEffect!=="none",`<div class="${t("zoom-element !gp-max-w-none gp-w-full gp-h-full",h())}">
-          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:x})}
+          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,pageContext:x})}
           </div>`," ")}
       ${r(L?.galleryHoverEffect=="zoom"&&L?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
+    `,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"},pageContext:x}),P=()=>i`
       ${d("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
@@ -81,7 +81,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       {% assign isVideo= false %}
       {% assign isMedia= false %}
     </div>`,T=()=>i`
-    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
+    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,pageContext:x})}`;return o(`
   <div type="grid-gallery"
     class="${V}"
     style="${c(q)}}"

package/dist/esm/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 'use client';
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore as c,filterToolbarPreview as m}from"@gem-sdk/core";import{useMemo as f,useState as g,useEffect as h,Children as u,isValidElement as y}from"react";import D from"./components/feature-gallery/FeatureImageWithGallery.js";import b from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import M from"../../../common/components/NoDataState.js";import{getProductImagesClassName as Z}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as w}from"./common/getBorderActiveCss.js";import k from"./components/gallery-grid/GalleryGrid.js";let V=e=>e?.medias?.edges.map(e=>e?.node),v=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],E=E=>{let L=f(()=>a(E),[E]),{redirectProductShopifyLink:x}=l(),{setting:B,styles:H,builderProps:O,builderAttrs:j,style:S,children:F}=L,P=C(),A=o(),T=r(),{isChangeSelectedOption:_}=n(),N=d(),G=s(e=>e.setProductFeaturedImage),[z,R]=g(!1),J=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,U=e=>e?.featuredImage,W=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,X=f(()=>B?.typeDisplay==="all-images"&&!_,[_,B?.typeDisplay]),q=f(()=>{if(X){let e;switch(B?.preDisplay){case"1st-images":e=U(P);break;case"1st-3d-mode":e=W(P);break;case"1st-video":e=J(P);break;case"1st-available-variant":e=T?.media}return G(e),e}},[X,B?.preDisplay,G,P,T?.media]),K=f(()=>B?.filterByVariant==="selected_variant",[B?.filterByVariant]),Q=f(()=>{let e=V(P);if(!e?.length)return[{id:P?.featuredImage?.id||"noImageError",baseID:P?.featuredImage?.baseID||"noImageError",src:P?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:P?.featuredImage?.width||480,height:P?.featuredImage?.height||480}];if(!K||!T?.selectedOptions?.length)return e;let t=T.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),C=t===l||t.includes(l);return"all-variants"===t||C});return l?.length>0?l:e},[T?.selectedOptions,K,P]),Y=f(()=>Q.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[Q]),$=f(()=>p(H?.position,A),[A,H?.position]),ee=(e,t)=>{ea(e),t&&et()},et=()=>{R(!0)},ea=e=>{if(!e)return;let t=Y[e];if(void 0!==t){let e=Q[t];e&&G(e)}};h(()=>{if(T&&!X){let e=Y[T?.mediaId];if(void 0!==e){let t=Q[e]??P?.featuredImage;t&&G(t)}}},[T,Y,Q,P?.featuredImage,G,X]);let ei=f(()=>{let e="popup"===p(B?.ftClickOpenLightBox,A)||p(B?.clickOpenLightBox,A);return e||"edit"!==N||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[B?.ftClickOpenLightBox,B?.clickOpenLightBox,A,N]),el=()=>Q.length>0?u.map(m(F),t=>y(t)?e(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:B?.ftNavigationPosition,imageData:{imageShape:H?.ftShape,imageAlign:H?.align,imageLayout:H?.position},dotData:{dotSize:B?.ftDotSize,dotGapToCarousel:B?.ftDotGapToCarousel,dotStyle:B?.ftDotStyle}}):null):null,eC=`
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as o,useCurrentDevice as C,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore as m,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as f,useState as g,useEffect as h,Children as u,isValidElement as y}from"react";import D from"./components/feature-gallery/FeatureImageWithGallery.js";import I from"./components/feature-only/OnlyFeatureImage.js";import b from"./components/lightbox/ProductImagesLightBox.js";import M from"../../../common/components/NoDataState.js";import{getProductImagesClassName as Z}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as k}from"./common/getBorderActiveCss.js";import w from"./components/gallery-grid/GalleryGrid.js";let v=e=>e?.medias?.edges.map(e=>e?.node),E=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],V=V=>{let L=f(()=>a(V),[V]),{redirectProductShopifyLink:x}=l(),{setting:H,styles:O,builderProps:B,builderAttrs:j,style:F,children:S}=L,A=o(),P=C(),T=r(),{isChangeSelectedOption:G}=n(),_=d(),N=s(e=>e.setProductFeaturedImage),[z,R]=g(!1),[J,U]=g(!1),W=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,X=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="IMAGE")?.node,q=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,K=f(()=>H?.typeDisplay==="all-images"&&!G,[G,H?.typeDisplay]),Q=f(()=>{if(K){let e;switch(H?.preDisplay){case"1st-images":e=X(A);break;case"1st-3d-mode":e=q(A);break;case"1st-video":e=W(A);break;case"1st-available-variant":e=T?.media}return N(e),e}},[K,H?.preDisplay,N,A,T?.media]),Y=f(()=>H?.filterByVariant==="selected_variant",[H?.filterByVariant]),$=f(()=>{let e=v(A);return e?.length?e:[{id:A?.featuredImage?.id||"noImageError",baseID:A?.featuredImage?.baseID||"noImageError",src:A?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:A?.featuredImage?.width||480,height:A?.featuredImage?.height||480}]},[A]),ee=f(()=>{if(!Y||!T?.selectedOptions?.length)return $;let e=T.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),t=e.join("-"),a=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),i=$?.filter(e=>{if(!e?.alt)return!1;let i=a(e.alt),l=a(t),o=i===l||i.includes(l);return"all-variants"===i||o});return i?.length>0?i:$},[T?.selectedOptions,Y,$]),et=f(()=>$.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[$]),ea=f(()=>p(O?.position,P),[P,O?.position]),ei=({imageID:e,enableOpenLightBox:t,isClickFromFeatureImage:a=!1})=>{eo(e),t&&(U(a),el())},el=()=>{R(!0)},eo=e=>{if(!e)return;let t=et[e];if(void 0!==t){let e=$[t];e&&N(e)}};h(()=>{if(!T||K)return;let e=et[T?.mediaId],t=Y&&"only-feature"!==ea?ee[0]:void 0,a=void 0!==e?$[e]??A?.featuredImage:t;a&&N(a)},[T,et,$,ee,A?.featuredImage,N,K,Y,ea]);let eC=f(()=>{let e="popup"===p(H?.ftClickOpenLightBox,P)||p(H?.clickOpenLightBox,P);return e||"edit"!==_||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[H?.ftClickOpenLightBox,H?.clickOpenLightBox,P,_]),er=()=>ee.length>0?u.map(c(S),t=>y(t)?e(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:H?.ftNavigationPosition,imageData:{imageShape:O?.ftShape,imageAlign:O?.align,imageLayout:O?.position},dotData:{dotSize:H?.ftDotSize,dotGapToCarousel:H?.ftDotGapToCarousel,dotStyle:H?.ftDotStyle}}):null):null,en=`
       <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
         <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
@@ -23,4 +23,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineS
         <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
         <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
       </svg>
-    `,{t:eo}=c(),er=e(M,{elementType:"secondary",description:eo("Catch your customer's attention with attracted media."),descriptionActions:[{text:eo("Add image"),callback:x},{text:eo("sync data"),callback:"syncProduct"}],additionalMedia:eC}),{wrapperClasses:en}=Z(E);return t("div",{...j,className:en,style:S,children:[e("style",{dangerouslySetInnerHTML:{__html:w({settings:{...B,...H},uid:O?.uid,type:"React"})}}),v.includes($)&&e(D,{...L,isFilterByVariantEnabled:K,gallery:Q,priorityFeatureImage:q,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,children:el()}),"only-feature"===$&&e(b,{gallery:Q,...L,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,isFilterByVariantEnabled:K,children:el()}),["one-col","two-col"].includes($)&&e(k,{gallery:Q,...L,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,children:el()}),ei&&e(I,{productImages:Q,builderPropUID:O?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(H?.ftShape)}),m(F,!0)]})};export{E as default};
+    `,{t:ed}=m(),es=e(M,{elementType:"secondary",description:ed("Catch your customer's attention with attracted media."),descriptionActions:[{text:ed("Add image"),callback:x},{text:ed("sync data"),callback:"syncProduct"}],additionalMedia:en}),{wrapperClasses:ep}=Z(V);return t("div",{...j,className:ep,style:F,children:[e("style",{dangerouslySetInnerHTML:{__html:k({settings:{...H,...O},uid:B?.uid,type:"React"})}}),E.includes(ea)&&e(D,{...L,isFilterByVariantEnabled:Y,gallery:ee,featureGallery:$,priorityFeatureImage:Q,onHandleClickImage:(e,t,a)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:a}),noDataChildren:es,children:er()}),"only-feature"===ea&&e(I,{gallery:$,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:!0}),noDataChildren:es,children:er()}),["one-col","two-col"].includes(ea)&&e(w,{gallery:ee,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t}),noDataChildren:es,children:er()}),eC&&e(b,{productImages:J?$:ee,builderPropUID:B?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(O?.ftShape)}),c(S,!0)]})};export{V as default};

package/dist/esm/product/components/product-images-v3/ProductImagesV3.liquid.js

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

package/dist/esm/product/components/product-images-v3/ProductImagesV3Embla.liquid.js

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

package/dist/esm/product/components/product-images-v3/common/classes.js

@@ -1 +1 @@
-import{DEVICES as e,getResponsiveValueByScreen as l}from"@gem-sdk/core";function t(e){return e.split(" ").reduce((e,l)=>(e[l]=!0,e),{})}let r=({extraClass:e,isAddOverFlowClass:l=!1})=>{let r="gp-relative gp-w-full";return e&&(r+=` ${e}`),l&&(r+=" gp-overflow-hidden"),t(r)},g=({extraClass:e})=>{let l="gallery-wrapper gp-product-images-gallery gp-flex gp-overflow-hidden gp-max-w-full gp-max-h-full data-[only-image=true]:gp-hidden";return e&&(l+=` ${e}`),t(l)},p=({extraClass:e})=>{let l="product-feature-image grid-gallery gp-flex !gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400 gp-z-1";return e&&(l+=` ${e}`),t(l)},a=({extraClass:e})=>{let l="gp-flex !gp-h-fit gp-relative gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},s=({extraClass:e})=>{let l="gp-flex gp-h-fit gp-max-w-full gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},i=({extraClass:e})=>{let l="`gp-flex-1 gp-w-full gp-feature-image-carousel";return e&&(l+=` ${e}`),t(l)},o=({setting:r,extraClass:g})=>{let p=g??"";return e.forEach(e=>{let t=l(r?.ftNavigationPosition,e),g="desktop"!==e?`${e}:`:"";"outside"===t?p+=` ${g}gp-px-[16px]`:p+=` ${g}gp-px-0`}),t(p)},u=({settings:r,extraClass:g})=>{let p=g??"gp-flex-1 gp-w-full carousel-gallery";return e.forEach(e=>{let t=l(r?.navigationPosition,e),g=l(r?.type,e),a=l(r?.position,e),s="desktop"!==e?`${e}:`:"";"outside"===t&&"slider"===g&&["bottom-center"].includes(a||"")?p+=` ${s}gp-px-[16px]`:p+=` ${s}gp-px-0`}),t(p)},f=({extraClass:e})=>{let l="gp-image-item gp-flex gp-items-center gp-justify-center gp-group gp-relative gp-overflow-hidden gp-cursor-pointer";return e&&(l+=` ${e}`),t(l)},n=({extraClass:e})=>{let l="gp-group gp-z-0 gp-flex !gp-min-w-full !gp-max-w-full gp-w-full gp-relative gp-items-start gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-image-item gp-ft-image-item data-[outline=active]:gp-outline";return e&&(l+=` ${e}`),t(l)};export{n as getFeaturedCarouselItemClasses,i as getFeaturedImageCarouselClasses,o as getFeaturedImageClasses,u as getFeaturedImageGalleryClasses,a as getFtImageWithGalleryClasses,p as getGalleryGridWrapperClasses,f as getGalleryItemClasses,g as getGalleryWrapperClasses,s as getImageGalleryWrapperClasses,r as getWrapperClasses};
+import{DEVICES as e,getResponsiveValueByScreen as l}from"@gem-sdk/core";function t(e){return e.split(" ").reduce((e,l)=>(e[l]=!0,e),{})}let r=({extraClass:e,isAddOverFlowClass:l=!1})=>{let r="gp-relative gp-w-full";return e&&(r+=` ${e}`),l&&(r+=" gp-overflow-hidden"),t(r)},g=({extraClass:e})=>{let l="gallery-wrapper gp-product-images-gallery gp-flex gp-overflow-hidden gp-max-w-full gp-max-h-full data-[only-image=true]:gp-hidden";return e&&(l+=` ${e}`),t(l)},p=({extraClass:e})=>{let l="product-feature-image grid-gallery gp-flex !gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400 gp-z-1";return e&&(l+=` ${e}`),t(l)},a=({extraClass:e})=>{let l="gp-flex !gp-h-fit gp-relative gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},s=({extraClass:e})=>{let l="gp-flex gp-h-fit gp-max-w-full gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},i=({extraClass:e})=>{let l="`gp-flex-1 gp-w-full gp-feature-image-carousel";return e&&(l+=` ${e}`),t(l)},o=({setting:r,extraClass:g})=>{let p=g??"";return e.forEach(e=>{let t=l(r?.ftNavigationPosition,e),g="desktop"!==e?`${e}:`:"";"outside"===t?p+=` ${g}gp-px-[16px]`:p+=` ${g}gp-px-0`}),t(p)},u=({settings:r,extraClass:g})=>{let p=g??"gp-flex-1 gp-w-full carousel-gallery";return e.forEach(e=>{let t=l(r?.navigationPosition,e),g=l(r?.type,e),a=l(r?.position,e),s="desktop"!==e?`${e}:`:"";"outside"===t&&"slider"===g&&["bottom-center"].includes(a||"")?p+=` ${s}gp-px-[16px]`:p+=` ${s}gp-px-0`}),t(p)},f=({extraClass:e})=>{let l="gp-image-item gp-flex gp-items-center gp-justify-center gp-group gp-relative gp-overflow-hidden gp-cursor-pointer";return e&&(l+=` ${e}`),t(l)},n=({extraClass:e})=>{let l="gp-group gp-z-0 gp-flex !gp-min-w-full !gp-max-w-full gp-w-full gp-relative gp-items-start gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-image-item gp-ft-image-item data-[outline=active]:gp-outline";return e&&(l+=` ${e}`),t(l)},d="gp-flex gp-items-center gp-justify-center";export{d as FEATURE_MEDIA_CENTER_CLASSES,n as getFeaturedCarouselItemClasses,i as getFeaturedImageCarouselClasses,o as getFeaturedImageClasses,u as getFeaturedImageGalleryClasses,a as getFtImageWithGalleryClasses,p as getGalleryGridWrapperClasses,f as getGalleryItemClasses,g as getGalleryWrapperClasses,s as getImageGalleryWrapperClasses,r as getWrapperClasses};

package/dist/esm/product/components/product-images-v3/common/common.js

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as l,removeNullUndefined as i}from"@gem-sdk/core";let r=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,l=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:l}},a=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},n=e=>{if(!e)return{desktop:5};let t=a(e.desktop,5),o=a(e.tablet,t),l=a(e.mobile,o);return{desktop:t,tablet:o,mobile:l}},s=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${e(l)?"none":t}`}}),o},d=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",l=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",r=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==l||"0px"!==i||"0px"!==r},u=o=>{let l={};return["desktop","mobile","tablet"].forEach(t=>{let i=e(o,t)?.shapeValue;if(i)l={...l,[t]:i};else{let i=e(o,t)?.shape;switch(i){case"square":l={...l,[t]:"1/1"};break;case"vertical":l={...l,[t]:"3/4"};break;case"horizontal":l={...l,[t]:"4/3"};break;case"original":l={...l,[t]:""}}}}),t(l)},c=t=>{let l={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let i=!1;o.forEach(o=>{let r=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,d="desktop"===o?"--gtr":`--gtr-${o}`,u="left"===r?a:n,c=["left","right"].includes(r||"");c&&u?(i=!0,Object.assign(l={...l,[s]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[d]:"fit-content(0)"})):i&&Object.assign(l,{[d]:"unset"})})}return l},b=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(l=>{let i=e(t.position,l),r="desktop"===l?"--o":`--o-${l}`;o={...o,[r]:"left"===i?"1":"0"}}),o},m=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(l=>{let i=e(t.position,l),r="desktop"===l?"--o":`--o-${l}`;o={...o,[r]:"left"===i?"0":"1"}}),o},p=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,g=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},f=(t,o,r)=>{let a={},n={},s={},d={},u={},c={};return["desktop","mobile","tablet"].forEach(l=>{let i=e(t,l),b=e(o,l)?.width,m=e(r,l);if(a={...a,[l]:["inside-bottom","inside-left","inside-right"].includes(i)?"absolute":"static"},["inside-bottom"].includes(i)){let e=g(m);b=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(i)&&(b="100%"),s={...s,[l]:"inside-bottom"===i?`${m}`:"auto"},d={...d,[l]:["inside-left","inside-right"].includes(i)?`${m}`:"auto"},c={...c,[l]:["inside-bottom","inside-left"].includes(i)?`${m}`:"auto"},u={...u,[l]:"inside-right"===i?`${m}`:"auto"},n={...n,[l]:b}}),{...l("pos",a),...l("w",i(n)),...l("bottom",i(s)),...l("top",i(d)),...l("left",i(c)),...l("right",i(u))}},h=(t,o)=>{let l=!0,i=!1;return["desktop","mobile","tablet"].forEach(r=>{let a=e(t,r),n=e(o,r);a&&"only-feature"!==a&&(l=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(i=!0)}),{isOnlyFeatureAllDevices:l,isRenderGalleryGrid:i}},k=e=>({...e,setting:{...e.setting}}),y=e=>{let t=e.match(/\d+/g);return t?t[0]:e},$=t=>{let o=u(t),l={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(i=>{let r=e(t,i),a=r?.height,n=r?.width||"",s=y(a||""),d=n.toString().match(/px/g)?y(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(d))){l={...l,[i]:`${Number(s)/Number(d)*100}%`};return}if(a&&!isNaN(Number(s))){l={...l,[i]:a};return}let u=o?.[i]!=="auto"&&o?.[i]?o?.[i]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";l={...l,[i]:`calc((${u})*100%)`}}),l},x=["only-feature","one-col","two-col"],w=t=>{let l={};return o.forEach(o=>{let i=e(t,o);l[o]=null==i||!x.includes(i)}),l};export{d as checkAddOverFlowClass,n as convertSpacing,g as convertSpacingForIndisdeLayout,a as convertUnitToNumber,u as getAspectRatio,h as getConditionRenderGalleryImages,s as getDisplayStyle,w as getGalleryCarouselShouldInitByLayout,$ as getPaddingBottomByShapeSetting,p as getSrcImage,c as getStyleGridLayout,b as getStyleGridOrderForFeature,m as getStyleGridOrderForGallery,f as getStyleInsideLayout,r as getTypeWidthDevice,k as setDefaultWhenUndefineSetting};
+import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as r,removeNullUndefined as l}from"@gem-sdk/core";import{getCarouselElementSelector as i}from"../../../../carousel-v3/common/selectors.js";let a=(t,o,r)=>{let l=e(t?.ftShape,o)?.shape==="original",i=l?e(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),i,o,r].join("|")},n=(e,t)=>{let o=e=>e.replace(/[^a-zA-Z0-9_-]+/g,"-").replace(/^-+|-+$/g,""),r=o(e||"product-images"),l=o(t);return[r||"product-images",l||"instance"].join("-")},s=({carouselInstanceUID:e,builderPropUID:t})=>`${e??t}-carousel`,u=e=>i(s(e)),d=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},c=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},m=e=>{if(!e)return{desktop:5};let t=c(e.desktop,5),o=c(e.tablet,t),r=c(e.mobile,o);return{desktop:t,tablet:o,mobile:r}},g=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},p=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",i=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==l||"0px"!==i},b=o=>{let r={};return["desktop","mobile","tablet"].forEach(t=>{let l=e(o,t)?.shapeValue;if(l)r={...r,[t]:l};else{let l=e(o,t)?.shape;switch(l){case"square":r={...r,[t]:"1/1"};break;case"vertical":r={...r,[t]:"3/4"};break;case"horizontal":r={...r,[t]:"4/3"};break;case"original":r={...r,[t]:""}}}}),t(r)},f=t=>{let r={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let l=!1;o.forEach(o=>{let i=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,u="desktop"===o?"--gtr":`--gtr-${o}`,d="left"===i?a:n,c=["left","right"].includes(i||"");c&&d?(l=!0,Object.assign(r={...r,[s]:`minmax(0, ${d[0]}fr) minmax(0, ${d[1]}fr)`},{[u]:"fit-content(0)"})):l&&Object.assign(r,{[u]:"unset"})})}return r},h=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"1":"0"}}),o},y=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t.position,r),i="desktop"===r?"--o":`--o-${r}`;o={...o,[i]:"left"===l?"0":"1"}}),o},$=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,k=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},N=(t,o,i)=>{let a={},n={},s={},u={},d={},c={};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t,r),m=e(o,r)?.width,g=e(i,r);if(a={...a,[r]:["inside-bottom","inside-left","inside-right"].includes(l)?"absolute":"static"},["inside-bottom"].includes(l)){let e=k(g);m=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(l)&&(m="100%"),s={...s,[r]:"inside-bottom"===l?`${g}`:"auto"},u={...u,[r]:["inside-left","inside-right"].includes(l)?`${g}`:"auto"},c={...c,[r]:["inside-bottom","inside-left"].includes(l)?`${g}`:"auto"},d={...d,[r]:"inside-right"===l?`${g}`:"auto"},n={...n,[r]:m}}),{...r("pos",a),...r("w",l(n)),...r("bottom",l(s)),...r("top",l(u)),...r("left",l(c)),...r("right",l(d))}},S=(t,o)=>{let r=!0,l=!1;return["desktop","mobile","tablet"].forEach(i=>{let a=e(t,i),n=e(o,i);a&&"only-feature"!==a&&(r=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:l}},x=e=>({...e,setting:{...e.setting}}),w=e=>{let t=e.match(/\d+/g);return t?t[0]:e},I=t=>{let o=b(t),r={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let i=e(t,l),a=i?.height,n=i?.width||"",s=w(a||""),u=n.toString().match(/px/g)?w(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(u))){r={...r,[l]:`${Number(s)/Number(u)*100}%`};return}if(a&&!isNaN(Number(s))){r={...r,[l]:a};return}let d=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";r={...r,[l]:`calc((${d})*100%)`}}),r},v=["only-feature","one-col","two-col"],G=t=>{let r={};return o.forEach(o=>{let l=e(t,o);r[o]=null==l||!v.includes(l)}),r};export{p as checkAddOverFlowClass,m as convertSpacing,k as convertSpacingForIndisdeLayout,c as convertUnitToNumber,b as getAspectRatio,S as getConditionRenderGalleryImages,g as getDisplayStyle,a as getFeatureGalleryComponentKey,s as getGalleryCarouselRootId,u as getGalleryCarouselSelector,G as getGalleryCarouselShouldInitByLayout,I as getPaddingBottomByShapeSetting,n as getProductImagesCarouselInstanceId,$ as getSrcImage,f as getStyleGridLayout,h as getStyleGridOrderForFeature,y as getStyleGridOrderForGallery,N as getStyleInsideLayout,d as getTypeWidthDevice,x as setDefaultWhenUndefineSetting};

package/dist/esm/product/components/product-images-v3/common/getBorderActiveCss.js

@@ -2,8 +2,9 @@ import{composeBorderCss as e,composeCornerCss as t}from"@gem-sdk/core";let i=({s
     ${g} {
       content: "";
       height: 100%;
-      width: 100%;
+      width: calc(100% - 1px);
       position: absolute;
+      box-sizing: border-box;
       z-index: 999;
       top: 0;
       left: 0;

package/dist/esm/product/components/product-images-v3/components/child/ProductFeatureVideo.js

@@ -1 +1 @@
-import{jsx as e,Fragment as o}from"react/jsx-runtime";import{memo as t,useMemo as r}from"react";import"@gem-sdk/core";import"next/link";import i from"../../../../../video/components/Video.js";var m=t(t=>{let{url:m,aspectRatio:l}=t,u=r(()=>m.includes("youtu.be")?"youtube":m.includes("vimeo")?"vimeo":"html5",[m]);return e(o,{children:e(i,{setting:{type:u,html5Url:m,youtubeUrl:m,vimeoUrl:m,preload:!0,controls:!0,aspectRatio:l}})})});export{m as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,useMemo as r}from"react";import"@gem-sdk/core";import"next/link";import t from"../../../../../video/components/Video.js";import{FEATURE_MEDIA_CENTER_CLASSES as l}from"../../common/classes.js";var m=o(o=>{let{url:m,aspectRatio:i,thumbnail:s}=o,u=r(()=>m.includes("youtu.be")?"youtube":m.includes("vimeo")?"vimeo":"html5",[m]);return e("div",{className:`gp-w-full gp-h-full ${l}`,children:e(t,{setting:{type:u,html5Url:m,youtubeUrl:m,vimeoUrl:m,preload:!0,controls:!0,aspectRatio:i,poster:s?{src:s}:void 0},className:"gp-w-full"})})});export{m as default};

package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as s}from"react";import{useCurrentDevice as a,getResponsiveValueByScreen as i,makeStyleResponsive as m}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{createStyle as p}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as g}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import v from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as C}from"../../hooks/useProductFeaturedImageCarousel.js";let j=t((o,t)=>{let{productImages:j,imgRef:I,onHandleClick:w,onClickArrow:y,onHandleLoaded:b,onHandleUpdateActiveIndex:k,swiperUpdateTrigger:M,builderPropUID:P,builderPropsClass:S,parentUid:x,isFilterByVariantEnabled:A,...H}=o,N=r(null),{ref:O,imageActive:R,imageActiveIndex:B,imageShowWhenHover:F,enableOpenLightBox:W,filteredProductImages:L,isRenderFeatureCarousel:T,genRandomKey:D,getAspectRatioFinal:$,emitUpdateActiveIndex:q}=C(o);s(t,()=>({getSwiper:()=>N.current?.getSwiper()||null}));let z=a(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=c(H),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=d(H),Q=p({...g({setting:H,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=u(H);return e("div",{ref:O,"data-slot":"children",className:"product-feature-image",children:T?e(f,{ref:N,parentClass:S,elmRef:I,setting:U,styles:J,builderProps:{uid:P},isHiddenArrowWhenDisabled:!0,onLoaded:e=>b&&b(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(D()),moveToIdx:B,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${P}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=L?.length??0;w(L?.[e>=o?0:e]?.id??"",W)},children:L?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=i(H?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:K,onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),children:e(v,{image:o,imageShowWhenHover:F,setting:H,aspectRatio:$()})},o?.id))}):e("div",{ref:I,className:"gp-flex gp-w-full",style:{...m("jc",H?.align)},"data-id":P,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),onBlur:()=>void 0,onClick:()=>{w(R?.id??"",W)},children:e(v,{image:A?j?.[0]:R,imageShowWhenHover:F,setting:H,aspectRatio:$(A?j?.[0]:R)})})})})});var I=o(j);export{I as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as m}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as i,makeStyleResponsive as a}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{createStyle as p}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as g}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import v from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as j}from"../../hooks/useProductFeaturedImageCarousel.js";import{getGalleryCarouselSelector as C}from"../../common/common.js";let I=t((o,t)=>{let{productImages:I,imgRef:w,onHandleClick:y,onClickArrow:b,onHandleLoaded:k,onHandleUpdateActiveIndex:M,swiperUpdateTrigger:P,builderPropUID:S,builderPropsClass:x,carouselInstanceUID:A,parentUid:H,enableThumbsLink:N=!0,...R}=o,O=r(null),{ref:B,imageActive:F,imageActiveIndex:W,imageShowWhenHover:L,enableOpenLightBox:T,filteredProductImages:D,isRenderFeatureCarousel:q,genRandomKey:z,getAspectRatioFinal:E,emitUpdateActiveIndex:G}=j(o);m(t,()=>({getSwiper:()=>O.current?.getSwiper()||null}));let J=s(),{galleryItemClasses:K,featureImageOnlyOneImageClasses:Q}=c(R),{featuredImageCarouselStyle:U,featureImageCarouselItemStyle:V}=d(R),X=p({...g({setting:R,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:Y}=u(R);return e("div",{ref:B,"data-slot":"children",className:"product-feature-image",children:q?e(f,{ref:O,parentClass:x,elmRef:w,setting:Y,styles:U,builderProps:{uid:S},rootId:A,isHiddenArrowWhenDisabled:!0,onLoaded:e=>k&&k(e),onChangeActive:e=>G(e),onClickArrow:()=>b&&b(z()),moveToIdx:W,disableMarginAuto:!0,thumbsSwiper:N?C({carouselInstanceUID:A,builderPropUID:S}):void 0,onHandleChangeSlideByInteraction:e=>{let o=D?.length??0;y(D?.[e>=o?0:e]?.id??"",T)},children:D?.map(o=>e(h,{contentType:"productImage",className:K("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=i(R?.ftClickOpenLightBox,J);"none"!==e&&y(o?.id??"",T)},style:{...V,aspectRatio:E()?.[J]},onMouseMove:e=>n(e,R),onMouseOut:e=>l(e),children:e(v,{image:o,imageShowWhenHover:L,setting:R,aspectRatio:E()})},o?.id))}):e("div",{ref:w,className:"gp-flex gp-w-full",style:{...a("jc",R?.align)},"data-id":S,children:e("div",{"aria-hidden":"true",className:Q,style:X,onMouseMove:e=>n(e,R),onMouseOut:e=>l(e),onBlur:()=>void 0,onClick:()=>{y(F?.id??"",T)},children:e(v,{image:F,imageShowWhenHover:L,setting:R,aspectRatio:E(F)})})})})});var w=o(I);export{w as default};

package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageOnly.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useProduct as r,useCurrentDevice as i,useShopStore as a,useRenderMode as c,getResponsiveValueByScreen as n,cls as s,makeStyle as h}from"@gem-sdk/core";import{memo as l,useMemo as f,useCallback as p}from"react";import m from"../../../../../image/components/NextImage.js";import g from"./MediaIcon.js";import{isFeatureMedia as d,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import v from"./ProductFeatureVideo.js";let E={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"};var T=l(({image:l,imageShowWhenHover:T,setting:w,aspectRatio:b})=>{var I;let x=r(),L=i(),j=a(e=>e.storefrontUrl),{isEditMode:N,isPreviewSharePageMode:O}=c(),k=f(()=>"none"!==n(w.ftClickOpenLightBox,L),[L,w.ftClickOpenLightBox]),R=f(()=>!N&&["VIDEO","EXTERNAL_VIDEO"].includes(l?.contentType||"")&&!k,[N,l?.contentType,k]),$=f(()=>l?{...l,src:R?l.src:d(l?.contentType)?l?.previewImage:l.src}:E,[l,R]),z=f(()=>{if(O)return"javascript:void(0)";if(!j)return"#";let e=new URL(j);return x?`${e.protocol}//${e.host}/products/${x.handle}`:"#"},[j,x,O]),A=f(()=>w?.hoverEffect!=="none"&&!d($?.contentType),[$?.contentType,w?.hoverEffect]),B=f(()=>w?.hoverEffect=="zoom"&&w?.zoomType=="glasses"&&!d($?.contentType),[$?.contentType,w?.hoverEffect,w?.zoomType]),C=p(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),F=f(()=>T?"other"!==w.hoverEffect?C($):C(T):E.src,[T,$,w.hoverEffect,C]);return e(t,{children:(I=e(t,{children:R?e(v,{type:$?.contentType,url:$.src??"",aspectRatio:b}):o(t,{children:[e(m,{draggable:"false",src:$.src,width:$?.width,height:$?.height,alt:$?.alt,setting:{aspectRatio:b,layout:w?.ftLayout},priority:w?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),e(g,{contentType:$?.contentType??""}),A&&e(m,{draggable:"false",src:F,width:w?.hoverEffect==="other"?T?.width:$.width,height:w?.hoverEffect==="other"?T?.height:$.height,alt:w?.hoverEffect==="other"?T?.alt:$.alt,setting:{layout:w.ftLayout,aspectRatio:b},style:{width:"100%",height:"100%"},className:s("hover-image featured-image-only !gp-max-w-none",y()),priority:w?.preload}),B&&e("div",{className:s(u(),"room-len"),style:{...h({bgi:`url("${$?.src}")`})}})]})}),"product-link"===n(w.ftClickOpenLightBox,L)?e("a",{title:x?.title,href:z,className:"gp-w-full",children:I}):I)})});export{T as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useProduct as r,useCurrentDevice as i,useShopStore as a,useRenderMode as c,getResponsiveValueByScreen as n,cls as s,makeStyle as h}from"@gem-sdk/core";import{memo as l,useMemo as f,useCallback as p}from"react";import m from"../../../../../image/components/NextImage.js";import g from"./MediaIcon.js";import{isFeatureMedia as d,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import v from"./ProductFeatureVideo.js";let E={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"};var T=l(({image:l,imageShowWhenHover:T,setting:w,aspectRatio:b})=>{var I;let x=r(),L=i(),j=a(e=>e.storefrontUrl),{isEditMode:N,isPreviewSharePageMode:O}=c(),k=f(()=>"none"!==n(w.ftClickOpenLightBox,L),[L,w.ftClickOpenLightBox]),R=f(()=>!N&&["VIDEO","EXTERNAL_VIDEO"].includes(l?.contentType||"")&&!k,[N,l?.contentType,k]),$=f(()=>l?{...l,src:R?l.src:d(l?.contentType)?l?.previewImage:l.src}:E,[l,R]),z=f(()=>{if(O)return"javascript:void(0)";if(!j)return"#";let e=new URL(j);return x?`${e.protocol}//${e.host}/products/${x.handle}`:"#"},[j,x,O]),A=f(()=>w?.hoverEffect!=="none"&&!d($?.contentType),[$?.contentType,w?.hoverEffect]),B=f(()=>w?.hoverEffect=="zoom"&&w?.zoomType=="glasses"&&!d($?.contentType),[$?.contentType,w?.hoverEffect,w?.zoomType]),C=p(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),F=f(()=>T?"other"!==w.hoverEffect?C($):C(T):E.src,[T,$,w.hoverEffect,C]);return e(t,{children:(I=e(t,{children:R?e(v,{type:$?.contentType,url:$.src??"",thumbnail:$?.previewImage,aspectRatio:b}):o(t,{children:[e(m,{draggable:"false",src:$.src,width:$?.width,height:$?.height,alt:$?.alt,setting:{aspectRatio:b,layout:w?.ftLayout},priority:w?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),e(g,{contentType:$?.contentType??""}),A&&e(m,{draggable:"false",src:F,width:w?.hoverEffect==="other"?T?.width:$.width,height:w?.hoverEffect==="other"?T?.height:$.height,alt:w?.hoverEffect==="other"?T?.alt:$.alt,setting:{layout:w.ftLayout,aspectRatio:b},style:{width:"100%",height:"100%"},className:s("hover-image featured-image-only !gp-max-w-none",y()),priority:w?.preload}),B&&e("div",{className:s(u(),"room-len"),style:{...h({bgi:`url("${$?.src}")`})}})]})}),"product-link"===n(w.ftClickOpenLightBox,L)?e("a",{title:x?.title,href:z,className:"gp-w-full",children:I}):I)})});export{T as default};

package/dist/esm/product/components/product-images-v3/components/child/ProductGalleryGrid.js

@@ -1,2 +1 @@
-import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r,cls as i,getResponsiveValueByScreen as a,makeStyle as m}from"@gem-sdk/core";import{memo as l}from"react";import{getAspectRatio as s}from"../../common/common.js";import c from"../../../../../image/components/NextImage.js";import n from"../lightbox/ButtonOpenLightBox.js";import d from"./MediaIcon.js";import{isFeatureMedia as g,getZoomImageClass as p,getZoomLenClass as h}from"../../common/productFeaturedImage.js";import{handleMouseOut as y,handleMouseMove as f}from"../../common/hoverAction.js";import{getProductImagesClassName as u}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as v}from"../../composables/getProductImagesStyles.js";import{useProductGalleryGrid as j}from"../../hooks/useProductGalleryGrid.js";var w=l(l=>{let{builderPropUID:w,productImages:T,onHandleClick:x,activeIndexFromFeatureImage:b,children:I,isHiddenInteraction:N,...k}=l,{isDisplay:E,shapeByLayout:G,imageActiveIndex:M,enableOpenLightBox:P,isEnableBorderActive:$,filteredProductImages:z}=j(l),B=r(),{galleryGridWrapperClasses:H,galleryItemClasses:O}=u(k),{galleryGridStyles:Z,galleryGridItemStyles:A}=v(k);return e(o,{children:E&&t("div",{"data-slot":"children","data-id":w,className:H,style:Z,"gp-data-hidden":`${N}`,children:[z?.map((o,r)=>{let l=r===M,u=g(o.contentType)?o.previewImage:o.src;return t("div",{"aria-hidden":!0,className:O(`gp-gallery-image-item gem-slider-item-${w}
-                  ${l&&$?"gem-slider-item-active":""}`),onClick:()=>x(o?.id||"",P),style:A,onMouseMove:e=>f(e,{hoverEffect:k.galleryHoverEffect,zoom:k.galleryZoom,zoomType:k.galleryZoomType}),onMouseOut:e=>y(e),"data-border":l&&k?.borderActive?"active":"deactive",children:[e(c,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(G),layout:k?.layout},style:{width:"100%",height:"100%"}},o?.id),e(d,{contentType:o?.contentType||""}),k?.galleryHoverEffect!=="none"&&!g(o?.contentType)&&e(c,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{layout:k.layout,aspectRatio:s(G)},className:i("hover-image !gp-max-w-none",p())}),k?.galleryHoverEffect=="zoom"&&k?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(a(k.position,B)||"")&&!g(o?.contentType)&&e("div",{className:i(h(),"room-len"),style:{...m({bgi:`url("${o?.src}")`})}}),a(k?.clickOpenLightBox,B)&&e(n,{})]},o?.id)}),I]})})});export{w as default};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r,useRenderMode as i,getResponsiveValueByScreen as a,cls as m,makeStyle as l}from"@gem-sdk/core";import{memo as c}from"react";import{getAspectRatio as s}from"../../common/common.js";import n from"../../../../../image/components/NextImage.js";import d from"../lightbox/ButtonOpenLightBox.js";import p from"./MediaIcon.js";import g from"./ProductFeatureVideo.js";import{isFeatureMedia as h,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import{handleMouseOut as f,handleMouseMove as v}from"../../common/hoverAction.js";import{getProductImagesClassName as j}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as T}from"../../composables/getProductImagesStyles.js";import{useProductGalleryGrid as w}from"../../hooks/useProductGalleryGrid.js";var I=c(c=>{let{builderPropUID:I,productImages:b,onHandleClick:E,activeIndexFromFeatureImage:x,children:N,isHiddenInteraction:O,...P}=c,{isDisplay:k,shapeByLayout:G,imageActiveIndex:M,enableOpenLightBox:R,isEnableBorderActive:$,filteredProductImages:z}=w(c),A=r(),{isEditMode:B}=i(),H=a(P.position,A)||"",L=["one-col","two-col"].includes(H),V="bottom-center"===H,{galleryGridWrapperClasses:Z,galleryItemClasses:C}=j(P),{galleryGridStyles:D,galleryGridItemStyles:F}=T(P),S=V?"none":P.galleryHoverEffect;return e(o,{children:k&&t("div",{"data-slot":"children","data-id":I,className:Z,style:D,"gp-data-hidden":`${O}`,children:[z?.map((r,i)=>{let c=i===M,j=h(r.contentType)?r.previewImage:r.src,T=!B&&L&&!R&&["VIDEO","EXTERNAL_VIDEO"].includes(r?.contentType||"");return t("div",{"aria-hidden":!0,className:C(`gp-gallery-image-item gem-slider-item-${I} ${c&&$?"gem-slider-item-active":""}`),onClick:()=>E(r?.id||"",R),style:F,onMouseMove:e=>v(e,{hoverEffect:S,zoom:P.galleryZoom,zoomType:P.galleryZoomType}),onMouseOut:e=>f(e),"data-border":c&&P?.borderActive?"active":"deactive",children:[T?e(g,{type:r?.contentType,url:r?.src??"",thumbnail:r?.previewImage,aspectRatio:s(G)}):t(o,{children:[e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{aspectRatio:s(G),layout:P?.layout},style:{width:"100%",height:"100%"}},r?.id),e(p,{contentType:r?.contentType||""})]}),P?.galleryHoverEffect!=="none"&&!h(r?.contentType)&&e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{layout:P.layout,aspectRatio:s(G)},className:m("hover-image !gp-max-w-none",y())}),P?.galleryHoverEffect=="zoom"&&P?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(a(P.position,A)||"")&&!h(r?.contentType)&&e("div",{className:m(u(),"room-len"),style:{...l({bgi:`url("${r?.src}")`})}}),a(P?.clickOpenLightBox,A)&&e(d,{})]},r?.id)}),N]})})});export{I as default};

package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as o,cls as a}from"@gem-sdk/core";import{useRef as l,useCallback as s}from"react";import d from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import u from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as p}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as n}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as c}from"../../hooks/useFeatureImageWithGallery.js";let g=g=>{let{setting:I,styles:f,builderProps:h,gallery:b,onHandleClickImage:y,priorityFeatureImage:C,children:F,noDataChildren:P,isFilterByVariantEnabled:v}=g,{isEditMode:w}=i(),j=l(null),k=o(),x=s(e=>{if(!j.current)return;let r=j.current.getSwiper();r&&r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),H={...I,...f},{isShowCarousel:G,featureImageHeight:N,featureWrapperImage:S,onClickFeatureArrow:U,activeIndexFromFeatureImage:A,setOnClickFeatureArrow:D,onHandleLoadedFeatureImage:R,setActiveIndexFromFeatureImage:W}=c(g);if(b?.[0]?.id==="noImageError"&&w)return e(r,{children:P});let{ftImageGalleryClasses:$,imageGalleryWrapperClasses:E}=n(g),{wrapperFeaturedImageStyle:J,featureImageStyle:L,galleryImageStyle:O}=p(H,{gallery:b,featureImageHeight:N}),q=JSON.stringify(H?.position)+k+G;return t("div",{className:a("gp-grid gp-w-full gp-relative"),style:J,children:[t("div",{className:$,style:L,children:[F,e(u,{ref:j,imgRef:S,productImages:b,...H,onHandleClick:(e,r)=>y(e||"",r),onHandleLoaded:R,onHandleUpdateActiveIndex:W,onClickArrow:e=>D(e),builderPropUID:h?.uid,builderPropsClass:`gp-product-images-feature-${h?.uid}`})]}),b.length>(v?0:1)&&e("div",{className:E,style:O,children:G?e(d,{productImages:b,position:H?.position,...H,builderPropUID:h?.uid,onHandleClick:(e,r)=>y(e||"",r),onSwiperReady:x,activeIndexFormFeatureImage:A,priorityFeatureImage:C,onClickFeatureArrow:U,builderPropsClass:`gp-product-images-gallery-${h?.uid}`}):e(m,{productImages:b,...H,builderPropUID:h?.uid,onHandleClick:(e,r)=>y(e||"",r),activeIndexFromFeatureImage:A,isHiddenInteraction:!0})})]},q)};export{g as default};
+import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as l,useUniqProductID as o,cls as d}from"@gem-sdk/core";import{useRef as a,useEffect as s,useCallback as n,useMemo as u}from"react";import m from"../gallery-carousel/GalleryCarousel.js";import c from"../child/ProductGalleryGrid.js";import p from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as g}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as I}from"../../hooks/useFeatureImageWithGallery.js";import{getProductImagesCarouselInstanceId as h,getFeatureGalleryComponentKey as b}from"../../common/common.js";let v=v=>{let{setting:y,styles:C,builderProps:x,gallery:F,featureGallery:P,onHandleClickImage:j,priorityFeatureImage:k,children:w,noDataChildren:H,isFilterByVariantEnabled:U}=v,{isEditMode:D}=i(),G=a(null),L=l(),N=o(),R=h(x?.uid,N),$=a(F);$.current=F;let A=a(P??F);A.current=P??F;let S=a(null);s(()=>()=>{S.current?.(),S.current=null},[]);let T=n((e,r)=>{if(e.destroyed||r.destroyed)return;let t=A.current[e.realIndex]?.id;if(void 0===t)return;let i=$.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),B=n(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(S.current?.(),S.current=null,U){let t=()=>T(r,e);r.on("slideChange",t),S.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[U,T]),E={...y,...C},{isShowCarousel:W,featureImageHeight:q,featureWrapperImage:z,onClickFeatureArrow:J,activeIndexFromFeatureImage:K,setOnClickFeatureArrow:M,onHandleLoadedFeatureImage:O,setActiveIndexFromFeatureImage:Q}=I(v),V=u(()=>{if(void 0===K)return;let e=(P??F)[K]?.id;if(void 0===e)return;let r=F.findIndex(r=>r?.id===e);return r>-1?r:void 0},[K,P,F]);if(F?.[0]?.id==="noImageError"&&D)return e(r,{children:H});let{ftImageGalleryClasses:X,imageGalleryWrapperClasses:Y}=f(v),{wrapperFeaturedImageStyle:Z,featureImageStyle:_,galleryImageStyle:ee}=g(E,{gallery:F,featureImageHeight:q}),er=`${b(E,L,W)}|${U?"variant-filtered":"all-media"}`;return t("div",{className:d("gp-grid gp-w-full gp-relative"),style:Z,children:[t("div",{className:X,style:_,children:[w,e(p,{ref:G,imgRef:z,productImages:P??F,enableThumbsLink:!U,...E,onHandleClick:(e,r)=>j(e||"",r,!0),onHandleLoaded:O,onHandleUpdateActiveIndex:Q,onClickArrow:e=>M(e),builderPropUID:x?.uid,carouselInstanceUID:R,builderPropsClass:`gp-product-images-feature-${x?.uid}`})]}),F.length>(U?0:1)&&e("div",{className:Y,style:ee,children:W?e(m,{productImages:F,position:E?.position,...E,builderPropUID:x?.uid,carouselInstanceUID:R,onHandleClick:(e,r)=>j(e||"",r),onSwiperReady:B,activeIndexFormFeatureImage:V,priorityFeatureImage:k,onClickFeatureArrow:J,builderPropsClass:`gp-product-images-gallery-${x?.uid}`}):e(c,{productImages:F,...E,builderPropUID:x?.uid,onHandleClick:(e,r)=>j(e||"",r),activeIndexFromFeatureImage:V,isHiddenInteraction:!0})})]},er)};export{v as default};