@gem-sdk/components 12.0.0-dev.133 → 12.0.0-dev.139

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

@@ -1,4 +1,4 @@
-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 n from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as c,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 ProductGalleryGrid=({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","mobile","tablet"],o={desktop:"none",tablet:"none",mobile:"none"};return t.forEach(e=>{let t=a(L?.position,e)||"",s="one-col"===t||"two-col"===t,d=i?!s:s;o[e]=d?"block":"none"}),e("d",o)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
+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 n from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as c,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})}
       ${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})}
@@ -90,4 +90,4 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       ${d("media.id == product.featured_media.id ",N(L?.borderActive?.border!=="none"?"active":""),N())}`)}
     ${d("product.media.size > 0",b)}
     ${d("product.media.size < 1",N())}
-  </div>`)};export{ProductGalleryGrid as default};
+  </div>`)};export{_ as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/ButtonOpenLightBox.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as C}from"react/jsx-runtime";let ButtonOpenLightBox=()=>C("div",{className:"gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-all gp-duration-100 group-hover:gp-opacity-100",children:C("svg",{height:"100%",width:"100%",xmlns:"http://www.w3.org/2000/svg",className:"gp-h-6 gp-w-6",viewBox:"0 0 512 512",color:"#fff",children:C("path",{fill:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",d:"M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"})})});export{ButtonOpenLightBox as default};
+import{jsx as C}from"react/jsx-runtime";let t=()=>C("div",{className:"gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-all gp-duration-100 group-hover:gp-opacity-100",children:C("svg",{height:"100%",width:"100%",xmlns:"http://www.w3.org/2000/svg",className:"gp-h-6 gp-w-6",viewBox:"0 0 512 512",color:"#fff",children:C("path",{fill:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",d:"M62.2467 345.253C43.7072 326.714 29.1474 305.116 18.9714 281.057C8.42839 256.13 3.08301 229.671 3.08301 202.418C3.08301 175.165 8.43012 148.707 18.974 123.78C29.15 99.7213 43.7098 78.123 62.2485 59.5834C80.788 41.0439 102.386 26.4841 126.445 16.3081C151.372 5.76422 177.831 0.417969 205.084 0.417969C232.337 0.417969 258.794 5.76421 283.722 16.3064C307.78 26.4823 329.379 41.0422 347.918 59.5817C366.458 78.1212 381.017 99.7196 391.194 123.778C401.737 148.706 407.083 175.163 407.083 202.417C407.083 229.671 401.737 256.129 391.194 281.056C388.406 287.648 385.277 294.048 381.839 300.257L493.397 411.815C514.091 432.511 514.091 466.187 493.395 486.883L484.272 496.006C474.245 506.032 460.915 511.553 446.738 511.553C432.559 511.553 419.228 506.032 409.202 496.006L296.022 382.824C291.996 384.854 287.898 386.762 283.721 388.528C258.794 399.073 232.336 404.419 205.082 404.419C177.828 404.419 151.371 399.071 126.443 388.528C102.385 378.352 80.7863 363.793 62.2467 345.253ZM301.699 336.166C313.928 327.317 324.896 316.835 334.282 305.034C342.149 295.142 348.9 284.325 354.355 272.775C364.433 251.432 370.076 227.586 370.076 202.419C370.076 111.296 296.206 37.4253 205.083 37.4253C113.96 37.4253 40.0895 111.294 40.0895 202.418C40.0895 293.541 113.96 367.411 205.084 367.411C227.413 367.411 248.701 362.967 268.126 354.928C280.091 349.976 291.347 343.658 301.699 336.166ZM467.229 460.716C473.507 454.439 473.507 444.26 467.229 437.982L360.595 331.348C356.601 336.153 352.378 340.794 347.919 345.253C341.671 351.502 335.068 357.286 328.147 362.615L435.371 469.839C438.511 472.977 442.624 474.547 446.739 474.547C450.853 474.547 454.967 472.978 458.106 469.839L467.229 460.716ZM223.582 183.91H281.071C291.292 183.91 299.574 192.194 299.575 202.414C299.575 206.778 298.062 210.786 295.533 213.951C292.143 218.195 286.926 220.916 281.072 220.916H228.303H223.583V225.63V278.406C223.583 287.081 217.613 294.358 209.559 296.361C208.124 296.717 206.625 296.909 205.08 296.909C194.861 296.909 186.577 288.625 186.577 278.406V220.917H129.087C118.868 220.917 110.584 212.633 110.584 202.414C110.584 192.195 118.868 183.911 129.087 183.911H186.576V126.421C186.576 116.202 194.86 107.918 205.079 107.918C215.298 107.918 223.582 116.202 223.582 126.421V183.91Z"})})});export{t as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/LightBoxCarousel.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import{cls as i}from"@gem-sdk/core";import{useMemo as o}from"react";import t from"../../../../../carousel-v3/components/root/Carousel.js";import r from"../../../../../carousel-v3/components/item/CarouselItem.js";import{LIGHTBOX_CAROUSEL_SETTING as s,LIGHTBOX_CAROUSEL_STYLES as m}from"./constants.js";import l from"../child/ProductImagesLightBoxPreview.js";let LightBoxCarousel=({builderPropUID:n,displayImages:p,activeIndex:g,imageActiveIndex:a,onChangeSlide:d,onToggleZoom:c})=>{let u=e=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(e||""),f=o(()=>({...s,initialSlide:g,defaultCurrentSlider:g}),[g]);return e("div",{className:i(`gem-slider-item gem-slider-item-${n} gp-cursor-zoom-in gp-flex gp-size-full gp-min-w-0 gp-items-center gp-justify-center gp-overflow-hidden`),style:{maxWidth:"100%",maxHeight:"100%"},children:e(t,{setting:f,styles:m,builderProps:{uid:`${n}-lightbox-main`},rootClass:"gp-size-full gp-min-w-0 gp-overflow-hidden",moveToIdx:g,isDisableResetSlide:!0,onChangeActive:d,children:p.map(i=>e(r,{onClickItem:()=>{u(i.contentType)&&c?.()},className:"gp-flex gp-size-full gp-min-w-0 gp-overflow-hidden gp-items-center gp-justify-center gp-cursor-zoom-in",children:e(l,{image:i,isZoomableMedia:u(i.contentType)})},i.id))})})};export{LightBoxCarousel as default};
+import{jsx as e}from"react/jsx-runtime";import{cls as i}from"@gem-sdk/core";import{useMemo as o}from"react";import t from"../../../../../carousel-v3/components/root/Carousel.js";import r from"../../../../../carousel-v3/components/item/CarouselItem.js";import{LIGHTBOX_CAROUSEL_SETTING as s,LIGHTBOX_CAROUSEL_STYLES as m}from"./constants.js";import l from"../child/ProductImagesLightBoxPreview.js";let n=({builderPropUID:n,displayImages:p,activeIndex:g,imageActiveIndex:a,onChangeSlide:d,onToggleZoom:c})=>{let u=e=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(e||""),f=o(()=>({...s,initialSlide:g,defaultCurrentSlider:g}),[g]);return e("div",{className:i(`gem-slider-item gem-slider-item-${n} gp-cursor-zoom-in gp-flex gp-size-full gp-min-w-0 gp-items-center gp-justify-center gp-overflow-hidden`),style:{maxWidth:"100%",maxHeight:"100%"},children:e(t,{setting:f,styles:m,builderProps:{uid:`${n}-lightbox-main`},rootClass:"gp-size-full gp-min-w-0 gp-overflow-hidden",moveToIdx:g,isDisableResetSlide:!0,onChangeActive:d,children:p.map(i=>e(r,{onClickItem:()=>{u(i.contentType)&&c?.()},className:"gp-flex gp-size-full gp-min-w-0 gp-overflow-hidden gp-items-center gp-justify-center gp-cursor-zoom-in",children:e(l,{image:i,isZoomableMedia:u(i.contentType)})},i.id))})})};export{n as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/LightBoxGalleryCarousel.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{useRef as s,useState as i,useEffect as a}from"react";import l from"../../../../../carousel-v3/components/root/Carousel.js";import n from"../../../../../carousel-v3/components/item/CarouselItem.js";import m from"../../../../../image/components/NextImage.js";import c from"../../../product-images-v2/components/child/MediaIcon.js";import{isFeatureMedia as p}from"../../common/productFeaturedImage.js";import{getEditorMinHeightClass as d}from"../../common/productGallery.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{getProductImagesStyles as g}from"../../composables/getProductImagesStyles.js";import{LIGHTBOX_GALLERY_CAROUSEL_SETTING as f}from"./constants.js";import{galleryItemClasses as y}from"../../composables/getProductImagesClassName.js";let LightBoxGalleryCarousel=({builderPropUID:h,displayImages:b,activeIndex:j,onChangeSlide:I})=>{let C=r(),x=s(!1),[v,P]=i(j);if(a(()=>{x.current||(x.current=!0,P(j))},[j]),b.length<=1)return null;let{galleryCarouselStyle:w,galleryCarouselItemStyle:T}=g(f),{galleryCarouselSettingAttrs:q}=u(f),A=d(C,f.position,f.navigationPosition);return e(l,{setting:q,styles:{...w},slidesClass:A,builderProps:{uid:`${h}-carousel`},rootClass:"gp-flex gp-justify-center gp-w-fit",moveToIdx:v,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,centerInsufficientSlides:!0,onChangeActive:P,children:b.map((r,s)=>{let i=p(r.contentType)?r.previewImage:r.src;return e(n,{"data-thumb-index":s,contentType:"productImage",className:y(s,j,"gp-overflow-hidden gp-rounded-md gp-border gp-transition-all"),onClickItem:()=>I(s),style:T,"data-id":r.id,children:t(o,{children:[e(m,{draggable:"false",src:i,width:r.width,height:r.height,alt:r.alt,setting:{layout:f.layout,qualityPercent:f.qualityPercent,qualityType:f.qualityType},style:{width:"100%",aspectRatio:"1/1",objectPosition:"center",cursor:"pointer"},className:"product-images-lightbox-gallery-carousel-image"}),e(c,{contentType:r?.contentType??""})]})},r.id)})})};export{LightBoxGalleryCarousel as default};
+import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{useRef as s,useState as i,useEffect as a}from"react";import l from"../../../../../carousel-v3/components/root/Carousel.js";import n from"../../../../../carousel-v3/components/item/CarouselItem.js";import m from"../../../../../image/components/NextImage.js";import c from"../../../product-images-v2/components/child/MediaIcon.js";import{isFeatureMedia as p}from"../../common/productFeaturedImage.js";import{getEditorMinHeightClass as d}from"../../common/productGallery.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{getProductImagesStyles as g}from"../../composables/getProductImagesStyles.js";import{LIGHTBOX_GALLERY_CAROUSEL_SETTING as f}from"./constants.js";import{galleryItemClasses as y}from"../../composables/getProductImagesClassName.js";let h=({builderPropUID:h,displayImages:b,activeIndex:j,onChangeSlide:I})=>{let C=r(),v=s(!1),[x,P]=i(j);if(a(()=>{v.current||(v.current=!0,P(j))},[j]),b.length<=1)return null;let{galleryCarouselStyle:w,galleryCarouselItemStyle:T}=g(f),{galleryCarouselSettingAttrs:q}=u(f),A=d(C,f.position,f.navigationPosition);return e(l,{setting:q,styles:{...w},slidesClass:A,builderProps:{uid:`${h}-carousel`},rootClass:"gp-flex gp-justify-center gp-w-fit",moveToIdx:x,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,centerInsufficientSlides:!0,onChangeActive:P,children:b.map((r,s)=>{let i=p(r.contentType)?r.previewImage:r.src;return e(n,{"data-thumb-index":s,contentType:"productImage",className:y(s,j,"gp-overflow-hidden gp-rounded-md gp-border gp-transition-all"),onClickItem:()=>I(s),style:T,"data-id":r.id,children:t(o,{children:[e(m,{draggable:"false",src:i,width:r.width,height:r.height,alt:r.alt,setting:{layout:f.layout,qualityPercent:f.qualityPercent,qualityType:f.qualityType},style:{width:"100%",aspectRatio:"1/1",objectPosition:"center",cursor:"pointer"},className:"product-images-lightbox-gallery-carousel-image"}),e(c,{contentType:r?.contentType??""})]})},r.id)})})};export{h as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/LightBoxImageZoom.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as t,useEffect as n}from"react";import o from"../../../../../image/components/NextImage.js";let ZOOM_SCALE=2,CLICK_THRESHOLD_PX=6,LightBoxImageZoom=({image:a,onExitZoom:i})=>{let l=r(null),c=r({x:0,y:0,originX:0,originY:0}),u=r(!1),g=r(!1),[p,s]=t({x:0,y:0});n(()=>{s({x:0,y:0})},[a]);let m=(e,r)=>{let t=l.current?.getBoundingClientRect();if(!t)return{x:e,y:r};let n=1*t.width/2,o=1*t.height/2;return{x:Math.max(-n,Math.min(n,e)),y:Math.max(-o,Math.min(o,r))}},f=e=>{e.preventDefault(),e.stopPropagation(),u.current=!0,g.current=!1,c.current={x:e.clientX,y:e.clientY,originX:p.x,originY:p.y},e.currentTarget.setPointerCapture(e.pointerId)},h=e=>{if(!u.current)return;let r=e.clientX-c.current.x,t=e.clientY-c.current.y;(Math.abs(r)>6||Math.abs(t)>6)&&(g.current=!0);let n=m(c.current.originX+r,c.current.originY+t);s(n)},d=e=>{u.current&&(u.current=!1,e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId))},x=e=>{if(e.stopPropagation(),g.current){g.current=!1;return}i?.()},y=e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),i?.())};return a.src?e("div",{ref:l,className:"gp-h-full gp-w-full gp-overflow-hidden gp-cursor-grab active:gp-cursor-grabbing",role:"button",tabIndex:0,"aria-label":"Zoomed image area",onKeyDown:y,onPointerDown:f,onPointerMove:h,onPointerUp:d,onPointerCancel:d,onPointerLeave:d,onClick:x,onDragStart:e=>e.preventDefault(),style:{touchAction:"none"},children:e("div",{className:"gp-h-full gp-w-full",style:{transform:`translate3d(${p.x}px, ${p.y}px, 0) scale(2)`,transformOrigin:"center center",willChange:"transform"},children:e(o,{src:a.src||"",alt:a.alt||"Product image",draggable:!1,className:"gp-h-full gp-w-full gp-pointer-events-none",style:{objectFit:"contain"}})})}):e("div",{className:"gp-h-full gp-w-full"})};export{LightBoxImageZoom as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as t,useEffect as n}from"react";import a from"../../../../../image/components/NextImage.js";let o=({image:o,onExitZoom:i})=>{let l=r(null),c=r({x:0,y:0,originX:0,originY:0}),u=r(!1),g=r(!1),[p,s]=t({x:0,y:0});n(()=>{s({x:0,y:0})},[o]);let m=(e,r)=>{let t=l.current?.getBoundingClientRect();if(!t)return{x:e,y:r};let n=1*t.width/2,a=1*t.height/2;return{x:Math.max(-n,Math.min(n,e)),y:Math.max(-a,Math.min(a,r))}},f=e=>{u.current&&(u.current=!1,e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId))};return o.src?e("div",{ref:l,className:"gp-h-full gp-w-full gp-overflow-hidden gp-cursor-grab active:gp-cursor-grabbing",role:"button",tabIndex:0,"aria-label":"Zoomed image area",onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),i?.())},onPointerDown:e=>{e.preventDefault(),e.stopPropagation(),u.current=!0,g.current=!1,c.current={x:e.clientX,y:e.clientY,originX:p.x,originY:p.y},e.currentTarget.setPointerCapture(e.pointerId)},onPointerMove:e=>{if(!u.current)return;let r=e.clientX-c.current.x,t=e.clientY-c.current.y;(Math.abs(r)>6||Math.abs(t)>6)&&(g.current=!0);let n=m(c.current.originX+r,c.current.originY+t);s(n)},onPointerUp:f,onPointerCancel:f,onPointerLeave:f,onClick:e=>{if(e.stopPropagation(),g.current){g.current=!1;return}i?.()},onDragStart:e=>e.preventDefault(),style:{touchAction:"none"},children:e("div",{className:"gp-h-full gp-w-full",style:{transform:`translate3d(${p.x}px, ${p.y}px, 0) scale(2)`,transformOrigin:"center center",willChange:"transform"},children:e(a,{src:o.src||"",alt:o.alt||"Product image",draggable:!1,className:"gp-h-full gp-w-full gp-pointer-events-none",style:{objectFit:"contain"}})})}):e("div",{className:"gp-h-full gp-w-full"})};export{o as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/ProductImagesLightBox.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as o,Fragment as p}from"react/jsx-runtime";import{useFeaturedImageGlobal as t}from"@gem-sdk/core";import{useState as i,useMemo as l,useEffect as g}from"react";import"../../../../../modal/components/confirm.js";import s from"../../../../../modal/components/Modal.js";import n from"./LightBoxCarousel.js";import r from"./LightBoxGalleryCarousel.js";import m from"./LightBoxImageZoom.js";let ProductImagesLightBox=({builderPropUID:a,productImages:c,open:d,onHandleClose:x})=>{let u=t(),[f,h]=i(!1),[I,y]=i(0),w=l(()=>(c||[]).map((e,o)=>({...e,id:e.id||`gp-lightbox-${o}`,src:e.src||e.previewImage,alt:e.alt||"Product image"})),[c]),C=l(()=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(w[I]?.contentType||""),[w,I]),b=l(()=>{let e=w.findIndex(e=>e.id===u?.id);return e&&e>0?e:0},[w,u]);g(()=>{d&&(h(!1),y(b))},[d]);let j=()=>{h(e=>!e)};return e(s,{setting:{open:d},styles:{width:"calc(100% + 2rem)"},closeOnClickOutside:!0,closeOnEscape:!0,onKeypressEscape:()=>x(),onClose:()=>{x()},lockBodyScroll:!0,disableIframeClickEvent:!0,contentClass:"!gp--mx-4 !gp-my-auto !gp-h-screen !gp-max-w-none !gp-rounded-none !gp-bg-[#0F0F10] !gp-px-0 !gp-py-0 !gp-text-white",zoomButton:{isShowButton:C,isZoomIn:f,onToggleZoom:j},closeButtonClassName:"gp-top-[34px] gp-text-[#AAAAAA] gp-scale-125",wrapperContentClasses:"gp-size-full",children:e("div",{className:"gp-flex gp-gap-2 gp-size-full gp-min-w-0 gp-flex-col gp-items-center gp-justify-center",children:f?e(m,{image:w[I],onExitZoom:j}):o(p,{children:[e("div",{className:"gp-flex gp-w-full gp-min-w-0 gp-flex-1 gp-items-center gp-justify-center gp-overflow-hidden gp-px-[52px] gp-mt-[52px] mobile:gp-px-0",children:e(n,{builderPropUID:a,displayImages:w,activeIndex:I,imageActiveIndex:b,onChangeSlide:y,onToggleZoom:j})}),e("div",{className:"gp-flex gp-justify-center gp-w-full gp-pb-2 mobile:gp-pb-5 gp-px-[52px] mobile:gp-px-0",children:e(r,{builderPropUID:a,displayImages:w,activeIndex:I,onChangeSlide:y})})]})})})};export{ProductImagesLightBox as default};
+import{jsx as e,jsxs as o,Fragment as p}from"react/jsx-runtime";import{useFeaturedImageGlobal as t}from"@gem-sdk/core";import{useState as l,useMemo as i,useEffect as g}from"react";import"../../../../../modal/components/confirm.js";import n from"../../../../../modal/components/Modal.js";import s from"./LightBoxCarousel.js";import r from"./LightBoxGalleryCarousel.js";import m from"./LightBoxImageZoom.js";let a=({builderPropUID:a,productImages:c,open:d,onHandleClose:x})=>{let f=t(),[u,h]=l(!1),[I,y]=l(0),w=i(()=>(c||[]).map((e,o)=>({...e,id:e.id||`gp-lightbox-${o}`,src:e.src||e.previewImage,alt:e.alt||"Product image"})),[c]),C=i(()=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(w[I]?.contentType||""),[w,I]),b=i(()=>{let e=w.findIndex(e=>e.id===f?.id);return e&&e>0?e:0},[w,f]);g(()=>{d&&(h(!1),y(b))},[d]);let j=()=>{h(e=>!e)};return e(n,{setting:{open:d},styles:{width:"calc(100% + 2rem)"},closeOnClickOutside:!0,closeOnEscape:!0,onKeypressEscape:()=>x(),onClose:()=>{x()},lockBodyScroll:!0,disableIframeClickEvent:!0,contentClass:"!gp--mx-4 !gp-my-auto !gp-h-screen !gp-max-w-none !gp-rounded-none !gp-bg-[#0F0F10] !gp-px-0 !gp-py-0 !gp-text-white",zoomButton:{isShowButton:C,isZoomIn:u,onToggleZoom:j},closeButtonClassName:"gp-top-[34px] gp-text-[#AAAAAA] gp-scale-125",wrapperContentClasses:"gp-size-full",children:e("div",{className:"gp-flex gp-gap-2 gp-size-full gp-min-w-0 gp-flex-col gp-items-center gp-justify-center",children:u?e(m,{image:w[I],onExitZoom:j}):o(p,{children:[e("div",{className:"gp-flex gp-w-full gp-min-w-0 gp-flex-1 gp-items-center gp-justify-center gp-overflow-hidden gp-px-[52px] gp-mt-[52px] mobile:gp-px-0",children:e(s,{builderPropUID:a,displayImages:w,activeIndex:I,imageActiveIndex:b,onChangeSlide:y,onToggleZoom:j})}),e("div",{className:"gp-flex gp-justify-center gp-w-full gp-pb-2 mobile:gp-pb-5 gp-px-[52px] mobile:gp-px-0",children:e(r,{builderPropUID:a,displayImages:w,activeIndex:I,onChangeSlide:y})})]})})})};export{a as default};

package/dist/esm/product/components/product-images-v3/components/lightbox/constants.js

@@ -1 +1 @@
-let LIGHTBOX_GALLERY_CAROUSEL_SETTING={loop:{desktop:!0},corner:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"},arrowNavRadius:{bblr:"99999px",bbrr:"99999px",btlr:"99999px",btrr:"99999px",radiusType:"circle"},arrowIconColor:"#AAAAAA",arrowNavColor:"#333333",arrowNavSize:{height:"Auto",padding:{bottom:"12px",left:"12px",right:"12px",top:"12px"},shape:"square",shapeLinked:!0,shapeValue:"1/1",width:"Auto"},shapeForBottom:{desktop:{shape:"square",height:"80px",shapeValue:"1/1",width:"80px",shapeLinked:!0,gap:""},tablet:{shape:"square",height:"80px",shapeValue:"1/1",width:"80px",shapeLinked:!0,gap:""},mobile:{shape:"square",height:"64px",shapeValue:"1/1",width:"64px",shapeLinked:!0,gap:""}},position:{desktop:"bottom-center"},navigationPosition:{desktop:"outside",tablet:"outside",mobile:"none"},borderActive:{borderType:"none",border:"solid",borderWidth:"3px",width:"1px 1px 1px 1px",isCustom:!0,color:"#3C67FF"},layout:{desktop:"cover"},qualityPercent:{desktop:100},qualityType:{desktop:"high"},itemSpacing:{desktop:"8px"},animationMode:"ease-out"},DEFAULT_LIGHTBOX_IMAGE_ONLY={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"},LIGHTBOX_CAROUSEL_STYLES={spacing:{desktop:1},sizeSetting:{desktop:{width:"100%",height:"100%"}}},LIGHTBOX_CAROUSEL_SETTING={slidesToShow:{desktop:1},loop:{desktop:!1},dot:{desktop:!1},navigationEnable:{desktop:!1},speed:320,enableDrag:{desktop:!0},animationMode:"ease-out"};export{DEFAULT_LIGHTBOX_IMAGE_ONLY,LIGHTBOX_CAROUSEL_SETTING,LIGHTBOX_CAROUSEL_STYLES,LIGHTBOX_GALLERY_CAROUSEL_SETTING};
+let e={loop:{desktop:!0},corner:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"},arrowNavRadius:{bblr:"99999px",bbrr:"99999px",btlr:"99999px",btrr:"99999px",radiusType:"circle"},arrowIconColor:"#AAAAAA",arrowNavColor:"#333333",arrowNavSize:{height:"Auto",padding:{bottom:"12px",left:"12px",right:"12px",top:"12px"},shape:"square",shapeLinked:!0,shapeValue:"1/1",width:"Auto"},shapeForBottom:{desktop:{shape:"square",height:"80px",shapeValue:"1/1",width:"80px",shapeLinked:!0,gap:""},tablet:{shape:"square",height:"80px",shapeValue:"1/1",width:"80px",shapeLinked:!0,gap:""},mobile:{shape:"square",height:"64px",shapeValue:"1/1",width:"64px",shapeLinked:!0,gap:""}},position:{desktop:"bottom-center"},navigationPosition:{desktop:"outside",tablet:"outside",mobile:"none"},layout:{desktop:"cover"},qualityPercent:{desktop:100},qualityType:{desktop:"high"},itemSpacing:{desktop:"8px"}},t={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"},o={spacing:{desktop:1},sizeSetting:{desktop:{width:"100%",height:"100%"}}},p={slidesToShow:{desktop:1},loop:{desktop:!1},dot:{desktop:!1},navigationEnable:{desktop:!1},speed:320,enableDrag:{desktop:!0},animationMode:"ease-out"};export{t as DEFAULT_LIGHTBOX_IMAGE_ONLY,p as LIGHTBOX_CAROUSEL_SETTING,o as LIGHTBOX_CAROUSEL_STYLES,e as LIGHTBOX_GALLERY_CAROUSEL_SETTING};

package/dist/esm/product/components/product-images-v3/composables/getProductImagesAttr.js

@@ -1 +1 @@
-import{getGalleryCarouselSettingAttr as t,getFeaturedCarouselSettingAttr as r}from"../common/attrs.js";let getProductImagesAttr=e=>{let o=t(e),m=r(e);return{galleryCarouselSettingAttrs:o,featuredImageCarouselSettingAttrs:m}};export{getProductImagesAttr};
+import{getGalleryCarouselSettingAttr as t,getFeaturedCarouselSettingAttr as r}from"../common/attrs.js";let e=e=>{let o=t(e),m=r(e);return{galleryCarouselSettingAttrs:o,featuredImageCarouselSettingAttrs:m}};export{e as getProductImagesAttr};

package/dist/esm/product/components/product-images-v3/composables/getProductImagesClassName.js

@@ -1 +1 @@
-import{createClass as e}from"@gem-sdk/system";import{getWrapperClasses as s,getGalleryWrapperClasses as r,getGalleryGridWrapperClasses as a,getFtImageWithGalleryClasses as t,getImageGalleryWrapperClasses as l,getFeaturedImageCarouselClasses as g,getFeaturedImageGalleryClasses as o,getFeaturedImageClasses as m,getGalleryItemClasses as p,getFeaturedCarouselItemClasses as d}from"../common/classes.js";import{checkAddOverFlowClass as i,setDefaultWhenUndefineSetting as u}from"../common/common.js";let getProductImagesClassName=C=>{let{setting:c,style:x}=C,$=u(C),{builderProps:f,advanced:n}=$,y=n?.cssClass,w=e(s({extraClass:`${f?.uid} ${y??""} `,isAddOverFlowClass:i(x)})),b=e(r({})),h=e(a({})),v=s=>e(p({extraClass:`${s??""}`})),I=e(t({extraClass:`gp-product-images-feature--${f?.uid}`})),j=e(l({extraClass:`gp-product-images-gallery-${f?.uid}`})),F=e(g({extraClass:`gp-product-images-gallery-${f?.uid}`})),A=e(o({settings:c})),N=e(m({setting:c,extraClass:`gp-flex gp-relative gp-product-images-gallery-${f?.uid} gp-overflow-hidden gp-flex gp-w-full gp-items-center gp-justify-center `})),P=s=>e(d({extraClass:`${s??""}`}));return{wrapperClasses:w,productImagesGalleryClasses:b,galleryGridWrapperClasses:h,galleryItemClasses:v,ftImageGalleryClasses:I,imageGalleryWrapperClasses:j,featuredImageCarouselClasses:F,featuredImageGalleryClasses:A,featureImageOnlyOneImageClasses:N,featuredCarouselItemClasses:P}},galleryItemClasses=(s,r,a)=>e(p({extraClass:`${a??""} ${s===r?"gp-border-[#5EA2FF] gp-border-[3px]":"gp-border-white/20 hover:gp-border-white/60"}`}));export{galleryItemClasses,getProductImagesClassName};
+import{createClass as e}from"@gem-sdk/system";import{getWrapperClasses as s,getGalleryWrapperClasses as r,getGalleryGridWrapperClasses as a,getFtImageWithGalleryClasses as t,getImageGalleryWrapperClasses as l,getFeaturedImageCarouselClasses as g,getFeaturedImageGalleryClasses as o,getFeaturedImageClasses as m,getFeaturedCarouselItemClasses as p,getGalleryItemClasses as d}from"../common/classes.js";import{checkAddOverFlowClass as i,setDefaultWhenUndefineSetting as u}from"../common/common.js";let C=C=>{let{setting:c,style:x}=C,f=u(C),{builderProps:$,advanced:n}=f,y=n?.cssClass,w=e(s({extraClass:`${$?.uid} ${y??""} `,isAddOverFlowClass:i(x)})),b=e(r({})),h=e(a({})),v=e(t({extraClass:`gp-product-images-feature--${$?.uid}`})),I=e(l({extraClass:`gp-product-images-gallery-${$?.uid}`})),j=e(g({extraClass:`gp-product-images-gallery-${$?.uid}`})),F=e(o({settings:c})),A=e(m({setting:c,extraClass:`gp-flex gp-relative gp-product-images-gallery-${$?.uid} gp-overflow-hidden gp-flex gp-w-full gp-items-center gp-justify-center `}));return{wrapperClasses:w,productImagesGalleryClasses:b,galleryGridWrapperClasses:h,galleryItemClasses:s=>e(d({extraClass:`${s??""}`})),ftImageGalleryClasses:v,imageGalleryWrapperClasses:I,featuredImageCarouselClasses:j,featuredImageGalleryClasses:F,featureImageOnlyOneImageClasses:A,featuredCarouselItemClasses:s=>e(p({extraClass:`${s??""}`}))}},c=(s,r,a)=>e(d({extraClass:`${a} ${s===r?"gp-border-[#5EA2FF] gp-border-[3px]":"gp-border-white/20 hover:gp-border-white/60"}`}));export{c as galleryItemClasses,C as getProductImagesClassName};

package/dist/esm/product/components/product-images-v3/composables/getProductImagesStyles.js

@@ -1 +1 @@
-import{createStyle as e}from"@gem-sdk/system";import{getWrapContainerStyle as t,getFeatureImageStyle as l,getFeaturedImageOnlyOneImageStyle as r,getGalleryImageStyle as s,getFeaturedImageCarouselStyle as a,getFeatureImageCarouselItemStyle as g,getGalleryGridStyle as m,getGalleryGridItemStyle as o,getGalleryCarouselStyle as i,getGalleryCarouselItemStyle as n}from"../common/styles.js";let getProductImagesStyles=(d,p)=>{let y=e(t(d)),u=e(t(d,!0)),h=e(t(d,p?.gallery&&p?.gallery?.length<2)),b=e(l(d,{enableOrder:!0,enableDisplay:!0})),c=e(r({setting:d,options:{enableRadius:!0,enableHeight:!0}})),I=e(s(d,p?.featureImageHeight)),f=e(a(d)),x=e({...g(d)}),H=e({...g(d),width:"{{productImageWidth}}px"}),P=e(m(d)),S=e(o(d)),j=e(i(d)),k=e(n(d));return{wrapContainerStyle:y,wrapContainerStyleOnlyOneImage:u,wrapperFeaturedImageStyle:h,featureImageStyle:b,featureImageOnlyOneImageStyle:c,galleryImageStyle:I,featuredImageCarouselStyle:f,featureImageCarouselItemStyle:x,featureImageCarouselOnlyOneImageStyle:H,galleryGridStyles:P,galleryGridItemStyles:S,galleryCarouselStyle:j,galleryCarouselItemStyle:k}};export{getProductImagesStyles};
+import{createStyle as e}from"@gem-sdk/system";import{getWrapContainerStyle as t,getFeatureImageStyle as l,getFeaturedImageOnlyOneImageStyle as r,getGalleryImageStyle as a,getFeaturedImageCarouselStyle as s,getFeatureImageCarouselItemStyle as g,getGalleryGridStyle as m,getGalleryGridItemStyle as o,getGalleryCarouselStyle as i,getGalleryCarouselItemStyle as n}from"../common/styles.js";let d=(d,p)=>{let y=e(t(d)),h=e(t(d,!0)),u=e(t(d,p?.gallery&&p?.gallery?.length<2)),b=e(l(d,{enableOrder:!0,enableDisplay:!0})),c=e(r({setting:d,options:{enableRadius:!0,enableHeight:!0}})),f=e(a(d,p?.featureImageHeight)),I=e(s(d)),x=e({...g(d)}),H=e({...g(d),width:"{{productImageWidth}}px"}),j=e(m(d)),k=e(o(d)),w=e(i(d)),D=e(n(d));return{wrapContainerStyle:y,wrapContainerStyleOnlyOneImage:h,wrapperFeaturedImageStyle:u,featureImageStyle:b,featureImageOnlyOneImageStyle:c,galleryImageStyle:f,featuredImageCarouselStyle:I,featureImageCarouselItemStyle:x,featureImageCarouselOnlyOneImageStyle:H,galleryGridStyles:j,galleryGridItemStyles:k,galleryCarouselStyle:w,galleryCarouselItemStyle:D}};export{d as getProductImagesStyles};

package/dist/esm/product/components/product-images-v3/hooks/useFeatureImageWithGallery.js

@@ -1 +1 @@
-import{useCurrentDevice as e,getResponsiveValueByScreen as r}from"@gem-sdk/core";import{useRef as t,useState as i,useEffect as o}from"react";import{getTypeWidthDevice as n}from"../common/common.js";let useFeatureImageWithGallery=l=>{let{setting:u,styles:s}=l,m={...u,...s},c=e(),f=t(null),a=t(null),[g,d]=i(""),[h,p]=i(100),[y,b]=i(),v=r(m?.position,c),F="slider"===n(m?.type)[c]||["left","right","inside-left","inside-right"].includes(v),G=(e,r=200)=>{e&&(f.current&&clearTimeout(f.current),f.current=setTimeout(()=>p(a?.current?.offsetHeight||200),r))};return o(()=>{let e=a?.current;if(!e)return;let r=new ResizeObserver(()=>{p(e.offsetHeight||200)});return r.observe(e),()=>{r.disconnect()}}),{isShowCarousel:F,featureImageHeight:h,featureWrapperImage:a,onClickFeatureArrow:g,activeIndexFromFeatureImage:y,setOnClickFeatureArrow:d,onHandleLoadedFeatureImage:G,setActiveIndexFromFeatureImage:b}};export{useFeatureImageWithGallery};
+import{useCurrentDevice as e,getResponsiveValueByScreen as r}from"@gem-sdk/core";import{useRef as t,useState as o,useEffect as i}from"react";import{getTypeWidthDevice as n}from"../common/common.js";let l=l=>{let{setting:u,styles:m}=l,s={...u,...m},c=e(),f=t(null),a=t(null),[d,g]=o(""),[p,h]=o(100),[H,b]=o(),v=r(s?.position,c),y="slider"===n(s?.type)[c]||["left","right","inside-left","inside-right"].includes(v);return i(()=>{let e=a?.current;if(!e)return;let r=new ResizeObserver(()=>{h(e.offsetHeight||200)});return r.observe(e),()=>{r.disconnect()}}),{isShowCarousel:y,featureImageHeight:p,featureWrapperImage:a,onClickFeatureArrow:d,activeIndexFromFeatureImage:H,setOnClickFeatureArrow:g,onHandleLoadedFeatureImage:(e,r=200)=>{e&&(f.current&&clearTimeout(f.current),f.current=setTimeout(()=>h(a?.current?.offsetHeight||200),r))},setActiveIndexFromFeatureImage:b}};export{l as useFeatureImageWithGallery};

package/dist/esm/product/components/product-images-v3/hooks/useFilterImagesByVariant.js

@@ -1 +1 @@
-import{useCurrentVariant as e}from"@gem-sdk/core";import{useCallback as t,useMemo as r}from"react";let useFilterImagesByVariant=({productImages:l,displayByVariant:a,variantSelect:n})=>{let i=e(),s=t(()=>{let e=i?.selectedOptions??[],t=e.find(e=>e.name===n);return t?.value?.toLowerCase()??""},[i?.selectedOptions,n]),o=r(()=>{if(!a||!n||!l)return l;let e=s();if(!e)return l;let t=l.filter(t=>{let r=(t.alt||"").toLowerCase();return r.includes(e)});return t.length>0?t:l},[a,n,l,s]);return{filteredProductImages:o,selectedVariantValue:s()}};export{useFilterImagesByVariant};
+import{useCurrentVariant as e}from"@gem-sdk/core";import{useCallback as t,useMemo as r}from"react";let l=({productImages:l,displayByVariant:n,variantSelect:a})=>{let i=e(),o=t(()=>{let e=i?.selectedOptions??[],t=e.find(e=>e.name===a);return t?.value?.toLowerCase()??""},[i?.selectedOptions,a]),s=r(()=>{if(!n||!a||!l)return l;let e=o();if(!e)return l;let t=l.filter(t=>{let r=(t.alt||"").toLowerCase();return r.includes(e)});return t.length>0?t:l},[n,a,l,o]);return{filteredProductImages:s,selectedVariantValue:o()}};export{l as useFilterImagesByVariant};

package/dist/esm/product/components/product-images-v3/hooks/useGalleryCarousel.js

@@ -1 +1 @@
-import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as u,checkDisplayGalleryByWidth as d}from"../common/productGallery.js";let useGalleryCarousel=c=>{let{builderPropUID:h,productImages:F,onHandleClick:y,activeIndexFormFeatureImage:B,onClickFeatureArrow:f,builderPropsClass:I,arrow:g,priorityFeatureImage:C,...q}=c,T=e(),b=r(),[v,O]=i(f||""),x=t(),[j,k]=i(0),G=a(),[P,S]=i(j),[V,A]=i(!1),{filteredProductImages:L}=p({productImages:F,displayByVariant:q?.displayByVariant,variantSelect:q?.variantSelect});s(()=>{O(f||"")},[f]),s(()=>{G.current&&clearTimeout(G.current),v&&(G.current=setTimeout(()=>{k(B||0),O("")}))},[B]),s(()=>{if(C){let e=L?.findIndex(e=>e.id===C.id)||0;k(e),O("")}},[C,L]),s(()=>{let e=L?.findIndex(e=>e.id===b?.id);k(e||0),O("")},[b,L]);let w=l(()=>u({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom,shapeForInside:q.shapeForInside},q.position),[q.shape,q.shapeForBottom,q.shapeFor1Col,q.shapeFor2Col,q.shapeForFtOnly,q.position,q.shapeForInsideBottom,q.shapeForInside]),z=n(()=>{m({builderPropUID:h,shapeByLayout:w,qualityType:q.qualityType,qualityPercent:q.qualityPercent})},[w,q.qualityPercent,q.qualityType,h]);s(()=>{if("edit"===x)return;let e=document?.querySelector(`.gem-slider-item-${h} .product-list-image`);if(!e)return;z();let r=new ResizeObserver(()=>{z()});return r?.observe(e,{}),()=>{r?.disconnect()}},[z,h,x]);let R=o(q.clickOpenLightBox,T),$=l(()=>{let e=d({shapeByLayout:w});return o(e,T)},[w,T]),D=l(()=>q?.borderActive?.border!=="none",[q?.borderActive?.border]),E=o(q?.clickOpenLightBox,T),H=e=>{y&&y(e||"",R)};return s(()=>{let e;return L&&L.length>0&&V&&(e=setTimeout(()=>{S(j)},80)),()=>{e&&clearTimeout(e)}},[j,L,V]),{moveToIdx:j,isDisplay:$,shapeByLayout:w,isEnableBorderActive:D,isShowButtonLightbox:E,filteredProductImages:L,handleClickCarouselItem:H,setSliderReady:A,safeMoveToIdx:P}};export{useGalleryCarousel};
+import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as d,checkDisplayGalleryByWidth as c}from"../common/productGallery.js";let u=u=>{let{builderPropUID:h,productImages:F,onHandleClick:y,activeIndexFormFeatureImage:B,onClickFeatureArrow:f,builderPropsClass:I,arrow:C,priorityFeatureImage:g,...q}=u,T=e(),b=r(),[v,O]=i(f||""),x=t(),[k,j]=i(0),P=a(),[S,V]=i(k),[A,G]=i(!1),{filteredProductImages:L}=p({productImages:F,displayByVariant:q?.displayByVariant,variantSelect:q?.variantSelect});s(()=>{O(f||"")},[f]),s(()=>{P.current&&clearTimeout(P.current),v&&(P.current=setTimeout(()=>{j(B||0),O("")}))},[B]),s(()=>{if(g){let e=L?.findIndex(e=>e.id===g.id)||0;j(e),O("")}},[g,L]),s(()=>{let e=L?.findIndex(e=>e.id===b?.id);j(e||0),O("")},[b,L]);let w=l(()=>d({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom,shapeForInside:q.shapeForInside},q.position),[q.shape,q.shapeForBottom,q.shapeFor1Col,q.shapeFor2Col,q.shapeForFtOnly,q.position,q.shapeForInsideBottom,q.shapeForInside]),z=n(()=>{m({builderPropUID:h,shapeByLayout:w,qualityType:q.qualityType,qualityPercent:q.qualityPercent})},[w,q.qualityPercent,q.qualityType,h]);s(()=>{if("edit"===x)return;let e=document?.querySelector(`.gem-slider-item-${h} .product-list-image`);if(!e)return;z();let r=new ResizeObserver(()=>{z()});return r?.observe(e,{}),()=>{r?.disconnect()}},[z,h,x]);let R=o(q.clickOpenLightBox,T),$=l(()=>{let e=c({shapeByLayout:w});return o(e,T)},[w,T]),D=l(()=>q?.borderActive?.border!=="none",[q?.borderActive?.border]),E=o(q?.clickOpenLightBox,T);return s(()=>{let e;return L&&L.length>0&&A&&(e=setTimeout(()=>{V(k)},80)),()=>{e&&clearTimeout(e)}},[k,L,A]),{moveToIdx:k,isDisplay:$,shapeByLayout:w,isEnableBorderActive:D,isShowButtonLightbox:E,filteredProductImages:L,handleClickCarouselItem:e=>{y&&y(e||"",R)},setSliderReady:G,safeMoveToIdx:S}};export{u as useGalleryCarousel};

package/dist/esm/product/components/product-images-v3/hooks/useProductFeaturedImageCarousel.js

@@ -1 +1 @@
-import{useFeaturedImageGlobal as e,useCurrentDevice as t,useInteraction as r,useEditorMode as i,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{createRef as n,useMemo as a,useCallback as l,useEffect as u}from"react";import{getAspectRatio as m}from"../common/common.js";import{checkRenderFeaturedCarousel as c}from"../common/productFeaturedImage.js";import{useFilterImagesByVariant as d}from"./useFilterImagesByVariant.js";import{handleSetSrcForFeatureProductImage as h}from"../../../../image/common/helpers.js";let useProductFeaturedImageCarousel=g=>{let p;let{productImages:s,imgRef:f,onHandleClick:y,onClickArrow:S,onHandleLoaded:I,onHandleUpdateActiveIndex:v,builderPropUID:q,builderPropsClass:k,children:b,parentUid:w,...x}=g,T=e(),$=t(),B=n(),{onListener:P,ref:j}=r(),C=i(),{filteredProductImages:F}=d({productImages:s,displayByVariant:x?.displayByVariant,variantSelect:x?.variantSelect}),E=a(()=>{let e=F?.findIndex(e=>e.id===T?.id);return e&&e>=0?e:0},[F,T]),O=a(()=>c(x),[x]),V=a(()=>{if(F?.length)return T||F?.[0]},[F,T]),L=a(()=>"popup"===o(x.ftClickOpenLightBox,$),[x.ftClickOpenLightBox,$]),z=a(()=>x?.otherImage?F&&x.otherImage>=F.length-1||F&&-1===x.otherImage?F.length-1:x.otherImage:0,[x?.otherImage,F]),M=a(()=>x?.hoverEffect==="other"?F?.[z]:F?.find(e=>e.id===T?.id)||F?.[0],[T?.id,z,F,x?.hoverEffect]),R=function(){return Math.random().toString(36).substr(2,5)},A=e=>{p&&clearTimeout(p),p=setTimeout(()=>v&&v(e),500)},D=e=>{let t="1/1",r=0;return e?e.width&&e.height&&(t=`${e.width}/${e.height}`):F?.forEach(e=>{if(e.width&&e.height){let i=e.height/e.width;i>r&&(r=i,t=`${e.width}/${e.height}`)}}),t},G=e=>{let t=m(x.ftShape),r=D(e);return{desktop:t.desktop??r,tablet:t.tablet??r,mobile:t.mobile??r}},H=l(()=>{h({builderPropUID:q,ftShape:x.ftShape,qualityType:x.qualityType,qualityPercent:x.qualityPercent})},[x.ftShape,x.qualityPercent,x.qualityType,q]),J=()=>{let e=`[data-id="${q}"]`;P({event:"gp:change-image-step",selector:e},t=>{let r=(j.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.moveToSlideInteraction({element:r,data:i,isRollback:o,key:n})}),P({event:"gp:change-next-slide",selector:e},t=>{let r=(j.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.nextSlideInteraction({element:r,data:i,isRollback:o,key:n})}),P({event:"gp:change-previous-slide",selector:e},t=>{let r=(j.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.previousSlideInteraction({element:r,data:i,isRollback:o,key:n})})};return u(()=>{if("edit"===C)return;let e=document?.querySelector(`.gem-slider-item-${q} .featured-image-only`);if(!e)return;H();let t=new ResizeObserver(()=>{H()});return t?.observe(e,{}),()=>{t?.disconnect()}},[H,q,C]),u(()=>{J()},[]),u(()=>{!O&&I&&I(!0,0)},[O,I]),{ref:j,imageActive:V,imageActiveIndex:E,imageShowWhenHover:M,enableOpenLightBox:L,filteredProductImages:F,isRenderFeatureCarousel:O,genRandomKey:R,getAspectRatioFinal:G,emitUpdateActiveIndex:A}};export{useProductFeaturedImageCarousel};
+import{useFeaturedImageGlobal as e,useCurrentDevice as t,useInteraction as r,useEditorMode as i,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{createRef as n,useMemo as a,useCallback as l,useEffect as m}from"react";import{getAspectRatio as c}from"../common/common.js";import{checkRenderFeaturedCarousel as u}from"../common/productFeaturedImage.js";import{useFilterImagesByVariant as d}from"./useFilterImagesByVariant.js";import{handleSetSrcForFeatureProductImage as h}from"../../../../image/common/helpers.js";let p=p=>{let g;let{productImages:s,imgRef:f,onHandleClick:y,onClickArrow:S,onHandleLoaded:v,onHandleUpdateActiveIndex:I,builderPropUID:q,builderPropsClass:k,children:b,parentUid:x,...w}=p,T=e(),$=t(),B=n(),{onListener:j,ref:F}=r(),P=i(),{filteredProductImages:C}=d({productImages:s,displayByVariant:w?.displayByVariant,variantSelect:w?.variantSelect}),E=a(()=>{let e=C?.findIndex(e=>e.id===T?.id);return e&&e>=0?e:0},[C,T]),O=a(()=>u(w),[w]),R=a(()=>{if(C?.length)return T||C?.[0]},[C,T]),V=a(()=>"popup"===o(w.ftClickOpenLightBox,$),[w.ftClickOpenLightBox,$]),A=a(()=>w?.otherImage?C&&w.otherImage>=C.length-1||C&&-1===w.otherImage?C.length-1:w.otherImage:0,[w?.otherImage,C]),L=a(()=>w?.hoverEffect==="other"?C?.[A]:C?.find(e=>e.id===T?.id)||C?.[0],[T?.id,A,C,w?.hoverEffect]),z=e=>{let t="1/1",r=0;return e?e.width&&e.height&&(t=`${e.width}/${e.height}`):C?.forEach(e=>{if(e.width&&e.height){let i=e.height/e.width;i>r&&(r=i,t=`${e.width}/${e.height}`)}}),t},K=l(()=>{h({builderPropUID:q,ftShape:w.ftShape,qualityType:w.qualityType,qualityPercent:w.qualityPercent})},[w.ftShape,w.qualityPercent,w.qualityType,q]),M=()=>{let e=`[data-id="${q}"]`;j({event:"gp:change-image-step",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.moveToSlideInteraction({element:r,data:i,isRollback:o,key:n})}),j({event:"gp:change-next-slide",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.nextSlideInteraction({element:r,data:i,isRollback:o,key:n})}),j({event:"gp:change-previous-slide",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.previousSlideInteraction({element:r,data:i,isRollback:o,key:n})})};return m(()=>{if("edit"===P)return;let e=document?.querySelector(`.gem-slider-item-${q} .featured-image-only`);if(!e)return;K();let t=new ResizeObserver(()=>{K()});return t?.observe(e,{}),()=>{t?.disconnect()}},[K,q,P]),m(()=>{M()},[]),m(()=>{!O&&v&&v(!0,0)},[O,v]),{ref:F,imageActive:R,imageActiveIndex:E,imageShowWhenHover:L,enableOpenLightBox:V,filteredProductImages:C,isRenderFeatureCarousel:O,genRandomKey:function(){return Math.random().toString(36).substr(2,5)},getAspectRatioFinal:e=>{let t=c(w.ftShape),r=z(e);return{desktop:t.desktop??r,tablet:t.tablet??r,mobile:t.mobile??r}},emitUpdateActiveIndex:e=>{g&&clearTimeout(g),g=setTimeout(()=>I&&I(e),500)}}};export{p as useProductFeaturedImageCarousel};

package/dist/esm/product/components/product-images-v3/hooks/useProductGalleryGrid.js

@@ -1 +1 @@
-import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as o,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{useState as i,useCallback as a,useEffect as s}from"react";import{getShapeByLayout as l,checkDisplayGalleryByWidth as n}from"../common/productGallery.js";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as d}from"../../../../image/common/helpers.js";let useProductGalleryGrid=m=>{let{builderPropUID:y,productImages:c,activeIndexFromFeatureImage:u,children:h,isHiddenInteraction:F,...f}=m,B=e(),q=r(),[g,I]=i(0),v=o(),{filteredProductImages:G}=p({productImages:c,displayByVariant:f?.displayByVariant,variantSelect:f?.variantSelect}),P=l({shape:f.shape,shapeForBottom:f.shapeForBottom,shapeFor1Col:f.shapeFor1Col,shapeFor2Col:f.shapeFor2Col,shapeForFtOnly:f.shapeForFtOnly,shapeForInsideBottom:f.shapeForInsideBottom,shapeForInside:f.shapeForInside},f.position),b=t(f.clickOpenLightBox,B),C=n({shapeByLayout:P}),O=t(C,B),j=f?.borderActive?.border!=="none",x=a(()=>{d({builderPropUID:y,shapeByLayout:P,qualityType:f.qualityType,qualityPercent:f.qualityPercent})},[P,f.qualityPercent,f.qualityType,y]);return s(()=>{I(u||0)},[u]),s(()=>{let e=G?.findIndex(e=>e.id===q?.id);I(e&&e>0?e:0)},[q,G]),s(()=>{if("edit"===v)return;let e=document?.querySelector(".grid-gallery");if(!e)return;x();let r=new ResizeObserver(()=>{x()});return r?.observe(e,{}),()=>{r?.disconnect()}},[x,y,v]),{isDisplay:O,shapeByLayout:P,imageActiveIndex:g,enableOpenLightBox:b,isEnableBorderActive:j,filteredProductImages:G}};export{useProductGalleryGrid};
+import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as o,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{useState as i,useCallback as a,useEffect as s}from"react";import{getShapeByLayout as l,checkDisplayGalleryByWidth as n}from"../common/productGallery.js";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";let d=d=>{let{builderPropUID:y,productImages:c,activeIndexFromFeatureImage:h,children:u,isHiddenInteraction:F,...f}=d,B=e(),q=r(),[g,I]=i(0),v=o(),{filteredProductImages:b}=p({productImages:c,displayByVariant:f?.displayByVariant,variantSelect:f?.variantSelect}),C=l({shape:f.shape,shapeForBottom:f.shapeForBottom,shapeFor1Col:f.shapeFor1Col,shapeFor2Col:f.shapeFor2Col,shapeForFtOnly:f.shapeForFtOnly,shapeForInsideBottom:f.shapeForInsideBottom,shapeForInside:f.shapeForInside},f.position),O=t(f.clickOpenLightBox,B),P=n({shapeByLayout:C}),j=t(P,B),x=f?.borderActive?.border!=="none",G=a(()=>{m({builderPropUID:y,shapeByLayout:C,qualityType:f.qualityType,qualityPercent:f.qualityPercent})},[C,f.qualityPercent,f.qualityType,y]);return s(()=>{I(h||0)},[h]),s(()=>{let e=b?.findIndex(e=>e.id===q?.id);I(e&&e>0?e:0)},[q,b]),s(()=>{if("edit"===v)return;let e=document?.querySelector(".grid-gallery");if(!e)return;G();let r=new ResizeObserver(()=>{G()});return r?.observe(e,{}),()=>{r?.disconnect()}},[G,y,v]),{isDisplay:j,shapeByLayout:C,imageActiveIndex:g,enableOpenLightBox:O,isEnableBorderActive:x,filteredProductImages:b}};export{d as useProductGalleryGrid};

package/dist/esm/product/components/product-list/ProductList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as a,useEffect as i}from"react";import{useRenderMode as c,useCurrentDevice as s,usePageType as n,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as f,useProductsQuery as P,useCollectionQuery as b,flattenConnection as k,ProductListProvider as T,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import w from"./ProductListCarouselLayout.js";import{getStyle as N}from"./common/styles.js";import{If as S}from"@gem-sdk/system";import{getClass as C}from"./common/classes.js";import{getData as E}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=o(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=o=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:M}=o,{isRelatedProduct:B,productSetting:A}=E(o),F=A.relatedTag&&A.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=s(),H=n(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(A.productSrc="DynamicCollection",A.collectionId=$?.collectionId??"latest");let et=A?.productSrc??"Collection",er=R?.productId&&R?.productId!==A.relatedProductId?R?.productId:A.relatedProductId,eo=m(),ed=u(e=>e.publicStoreFrontData),el=a(()=>g(ed)?h(ed):eo,[ed]),{data:ea}=p(B&&er?er:void 0,{revalidateOnMount:Q||z},el),ei=A.relatedTag&&"tags"===A.relatedTag[0]&&(!ea?.tags||ea?.tags.length===0),ec=A.relatedTag&&"collection"===A.relatedTag[0]&&(!ea?.collections?.edges||ea?.collections.edges.length===0),es=A.relatedTag&&"vendor"===A.relatedTag[0]&&!ea?.vendor,en=ei||ec||es,eu=f(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=P("PickProduct"===et?A?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:A?.numOfSelectedProducts}),eh=a(()=>({id:A?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[A?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});i(()=>{if(B&&ea&&A.relatedTag&&"recommended-product"!==A.relatedType){let e;switch(Y(!1),A.hasRelatedExclude&&(e=A?.relatedExclude&&A.relatedExclude.split(",").map(e=>e.trim())),A.relatedTag[0]){case"vendor":K({first:G?.numberOfProducts,where:{vendor:A.relatedTag&&"vendor"===A.relatedTag[0]?ea?.vendor:"",idNEQ:ea.id}});break;case"collection":{let t;let r=ea?.collections?.edges.map(e=>e.node?.id);if(!r||r?.length===0){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r},{titleNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r}]}]}});break}case"tags":{let t;if(!ea.tags||0===ea.tags.length){Y(!0);break}K(t=e&&e.length>0?{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags},{nameNotIn:e}]}]}}:{first:G?.numberOfProducts,where:{idNEQ:ea.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ea.tags}]}]}})}}}},[ea,A.relatedType,A.relatedTag,G?.numberOfProducts,A.relatedExclude,A.hasRelatedExclude,B]);let ef="PickProduct"===et?eg.isValidating:ep.isValidating,eP="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eT="PickProduct"===et?k(eg.data?.products):k(ek?.products),eI=eu?.data?.products?k(eu?.data?.products):void 0,ev=B&&eI?eI:"PickProduct"===et&&A?.productIds?.length?A?.productIds?.map(e=>eT?.find(t=>t?.baseID===e)).filter(Boolean)??eT:"PickProduct"!==et?eT:eT.filter((e,t)=>t<(A?.numOfSelectedProducts??4)),ey=a(()=>X&&B&&Q||!ev.length&&!eP&&q&&Q,[q,eP,X,B,Q,ev.length]),eO=a(()=>!ev||X&&B,[X,B,ev]),ew=a(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((ev?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(ev?.length??0)).map((r,o)=>(o>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,ev?.length,D,j?.horizontalGutter]),eN=a(()=>ef||eP||eb||!ev||X&&B,[eb,eP,X,B,ef,ev]);i(()=>{eN||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let r=document.querySelector(`[data-id=${t}] div`);r&&V(r.childElementCount||1)},Q?0:500)},[x,eN,Q]);let eS=a(()=>({collection:ek,products:ev,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,ev,G,j]);if(x?.isPreview&&Z)return e(t,{});if(ey)return e(t,{children:S(q,e(ProductNotFound,{builderAttrs:M,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:en,noAssignedProduct:!er}))});let{productListWrapStyle:eC,productListContentStyle:eE,productListWrapAlignStyle:eL}=N(o),{productListWrapClass:eW}=C(o),ej=()=>e(t,{children:S(j?.layout==="grid",e(O,{...o,productSortedById:ev,generateGridRowArray:ew}),e(w,{...o,productSortedById:ev}))});return r("div",{...M,className:eW,style:eC,children:[!!j?.preloadBgImage&&r(y,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),ef||eP?e(d,{}):eb?r("div",{children:["Error: ",eb?.message]}):eO?e("div",{children:"Products not found"}):e(T,{...eS,children:e("div",{className:"gp-flex gp-w-full",style:eL,children:r("div",{style:eE,children:[Z&&e(v,{}),ej()]})})}),I(W,!0)]})};export{ProductList as default};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as a,useMemo as l,useEffect as i}from"react";import{useRenderMode as c,useCurrentDevice as s,usePageType as n,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as f,useProductsQuery as P,useCollectionQuery as b,flattenConnection as k,ProductListProvider as T,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import w from"./ProductListCarouselLayout.js";import{getStyle as S}from"./common/styles.js";import{If as C}from"@gem-sdk/system";import{getClass as E}from"./common/classes.js";import{getData as N}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let W=o(()=>import("../ProductNotFound.js"),{loading:d}),j=o=>{let{children:j,styles:x,builderProps:G,setting:M,builderAttrs:B}=o,{isRelatedProduct:A,productSetting:Q}=N(o),z=Q.relatedTag&&Q.relatedTag[0],{isEditMode:D,isPreviewSharePageMode:F}=c(),H=s(),R=n(),$=u(e=>e.dynamicProduct),_=u(e=>e.dynamicCollection),[V,q]=a(1),[U,J]=a(!0),[K,X]=a(),[Y,Z]=a(!1),ee="GP_FUNNEL_PAGE"===R;"GP_COLLECTION"==R&&(Q.productSrc="DynamicCollection",Q.collectionId=_?.collectionId??"latest");let et=Q?.productSrc??"Collection",er=$?.productId&&$?.productId!==Q.relatedProductId?$?.productId:Q.relatedProductId,eo=m(),ed=u(e=>e.publicStoreFrontData),ea=l(()=>g(ed)?h(ed):eo,[ed]),{data:el}=p(A&&er?er:void 0,{revalidateOnMount:D||F},ea),ei=Q.relatedTag&&"tags"===Q.relatedTag[0]&&(!el?.tags||el?.tags.length===0),ec=Q.relatedTag&&"collection"===Q.relatedTag[0]&&(!el?.collections?.edges||el?.collections.edges.length===0),es=Q.relatedTag&&"vendor"===Q.relatedTag[0]&&!el?.vendor,en=f(K,{revalidateOnMount:D||F},ea),eu=D||F,em=P("PickProduct"===et?Q?.productIds:void 0,{revalidateOnMount:eu},{defaultSelectedProductCount:Q?.numOfSelectedProducts}),eg=l(()=>({id:Q?.collectionId??"latest",numberOfProducts:M?.numberOfProducts??4,orderBy:M?.orderBy}),[Q?.collectionId,Number(M?.numberOfProducts),M?.orderBy]),eh=b("PickProduct"!==et?eg:void 0,{revalidateOnMount:eu});i(()=>{if(A&&el&&Q.relatedTag&&"recommended-product"!==Q.relatedType){let e;switch(Z(!1),Q.hasRelatedExclude&&(e=Q?.relatedExclude&&Q.relatedExclude.split(",").map(e=>e.trim())),Q.relatedTag[0]){case"vendor":X({first:M?.numberOfProducts,where:{vendor:Q.relatedTag&&"vendor"===Q.relatedTag[0]?el?.vendor:"",idNEQ:el.id}});break;case"collection":{let t=el?.collections?.edges.map(e=>e.node?.id);if(!t||t?.length===0){Z(!0);break}X(e&&e.length>0?{first:M?.numberOfProducts,where:{idNEQ:el.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:t},{titleNotIn:e}]}]}}:{first:M?.numberOfProducts,where:{idNEQ:el.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:t}]}]}});break}case"tags":if(!el.tags||0===el.tags.length){Z(!0);break}X(e&&e.length>0?{first:M?.numberOfProducts,where:{idNEQ:el.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:el.tags},{nameNotIn:e}]}]}}:{first:M?.numberOfProducts,where:{idNEQ:el.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:el.tags}]}]}})}}},[el,Q.relatedType,Q.relatedTag,M?.numberOfProducts,Q.relatedExclude,Q.hasRelatedExclude,A]);let ep="PickProduct"===et?em.isValidating:eh.isValidating,ef="PickProduct"===et?em.isLoading:eh.isLoading,eP="PickProduct"===et?em.error:eh.error,eb=eh.data?.collections?.edges?.[0]?.node,ek="PickProduct"===et?k(em.data?.products):k(eb?.products),eT=en?.data?.products?k(en?.data?.products):void 0,eI=A&&eT?eT:"PickProduct"===et&&Q?.productIds?.length?Q?.productIds?.map(e=>ek?.find(t=>t?.baseID===e)).filter(Boolean)??ek:"PickProduct"!==et?ek:ek.filter((e,t)=>t<(Q?.numOfSelectedProducts??4)),ev=l(()=>Y&&A&&D||!eI.length&&!ef&&U&&D,[U,ef,Y,A,D,eI.length]),ey=l(()=>!eI||Y&&A,[Y,A,eI]),eO=l(()=>{if(!M?.sameHeight)return[];let e=0,t=Math.ceil((eI?.length??0)/+(M?.slidesToShow?.[H]??1));return Array.from(Array(eI?.length??0)).map((r,o)=>(o>=+(M?.slidesToShow?.[H]??1)*(e+1)&&++e,{gridRow:`${1+V*e}/${V+1+V*e}`,marginBottom:e+1<t?L(x?.horizontalGutter,H):void 0}))},[M?.sameHeight,M?.slidesToShow,V,eI?.length,H,x?.horizontalGutter]),ew=l(()=>ep||ef||eP||!eI||Y&&A,[eP,ef,Y,A,ep,eI]);i(()=>{ew||setTimeout(()=>{let{builderData:e}=G??{},t=e?.childrens?.[0];if(!t)return;let r=document.querySelector(`[data-id=${t}] div`);r&&q(r.childElementCount||1)},D?0:500)},[G,ew,D]);let eS=l(()=>({collection:eb,products:eI,settings:{loop:M?.loop??{desktop:!1},scrollMode:M?.scrollMode??{desktop:"snap"},slidesToShow:M?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:x?.layout,dot:M?.dot,dotStyle:M?.dotStyle,arrow:M?.arrow,controlOverContent:M?.controlOverContent},styles:{horizontalGutter:x?.horizontalGutter,verticalGutter:x?.verticalGutter,fullWidth:x?.fullWidth,spacing:x?.spacing,width:x?.width,height:x?.height}}),[eb,eI,M,x]);if(G?.isPreview&&ee)return e(t,{});if(ev)return e(t,{children:C(U,e(W,{builderAttrs:B,collectionHandle:eb?.handle,productSrc:et,onClose:()=>J(!1),children:j,relatedTagString:z,assignProductNoTags:ei||ec||es,noAssignedProduct:!er}))});let{productListWrapStyle:eC,productListContentStyle:eE,productListWrapAlignStyle:eN}=S(o),{productListWrapClass:eL}=E(o);return r("div",{...B,className:eL,style:eC,children:[!!x?.preloadBgImage&&r(y,{children:[!!x.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:x.backgroundImage.desktop.image.src,as:"image"}),!!x.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:x.backgroundImage?.tablet?.image?.src,as:"image"}),!!x.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:x.backgroundImage?.mobile?.image?.src,as:"image"})]}),ep||ef?e(d,{}):eP?r("div",{children:["Error: ",eP?.message]}):ey?e("div",{children:"Products not found"}):e(T,{...eS,children:e("div",{className:"gp-flex gp-w-full",style:eN,children:r("div",{style:eE,children:[ee&&e(v,{}),e(t,{children:C(x?.layout==="grid",e(O,{...o,productSortedById:eI,generateGridRowArray:eO}),e(w,{...o,productSortedById:eI}))})]})})}),I(j,!0)]})};export{j as default};

package/dist/esm/product/components/product-list/ProductList.liquid.js

@@ -1,5 +1,5 @@
-import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-sdk/core";import{getSettingPreloadData as d,getStaticLocale as o}from"../../../helpers.js";import{If as r}from"@gem-sdk/system";import a from"./ProductListCarouselLayout.liquid.js";import n from"./ProductListGridLayout.liquid.js";import{getStyle as c}from"./common/styles.js";import{getClass as l}from"./common/classes.js";import{getDataLiquid as u}from"./common/helpers.js";let ProductList=g=>{let{setting:p,styles:f,pageContext:m}=g,$=m?.pageType==="GP_FUNNEL_PAGE";if($)return"";let{hasRelatedExclude:P,relatedExcludeTrim:h,collectionID:_,isLatestProducts:y,isGrid:v,numberOfProducts:E,productListId:k,productListHandles:x,sortedBy:S,isReverse:b,productSrc:L,productNumber:A,isSorted:R,relatedTag:I,collectionHandle:F}=u(g),j=()=>e`
-    ${s("RelatedProduct"===L,`
+import{RenderIf as e,isLocalEnv as s,baseAssetURL as t,template as i}from"@gem-sdk/core";import{getSettingPreloadData as d,getStaticLocale as o}from"../../../helpers.js";import{If as r}from"@gem-sdk/system";import a from"./ProductListCarouselLayout.liquid.js";import n from"./ProductListGridLayout.liquid.js";import{getStyle as c}from"./common/styles.js";import{getClass as l}from"./common/classes.js";import{getDataLiquid as u}from"./common/helpers.js";let g=g=>{let{setting:p,styles:f,pageContext:m}=g,$=m?.pageType==="GP_FUNNEL_PAGE";if($)return"";let{hasRelatedExclude:P,relatedExcludeTrim:h,collectionID:_,isLatestProducts:y,isGrid:v,numberOfProducts:E,productListId:k,productListHandles:x,sortedBy:S,isReverse:b,productSrc:A,productNumber:L,isSorted:R,relatedTag:I,collectionHandle:F}=u(g),j=()=>i`
+    ${e("RelatedProduct"===A,`
         assign relatedTag = '${I}'
         assign assignProduct = product
         assign idAssignProduct = assignProduct.id
@@ -95,7 +95,27 @@ import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-s
           assign products = products
         endpaginate
       `)}
-  `,w=()=>{let s=F?`
+  `,{productListWrapStyle:w,productListContentStyle:H,productListWrapAlignStyle:q}=c(g),{productListWrapClass:G}=l(g);return i`
+    ${e(s,`
+        <script ${d('class="gps-link" delay',"src")}="{{ 'gp-product-v7-5.js' | asset_url }}" defer="defer"></script>
+        ${p?.sameHeight?`<script ${d('class="gps-link" delay',"src")}="{{ 'gp-same-height-v7-5.js' | asset_url }}" defer="defer"></script>`:""}
+        `,`
+        <script ${d('class="gps-link" delay',"src")}="${t}/assets-v2/gp-product-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
+        ${p?.sameHeight?`<script ${d('class="gps-link" delay',"src")}="${t}/assets-v2/gp-same-height-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`:""}
+        `)}
+
+    ${e(!!f?.preloadBgImage,`${e(!!f?.backgroundImage?.desktop?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.desktop?.image?.src}" as="image" />`)}${e(!!f?.backgroundImage?.tablet?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.tablet?.image?.src}" as="image" />`)}${e(!!f?.backgroundImage?.mobile?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.mobile?.image?.src}" as="image" />`)}`)}
+    <div
+      class="${G}"
+      style="${w}"
+    >
+      <div class='gp-flex gp-w-full' style="${q}">
+        <div
+          style="${H}"
+        >
+          {%- assign gpBkProduct = product -%}
+          {%- assign gpBkProducts = products -%}
+          ${(()=>{let e=F?`
           assign target_collection = collections['${F}']
           if target_collection == empty
             for collection in collections
@@ -112,14 +132,14 @@ import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-s
               break
             endif
           endfor
-        `;return e`
+        `;return i`
       {%- liquid
         assign productHandles = '${x.toString()}'| split: ','
         assign products = null
         assign target_collection = null
-        assign productSrc = '${L}'
+        assign productSrc = '${A}'
         assign c = 0
-        assign limit = ${A??4}
+        assign limit = ${L??4}
 
         if request.page_type == 'collection' or preview_page_type == 'collection'
           assign target_collection = collection
@@ -127,7 +147,7 @@ import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-s
             if '${_.toLowerCase()}' == 'latest'
               assign target_collection = collections | sort: 'updated_at' ${b?"| reverse":""} | first
             else
-              ${s}
+              ${e}
             endif
           endif
           paginate target_collection.products by ${E||4}
@@ -155,7 +175,7 @@ import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-s
             if '${_.toLowerCase()}' == 'latest'
               assign target_collection = collections | sort: 'updated_at' ${b?"| reverse":""} | first
             else
-              ${s}
+              ${e}
             endif
             paginate target_collection.products by ${E||4}
               assign products = target_collection.products ${R?S:""} ${b?"| reverse":""}
@@ -163,43 +183,23 @@ import{template as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i}from"@gem-s
           endif
         endif
       -%}
-    `},{productListWrapStyle:H,productListContentStyle:q,productListWrapAlignStyle:G}=c(g),{productListWrapClass:B}=l(g),T=()=>e`
+    `})()}
+          ${i`
     {%- if products == null -%}
     {%- if count == 0 and ${k.length} == 0 -%}
-      {% if '${L}' == 'RelatedProduct' -%}
+      {% if '${A}' == 'RelatedProduct' -%}
           <div>${o("ProductList","no_related_products")}</div>
         {% else %}
           <div>${o("ProductList","no_products_found")}</div>
       {%- endif -%}
     {%- endif -%}
     {%-else-%}
-      ${r(v,e`${n({...g,productListId:k,productSrc:L})}`,e`${a({...g,productListId:k,productSrc:L})}`)}
+      ${r(v,i`${n({...g,productListId:k,productSrc:A})}`,i`${a({...g,productListId:k,productSrc:A})}`)}
     {%- endif -%}
-    `;return e`
-    ${s(t,`
-        <script ${d('class="gps-link" delay',"src")}="{{ 'gp-product-v7-5.js' | asset_url }}" defer="defer"></script>
-        ${p?.sameHeight?`<script ${d('class="gps-link" delay',"src")}="{{ 'gp-same-height-v7-5.js' | asset_url }}" defer="defer"></script>`:""}
-        `,`
-        <script ${d('class="gps-link" delay',"src")}="${i}/assets-v2/gp-product-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
-        ${p?.sameHeight?`<script ${d('class="gps-link" delay',"src")}="${i}/assets-v2/gp-same-height-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`:""}
-        `)}
-
-    ${s(!!f?.preloadBgImage,`${s(!!f?.backgroundImage?.desktop?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.desktop?.image?.src}" as="image" />`)}${s(!!f?.backgroundImage?.tablet?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.tablet?.image?.src}" as="image" />`)}${s(!!f?.backgroundImage?.mobile?.image?.src,`<link rel="preload" href="${f?.backgroundImage?.mobile?.image?.src}" as="image" />`)}`)}
-    <div
-      class="${B}"
-      style="${H}"
-    >
-      <div class='gp-flex gp-w-full' style="${G}">
-        <div
-          style="${q}"
-        >
-          {%- assign gpBkProduct = product -%}
-          {%- assign gpBkProducts = products -%}
-          ${w()}
-          ${T()}
+    `}
           {%- assign product = gpBkProduct -%}
           {%- assign products = gpBkProducts -%}
         </div>
       </div>
     </div>
-  `};export{ProductList as default};
+  `};export{g as default};

package/dist/esm/product/components/product-list/ProductListCarouselItem.liquid.js

@@ -1,4 +1,4 @@
-import{template as t}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:e,children:a}=o,{productItemClass:r,gpProductClass:i}=n(o);return t`
+import{template as t}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let o=o=>{let{pageContext:e,children:a}=o,{productItemClass:r,gpProductClass:i}=n(o);return t`
       <gp-product
         gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${i}"
@@ -11,4 +11,4 @@ import{template as t}from"@gem-sdk/core";import{getClass as n}from"./common/clas
           ${a}
         {%- endform -%}
       </gp-product>
-  `};export{ProductListItem as default};
+  `};export{o as default};

package/dist/esm/product/components/product-list/ProductListCarouselLayout.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{useEditorMode as r,ProductProvider as t,isEmptyChildren as e}from"@gem-sdk/core";import s from"../../../carousel/components/root/Carousel.js";import m from"../../../carousel/components/item/CarouselItem.js";import i from"../../../grid/components/ChildrenDroppable.js";import{getData as l}from"./common/helpers.js";import{getAttr as a}from"./common/attrs.js";import{getStyle as c}from"./common/styles.js";import{getClass as n}from"./common/classes.js";let ProductListCarouselLayout=d=>{let{children:p,builderProps:u,productSortedById:f,advanced:j}=d,h=r(),{carouselConfigSetting:y,carouselConfigStyle:C}=l(d),{productListAttr:b,getAttrProductItemEditor:L}=a(d),{carouselItemStyle:g}=c(d),{carouselClass:D,productItemClass:I}=n(d);return o(s,{advanced:j,builderProps:{uid:u?.uid},rootAttrs:{...b},rootClass:D,setting:y,styles:C,children:f?.map(r=>o(m,{style:g,children:o(t,{product:r,readOnly:!0,children:o("div",{..."edit"===h?L(r?.baseID):{},className:I,children:e(p)?o(i,{}):p})})},r?.baseID))})};export{ProductListCarouselLayout as default};
+import{jsx as o}from"react/jsx-runtime";import{useEditorMode as r,ProductProvider as e,isEmptyChildren as s}from"@gem-sdk/core";import t from"../../../carousel/components/root/Carousel.js";import m from"../../../carousel/components/item/CarouselItem.js";import i from"../../../grid/components/ChildrenDroppable.js";import{getData as l}from"./common/helpers.js";import{getAttr as a}from"./common/attrs.js";import{getStyle as c}from"./common/styles.js";import{getClass as n}from"./common/classes.js";let p=p=>{let{children:d,builderProps:u,productSortedById:f,advanced:j}=p,h=r(),{carouselConfigSetting:y,carouselConfigStyle:C}=l(p),{productListAttr:b,getAttrProductItemEditor:g}=a(p),{carouselItemStyle:D}=c(p),{carouselClass:I,productItemClass:v}=n(p);return o(t,{advanced:j,builderProps:{uid:u?.uid},rootAttrs:{...b},rootClass:I,setting:y,styles:C,children:f?.map(r=>o(m,{style:D,children:o(e,{product:r,readOnly:!0,children:o("div",{..."edit"===h?g(r?.baseID):{},className:v,children:s(d)?o(i,{}):d})})},r?.baseID))})};export{p as default};

package/dist/esm/product/components/product-list/ProductListCarouselLayout.liquid.js

@@ -1,5 +1,5 @@
-import{template as o}from"@gem-sdk/core";import t from"../../../carousel/components/item/CarouselItem.liquid.js";import r from"../../../carousel/components/root/Carousel.liquid.js";import{getData as e}from"./common/helpers.js";import{getClass as i}from"./common/classes.js";import{getStyle as s}from"./common/styles.js";import{getStaticLocale as d}from"../../../helpers.js";import u from"./ProductListCarouselItem.liquid.js";let ProductListCarouselLayout=l=>{let{builderProps:c,advanced:a,productSrc:n,productListId:p}=l,{carouselConfigSetting:m,carouselConfigStyle:f}=e(l),{carouselItemStyle:$}=s(l),{carouselClass:g}=i(l);return o`
-    ${r({advanced:a,builderProps:{...c},rootAttrs:{"items-repeat":"true"},rootId:`product-list-carousel-${c?.uid}`,rootClass:g,setting:m,styles:f,children:`
+import{template as o}from"@gem-sdk/core";import t from"../../../carousel/components/item/CarouselItem.liquid.js";import r from"../../../carousel/components/root/Carousel.liquid.js";import{getData as e}from"./common/helpers.js";import{getClass as i}from"./common/classes.js";import{getStyle as s}from"./common/styles.js";import{getStaticLocale as d}from"../../../helpers.js";import u from"./ProductListCarouselItem.liquid.js";let l=l=>{let{builderProps:c,advanced:n,productSrc:a,productListId:p}=l,{carouselConfigSetting:m,carouselConfigStyle:f}=e(l),{carouselItemStyle:$}=s(l),{carouselClass:g}=i(l);return o`
+    ${r({advanced:n,builderProps:{...c},rootAttrs:{"items-repeat":"true"},rootId:`product-list-carousel-${c?.uid}`,rootClass:g,setting:m,styles:f,children:`
         {%- assign count = 0 -%}
         {%- for product in products limit: limit -%}
         {%- if product.id != empty -%}
@@ -12,11 +12,11 @@ import{template as o}from"@gem-sdk/core";import t from"../../../carousel/compone
         {%- endif -%}
         {% endfor %}
         {%- if count == 0 and ${p.length} == 0 -%}
-          {% if '${n}' == 'RelatedProduct' -%}
+          {% if '${a}' == 'RelatedProduct' -%}
               <div>${d("ProductList","no_related_products")}</div>
             {% else %}
               <div>${d("ProductList","no_products_found")}</div>
           {%- endif -%}
         {%- endif -%}
       `})}
-  `};export{ProductListCarouselLayout as default};
+  `};export{l as default};

package/dist/esm/product/components/product-list/ProductListGridItem.liquid.js

@@ -1,8 +1,4 @@
-import{template as t,RenderChildren as n}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=e(o),d=()=>t`
-      ${r?.map((e,o)=>{if(e)return t`
-            ${n({...e,index:o})}
-          `}).join("")}
-    `;return t`
+import{template as t,RenderChildren as n}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let o=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=e(o);return t`
       <gp-product
         gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }},  "formId": "{{ product_form_id }}"}'
         class="${c}"
@@ -12,7 +8,11 @@ import{template as t,RenderChildren as n}from"@gem-sdk/core";import{getClass as
         <input type="hidden" name="id" value="{{ variant.id }}" />
         <input type="hidden" min="1" name="quantity"  value="{{ quantity }}" />
         <button type="submit" onclick="return false;" style="display:none;"></button>
-          ${d()}
+          ${t`
+      ${r?.map((e,o)=>{if(e)return t`
+            ${n({...e,index:o})}
+          `}).join("")}
+    `}
         {%- endform -%}
       </gp-product>
-  `};export{ProductListItem as default};
+  `};export{o as default};

package/dist/esm/product/components/product-list/ProductListGridLayout.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{Children as o,isValidElement as t,createElement as e}from"react";import{useEditorMode as m,ProductProvider as i,isEmptyChildren as s}from"@gem-sdk/core";import l from"../../../grid/components/ChildrenDroppable.js";import{getStyle as a}from"./common/styles.js";import{getClass as d}from"./common/classes.js";import{getAttr as c}from"./common/attrs.js";let ProductListGridLayout=p=>{let{children:n,productSortedById:u,generateGridRowArray:y,setting:f}=p,h=m(),{gridLayoutStyle:g}=a(p),{gridLayoutClass:j,productItemClass:b}=d(p),{productListAttr:L,getAttrProductItemEditor:k}=c(p);return r("div",{...L,style:g,className:j,children:u?.length?u?.map((m,a)=>r(i,{product:m,readOnly:!0,children:r("div",{..."edit"===h?k(m?.baseID):{},className:b,style:{"--grchild":f?.sameHeight?y?.[a]?.gridRow:void 0,"--mbchild":y?.[a]?.marginBottom},children:s(n)?r(l,{}):o.map(n,r=>t(r)?e(r.type,{...r.props,key:r.key}):null)})},m?.baseID)):null})};export{ProductListGridLayout as default};
+import{jsx as r}from"react/jsx-runtime";import{Children as o,isValidElement as e,createElement as m}from"react";import{useEditorMode as t,ProductProvider as s,isEmptyChildren as i}from"@gem-sdk/core";import l from"../../../grid/components/ChildrenDroppable.js";import{getStyle as a}from"./common/styles.js";import{getClass as d}from"./common/classes.js";import{getAttr as c}from"./common/attrs.js";let p=p=>{let{children:n,productSortedById:f,generateGridRowArray:h,setting:u}=p,y=t(),{gridLayoutStyle:g}=a(p),{gridLayoutClass:j,productItemClass:b}=d(p),{productListAttr:k,getAttrProductItemEditor:v}=c(p);return r("div",{...k,style:g,className:j,children:f?.length?f?.map((t,a)=>r(s,{product:t,readOnly:!0,children:r("div",{..."edit"===y?v(t?.baseID):{},className:b,style:{"--grchild":u?.sameHeight?h?.[a]?.gridRow:void 0,"--mbchild":h?.[a]?.marginBottom},children:i(n)?r(l,{}):o.map(n,r=>e(r)?m(r.type,{...r.props,key:r.key}):null)})},t?.baseID)):null})};export{p as default};

package/dist/esm/product/components/product-list/ProductListGridLayout.liquid.js

@@ -1,36 +1,36 @@
-import{template as t,RenderIf as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as s}from"./common/classes.js";import{getAttr as r}from"./common/attrs.js";import d from"./ProductListGridItem.liquid.js";import{getStaticLocale as e}from"../../../helpers.js";let ProductListGridLayout=a=>{let{setting:n,builderProps:p,styles:c,productListId:m,productSrc:u}=a,{gridLayoutStyle:l}=o(a),{gridLayoutClass:f}=s(a),{productListAttr:g}=r(a),$=i=>t`
-      <gp-same-height
-        class="gp-contents"
-        style="visibility: hidden"
-      >
-        <script gp-data type="application/json">${JSON.stringify({targetUid:p?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:c?.horizontalGutter})}
-        </script>
-        ${i}
-      </gp-same-height>
-    `,h=()=>t`
+import{RenderIf as t,template as i}from"@gem-sdk/core";import{getStyle as o}from"./common/styles.js";import{getClass as s}from"./common/classes.js";import{getAttr as r}from"./common/attrs.js";import e from"./ProductListGridItem.liquid.js";import{getStaticLocale as d}from"../../../helpers.js";let a=a=>{let{setting:n,builderProps:p,styles:c,productListId:m,productSrc:l}=a,{gridLayoutStyle:u}=o(a),{gridLayoutClass:f}=s(a),{productListAttr:g}=r(a),$=()=>i`
       {%- assign count = 0 -%}
       {%- for product in products limit: limit -%}
       {%- if product.id != empty -%}
       {%- assign count = count | plus: 1 -%}
       {%- assign variant = product.selected_or_first_available_variant -%}
       {%- assign product_form_id = 'product-form-' | append: "${p?.uid}" | append: product.id -%}
-        ${d({...a})}
+        ${e({...a})}
       {%- endif -%}
       {% endfor %}
       {%- if count == 0 and ${m?.length} == 0 -%}
-        {% if '${u}' == 'RelatedProduct' -%}
-          <div>${e("ProductList","no_related_products")}</div>
+        {% if '${l}' == 'RelatedProduct' -%}
+          <div>${d("ProductList","no_related_products")}</div>
         {% else %}
-          <div>${e("ProductList","no_products_found")}</div>
+          <div>${d("ProductList","no_products_found")}</div>
         {%- endif -%}
       {%- endif -%}
-    `;return t`
+    `;return i`
     <div
       ${g}
-      style="${l}"
+      style="${u}"
       class="${f}"
     >
-      ${i(n?.sameHeight,$(`${h()}`))}
-      ${i(!n?.sameHeight,t`${h()}`)}
+      ${t(n?.sameHeight,i`
+      <gp-same-height
+        class="gp-contents"
+        style="visibility: hidden"
+      >
+        <script gp-data type="application/json">${JSON.stringify({targetUid:p?.builderData?.childrens?.[0],slidesToShow:n?.slidesToShow,rowGap:c?.horizontalGutter})}
+        </script>
+        ${`${$()}`}
+      </gp-same-height>
+    `)}
+      ${t(!n?.sameHeight,i`${$()}`)}
     </div>
-  `};export{ProductListGridLayout as default};
+  `};export{a as default};

package/dist/esm/product/components/product-list/common/attrs.js

@@ -1 +1 @@
-import{createAttr as t}from"@gem-sdk/system";let getAttr=e=>{let{builderProps:o}=e,a=t({"items-repeat":!0,"data-id":o?.uid??""}),d=e=>t({"data-component-type":"component","data-component-tag":"Product","data-component-label":"Product","data-component-no-setting":!0,"data-product-id":e?.replace("gid://shopify/Product/","")??""});return{productListAttr:a,getAttrProductItemEditor:d}};export{getAttr};
+import{createAttr as t}from"@gem-sdk/system";let e=e=>{let{builderProps:o}=e,d=t({"items-repeat":!0,"data-id":o?.uid??""});return{productListAttr:d,getAttrProductItemEditor:e=>t({"data-component-type":"component","data-component-tag":"Product","data-component-label":"Product","data-component-no-setting":!0,"data-product-id":e?.replace("gid://shopify/Product/","")??""})}};export{e as getAttr};

package/dist/esm/product/components/product-list/common/classes.js

@@ -1 +1 @@
-import{createClass as e}from"@gem-sdk/system";let getClass=g=>{let{setting:s,className:t,builderProps:i,advanced:p,styles:r}=g,l=e({...t&&{[t]:!0},...p?.cssClass&&{[p.cssClass]:!0},"!gp-m-auto gp-grid gp-w-full":!0,"gp-grid-flow-row":s?.sameHeight}),a=e({"gp-relative gp-flex":!0,[`${i?.builderData?.uid}`]:!0}),d=e({"gp-contents":s?.sameHeight&&r?.layout==="grid"}),o=e({"gp-justify-center":!0,"gp-overflow-hidden":!s?.sameHeight}),m=e({"gp-contents [&>*>div]:gp-contents [&>*]:gp-grid-rows-[subgrid] [&>*]:gp-gap-y-0":s?.sameHeight,[`gp-child-item-${i?.uid}`]:!0});return{gridLayoutClass:l,productItemClass:m,carouselClass:o,productListWrapClass:a,gpProductClass:d}};export{getClass};
+import{createClass as e}from"@gem-sdk/system";let g=g=>{let{setting:t,className:s,builderProps:i,advanced:p,styles:r}=g,l=e({...s&&{[s]:!0},...p?.cssClass&&{[p.cssClass]:!0},"!gp-m-auto gp-grid gp-w-full":!0,"gp-grid-flow-row":t?.sameHeight}),a=e({"gp-relative gp-flex":!0,[`${i?.builderData?.uid}`]:!0}),d=e({"gp-contents":t?.sameHeight&&r?.layout==="grid"}),o=e({"gp-justify-center":!0,"gp-overflow-hidden":!t?.sameHeight}),m=e({"gp-contents [&>*>div]:gp-contents [&>*]:gp-grid-rows-[subgrid] [&>*]:gp-gap-y-0":t?.sameHeight,[`gp-child-item-${i?.uid}`]:!0});return{gridLayoutClass:l,productItemClass:m,carouselClass:o,productListWrapClass:a,gpProductClass:d}};export{g as getClass};

package/dist/esm/product/components/product-list/common/helpers.js

@@ -1 +1 @@
-import{getSizeSetting as t}from"../../../helpers/product.js";import{convertUnitToNumber as e}from"../../product-images/common/productFeaturedImage.js";import{getUpdatedDotStyle as o}from"../../../../carousel/components/dot/common/helpers.js";let getData=e=>{let{setting:d,styles:r}=e,c=d?.productSetting??{},l="RelatedProduct"===c.productSrc,i=o(d?.dot,d?.dotStyle),a={dotSize:{desktop:12},dotGapToCarousel:{desktop:16},arrowIconSize:{desktop:24},showWhenHover:!1,rtl:!1,...d};delete a.childItem;let u={...r,sizeSetting:{...t({adaptiveHeight:r?.adaptiveHeight,height:r?.height,fullWidth:{desktop:!0}})},spacing:r?.spacing};return delete u.backgroundColor,delete u.backgroundImage,{isRelatedProduct:l,productSetting:c,dotStyle:i,carouselConfigSetting:a,carouselConfigStyle:u}},getDataLiquid=t=>{let{setting:o,styles:d}=t,r=o?.productSetting,c=r?.relatedTag,l=r?.hasRelatedExclude,i=(c&&"collection"===c[0]?r?.relatedCollectionExclude:r?.relatedTagsExclude)??"",a=i?.split(",").map(t=>t.trim()).toString(),u=r?.productSrc??"Collection",p=r?.collectionId?.replace(PREFIX_COLLECTION_ID,"")??"latest",n=r?.productSrc==="PickProduct"&&r?.productIds?.length===0,s=d?.layout==="grid",g=e(o?.numberOfProducts,4),I="PickProduct"===u&&r?.productIds?.length?r?.productIds.map(t=>t.replace(PREFIX_PRODUCT_ID,"")):[],m="PickProduct"===u&&r?.productHandles?.length?r?.productHandles:[],P=o?.orderBy&&o?.orderBy!=="none",h=(r?.productSrc==="Collection"||r?.productSrc==="DynamicCollection")&&P?o?.orderBy?.split("_"):"none",C=P&&h?.[0]==="TITLE"?"| sort: 'title'":"| sort: 'updated_at'",D=h?.[h.length-1]==="DESC",E=()=>"PickProduct"===u?n?4:r?.numOfSelectedProducts??4:g;return{hasRelatedExclude:l,relatedExcludeTrim:a,collectionID:p,isLatestProducts:n,isGrid:s,numberOfProducts:g,productListId:I,productListHandles:m,sortedBy:C,isReverse:D,productSrc:u,productSetting:r,isSorted:P,relatedTag:c,productNumber:E(),collectionHandle:r?.collectionHandle}},PREFIX_COLLECTION_ID="gid://shopify/Collection/",PREFIX_PRODUCT_ID="gid://shopify/Product/";export{PREFIX_COLLECTION_ID,PREFIX_PRODUCT_ID,getData,getDataLiquid};
+import{getSizeSetting as t}from"../../../helpers/product.js";import{convertUnitToNumber as e}from"../../product-images/common/productFeaturedImage.js";import{getUpdatedDotStyle as o}from"../../../../carousel/components/dot/common/helpers.js";let r=e=>{let{setting:r,styles:d}=e,c=r?.productSetting??{},l="RelatedProduct"===c.productSrc,i=o(r?.dot,r?.dotStyle),a={dotSize:{desktop:12},dotGapToCarousel:{desktop:16},arrowIconSize:{desktop:24},showWhenHover:!1,rtl:!1,...r};delete a.childItem;let p={...d,sizeSetting:{...t({adaptiveHeight:d?.adaptiveHeight,height:d?.height,fullWidth:{desktop:!0}})},spacing:d?.spacing};return delete p.backgroundColor,delete p.backgroundImage,{isRelatedProduct:l,productSetting:c,dotStyle:i,carouselConfigSetting:a,carouselConfigStyle:p}},d=t=>{let{setting:o,styles:r}=t,d=o?.productSetting,i=d?.relatedTag,a=d?.hasRelatedExclude,p=(i&&"collection"===i[0]?d?.relatedCollectionExclude:d?.relatedTagsExclude)??"",u=p?.split(",").map(t=>t.trim()).toString(),n=d?.productSrc??"Collection",s=d?.collectionId?.replace(c,"")??"latest",g=d?.productSrc==="PickProduct"&&d?.productIds?.length===0,m=r?.layout==="grid",h=e(o?.numberOfProducts,4),P="PickProduct"===n&&d?.productIds?.length?d?.productIds.map(t=>t.replace(l,"")):[],I="PickProduct"===n&&d?.productHandles?.length?d?.productHandles:[],S=o?.orderBy&&o?.orderBy!=="none",C=(d?.productSrc==="Collection"||d?.productSrc==="DynamicCollection")&&S?o?.orderBy?.split("_"):"none",k=S&&C?.[0]==="TITLE"?"| sort: 'title'":"| sort: 'updated_at'",f=C?.[C.length-1]==="DESC";return{hasRelatedExclude:a,relatedExcludeTrim:u,collectionID:s,isLatestProducts:g,isGrid:m,numberOfProducts:h,productListId:P,productListHandles:I,sortedBy:k,isReverse:f,productSrc:n,productSetting:d,isSorted:S,relatedTag:i,productNumber:"PickProduct"===n?g?4:d?.numOfSelectedProducts??4:h,collectionHandle:d?.collectionHandle}},c="gid://shopify/Collection/",l="gid://shopify/Product/";export{c as PREFIX_COLLECTION_ID,l as PREFIX_PRODUCT_ID,r as getData,d as getDataLiquid};

package/dist/esm/product/components/product-list/common/styles.js

@@ -1 +1 @@
-import{splitStyle as o,makeGlobalSize as e,makeStyleResponsive as t,getBgByDevice as r,getResponsiveValueByScreen as s,makeStyle as d,getSingleColorVariable as m,getRadiusStyleActiveState as i,getStyleShadow as a,getStyleBackgroundByDevice as l,getGradientBgrStyleByDevice as n}from"@gem-sdk/core";import{createStyle as b}from"@gem-sdk/system";import{createStyleObject as c}from"../../../../grid/components/row/common/helpers.js";import{getInitialWidthForCarouselItem as p}from"../../../../carousel/common/helpers.js";let getStyle=g=>{let{setting:h,styles:w,style:u}=g,{background:S}=h??{},[k,f]=o(["pos","top","left","bottom","right","z","mb","mt","mb","ml","mr","d"],u),T=e(w?.itemPadding),C=b({...k}),x=b({...t("jc",w?.align||{desktop:"center"})}),y=b({...f,...t("w",c(w?.width).content),...r({backgroundColor:w?.backgroundColor,backgroundImage:w?.backgroundImage})}),v=b({...!h?.sameHeight&&t("rg",w?.horizontalGutter),...t("cg",w?.verticalGutter),...t("gtc",{desktop:`repeat(${s(h?.slidesToShow,"desktop")}, minmax(0, 1fr))`,tablet:h?.slidesToShow?.tablet&&`repeat(${s(h?.slidesToShow,"tablet")}, minmax(0, 1fr))`,mobile:h?.slidesToShow?.mobile&&`repeat(${s(h?.slidesToShow,"mobile")}, minmax(0, 1fr))`})}),j=b({...p({spacing:w?.spacing,slidesToShow:h?.slidesToShow})}),$={...T&&T.padding,...d({bs:w?.borderContent?.border,bw:w?.borderContent?.width,bc:m(w?.borderContent?.color)}),...i({...w?.roundedContent,active:{...w?.roundedContent||{},radiusType:"custom"}}),...a({value:w?.carouselShadow,styleAppliedFor:"box-shadow",isEnableShadow:w?.hasActiveShadow}),...l(S),...n(S,{desktop:!0,tablet:!0,mobile:!0})},z=b({...$});return{gridLayoutStyle:v,carouselItemStyle:j,productListWrapStyle:C,productListContentStyle:y,productListWrapAlignStyle:x,productItemStyle:z}};export{getStyle};
+import{splitStyle as o,makeGlobalSize as e,makeStyleResponsive as t,getBgByDevice as r,getResponsiveValueByScreen as s,getGradientBgrStyleByDevice as d,getStyleBackgroundByDevice as m,getStyleShadow as i,getRadiusStyleActiveState as a,makeStyle as l,getSingleColorVariable as n}from"@gem-sdk/core";import{createStyle as b}from"@gem-sdk/system";import{createStyleObject as c}from"../../../../grid/components/row/common/helpers.js";import{getInitialWidthForCarouselItem as p}from"../../../../carousel/common/helpers.js";let g=g=>{let{setting:h,styles:w,style:u}=g,{background:S}=h??{},[k,f]=o(["pos","top","left","bottom","right","z","mb","mt","mb","ml","mr","d"],u),T=e(w?.itemPadding),C=b({...k}),x=b({...t("jc",w?.align||{desktop:"center"})}),v=b({...f,...t("w",c(w?.width).content),...r({backgroundColor:w?.backgroundColor,backgroundImage:w?.backgroundImage})}),y=b({...!h?.sameHeight&&t("rg",w?.horizontalGutter),...t("cg",w?.verticalGutter),...t("gtc",{desktop:`repeat(${s(h?.slidesToShow,"desktop")}, minmax(0, 1fr))`,tablet:h?.slidesToShow?.tablet&&`repeat(${s(h?.slidesToShow,"tablet")}, minmax(0, 1fr))`,mobile:h?.slidesToShow?.mobile&&`repeat(${s(h?.slidesToShow,"mobile")}, minmax(0, 1fr))`})}),j=b({...p({spacing:w?.spacing,slidesToShow:h?.slidesToShow})}),$={...T&&T.padding,...l({bs:w?.borderContent?.border,bw:w?.borderContent?.width,bc:n(w?.borderContent?.color)}),...a({...w?.roundedContent,active:{...w?.roundedContent||{},radiusType:"custom"}}),...i({value:w?.carouselShadow,styleAppliedFor:"box-shadow",isEnableShadow:w?.hasActiveShadow}),...m(S),...d(S,{desktop:!0,tablet:!0,mobile:!0})},z=b({...$});return{gridLayoutStyle:y,carouselItemStyle:j,productListWrapStyle:C,productListContentStyle:v,productListWrapAlignStyle:x,productItemStyle:z}};export{g as getStyle};