@gem-sdk/components 4.0.0-staging.1194 → 4.0.0-staging.1196

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

@@ -1,9 +1,9 @@
-import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getDisplayStyle as s,getAspectRatio as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,checkDisplayGalleryByWidth as m,getZoomDisplay as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let ProductGalleryCarousel=({builderPropUID:w,children:L,enableLazyLoadImage:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=()=>{let e=(e,t,o)=>{let r=i(t,o),s=i(e,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),p=["left","right","inside-left","inside-right"].includes(r??"");return p||a},t=m({shapeByLayout:M}),o={desktop:t.desktop&&e($.type,$.position,"desktop"),tablet:t.tablet&&e($.type,$.position,"tablet"),mobile:t.mobile&&e($.type,$.position,"mobile")};return s(e=>!o[e],"flex")},M=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),P=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",customLazyload:!0,style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:F})}`,Z=r(M),q=e=>`
+import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getDisplayStyle as s,getAspectRatio as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,checkDisplayGalleryByWidth as m,getZoomDisplay as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let ProductGalleryCarousel=({builderPropUID:w,children:L,enableLazyLoadImage:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=()=>{let e=(e,t,o)=>{let r=i(t,o),s=i(e,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),p=["left","right","inside-left","inside-right"].includes(r??"");return p||a},t=m({shapeByLayout:M}),o={desktop:t.desktop&&e($.type,$.position,"desktop"),tablet:t.tablet&&e($.type,$.position,"tablet"),mobile:t.mobile&&e($.type,$.position,"mobile")};return s(e=>!o[e],"flex")},M=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),P=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:F})}`,Z=r(M),q=e=>`
     ${y("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
     ${y("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
     ${y("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
     ${f({id:"{{imageID}}",contentType:"productImage",className:`${I(`gp-gallery-image-item ${e}`)}`,parentId:`${w}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:j,children:`
-      <div class="gp-w-full gp-relative"
+      <div class="gp-w-full gp-relative gp-h-full"
         style="${c(t("pb",Z))};"
       >
       ${P({aspectRatio:a(M),layout:$?.layout,qualityPercent:$?.qualityPercent,qualityType:$?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as r,Fragment as e}from"react/jsx-runtime";import l from"../child/ProductGalleryGrid.js";let GalleryGrid=i=>{let{setting:d,styles:o,gallery:t,builderProps:a,noDataChildren:n,onHandleClickImage:c,children:m}=i,u={...d,...o};return t?.[0]?.id==="noImageError"?r(e,{children:n}):r(l,{productImages:t,enableHoverAction:!0,...u,builderPropUID:a?.uid,onHandleClick:(r,e)=>c(r||"",e),children:m})};export{GalleryGrid as default};
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import o from"../child/ProductGalleryGrid.js";let GalleryGrid=d=>{let{setting:i,styles:l,gallery:t,builderProps:n,noDataChildren:a,onHandleClickImage:c,children:m}=d,u={...i,...l,borderActive:{...i?.borderActive,border:"none"}};return t?.[0]?.id==="noImageError"?r(e,{children:a}):r(o,{productImages:t,enableHoverAction:!0,...u,builderPropUID:n?.uid,onHandleClick:(r,e)=>c(r||"",e),children:m})};export{GalleryGrid as default};

package/dist/esm/product/components/product-images-v2/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 g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let 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 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`
       ${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})}
@@ -6,7 +6,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       ${r(L?.galleryHoverEffect=="zoom"&&L?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
+    `,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:c(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>n({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
       ${d("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
@@ -19,10 +19,10 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
             <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
           </svg>
         </div>`)}
-      ${Z({aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},{width:"100%",height:"100%"})}
+      ${Z({aspectRatio:c(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},{width:"100%",height:"100%"})}
 
       <div class="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-opacity gp-duration-100 group-hover:gp-opacity-100"
-        style="${c(v(L?.clickOpenLightBox))}" >
+        style="${g(v(L?.clickOpenLightBox))}" >
         <svg
           height="100%"
           width="100%"
@@ -52,20 +52,20 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       media-last-source-url="{{mediaSourceUrl}}"
       external-id="{{media.external_id}}"
       grid-index="{{forloop.index}}"
-      data-outline="${i?"active":"deactive"}"
-      class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i}`)}"
-      style="${c(I)}"
+      data-outline="none"
+      class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i} data-[outline=deactive]:after:!gp-border-transparent`)}"
+      style="${g(I)}"
       >
       ${d("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
 
       ${d("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
 
-      <div class="gp-h-full gp-w-full" style="${d("media == null or media.media_type == 'image'","display: block !important;")} ${d("isVideo == true",c({...S()}))}">
+      <div class="gp-h-full gp-w-full" style="${d("media == null or media.media_type == 'image'","display: block !important;")} ${d("isVideo == true",g({...S()}))}">
         ${d("media != null",P(),T())}
       </div>
 
       <div class="${d("isMedia","gp-flex gp-justify-center gp-items-center")}"
-      style="${d("isMedia",c({...e("aspect",n(M))}))} ${c({...k()})}"
+      style="${d("isMedia",g({...e("aspect",c(M))}))} ${g({...k()})}"
       >
         {% case media.media_type %}
           {% when 'external_video' %}
@@ -81,10 +81,10 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       {% assign isVideo= false %}
       {% assign isMedia= false %}
     </div>`,T=()=>i`
-    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
+    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:c(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
   <div type="grid-gallery"
     class="${V}"
-    style="${c(q)}}"
+    style="${g(q)}}"
   >
     ${s("media in product.media",`${d("media.media_type == 'image'",s("image in product.images",d("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
       ${d("media.id == product.featured_media.id ",N(L?.borderActive?.border!=="none"?"active":""),N())}`)}

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useFeaturedImageGlobal as i,useEditorMode as l,cls as s}from"@gem-sdk/core";import r from"../../../../../carousel/components/root/Carousel.js";import d from"../../../../../carousel/components/item/CarouselItem.js";import n from"../../../../../image/components/NextImage.js";import"../../../../../modal/components/confirm.js";import m from"../../../../../modal/components/Modal.js";import{useMemo as p}from"react";import{isFeatureMedia as a}from"../../common/productFeaturedImage.js";import c from"../child/ProductFeatureVideo.js";import g from"../child/MediaIcon.js";let ProductImagesLightBox=({builderPropUID:h,productImages:u,open:b,imageRatio:f,onHandleClose:k})=>{let y=i(),E=p(()=>{let e=u?.findIndex(e=>e.id===y?.id);return e&&e>0?e:0},[u,y]),I={desktop:u&&u.length>1,mobile:u&&u?.length>1,tablet:u&&u?.length>1},j={desktop:!1,mobile:!1,tablet:!1},C=l(),x=e=>"edit"!==C&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||"");return e(m,{setting:{open:b},styles:{width:"80%"},closeOnClickOutside:!0,onClose:()=>{k(),console.log("onHandleClose")},disableIframeClickEvent:!0,contentClass:"mobile:!gp-w-[100%] gp-px-2 gp-pb-10",children:e(r,{setting:{loop:j,slidesToShow:{desktop:1,tablet:1,mobile:1},defaultCurrentSlider:E,dot:{desktop:!0,mobile:!0,tablet:!0},dotStyle:{desktop:"outside",mobile:"outside",tablet:"outside"},dotColor:{desktop:"#E2E2E2",mobile:"#E2E2E2",tablet:"#E2E2E2"},dotActiveColor:{desktop:"#121212",mobile:"#121212",tablet:"#121212"},dotSize:{desktop:12},dotGapToCarousel:{desktop:12},navigationEnable:I,navigationStyle:{desktop:"outside"},arrowIconSize:{desktop:24}},styles:{sizeSetting:{desktop:{height:"80vh"},tablet:{height:"80vh"},mobile:{height:"60vh"}}},moveToIdx:E,hiddenDotWhenOnlyOne:!0,isHiddenArrowWhenDisabled:!0,builderProps:{uid:h},fullHeight:!0,children:u?.map(i=>e(d,{className:`gem-slider-item gem-slider-item-${h} gp-flex gp-items-center gp-justify-center gp-px-4`,children:x(i)?e(c,{type:i?.contentType,url:i.src??"",aspectRatio:f}):t(o,{children:[e(n,{src:a(i?.contentType)?i?.previewImage:i?.src,width:i?.width,height:i?.height,alt:i?.alt,"content-type":i?.contentType,setting:{aspectRatio:f},className:s("gp-h-full gp-w-full gp-object-contain")},i?.id),e(g,{contentType:i?.contentType??""})]})},i?.id))})})};export{ProductImagesLightBox as default};
+import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useFeaturedImageGlobal as i,useEditorMode as l,cls as s}from"@gem-sdk/core";import d from"../../../../../carousel/components/root/Carousel.js";import n from"../../../../../carousel/components/item/CarouselItem.js";import r from"../../../../../image/components/NextImage.js";import"../../../../../modal/components/confirm.js";import p from"../../../../../modal/components/Modal.js";import{useMemo as m}from"react";import{isFeatureMedia as a}from"../../common/productFeaturedImage.js";import c from"../child/ProductFeatureVideo.js";import g from"../child/MediaIcon.js";let ProductImagesLightBox=({builderPropUID:h,productImages:u,open:b,imageRatio:f,onHandleClose:k})=>{let y=i(),E=m(()=>{let e=u?.findIndex(e=>e.id===y?.id);return e&&e>0?e:0},[u,y]),I={desktop:u&&u.length>1,mobile:u&&u?.length>1,tablet:u&&u?.length>1},j={desktop:!1,mobile:!1,tablet:!1},C=l(),x=e=>"edit"!==C&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||"");return e(p,{setting:{open:b},styles:{width:"80%"},closeOnClickOutside:!0,onClose:()=>{k(),console.log("onHandleClose")},disableIframeClickEvent:!0,contentClass:"mobile:!gp-w-[100%] gp-px-2 gp-pb-10",children:e(d,{setting:{loop:j,slidesToShow:{desktop:1,tablet:1,mobile:1},defaultCurrentSlider:E,dot:{desktop:!0,mobile:!0,tablet:!0},dotStyle:{desktop:"outside",mobile:"outside",tablet:"outside"},dotColor:{desktop:"#E2E2E2",mobile:"#E2E2E2",tablet:"#E2E2E2"},dotActiveColor:{desktop:"#121212",mobile:"#121212",tablet:"#121212"},dotSize:{desktop:12},dotGapToCarousel:{desktop:12},navigationEnable:I,navigationStyle:{desktop:"outside"},arrowIconSize:{desktop:24},initialSlide:E},styles:{sizeSetting:{desktop:{height:"80vh"},tablet:{height:"80vh"},mobile:{height:"60vh"}},playSpeed:0},moveToIdx:E,hiddenDotWhenOnlyOne:!0,isHiddenArrowWhenDisabled:!0,isDisableResetSlide:!0,builderProps:{uid:h},fullHeight:!0,children:u?.map(i=>e(n,{className:`gem-slider-item gem-slider-item-${h} gp-flex gp-items-center gp-justify-center gp-px-4`,children:x(i)?e(c,{type:i?.contentType,url:i.src??"",aspectRatio:f}):t(o,{children:[e(r,{src:a(i?.contentType)?i?.previewImage:i?.src,width:i?.width,height:i?.height,alt:i?.alt,"content-type":i?.contentType,setting:{aspectRatio:f},className:s("gp-h-full gp-w-full gp-object-contain")},i?.id),e(g,{contentType:i?.contentType??""})]})},i?.id))})})};export{ProductImagesLightBox as default};

package/dist/esm/product/components/product-images-v2/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,activeIndexFormFeatureImage: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 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};

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

@@ -1,18 +1,18 @@
-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 ProductListCarouselLayout=c=>{let{builderProps:l,advanced:n,productSrc:a,productListId:p}=c,{carouselConfigSetting:m,carouselConfigStyle:f}=e(c),{carouselItemStyle:g}=s(c),{carouselClass:$}=i(c);return o`
+    ${r({advanced:n,builderProps:{...l},rootAttrs:{"items-repeat":"true"},rootId:`product-list-carousel-${l?.uid}`,rootClass:$,setting:m,styles:f,isProductList:!0,children:`
         {%- 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: "${c?.uid}" | append: product.id -%}
-        ${t({builderProps:{...c},style:$,parentId:`product-list-carousel-${c?.uid} gp-child-item-${c?.uid}`,parentStyle:f,background:m?.background,children:`
-            ${u({...l})}
+        {%- assign product_form_id = 'product-form-' | append: "${l?.uid}" | append: product.id -%}
+        ${t({builderProps:{...l},style:g,parentId:`product-list-carousel-${l?.uid} gp-child-item-${l?.uid}`,parentStyle:f,parentSettings:m,background:m?.background,children:`
+            ${u({...c})}
           `})}
         {%- 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>

package/dist/esm/product/index.js

@@ -1 +1 @@
-export{default as Product}from"./components/product-wrap/Product.js";import"react/jsx-runtime";import"next/link";import"@gem-sdk/core";import"react";import"@gem-sdk/system";import"../notification/components/Notifications.js";import"../notification/components/Notice.js";import"./components/product-button/types.js";import"./components/product-variants/components/variants/index.js";import"next/image";import"@gem-sdk/keen-slider/react";import"../modal/components/confirm.js";import"react-dom";import"../video/components/Video.js";export{default as ProductQuickView}from"./components/product-quick-view/QuickView.js";import"./components/constants/product-bundle.js";export{default as ProductList}from"./components/product-list/ProductList.js";import"./components/product-bundle/common/styles.js";import"./components/product-bundle/common/classes.js";import"./components/product-badge/constants.js";import"./components/product-badge/types.js";import"./components/product-badge/utils/shape.js";import t from"./settings/Product.js";import o from"./settings/ProductQuantity.js";import r from"./settings/ProductTitle.js";import s from"./settings/ProductButton.js";import i from"./settings/ProductPrice.js";import e from"./settings/ProductVariants.js";import n from"./settings/ProductImages.js";import c from"./settings/product-image-v2/ProductImages.js";import m from"./settings/ProductDescription.js";import p from"./settings/ProductProperties.js";import d from"./settings/ProductTag.js";import u from"./settings/ProductList.js";import a from"./settings/DynamicCheckout.js";import P from"./settings/Vendor.js";import g from"./settings/Sku.js";import j from"./components/product-bundle/setting/ProductBundleDiscount.js";import f from"./components/product-bundle/setting/ProductBundleDiscountItem.js";import l from"./settings/ProductViewMore.js";import k from"./settings/ProductBadge.js";import V from"./components/file-upload/settings/index.js";let productSetting={Product:t,ProductQuantity:o,ProductTitle:r,ProductButton:s,ProductPrice:i,ProductVariants:e,ProductImages:n,ProductImagesV2:c,ProductDescription:m,ProductProperties:p,ProductTag:d,ProductList:u,DynamicCheckout:a,ProductVendor:P,ProductSku:g,ProductBundleDiscount:j,ProductBundleDiscountItem:f,ProductViewMore:l,ProductBadge:k,FileUpload:V};export{productSetting};
+export{default as Product}from"./components/product-wrap/Product.js";import"react/jsx-runtime";import"next/link";import"@gem-sdk/core";import"react";import"@gem-sdk/system";import"../notification/components/Notifications.js";import"../notification/components/Notice.js";import"./components/product-button/types.js";import"./components/product-variants/components/variants/index.js";import"next/image";import"../modal/components/confirm.js";import"react-dom";import"../video/components/Video.js";export{default as ProductQuickView}from"./components/product-quick-view/QuickView.js";import"./components/constants/product-bundle.js";export{default as ProductList}from"./components/product-list/ProductList.js";import"./components/product-bundle/common/styles.js";import"./components/product-bundle/common/classes.js";import"./components/product-badge/constants.js";import"./components/product-badge/types.js";import"./components/product-badge/utils/shape.js";import t from"./settings/Product.js";import o from"./settings/ProductQuantity.js";import r from"./settings/ProductTitle.js";import s from"./settings/ProductButton.js";import i from"./settings/ProductPrice.js";import e from"./settings/ProductVariants.js";import n from"./settings/ProductImages.js";import c from"./settings/product-image-v2/ProductImages.js";import m from"./settings/ProductDescription.js";import p from"./settings/ProductProperties.js";import u from"./settings/ProductTag.js";import d from"./settings/ProductList.js";import a from"./settings/DynamicCheckout.js";import P from"./settings/Vendor.js";import g from"./settings/Sku.js";import j from"./components/product-bundle/setting/ProductBundleDiscount.js";import f from"./components/product-bundle/setting/ProductBundleDiscountItem.js";import l from"./settings/ProductViewMore.js";import k from"./settings/ProductBadge.js";import V from"./components/file-upload/settings/index.js";let productSetting={Product:t,ProductQuantity:o,ProductTitle:r,ProductButton:s,ProductPrice:i,ProductVariants:e,ProductImages:n,ProductImagesV2:c,ProductDescription:m,ProductProperties:p,ProductTag:u,ProductList:d,DynamicCheckout:a,ProductVendor:P,ProductSku:g,ProductBundleDiscount:j,ProductBundleDiscountItem:f,ProductViewMore:l,ProductBadge:k,FileUpload:V};export{productSetting};

package/dist/esm/product/settings/product-image-v2/configs/ui-v2.js

@@ -1 +1 @@
-import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as e}from"./ui/FeatureNavigation.js";import{FeatureDots as o}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...o,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...e,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...i,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}}]},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:" "},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};
+import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as e}from"./ui/FeatureNavigation.js";import{FeatureDots as o}from"./ui/FeatureDots.js";let showGallerySliderSetting='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',showFeaturedImage='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',showGalleryHoverAction='(position == "one-col" || position == "two-col")',showImageListSetting='(position !== "only-feature")',SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:{en:"Ratio"},type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:{en:"Featured image"},conditionDisplay:showFeaturedImage,controls:[{setting:{id:"ftShape"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:{en:"Image scale"},setting:{id:"ftLayout"}},{...o,conditionDisplay:`${showFeaturedImage} && position === "only-feature"`},{...e,conditionDisplay:`${showFeaturedImage}`}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"ftCorner"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:showFeaturedImage,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"hoverEffect"}},{label:{en:"Zoom type"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:{en:"Zoom value"},conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:{en:"Other image"},conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:{en:"Click action"},iconName:"gp-trigger-action-click",conditionDisplay:showFeaturedImage,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:{en:"After click"},setting:{id:"ftClickOpenLightBox"}},{label:{en:"Open new tab"},setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:{en:"Slide speed"},setting:{id:"ftAnimationSpeed"}},{type:"control",label:{en:"Animation"},setting:{id:"ftAnimationMode"}},{label:{en:"Drag / swipe"},setting:{id:"ftDragToScroll"}},{label:{en:"Infinity loop"},setting:{id:"ftLoop"}}]}},{label:{en:"Image list"},conditionDisplay:'(position !== "only-feature")',controls:[{label:{en:"Display"},conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},layout:"vertical",conditionDisplay:'position == "one-col"'},{label:{en:"Image gap"},setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:{en:"Image scale"},setting:{id:"layout"}},{...i,conditionDisplay:showGallerySliderSetting}],moreSettings:{type:"collapse",controls:[{label:{en:"Corner"},setting:{id:"corner"}},{label:{en:"Active border"},conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:{en:"Hover action"},conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",compoDefaultValue:"zoom",controls:[{label:{en:"When hover"},setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:{en:"Zoom type"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:{en:"Zoom value"},conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:{en:"Other image"},conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:{en:"Click action"},setting:{id:"clickOpenLightBox"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Drag / swipe"},setting:{id:"dragToScroll"}},{conditionDisplay:showGallerySliderSetting,label:{en:"Infinity loop"},setting:{id:"loop"}}]}},{label:{en:"Item spacing"},conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Gap"},setting:{id:"spacing"}}]},{label:{en:"Display condition"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:{en:"Default item"},setting:{id:"preDisplay"}}]},{label:{en:"Optimize LCP"},controls:[{label:{en:"Preload"},conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:{en:"Quality"},setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:{en:"Quality"},conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{SettingUIV2};

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -1,4 +1,4 @@
-import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createAttr as l,createClass as a,createStyle as d,If as n}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=$=>{let g=`gp-video-${$.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k}=$,I=L&&h&&!!f,S=!j&&$.isVideoComponent,V=A.endsWith(".mp4"),x=!f||L&&h,C=S?A:void 0,M=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:I,offLazyLoad:S,src:A,thumbnail:f})}),B=a({...m(x)}),N=d({...v()}),z=a({...c()}),D=a({...u()}),G=a({...p(P,S)}),H=()=>I?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:N})}
+import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createAttr as l,createClass as a,createStyle as d,If as n}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=$=>{let g=`gp-video-${$.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k,wrapperStyles:I}=$,S=L&&h&&!!f,V=!j&&$.isVideoComponent,x=A.endsWith(".mp4"),C=!f||L&&h,M=V?A:void 0,B=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:S,offLazyLoad:V,src:A,thumbnail:f})}),N=a({...m(C)}),z=d({...v()}),D=a({...c()}),G=a({...u()}),H=a({...p(P,V)}),O=()=>S?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:z})}
     ${n(L,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
@@ -20,14 +20,14 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           }
         });
       </script>`)}
-      `:"",O=()=>e`
+      `:"",_=()=>e`
      <div
         role="presentation"
         style="${w}"
-        class="${B}"
+        class="${N}"
         >
-           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:D,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
-          <button type="button" class="${z}" aria-label="Play">
+           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:G,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
+          <button type="button" class="${D}" aria-label="Play">
             <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
@@ -37,22 +37,22 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           </button>
         </div>
   `;return e`
-  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}">
-    ${H()}
+  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}" style="${I}">
+    ${O()}
     <video
-    ${{...M}}
+    ${{...B}}
       style="${w}"
-      class="${G}"
+      class="${H}"
       ${E?"controls":void 0}
       ${b?"loop":void 0}
       ${h?"muted":void 0}
       ${L?"autoplay":void 0}
       playsinline
-      src="${C}"
+      src="${M}"
     >
-      ${n(V,`<source data-src="${A}" src="${C}" type="video/mp4"></source>`)}
+      ${n(x,`<source data-src="${A}" src="${M}" type="video/mp4"></source>`)}
     </video>
-    ${n(!x,O())}
+    ${n(!C,_())}
   </gp-lite-html5-embed>
         ${t(o,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${s}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{HTML5Embed as default};

package/dist/types/index.d.ts

@@ -4,7 +4,9 @@ import * as csstype from 'csstype';
 import { Property } from 'csstype';
 import * as _gem_sdk_keen_slider from '@gem-sdk/keen-slider';
 import { KeenSliderInstance } from '@gem-sdk/keen-slider';
+import { Swiper } from 'gem-sdk-swiper';
 import React$1, { ReactNode } from 'react';
+import * as gem_sdk_swiper_types_swiper_class from 'gem-sdk-swiper/types/swiper-class';
 
 type AccordionSettingProps = {
     activeKey?: string;
@@ -770,6 +772,7 @@ type CarouselRef = {
     nextSlideInteraction: (params: InteractionChangeSlide) => void;
     previousSlideInteraction: (params: InteractionChangeSlide) => void;
     moveToSlideInteraction: (params: InteractionChangeSlide) => void;
+    getSwiper: () => Swiper | null;
 };
 type CarouselSettingProps = {
     slidesToShow?: ObjectDevices<number | 'auto'>;
@@ -822,6 +825,7 @@ type CarouselSettingProps = {
     animationMode?: CarouselAnimationValue;
     layout?: 'vertical' | 'hozirontal';
     enableAction?: ObjectDevices<boolean>;
+    initialSlide?: number;
 };
 type CarouselStyleProps = {
     spacing?: ObjectDevices<number>;
@@ -848,12 +852,16 @@ type CarouselProps = BasePropsWrap<CarouselSettingProps, CarouselStyleProps> & {
     onCreated?: (slider: KeenSliderInstance) => void;
     onClickArrow?: () => void;
     onHandleChangeSlideByInteraction?: (index: number) => void;
+    onSwiperReady?: (swiper: Swiper) => void;
     elmRef?: React.Ref<HTMLDivElement>;
     rootClass?: string;
     parentClass?: string;
     rootAttrs?: Record<string, string | boolean | number>;
     slidesClass?: string;
     fullHeight?: boolean;
+    isDisableResetSlide?: boolean;
+    isProductList?: boolean;
+    thumbsSwiper?: string;
 } & {
     rootId?: string;
     rootClass?: string;
@@ -864,6 +872,7 @@ type CarouselProps = BasePropsWrap<CarouselSettingProps, CarouselStyleProps> & {
     disableMarginAuto?: boolean;
     slidesClass?: string;
     conditionAppendJs?: string;
+    isEnableCheckHasScrollableContent?: boolean;
 };
 type CarouselItemProps = {
     parentStyle?: CarouselProps['styles'];
@@ -876,6 +885,7 @@ type CarouselItemProps = {
     dispatchEventSelectSlide?: (index: number) => void;
     parentId?: string;
     parentUid?: string;
+    indexKey?: string;
 } & BasePropsWrap & React.ComponentPropsWithoutRef<'div'>;
 
 declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProps<CarouselSettingProps, CarouselStyleProps, Record<string, any>> & {
@@ -893,12 +903,16 @@ declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
     onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
     onClickArrow?: (() => void) | undefined;
     onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+    onSwiperReady?: ((swiper: Swiper) => void) | undefined;
     elmRef?: React.Ref<HTMLDivElement> | undefined;
     rootClass?: string | undefined;
     parentClass?: string | undefined;
     rootAttrs?: Record<string, string | number | boolean> | undefined;
     slidesClass?: string | undefined;
     fullHeight?: boolean | undefined;
+    isDisableResetSlide?: boolean | undefined;
+    isProductList?: boolean | undefined;
+    thumbsSwiper?: string | undefined;
 } & {
     rootId?: string | undefined;
     rootClass?: string | undefined;
@@ -909,6 +923,7 @@ declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
     disableMarginAuto?: boolean | undefined;
     slidesClass?: string | undefined;
     conditionAppendJs?: string | undefined;
+    isEnableCheckHasScrollableContent?: boolean | undefined;
 } & React.RefAttributes<CarouselRef>>;
 
 declare const CarouselItem$1: React.FC<CarouselItemProps>;
@@ -5913,12 +5928,16 @@ declare const _default$3: {
         onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
         onClickArrow?: (() => void) | undefined;
         onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+        onSwiperReady?: ((swiper: gem_sdk_swiper_types_swiper_class.default) => void) | undefined;
         elmRef?: React.Ref<HTMLDivElement> | undefined;
         rootClass?: string | undefined;
         parentClass?: string | undefined;
         rootAttrs?: Record<string, string | number | boolean> | undefined;
         slidesClass?: string | undefined;
         fullHeight?: boolean | undefined;
+        isDisableResetSlide?: boolean | undefined;
+        isProductList?: boolean | undefined;
+        thumbsSwiper?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;
@@ -5929,6 +5948,7 @@ declare const _default$3: {
         disableMarginAuto?: boolean | undefined;
         slidesClass?: string | undefined;
         conditionAppendJs?: string | undefined;
+        isEnableCheckHasScrollableContent?: boolean | undefined;
     } & React.RefAttributes<CarouselRef>>;
     CarouselItem: React.ComponentType<CarouselItemProps>;
     Button: React.ComponentType<ButtonProps>;
@@ -6843,12 +6863,16 @@ declare const _default$2: {
         onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
         onClickArrow?: (() => void) | undefined;
         onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+        onSwiperReady?: ((swiper: gem_sdk_swiper_types_swiper_class.default) => void) | undefined;
         elmRef?: React.Ref<HTMLDivElement> | undefined;
         rootClass?: string | undefined;
         parentClass?: string | undefined;
         rootAttrs?: Record<string, string | number | boolean> | undefined;
         slidesClass?: string | undefined;
         fullHeight?: boolean | undefined;
+        isDisableResetSlide?: boolean | undefined;
+        isProductList?: boolean | undefined;
+        thumbsSwiper?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;
@@ -6859,6 +6883,7 @@ declare const _default$2: {
         disableMarginAuto?: boolean | undefined;
         slidesClass?: string | undefined;
         conditionAppendJs?: string | undefined;
+        isEnableCheckHasScrollableContent?: boolean | undefined;
     } & React.RefAttributes<CarouselRef>>;
     CarouselItem: React.FC<CarouselItemProps>;
     Cart: React.FC<CartProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.0-staging.1194",
+  "version": "4.0.0-staging.1196",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@gem-sdk/keen-slider": "^6.8.8",
+    "gem-sdk-swiper": "0.0.58",
     "node-html-parser": "^6.1.13",
     "react-transition-group": "^4.4.5",
     "react-youtube": "^10.1.0"

package/dist/cjs/carousel/plugins/auto-play.js

@@ -1 +0,0 @@
-"use strict";const AutoPlayPlugin=e=>{let n,o=e.options.autoplay??{},t=!1,r=!1,a=null,s=e?.container?.closest('[data-component-type="component"]')?.querySelector(".carousel-dots");function i(e){e.forEach(e=>{(r=e.isIntersecting)?v():c()})}function u(){!a&&e.container&&(a=new IntersectionObserver(i,{root:null,threshold:0})).observe(e.container)}function c(){clearTimeout(n)}function v(){c(),n=setTimeout(()=>{!t&&o.enable&&r&&e.next()},o.delay??2e3)}function l(){t=!0,c()}function d(){t=!1,v()}e.on("created",()=>{s?.addEventListener("mouseover",l),s?.addEventListener("mouseout",d),o.pauseOnHover&&e.container&&(e.container.addEventListener("mouseover",l),e.container.addEventListener("mouseout",d)),o.enable&&(u(),v())}),e.on("dragStarted",c),e.on("animationEnded",v),e.on("updated",e=>{(o=e.options?.autoplay??{}).enable&&(u(),v())}),e.on("optionsChanged",n=>{n.options.autoplay?.pauseOnHover!==o.pauseOnHover&&e.container&&(n.options.autoplay?.pauseOnHover?(e.container.addEventListener("mouseover",l),e.container.addEventListener("mouseout",d)):(e.container.removeEventListener("mouseover",l),e.container.removeEventListener("mouseout",d),t=!1)),(o=n.options.autoplay??{}).enable&&(u(),v())}),e.on("destroyed",()=>{e.container&&(e.container.removeEventListener("mouseover",l),e.container.removeEventListener("mouseout",d)),s?.removeEventListener("mouseover",l),s?.removeEventListener("mouseout",d),c(),a&&(a.disconnect(),a=null)})};exports.AutoPlayPlugin=AutoPlayPlugin;

package/dist/cjs/carousel/plugins/fix-slider-move-backward.js

@@ -1 +0,0 @@
-"use strict";const FixSliderMoveBackwards=e=>{e.on("animationEnded",e=>{let{rel:a,progress:d}=e.track.details;0===a&&0!==d&&e.moveToIdx(0,!0,{duration:0})})};exports.FixSliderMoveBackwards=FixSliderMoveBackwards;

package/dist/cjs/carousel/plugins/mutation.js

@@ -1 +0,0 @@
-"use strict";const MutationPlugin=e=>{let t=new MutationObserver(t=>{t.forEach(()=>{e.update()})}),i={childList:!0},n=new ResizeObserver(function(){o(e),e.update()}),o=e=>{if(e.options.vertical){s(e);return}r(e)},s=e=>{e.slides.forEach(e=>{e.style.maxWidth="",e.style.minWidth=""})},r=e=>{e.slides.forEach(e=>{e.style.maxHeight="",e.style.minHeight=""})};e.on("created",()=>{n.observe(e.container),t.observe(e.container,i)}),e.on("destroyed",()=>{n.unobserve(e.container),t.disconnect()})};exports.MutationPlugin=MutationPlugin;

package/dist/esm/carousel/plugins/auto-play.js

@@ -1 +0,0 @@
-let AutoPlayPlugin=e=>{let n,o=e.options.autoplay??{},t=!1,r=!1,a=null,i=e?.container?.closest('[data-component-type="component"]')?.querySelector(".carousel-dots");function s(e){e.forEach(e=>{(r=e.isIntersecting)?v():c()})}function u(){!a&&e.container&&(a=new IntersectionObserver(s,{root:null,threshold:0})).observe(e.container)}function c(){clearTimeout(n)}function v(){c(),n=setTimeout(()=>{!t&&o.enable&&r&&e.next()},o.delay??2e3)}function d(){t=!0,c()}function l(){t=!1,v()}e.on("created",()=>{i?.addEventListener("mouseover",d),i?.addEventListener("mouseout",l),o.pauseOnHover&&e.container&&(e.container.addEventListener("mouseover",d),e.container.addEventListener("mouseout",l)),o.enable&&(u(),v())}),e.on("dragStarted",c),e.on("animationEnded",v),e.on("updated",e=>{(o=e.options?.autoplay??{}).enable&&(u(),v())}),e.on("optionsChanged",n=>{n.options.autoplay?.pauseOnHover!==o.pauseOnHover&&e.container&&(n.options.autoplay?.pauseOnHover?(e.container.addEventListener("mouseover",d),e.container.addEventListener("mouseout",l)):(e.container.removeEventListener("mouseover",d),e.container.removeEventListener("mouseout",l),t=!1)),(o=n.options.autoplay??{}).enable&&(u(),v())}),e.on("destroyed",()=>{e.container&&(e.container.removeEventListener("mouseover",d),e.container.removeEventListener("mouseout",l)),i?.removeEventListener("mouseover",d),i?.removeEventListener("mouseout",l),c(),a&&(a.disconnect(),a=null)})};export{AutoPlayPlugin};

package/dist/esm/carousel/plugins/fix-slider-move-backward.js

@@ -1 +0,0 @@
-let FixSliderMoveBackwards=e=>{e.on("animationEnded",e=>{let{rel:a,progress:d}=e.track.details;0===a&&0!==d&&e.moveToIdx(0,!0,{duration:0})})};export{FixSliderMoveBackwards};

package/dist/esm/carousel/plugins/mutation.js

@@ -1 +0,0 @@
-let MutationPlugin=e=>{let t=new MutationObserver(t=>{t.forEach(()=>{e.update()})}),i={childList:!0},n=new ResizeObserver(function(){o(e),e.update()}),o=e=>{if(e.options.vertical){r(e);return}s(e)},r=e=>{e.slides.forEach(e=>{e.style.maxWidth="",e.style.minWidth=""})},s=e=>{e.slides.forEach(e=>{e.style.maxHeight="",e.style.minHeight=""})};e.on("created",()=>{n.observe(e.container),t.observe(e.container,i)}),e.on("destroyed",()=>{n.unobserve(e.container),t.disconnect()})};export{MutationPlugin};