@gem-sdk/components 12.0.0-dev.129 → 12.0.0-dev.132

package/dist/cjs/product/components/product-images-v3/components/child/ProductImagesLightBoxPreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),ProductFeatureVideo=require("../../../product-images-v2/components/child/ProductFeatureVideo.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),NextImage=require("../../../../../image/components/NextImage.js"),MediaIcon=require("./MediaIcon.js"),constants=require("../lightbox/constants.js");const ProductImagesLightBoxPreview=({image:e})=>{let{isEditMode:t}=core.useRenderMode(),r=React.useMemo(()=>!t&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||""),[t,e?.contentType]),o=React.useMemo(()=>e?{...e,src:r?e.src:productFeaturedImage.isFeatureMedia(e?.contentType)?e?.previewImage:e.src}:constants.DEFAULT_LIGHTBOX_IMAGE_ONLY,[e,r]);return r?jsxRuntime.jsx(ProductFeatureVideo.default,{type:o?.contentType,url:o.src??""}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NextImage.default,{src:o.src,alt:o.alt,width:o.width,height:o.height,setting:{layout:{desktop:"cover",tablet:"cover",mobile:"cover"}},style:{width:"100%",height:"100%",cursor:"pointer",objectFit:"contain",objectPosition:"center"},className:"gp-h-full gp-w-full gallery-image-only"}),jsxRuntime.jsx(MediaIcon.default,{contentType:o?.contentType??""})]})};exports.default=ProductImagesLightBoxPreview;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),ProductFeatureVideo=require("../../../product-images-v2/components/child/ProductFeatureVideo.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),NextImage=require("../../../../../image/components/NextImage.js"),MediaIcon=require("./MediaIcon.js"),constants=require("../lightbox/constants.js");const ProductImagesLightBoxPreview=({image:e,isZoomableMedia:t})=>{let{isEditMode:r}=core.useRenderMode(),o=React.useMemo(()=>!r&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||""),[r,e?.contentType]),s=React.useMemo(()=>e?{...e,src:o?e.src:productFeaturedImage.isFeatureMedia(e?.contentType)?e?.previewImage:e.src}:constants.DEFAULT_LIGHTBOX_IMAGE_ONLY,[e,o]);return o?jsxRuntime.jsx(ProductFeatureVideo.default,{type:s?.contentType,url:s.src??""}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NextImage.default,{src:s.src,alt:s.alt,width:s.width,height:s.height,isDisableAspectStyle:!0,setting:{layout:{desktop:"contain",tablet:"contain",mobile:"contain"}},style:{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",display:"block",cursor:t?"zoom-in":"default",objectPosition:"center"},className:"gallery-carousel-image-only"}),jsxRuntime.jsx(MediaIcon.default,{contentType:s?.contentType??""})]})};exports.default=ProductImagesLightBoxPreview;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductImagesLightBoxPreview=require("../child/ProductImagesLightBoxPreview.js"),constants=require("./constants.js");const LightBoxCarousel=({builderPropUID:e,displayImages:t,activeIndex:r,imageActiveIndex:s,onChangeSlide:i})=>{let o=core.useCurrentDevice(),l="mobile"===o,u=React.useMemo(()=>({...constants.LIGHTBOX_CAROUSEL_SETTING,initialSlide:r,defaultCurrentSlider:r}),[r]);return jsxRuntime.jsx("div",{className:core.cls(`gem-slider-item gem-slider-item-${e} gp-relative gp-h-full gp-w-full gp-overflow-hidden gp-cursor-zoom-in gp-flex gp-items-center gp-justify-center`),style:{maxWidth:l?"100vw":"calc(100vw - 150px)",maxHeight:"100vh"},children:jsxRuntime.jsx(Carousel.default,{setting:u,styles:constants.LIGHTBOX_CAROUSEL_STYLES,builderProps:{uid:`${e}-lightbox-main`},moveToIdx:r,isDisableResetSlide:!0,onChangeActive:i,children:t.map(e=>jsxRuntime.jsx(CarouselItem.default,{className:"gp-flex gp-h-full gp-items-center gp-justify-center gp-cursor-zoom-in",children:jsxRuntime.jsx(ProductImagesLightBoxPreview.default,{image:e})},e.id))})})};exports.default=LightBoxCarousel;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),constants=require("./constants.js"),ProductImagesLightBoxPreview=require("../child/ProductImagesLightBoxPreview.js");const LightBoxCarousel=({builderPropUID:e,displayImages:t,activeIndex:s,imageActiveIndex:i,onChangeSlide:r,onToggleZoom:o})=>{let l=e=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(e||""),n=React.useMemo(()=>({...constants.LIGHTBOX_CAROUSEL_SETTING,initialSlide:s,defaultCurrentSlider:s}),[s]);return jsxRuntime.jsx("div",{className:core.cls(`gem-slider-item gem-slider-item-${e} 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:jsxRuntime.jsx(Carousel.default,{setting:n,styles:constants.LIGHTBOX_CAROUSEL_STYLES,builderProps:{uid:`${e}-lightbox-main`},rootClass:"gp-size-full gp-min-w-0 gp-overflow-hidden",moveToIdx:s,isDisableResetSlide:!0,onChangeActive:r,children:t.map(e=>jsxRuntime.jsx(CarouselItem.default,{onClickItem:()=>{l(e.contentType)&&o?.()},className:"gp-flex gp-size-full gp-min-w-0 gp-overflow-hidden gp-items-center gp-justify-center gp-cursor-zoom-in",children:jsxRuntime.jsx(ProductImagesLightBoxPreview.default,{image:e,isZoomableMedia:l(e.contentType)})},e.id))})})};exports.default=LightBoxCarousel;

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

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

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

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

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react");require("../../../../../modal/components/confirm.js");var Modal=require("../../../../../modal/components/Modal.js"),LightBoxCarousel=require("./LightBoxCarousel.js"),LightBoxGalleryCarousel=require("./LightBoxGalleryCarousel.js"),LightBoxImageZoom=require("./LightBoxImageZoom.js");const ProductImagesLightBox=({builderPropUID:e,productImages:t,open:s,onHandleClose:o})=>{let l=core.useFeaturedImageGlobal(),i=core.useCurrentDevice(),a="mobile"===i,[r,g]=React.useState(!1),[n,u]=React.useState(0),p=React.useMemo(()=>(t||[]).map((e,t)=>({...e,id:e.id||`gp-lightbox-${t}`,src:e.src||e.previewImage,alt:e.alt||"Product image"})),[t]),c=React.useMemo(()=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(p[n]?.contentType||""),[p,n]),m=React.useMemo(()=>{let e=p.findIndex(e=>e.id===l?.id);return e&&e>0?e:0},[p,l]);React.useEffect(()=>{s&&(g(!1),u(m))},[s]);let x=()=>{g(e=>!e)};return jsxRuntime.jsx(Modal.default,{setting:{open:s},styles:{width:"calc(100% + 2rem)"},closeOnClickOutside:!0,closeOnEscape:!0,onKeypressEscape:()=>o(),onClose:()=>{o()},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:r,onToggleZoom:x},closeButtonClassName:"gp-top-[34px] gp-text-[#AAAAAA] gp-scale-125",wrapperContentClasses:"gp-flex gp-h-full gp-w-full gp-items-center gp-justify-center",children:jsxRuntime.jsx("div",{className:"gp-relative gp-flex gp-h-full gp-w-full gp-flex-col gp-items-center gp-justify-center",children:r?jsxRuntime.jsx(LightBoxImageZoom.default,{image:p[n]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"gp-flex gp-flex-1 gp-items-center gp-justify-center gp-overflow-hidden gp-px-0",children:jsxRuntime.jsx(LightBoxCarousel.default,{builderPropUID:e,displayImages:p,activeIndex:n,imageActiveIndex:m,onChangeSlide:u})}),jsxRuntime.jsx("div",{className:"gp-z-20 gp-absolute gp-bottom-2 mobile:gp-bottom-[28px] gp-left-0 gp-right-0 gp-flex gp-justify-center gp-mx-auto",style:{maxWidth:a?"100vw":"calc(100vw - 150px)"},children:jsxRuntime.jsx(LightBoxGalleryCarousel.default,{builderPropUID:e,displayImages:p,activeIndex:n,onChangeSlide:u})})]})})})};exports.default=ProductImagesLightBox;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react");require("../../../../../modal/components/confirm.js");var Modal=require("../../../../../modal/components/Modal.js"),LightBoxCarousel=require("./LightBoxCarousel.js"),LightBoxGalleryCarousel=require("./LightBoxGalleryCarousel.js"),LightBoxImageZoom=require("./LightBoxImageZoom.js");const ProductImagesLightBox=({builderPropUID:e,productImages:t,open:o,onHandleClose:s})=>{let i=core.useFeaturedImageGlobal(),[l,a]=React.useState(!1),[r,g]=React.useState(0),n=React.useMemo(()=>(t||[]).map((e,t)=>({...e,id:e.id||`gp-lightbox-${t}`,src:e.src||e.previewImage,alt:e.alt||"Product image"})),[t]),p=React.useMemo(()=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(n[r]?.contentType||""),[n,r]),u=React.useMemo(()=>{let e=n.findIndex(e=>e.id===i?.id);return e&&e>0?e:0},[n,i]);React.useEffect(()=>{o&&(a(!1),g(u))},[o]);let m=()=>{a(e=>!e)};return jsxRuntime.jsx(Modal.default,{setting:{open:o},styles:{width:"calc(100% + 2rem)"},closeOnClickOutside:!0,closeOnEscape:!0,onKeypressEscape:()=>s(),onClose:()=>{s()},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:p,isZoomIn:l,onToggleZoom:m},closeButtonClassName:"gp-top-[34px] gp-text-[#AAAAAA] gp-scale-125",wrapperContentClasses:"gp-size-full",children:jsxRuntime.jsx("div",{className:"gp-flex gp-gap-2 gp-size-full gp-min-w-0 gp-flex-col gp-items-center gp-justify-center",children:l?jsxRuntime.jsx(LightBoxImageZoom.default,{image:n[r],onExitZoom:m}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("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:jsxRuntime.jsx(LightBoxCarousel.default,{builderPropUID:e,displayImages:n,activeIndex:r,imageActiveIndex:u,onChangeSlide:g,onToggleZoom:m})}),jsxRuntime.jsx("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:jsxRuntime.jsx(LightBoxGalleryCarousel.default,{builderPropUID:e,displayImages:n,activeIndex:r,onChangeSlide:g})})]})})})};exports.default=ProductImagesLightBox;

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

@@ -1 +1 @@
-"use strict";const LIGHTBOX_GALLERY_CAROUSEL_SETTING={loop:{desktop:!0},corner:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"},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={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"};exports.DEFAULT_LIGHTBOX_IMAGE_ONLY=DEFAULT_LIGHTBOX_IMAGE_ONLY,exports.LIGHTBOX_CAROUSEL_SETTING=LIGHTBOX_CAROUSEL_SETTING,exports.LIGHTBOX_CAROUSEL_STYLES=LIGHTBOX_CAROUSEL_STYLES,exports.LIGHTBOX_GALLERY_CAROUSEL_SETTING=LIGHTBOX_GALLERY_CAROUSEL_SETTING;
+"use strict";const 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"};exports.DEFAULT_LIGHTBOX_IMAGE_ONLY=DEFAULT_LIGHTBOX_IMAGE_ONLY,exports.LIGHTBOX_CAROUSEL_SETTING=LIGHTBOX_CAROUSEL_SETTING,exports.LIGHTBOX_CAROUSEL_STYLES=LIGHTBOX_CAROUSEL_STYLES,exports.LIGHTBOX_GALLERY_CAROUSEL_SETTING=LIGHTBOX_GALLERY_CAROUSEL_SETTING;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useMemo as r}from"react";import{useRenderMode as c}from"@gem-sdk/core";import i from"../../../product-images-v2/components/child/ProductFeatureVideo.js";import{isFeatureMedia as m}from"../../common/productFeaturedImage.js";import n from"../../../../../image/components/NextImage.js";import s from"./MediaIcon.js";import{DEFAULT_LIGHTBOX_IMAGE_ONLY as p}from"../lightbox/constants.js";let ProductImagesLightBoxPreview=({image:a})=>{let{isEditMode:l}=c(),g=r(()=>!l&&["VIDEO","EXTERNAL_VIDEO"].includes(a?.contentType||""),[l,a?.contentType]),d=r(()=>a?{...a,src:g?a.src:m(a?.contentType)?a?.previewImage:a.src}:p,[a,g]);return g?e(i,{type:d?.contentType,url:d.src??""}):t(o,{children:[e(n,{src:d.src,alt:d.alt,width:d.width,height:d.height,setting:{layout:{desktop:"cover",tablet:"cover",mobile:"cover"}},style:{width:"100%",height:"100%",cursor:"pointer",objectFit:"contain",objectPosition:"center"},className:"gp-h-full gp-w-full gallery-image-only"}),e(s,{contentType:d?.contentType??""})]})};export{ProductImagesLightBoxPreview as default};
+import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import{useMemo as r}from"react";import{useRenderMode as i}from"@gem-sdk/core";import c from"../../../product-images-v2/components/child/ProductFeatureVideo.js";import{isFeatureMedia as m}from"../../common/productFeaturedImage.js";import n from"../../../../../image/components/NextImage.js";import s from"./MediaIcon.js";import{DEFAULT_LIGHTBOX_IMAGE_ONLY as a}from"../lightbox/constants.js";let ProductImagesLightBoxPreview=({image:l,isZoomableMedia:p})=>{let{isEditMode:d}=i(),g=r(()=>!d&&["VIDEO","EXTERNAL_VIDEO"].includes(l?.contentType||""),[d,l?.contentType]),h=r(()=>l?{...l,src:g?l.src:m(l?.contentType)?l?.previewImage:l.src}:a,[l,g]);return g?t(c,{type:h?.contentType,url:h.src??""}):e(o,{children:[t(n,{src:h.src,alt:h.alt,width:h.width,height:h.height,isDisableAspectStyle:!0,setting:{layout:{desktop:"contain",tablet:"contain",mobile:"contain"}},style:{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",display:"block",cursor:p?"zoom-in":"default",objectPosition:"center"},className:"gallery-carousel-image-only"}),t(s,{contentType:h?.contentType??""})]})};export{ProductImagesLightBoxPreview 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{useCurrentDevice as i,cls as r}from"@gem-sdk/core";import{useMemo as t}from"react";import o from"../../../../../carousel-v3/components/root/Carousel.js";import l from"../../../../../carousel-v3/components/item/CarouselItem.js";import m from"../child/ProductImagesLightBoxPreview.js";import{LIGHTBOX_CAROUSEL_SETTING as s,LIGHTBOX_CAROUSEL_STYLES as a}from"./constants.js";let LightBoxCarousel=({builderPropUID:g,displayImages:p,activeIndex:c,imageActiveIndex:n,onChangeSlide:d})=>{let u=i(),f="mobile"===u,h=t(()=>({...s,initialSlide:c,defaultCurrentSlider:c}),[c]);return e("div",{className:r(`gem-slider-item gem-slider-item-${g} gp-relative gp-h-full gp-w-full gp-overflow-hidden gp-cursor-zoom-in gp-flex gp-items-center gp-justify-center`),style:{maxWidth:f?"100vw":"calc(100vw - 150px)",maxHeight:"100vh"},children:e(o,{setting:h,styles:a,builderProps:{uid:`${g}-lightbox-main`},moveToIdx:c,isDisableResetSlide:!0,onChangeActive:d,children:p.map(i=>e(l,{className:"gp-flex gp-h-full gp-items-center gp-justify-center gp-cursor-zoom-in",children:e(m,{image:i})},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 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};

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 m from"../../../../../carousel-v3/components/item/CarouselItem.js";import n 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 h}from"../../composables/getProductImagesClassName.js";let LightBoxGalleryCarousel=({builderPropUID:y,displayImages:b,activeIndex:j,onChangeSlide:I})=>{let C=r(),x=s(!1),[v,w]=i(j);if(a(()=>{x.current||(x.current=!0,w(j))},[j]),b.length<=1)return null;let{galleryCarouselStyle:P,galleryCarouselItemStyle:T}=g(f),{galleryCarouselSettingAttrs:q}=u(f),A=d(C,f.position,f.navigationPosition);return e(l,{setting:q,styles:{...P},slidesClass:A,builderProps:{uid:`${y}-carousel`},rootClass:"gp-flex gp-justify-center gp-w-fit",moveToIdx:v,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,centerInsufficientSlides:!0,onChangeActive:w,children:b.map((r,s)=>{let i=p(r.contentType)?r.previewImage:r.src;return e(m,{"data-thumb-index":s,contentType:"productImage",className:h(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(n,{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%",height:"100%",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 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};

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 i from"../../../../../image/components/NextImage.js";let ZOOM_SCALE=2,LightBoxImageZoom=({image:o})=>{let a=r(null),l=r({x:0,y:0,originX:0,originY:0}),c=r(!1),[g,u]=t({x:0,y:0});n(()=>{u({x:0,y:0})},[o]);let p=(e,r)=>{let t=a.current?.getBoundingClientRect();if(!t)return{x:e,y:r};let n=1*t.width/2,i=1*t.height/2;return{x:Math.max(-n,Math.min(n,e)),y:Math.max(-i,Math.min(i,r))}},s=e=>{e.preventDefault(),e.stopPropagation(),c.current=!0,l.current={x:e.clientX,y:e.clientY,originX:g.x,originY:g.y},e.currentTarget.setPointerCapture(e.pointerId)},m=e=>{if(!c.current)return;let r=e.clientX-l.current.x,t=e.clientY-l.current.y,n=p(l.current.originX+r,l.current.originY+t);u(n)},f=e=>{c.current&&(c.current=!1,e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId))};return o.src?e("div",{ref:a,className:"gp-h-full gp-w-full gp-overflow-hidden gp-cursor-grab active:gp-cursor-grabbing",onPointerDown:s,onPointerMove:m,onPointerUp:f,onPointerCancel:f,onPointerLeave:f,onDragStart:e=>e.preventDefault(),style:{touchAction:"none"},children:e("div",{className:"gp-h-full gp-w-full",style:{transform:`translate3d(${g.x}px, ${g.y}px, 0) scale(2)`,transformOrigin:"center center",willChange:"transform"},children:e(i,{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{LightBoxImageZoom as default};
+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};

package/dist/esm/product/components/product-images-v3/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 p,useCurrentDevice as l}from"@gem-sdk/core";import{useState as i,useMemo as g,useEffect as r}from"react";import"../../../../../modal/components/confirm.js";import s from"../../../../../modal/components/Modal.js";import n from"./LightBoxCarousel.js";import m from"./LightBoxGalleryCarousel.js";import a from"./LightBoxImageZoom.js";let ProductImagesLightBox=({builderPropUID:c,productImages:d,open:x,onHandleClose:u})=>{let f=p(),h=l(),I="mobile"===h,[y,v]=i(!1),[w,C]=i(0),b=g(()=>(d||[]).map((e,t)=>({...e,id:e.id||`gp-lightbox-${t}`,src:e.src||e.previewImage,alt:e.alt||"Product image"})),[d]),j=g(()=>!["VIDEO","EXTERNAL_VIDEO","MODEL_3D"].includes(b[w]?.contentType||""),[b,w]),B=g(()=>{let e=b.findIndex(e=>e.id===f?.id);return e&&e>0?e:0},[b,f]);r(()=>{x&&(v(!1),C(B))},[x]);let A=()=>{v(e=>!e)};return e(s,{setting:{open:x},styles:{width:"calc(100% + 2rem)"},closeOnClickOutside:!0,closeOnEscape:!0,onKeypressEscape:()=>u(),onClose:()=>{u()},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:j,isZoomIn:y,onToggleZoom:A},closeButtonClassName:"gp-top-[34px] gp-text-[#AAAAAA] gp-scale-125",wrapperContentClasses:"gp-flex gp-h-full gp-w-full gp-items-center gp-justify-center",children:e("div",{className:"gp-relative gp-flex gp-h-full gp-w-full gp-flex-col gp-items-center gp-justify-center",children:y?e(a,{image:b[w]}):t(o,{children:[e("div",{className:"gp-flex gp-flex-1 gp-items-center gp-justify-center gp-overflow-hidden gp-px-0",children:e(n,{builderPropUID:c,displayImages:b,activeIndex:w,imageActiveIndex:B,onChangeSlide:C})}),e("div",{className:"gp-z-20 gp-absolute gp-bottom-2 mobile:gp-bottom-[28px] gp-left-0 gp-right-0 gp-flex gp-justify-center gp-mx-auto",style:{maxWidth:I?"100vw":"calc(100vw - 150px)"},children:e(m,{builderPropUID:c,displayImages:b,activeIndex:w,onChangeSlide:C})})]})})})};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 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};

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"},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={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 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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "12.0.0-dev.129",
+  "version": "12.0.0-dev.132",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
   },
   "devDependencies": {
-    "@gem-sdk/core": "12.0.0-dev.126",
+    "@gem-sdk/core": "12.0.0-dev.131",
     "@gem-sdk/styles": "12.0.0-dev.124",
     "@gem-sdk/system": "12.0.0-dev.124",
     "@types/react-transition-group": "^4.4.12",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@gem-sdk/keen-slider": "^6.8.8",
-    "@gem-sdk/swiper": "0.0.15-dev.1",
+    "@gem-sdk/swiper": "0.0.17-dev.1",
     "node-html-parser": "^6.1.13",
     "react-transition-group": "^4.4.5",
     "react-youtube": "10.1.0"