@gem-sdk/components 4.0.0-staging.1204 → 4.0.0-staging.1205

package/dist/esm/product/components/product-images-v2/common/styles.js

@@ -1 +1 @@
-import{makeStyleResponsive as e,makeHeight as t,getHeightByShapeGlobalSize as o,makeWidth as r,composeRadius as i,getResponsiveValueByScreen as a,makeStyleWithDefault as l,getWidthByShapeGlobalSize as s}from"@gem-sdk/core";import{getStyleGridLayout as n,getStyleGridOrderForFeature as p,getStyleGridOrderForGallery as h,getStyleInsideLayout as m,convertSpacing as g,getDisplayStyle as d,convertSpacingForIndisdeLayout as F}from"./common.js";import{getShapeByLayout as y,sizeSettingDefaultForNewLayout as u,getSettingWidthForGridItem as c,getSettingMinWidthForCarouselItem as S,getSettingWidthForCarouselItem as I,checkDisplayGalleryByWidth as b}from"./productGallery.js";let DEVICES=["desktop","mobile","tablet"];function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getWrapContainerStyle=(t,o)=>{let r=n({position:t.position,ratioLayout:t.ratioLayout,ratioLayoutRight:t.ratioLayoutRight,isHiddenGalleryImages:!!o}),i={"--gtc":"minmax(0, 12fr)"},a={...o?i:r,...e("gg",t?.spacing)};return filterTruthyStyles(a)},getFeatureImageStyle=(t,{enableOrder:o,enableDisplay:r})=>{let i=()=>d(e=>!["bottom-center","left","right","only-feature","inside-bottom","inside-left","inside-right"].includes(a(t?.position,e)||""),"flex"),l=p({position:t?.position}),s={...e("jc",t?.align),...o&&{...l},...r&&{...i()}};return filterTruthyStyles(s)},getGalleryImageStyle=(o,r)=>{let i=h({position:o.position}),l=()=>{let e={},t=r??0;return DEVICES.forEach(r=>{let i=a(o?.position,r),l=["left","right"].includes(i),s=a(o?.spacing,r),n=["inside-left","inside-right"].includes(i),p=F(s),h=`calc(${t}px - ${p})`;e={...e,[r]:l?t+"px":n?h:"auto"}}),e},s=y({shape:o.shape,shapeForBottom:o.shapeForBottom,shapeFor1Col:o.shapeFor1Col,shapeFor2Col:o.shapeFor2Col,shapeForFtOnly:o.shapeForFtOnly,shapeForInsideBottom:o.shapeForInsideBottom??u,shapeForInside:o.shapeForInside??u},o.position),n=m(o.position,s,o?.spacing),p={...e("h",t(l())),...e("jc",o?.align),...i,...n};return filterTruthyStyles(p)},getGalleryGridStyle=(t,o)=>{let r=y({shape:t.shape,shapeForBottom:t.shapeForBottom,shapeFor1Col:t.shapeFor1Col,shapeFor2Col:t.shapeFor2Col,shapeForFtOnly:t.shapeForFtOnly,shapeForInsideBottom:t.shapeForInsideBottom,shapeForInside:t.shapeForInside},t.position),i=()=>{let e=(e,t,o)=>{let r=a(t,o),i=a(e,o),l="slider"!==i&&("bottom-center"===r||"inside-bottom"===r),s=["one-col","two-col"].includes(r||"");return l||s},o=b({shapeByLayout:r}),i={desktop:o.desktop&&e(t.type,t.position,"desktop"),tablet:o.tablet&&e(t.type,t.position,"tablet"),mobile:o.mobile&&e(t.type,t.position,"mobile")};return d(e=>!i[e],"flex")},l={...i(),...e("cg",t?.itemSpacing),...e("rg",t?.itemSpacing),...e("jc",t?.align),...o};return filterTruthyStyles(l)},getGalleryGridItemStyle=a=>{let l=y({shape:a.shape,shapeForBottom:a.shapeForBottom,shapeFor1Col:a.shapeFor1Col,shapeFor2Col:a.shapeFor2Col,shapeForFtOnly:a.shapeForFtOnly,shapeForInsideBottom:a.shapeForInsideBottom,shapeForInside:a.shapeForInside},a.position),s=o(l),n=c({shapeByLayout:l,itemSpacing:a.itemSpacing}),p={"max-width":"100%","outline-color":"var(--g-c-brand, brand)",...e("h",t(s)),...e("w",r(n)),...i({normal:a.corner})};return filterTruthyStyles(p)},getFeatureImageCarouselItemStyle=r=>{let a=o(r.ftShape),l={"max-width":"100%","outline-color":"var(--g-c-brand, brand)",...i({normal:r?.ftCorner}),...e("h",t(a))};return filterTruthyStyles(l)},getGalleryCarouselStyle=e=>{let t=y({shape:e.shape,shapeForBottom:e.shapeForBottom,shapeFor1Col:e.shapeFor1Col,shapeFor2Col:e.shapeFor2Col,shapeForFtOnly:e.shapeForFtOnly,shapeForInsideBottom:e.shapeForInsideBottom,shapeForInside:e.shapeForInside},e.position),o=o=>{let r=a(e?.position,o),i="bottom-center"===r||"inside-bottom"===r,l="inside-left"===r||"inside-right"===r||"left"===r||"right"===r,s=a(t,o);return i||l||!s?.width?"100%":s.width},r={spacing:g(e?.itemSpacing),sizeSetting:{desktop:{width:o("desktop"),height:"100%"},tablet:{width:o("tablet"),height:"100%"},mobile:{width:o("mobile"),height:"100%"}}};return filterTruthyStyles(r)},getGalleryCarouselItemStyle=a=>{let l=y({shape:a.shape,shapeForBottom:a.shapeForBottom,shapeFor1Col:a.shapeFor1Col,shapeFor2Col:a.shapeFor2Col,shapeForFtOnly:a.shapeForFtOnly,shapeForInsideBottom:a.shapeForInsideBottom,shapeForInside:a.shapeForInside},a.position),s=e("minw",r(S({shapeByLayout:l,position:a.position,spacing:a.itemSpacing}))),n=e("maxw",r(S({shapeByLayout:l,position:a.position,spacing:a.itemSpacing}))),p=e("w",r(I({shapeByLayout:l,position:a.position}))),h=e("h",t(o(l))),m={"outline-color":"var(--g-c-brand, brand)",...s,...n,...p,...h,...i({normal:a.corner})};return filterTruthyStyles(m)},getFeaturedImageCarouselStyle=e=>{let t=t=>{let o=a(e.ftShape,t);return o?.width??"100%"},o={playSpeed:e?.ftAnimationSpeed,sizeSetting:{desktop:{width:t("desktop"),height:"auto"},tablet:{width:t("tablet"),height:"auto"},mobile:{width:t("mobile"),height:"auto"}},align:{desktop:a(e?.align,"desktop"),tablet:a(e?.align,"tablet"),mobile:a(e?.align,"mobile")},spacing:{desktop:6,tablet:6,mobile:6}};return filterTruthyStyles(o)},getFeaturedImageOnlyOneImageStyle=({setting:r,options:a})=>{let n=o(r?.ftShape),p={...l("w",s(r?.ftShape,!1,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),...a?.enableRadius&&i({normal:r?.ftCorner}),...a?.enableHeight&&e("h",t(n))};return filterTruthyStyles(p)};export{getFeatureImageCarouselItemStyle,getFeatureImageStyle,getFeaturedImageCarouselStyle,getFeaturedImageOnlyOneImageStyle,getGalleryCarouselItemStyle,getGalleryCarouselStyle,getGalleryGridItemStyle,getGalleryGridStyle,getGalleryImageStyle,getWrapContainerStyle};
+import{makeStyleResponsive as e,makeHeight as t,getHeightByShapeGlobalSize as o,makeWidth as r,composeRadius as i,getResponsiveValueByScreen as a,makeStyleWithDefault as l,getWidthByShapeGlobalSize as s}from"@gem-sdk/core";import{getStyleGridLayout as n,getStyleGridOrderForFeature as p,getStyleGridOrderForGallery as h,getStyleInsideLayout as m,convertSpacing as g,getDisplayStyle as F,convertSpacingForIndisdeLayout as d}from"./common.js";import{getShapeByLayout as y,sizeSettingDefaultForNewLayout as u,getSettingWidthForGridItem as S,getSettingMinWidthForCarouselItem as c,getSettingWidthForCarouselItem as I,checkDisplayGalleryByWidth as b}from"./productGallery.js";let DEVICES=["desktop","mobile","tablet"];function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getWrapContainerStyle=(t,o)=>{let r=n({position:t.position,ratioLayout:t.ratioLayout,ratioLayoutRight:t.ratioLayoutRight,isHiddenGalleryImages:!!o}),i={"--gtc":"minmax(0, 12fr)"},a={...o?i:r,...e("gg",t?.spacing)};return filterTruthyStyles(a)},getFeatureImageStyle=(t,{enableOrder:o,enableDisplay:r})=>{let i=()=>F(e=>!["bottom-center","left","right","only-feature","inside-bottom","inside-left","inside-right"].includes(a(t?.position,e)||""),"flex"),l=p({position:t?.position}),s={...e("jc",t?.align),...o&&{...l},...r&&{...i()}};return filterTruthyStyles(s)},getGalleryImageStyle=(o,r)=>{let i=h({position:o.position}),l=()=>{let e={},t=r??0;return DEVICES.forEach(r=>{let i=a(o?.position,r),l=["left","right"].includes(i),s=a(o?.spacing,r),n=["inside-left","inside-right"].includes(i),p=d(s),h=`calc(${t}px - ${p})`;e={...e,[r]:l?t+"px":n?h:"auto"}}),e},s=y({shape:o.shape,shapeForBottom:o.shapeForBottom,shapeFor1Col:o.shapeFor1Col,shapeFor2Col:o.shapeFor2Col,shapeForFtOnly:o.shapeForFtOnly,shapeForInsideBottom:o.shapeForInsideBottom??u,shapeForInside:o.shapeForInside??u},o.position),n=m(o.position,s,o?.spacing),p={...e("h",t(l())),...e("jc",o?.align),...i,...n};return filterTruthyStyles(p)},getGalleryGridStyle=(t,o)=>{let r=y({shape:t.shape,shapeForBottom:t.shapeForBottom,shapeFor1Col:t.shapeFor1Col,shapeFor2Col:t.shapeFor2Col,shapeForFtOnly:t.shapeForFtOnly,shapeForInsideBottom:t.shapeForInsideBottom,shapeForInside:t.shapeForInside},t.position),i=()=>{let e=(e,t,o)=>{let r=a(t,o),i=a(e,o),l="slider"!==i&&("bottom-center"===r||"inside-bottom"===r),s=["one-col","two-col"].includes(r||"");return l||s},o=b({shapeByLayout:r}),i={desktop:o.desktop&&e(t.type,t.position,"desktop"),tablet:o.tablet&&e(t.type,t.position,"tablet"),mobile:o.mobile&&e(t.type,t.position,"mobile")};return F(e=>!i[e],"flex")},l={...i(),...e("cg",t?.itemSpacing),...e("rg",t?.itemSpacing),...e("jc",t?.align),...o};return filterTruthyStyles(l)},getGalleryGridItemStyle=a=>{let l=y({shape:a.shape,shapeForBottom:a.shapeForBottom,shapeFor1Col:a.shapeFor1Col,shapeFor2Col:a.shapeFor2Col,shapeForFtOnly:a.shapeForFtOnly,shapeForInsideBottom:a.shapeForInsideBottom,shapeForInside:a.shapeForInside},a.position),s=o(l),n=S({shapeByLayout:l,itemSpacing:a.itemSpacing}),p={"max-width":"100%","outline-color":"var(--g-c-brand, brand)",...e("h",t(s)),...e("w",r(n)),...i({normal:a.corner})};return filterTruthyStyles(p)},getFeatureImageCarouselItemStyle=r=>{let a=o(r.ftShape),l={"max-width":"100%","outline-color":"var(--g-c-brand, brand)",...i({normal:r?.ftCorner}),...e("h",t(a))};return filterTruthyStyles(l)},getGalleryCarouselStyle=e=>{let t=y({shape:e.shape,shapeForBottom:e.shapeForBottom,shapeFor1Col:e.shapeFor1Col,shapeFor2Col:e.shapeFor2Col,shapeForFtOnly:e.shapeForFtOnly,shapeForInsideBottom:e.shapeForInsideBottom,shapeForInside:e.shapeForInside},e.position),o=o=>{let r=a(e?.position,o),i="bottom-center"===r||"inside-bottom"===r,l="inside-left"===r||"inside-right"===r||"left"===r||"right"===r,s=a(t,o);return i||l||!s?.width?"100%":s.width},r={spacing:g(e?.itemSpacing),sizeSetting:{desktop:{width:o("desktop"),height:"100%"},tablet:{width:o("tablet"),height:"100%"},mobile:{width:o("mobile"),height:"100%"}}};return filterTruthyStyles(r)},getGalleryCarouselItemStyle=a=>{let l=y({shape:a.shape,shapeForBottom:a.shapeForBottom,shapeFor1Col:a.shapeFor1Col,shapeFor2Col:a.shapeFor2Col,shapeForFtOnly:a.shapeForFtOnly,shapeForInsideBottom:a.shapeForInsideBottom,shapeForInside:a.shapeForInside},a.position),s=e("minw",r(c({shapeByLayout:l,position:a.position,spacing:a.itemSpacing}))),n=e("maxw",r(c({shapeByLayout:l,position:a.position,spacing:a.itemSpacing}))),p=e("w",r(I({shapeByLayout:l,position:a.position}))),h=e("h",t(o(l))),m={"outline-color":"var(--g-c-brand, brand)",...s,...n,...p,...h,...i({normal:a.corner})};return filterTruthyStyles(m)},getFeaturedImageCarouselStyle=e=>{let t=t=>{let o=a(e.ftShape,t);return o?.width??"100%"},o={playSpeed:e?.ftAnimationSpeed,sizeSetting:{desktop:{width:t("desktop"),height:"auto"},tablet:{width:t("tablet"),height:"auto"},mobile:{width:t("mobile"),height:"auto"}},align:{desktop:a(e?.align,"desktop"),tablet:a(e?.align,"tablet"),mobile:a(e?.align,"mobile")}};return filterTruthyStyles(o)},getFeaturedImageOnlyOneImageStyle=({setting:r,options:a})=>{let n=o(r?.ftShape),p={...l("w",s(r?.ftShape,!1,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),...a?.enableRadius&&i({normal:r?.ftCorner}),...a?.enableHeight&&e("h",t(n))};return filterTruthyStyles(p)};export{getFeatureImageCarouselItemStyle,getFeatureImageStyle,getFeaturedImageCarouselStyle,getFeaturedImageOnlyOneImageStyle,getGalleryCarouselItemStyle,getGalleryCarouselStyle,getGalleryGridItemStyle,getGalleryGridStyle,getGalleryImageStyle,getWrapContainerStyle};

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

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

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

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

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

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as i,cls as o}from"@gem-sdk/core";import{useRef as a,useCallback as l}from"react";import s from"../gallery-carousel/GalleryCarousel.js";import d from"../child/ProductGalleryGrid.js";import m from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as n}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as p}from"../../hooks/useFeatureImageWithGallery.js";let FeatureImageWithGallery=c=>{let{setting:g,styles:I,builderProps:f,gallery:h,onHandleClickImage:y,priorityFeatureImage:b,children:C,noDataChildren:F}=c,P=a(null),v=i(),j=l(e=>{if(!P.current)return;let r=P.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),k={...g,...I},{isShowCarousel:w,featureImageHeight:x,featureWrapperImage:G,onClickFeatureArrow:H,activeIndexFromFeatureImage:N,setOnClickFeatureArrow:S,onHandleLoadedFeatureImage:U,setActiveIndexFromFeatureImage:A}=p(c);if(h?.[0]?.id==="noImageError")return e(r,{children:F});let{ftImageGalleryClasses:D,imageGalleryWrapperClasses:W}=n(c),{wrapperFeaturedImageStyle:R,featureImageStyle:$,galleryImageStyle:E}=u(k,{gallery:h,featureImageHeight:x}),J=JSON.stringify(k?.position)+v+w;return t("div",{className:o("gp-grid gp-w-full gp-relative"),style:R,children:[e("div",{className:D,style:$,children:e(m,{ref:P,imgRef:G,productImages:h,...k,onHandleClick:(e,r)=>y(e||"",r),onHandleLoaded:U,onHandleUpdateActiveIndex:A,onClickArrow:e=>S(e),builderPropUID:f?.uid,builderPropsClass:`gp-product-images-feature-${f?.uid}`,children:C})}),h.length>1&&e("div",{className:W,style:E,children:w?e(s,{productImages:h,position:k?.position,...k,builderPropUID:f?.uid,onHandleClick:(e,r)=>y(e||"",r),onSwiperReady:j,activeIndexFormFeatureImage:N,priorityFeatureImage:b,onClickFeatureArrow:H,builderPropsClass:`gp-product-images-gallery-${f?.uid}`}):e(d,{productImages:h,...k,builderPropUID:f?.uid,onHandleClick:(e,r)=>y(e||"",r),activeIndexFromFeatureImage:N,isHiddenInteraction:!0})})]},J)};export{FeatureImageWithGallery as default};
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{cls as a}from"@gem-sdk/core";import l from"../gallery-carousel/GalleryCarousel.js";import i from"../child/ProductGalleryGrid.js";import t from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as s}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as m}from"../../hooks/useFeatureImageWithGallery.js";let FeatureImageWithGallery=u=>{let{setting:c,styles:n,builderProps:p,gallery:g,onHandleClickImage:I,priorityFeatureImage:f,children:h,noDataChildren:y}=u,C={...c,...n},{isShowCarousel:F,featureImageHeight:P,featureWrapperImage:b,onClickFeatureArrow:j,activeIndexFromFeatureImage:k,setOnClickFeatureArrow:v,onHandleLoadedFeatureImage:G,setActiveIndexFromFeatureImage:H}=m(u);if(g?.[0]?.id==="noImageError")return e(r,{children:y});let{ftImageGalleryClasses:x,imageGalleryWrapperClasses:N}=s(u),{wrapperFeaturedImageStyle:U,featureImageStyle:w,galleryImageStyle:A}=d(C,{gallery:g,featureImageHeight:P});return o("div",{className:a("gp-grid gp-w-full gp-relative"),style:U,children:[e("div",{className:x,style:w,children:e(t,{imgRef:b,productImages:g,...C,onHandleClick:(e,r)=>I(e||"",r),onHandleLoaded:G,onHandleUpdateActiveIndex:H,onClickArrow:e=>v(e),builderPropUID:p?.uid,builderPropsClass:`gp-product-images-feature-${p?.uid}`,children:h})}),g.length>1&&e("div",{className:N,style:A,children:F?e(l,{productImages:g,position:C?.position,...C,builderPropUID:p?.uid,onHandleClick:(e,r)=>I(e||"",r),activeIndexFormFeatureImage:k,priorityFeatureImage:f,onClickFeatureArrow:j,builderPropsClass:`gp-product-images-gallery-${p?.uid}`}):e(i,{productImages:g,...C,builderPropUID:p?.uid,onHandleClick:(e,r)=>I(e||"",r),activeIndexFormFeatureImage:k,isHiddenInteraction:!0})})]})};export{FeatureImageWithGallery as default};

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

@@ -1,79 +1,79 @@
-import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getVideoHeight as o,getZoomImageClass as u,getZoomLenClass as m}from"../../common/productFeaturedImage.js";import l from"../../../../../video/components/HTML5Embed.liquid.js";import g from"../../../../../image/components/Modal3d.liquid.js";import p from"../../../../../image/components/NextImage.liquid.js";import n from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as f}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as h}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as y}from"../../composables/getProductImagesAttr.js";import{LiquidIf as M,LiquidFor as $,Liquid as _,If as b,createStyle as w}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import I from"../../../../../carousel/components/item/CarouselItem.liquid.js";let FeatureImageWithGallery=({builderPropUID:x,children:q,enableLazyLoadImage:j,...z})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:R}=h(z),{featuredImageCarouselStyle:W,featureImageStyle:P,featureImageCarouselOnlyOneImageStyle:C,featureImageOnlyOneImageStyle:T,featureImageCarouselItemStyle:N}=f(z),{featuredImageCarouselSettingAttrs:k}=y(z),E=t(z.ftShape),O=()=>`
+import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import l from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as M,Liquid as $,If as _}from"@gem-sdk/system";import b from"../../../../../carousel/components/root/Carousel.liquid.js";import w from"../../../../../carousel/components/item/CarouselItem.liquid.js";let FeatureImageWithGallery=({builderPropUID:v,children:I,enableLazyLoadImage:x,...q})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:j,featuredCarouselItemClasses:S}=f(q),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:P,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:T}=c(q),{featuredImageCarouselSettingAttrs:L}=h(q),N=t(q.ftShape),k=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
-        ${F()}
+        ${D()}
       {% when 'external_video' %}
         {% assign mediaSourceVideo = featureMedia | external_video_url %}
-        ${D()}
+        ${O()}
       {% when 'video' %}
         {% assign mediaSourceVideo = featureMedia.sources.last.url %}
-        ${V()}
-      {% when 'model' %}
         ${A()}
+      {% when 'model' %}
+        ${E()}
       {% else %}
-        ${G()}
+        ${F()}
     {% endcase %}
-    `,A=()=>g({src:M("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:E}),D=()=>n({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:E}),V=()=>{let a=w({...o(z?.ftLayout),...e("objf",z?.ftLayout)}),i=w({...o(z?.ftLayout)});return l({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:i,style:{width:"100%","max-height":"100%",...a},className:"gp-invisible"})},F=()=>a`
-      ${H(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==z.hoverEffect},"{{shouldHidden}}"))}
-      ${b(z?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",u())}">
-            ${H("image-zoom",!0)}
+    `,E=()=>l({src:y("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:N}),O=()=>p({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:N}),A=()=>m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,style:{width:"100%","max-height":"100%"},className:"gp-invisible"}),D=()=>a`
+      ${V(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==q.hoverEffect},"{{shouldHidden}}"))}
+      ${_(q?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",o())}">
+            ${V("image-zoom",!0)}
           </div>`," ")}
-      ${b(z?.hoverEffect=="zoom"&&z?.zoomType=="glasses",`<div class="${i("zoom-lens-element",m())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
-    `,H=(e,i)=>a`
+      ${_(q?.hoverEffect=="zoom"&&q?.zoomType=="glasses",`<div class="${i("zoom-lens-element",u())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
+    `,V=(e,i)=>a`
     {% assign src = featureMedia.src %}
-    ${b(i&&"other"==z.hoverEffect,`{% assign media_length = product.media | size %}
-      {% assign other_image_index = ${z.otherImage} | plus: 0 %}
+    ${_(i&&"other"==q.hoverEffect,`{% assign media_length = product.media | size %}
+      {% assign other_image_index = ${q.otherImage} | plus: 0 %}
       {% if other_image_index >= media_length %}
         {% assign other_image_index = media_length | minus: 1 %}
       {% endif %}
       {% assign otherImage = product.media[other_image_index] %}
-      ${M("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
+      ${y("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${p({srcIsLiquidCode:!0,src:M("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:M("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e}`,enableLazyLoadImage:j})}`,G=()=>a`
-    ${p({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:j})}`,J=r(z.ftShape),B=a=>`
-    ${_(`{% assign productImageWidth = 0 %}
+    ${g({srcIsLiquidCode:!0,src:y("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:y("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e}`,enableLazyLoadImage:x})}`,F=()=>a`
+    ${g({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:x})}`,H=r(q.ftShape),G=a=>`
+    ${$(`{% assign productImageWidth = 0 %}
     {% case featureMedia.media_type %}
       {% when 'image' %}
         {% assign productImageWidth = featureMedia.width %}
       {% else %}
         {% assign productImageWidth = featureMedia.preview_image.width %}
     {% endcase %}`)}
-    ${I({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${L(`gp-ft-image-item !gp-min-w-full !gp-max-w-full' ${a}`)}`,parentId:`ft-${x}-{{section.id}}-{{product.id}}`,style:N,customStyle:{width:"{{productImageWidth}}px"},children:`
+    ${w({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${j(`gp-ft-image-item !gp-min-w-full !gp-max-w-full' ${a}`)}`,parentId:`${v}-{{section.id}}-{{product.id}}`,style:T,customStyle:{width:"{{productImageWidth}}px"},children:`
       <div
-        class="gp-w-full gp-relative ${M("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-        style="${c(e("pb",J))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+        class="gp-w-full gp-relative ${y("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
+        style="${n(e("pb",H))} ${y("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
       >
-        ${O()}
+        ${k()}
       </div>
-      `})}`,K=d(z),Q="gp-featured-image-wrapper",U=M("product.media.size > 0",`${q||""} {% assign largestRatio = 0 %}
-      ${$("featureMedia in product.media",`
+      `})}`,J=d(q),B="gp-featured-image-wrapper",K=y("product.media.size > 0",`${I||""} {% assign largestRatio = 0 %}
+      ${M("featureMedia in product.media",`
           {% assign height = featureMedia.height | times: 1.0 %}
           {% assign width = featureMedia.width | times: 1.0 %}
           {% assign ratio = height | divided_by: width %}
-          ${M("ratio > largestRatio","{% assign largestRatio = ratio %}")}
+          ${y("ratio > largestRatio","{% assign largestRatio = ratio %}")}
         `)}
-      ${$("featureMedia in product.media",`${M("featureMedia.media_type == 'image'",`${$("image in product.images",M("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
-        ${B()}`)}
-    `,p({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:z?.preload,setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:j})),X=()=>`
-      ${v({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${S}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:k,rootStyles:P,styles:W,style:{playSpeed:600},disableMarginAuto:!0,children:U})}
-    `,Y=()=>{switch(z?.preDisplay){case"1st-images":return`
+      ${M("featureMedia in product.media",`${y("featureMedia.media_type == 'image'",`${M("image in product.images",y("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
+        ${G()}`)}
+    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:q?.preload,setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:x})),Q=()=>`
+      ${b({builderProps:{uid:v},rootId:`ft-${v}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:B,rootClass:`${z}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:L,rootStyles:W,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:K})}
+    `,U=()=>{switch(q?.preDisplay){case"1st-images":return`
           {% assign featureMedia = product.media.first %}
-        `;case"1st-3d-mode":return $("media in product.media",M("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return $("media in product.media",M("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
+        `;case"1st-3d-mode":return M("media in product.media",y("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return M("media in product.media",y("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
           {% assign featureMedia = variant.featured_media %}
           {% unless featureMedia %}
           {% assign featureMedia = product.featured_media %}
           {% endunless %}
-        `}},Z=()=>_(`
+        `}},X=()=>$(`
         {% assign featureMedia = variant.featured_media %}
         {% unless featureMedia %}
         {% assign featureMedia = product.featured_media %}
         {% endunless %}
-        ${M("product.media.size > 1",Y())}
+        ${y("product.media.size > 1",U())}
         {% assign largestRatio = 0 %}
         {% assign height = featureMedia.height | times: 1.0 %}
         {% assign width = featureMedia.width | times: 1.0 %}
         {% assign ratio = height | divided_by: width %}
-        ${M("ratio > largestRatio","{% assign largestRatio = ratio %}")}
+        ${y("ratio > largestRatio","{% assign largestRatio = ratio %}")}
         {% assign productImageWidth = 0 %}
         {% case featureMedia.media_type %}
           {% when 'image' %}
@@ -81,38 +81,38 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
           {% else %}
             {% assign productImageWidth = featureMedia.preview_image.width %}
         {% endcase %}
-        ${M("featureMedia == null","{% assign productImageWidth = 1600 %}")}
+        ${y("featureMedia == null","{% assign productImageWidth = 1600 %}")}
         <div
           class='gp-feature-image-carousel gp-feature-image-only'
-          style="${c(P)}"
+          style="${n(W)}"
         >
           <div
             class="gp-relative"
-            style="${c(T)}"
+            style="${n(C)}"
           >
-            ${q}
+            ${I}
             <div
               type="gp-feature-image-only"
               product-id="{{product.id}}"
               product-media="{{product.media.size}}"
-              class="${R(Q)}"
-              style="${c(C)}"
+              class="${S(B)}"
+              style="${n(P)}"
             >
               <div
-                class="gp-w-full gp-relative ${M("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-                style="${c(e("pb",J))} ${M("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+                class="gp-w-full gp-relative ${y("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
+                style="${n(e("pb",H))} ${y("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
               >
-                ${O()}
+                ${k()}
               </div>
             </div>
           </div>
         </div>
-      `);return _(`
+      `);return $(`
     {% capture featureImageOnlyOne %}
-      ${Z()}
+      ${X()}
     {% endcapture %}
-    ${M("product.media.size > 1",`
-        ${b(K,X()," ")}
-        ${b(!K,"{{ featureImageOnlyOne }}"," ")}
+    ${y("product.media.size > 1",`
+        ${_(J,Q()," ")}
+        ${_(!J,"{{ featureImageOnlyOne }}"," ")}
       `,"{{ featureImageOnlyOne }}")}
   `)};export{FeatureImageWithGallery as default};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s}from"../../common/common.js";import{getEditorMinHeightClass as m}from"../../common/productGallery.js";import{getProductImagesClassName as a}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as i}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as l}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as n}from"../../common/productFeaturedImage.js";import c from"../child/MediaIcon.js";import p from"../lightbox/ButtonOpenLightBox.js";import d from"../../../../../image/components/NextImage.js";import u from"../../../../../carousel/components/root/Carousel.js";import g from"../../../../../carousel/components/item/CarouselItem.js";import{useGalleryCarousel as y}from"../../hooks/useGalleryCarousel.js";import{If as h}from"@gem-sdk/system";let ProductGalleryCarousel=f=>{let{builderPropUID:j,productImages:C,onSwiperReady:I,activeIndexFormFeatureImage:b,onClickFeatureArrow:P,builderPropsClass:T,arrow:w,priorityFeatureImage:x,...k}=f,q=r(),{galleryItemClasses:G}=a(k),{galleryCarouselSettingAttrs:N}=l(k),{galleryCarouselStyle:v,galleryCarouselItemStyle:A}=i(k),{isDisplay:S,shapeByLayout:B,isShowButtonLightbox:H,filteredProductImages:L,handleClickCarouselItem:M,safeMoveToIdx:R,setSliderReady:$}=y(f);return e(o,{children:S&&e(u,{parentClass:T,rootClass:T,setting:N,styles:v,slidesClass:m(q,k.position,k.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:R,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&$(!0)},onSwiperReady:I,children:L?.map(o=>{let r=n(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:G(`gp-gallery-image-item gem-slider-item-${j}`),onClickItem:()=>M(o?.id),style:A,"data-id":o?.id,children:[e(d,{draggable:"false",src:r,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(B),layout:k?.layout,qualityPercent:k?.qualityPercent,qualityType:k?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(c,{contentType:o?.contentType||""}),h(H,e(p,{}))]},o?.id)})})})};export{ProductGalleryCarousel as default};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s}from"../../common/common.js";import{getEditorMinHeightClass as i}from"../../common/productGallery.js";import{getProductImagesClassName as m}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as l}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as c}from"../../common/productFeaturedImage.js";import d from"../child/MediaIcon.js";import n from"../lightbox/ButtonOpenLightBox.js";import p from"../../../../../image/components/NextImage.js";import u from"../../../../../carousel/components/root/Carousel.js";import g from"../../../../../carousel/components/item/CarouselItem.js";import{useGalleryCarousel as y}from"../../hooks/useGalleryCarousel.js";import{If as f}from"@gem-sdk/system";let ProductGalleryCarousel=h=>{let{builderPropUID:j,productImages:I,activeIndexFormFeatureImage:b,onClickFeatureArrow:C,builderPropsClass:P,arrow:v,priorityFeatureImage:T,...x}=h,w=r(),{galleryItemClasses:k}=m(x),{galleryCarouselSettingAttrs:q}=l(x),{galleryCarouselStyle:A,galleryCarouselItemStyle:G}=a(x),{moveToIdx:N,isDisplay:$,shapeByLayout:B,isEnableBorderActive:L,isShowButtonLightbox:M,filteredProductImages:D,handleClickCarouselItem:F,safeMoveToIdx:H,setSliderReady:O}=y(h);return e(o,{children:$&&e(u,{parentClass:P,rootClass:P,setting:q,styles:A,slidesClass:i(w,x.position,x.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:H,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,onLoaded:e=>{e&&O(!0)},children:D?.map((o,r)=>{let i=r===N,m=c(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:k(`gp-gallery-image-item gem-slider-item-${j} ${i&&L?"gem-slider-item-active":""}`),onClickItem:()=>F(o?.id),style:G,"data-id":o?.id,"data-border":i&&x?.borderActive?"active":"deactive",children:[e(p,{draggable:"false",src:m,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(B),layout:x?.layout,qualityPercent:x?.qualityPercent,qualityType:x?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(d,{contentType:o?.contentType||""}),f(M,e(n,{}))]},o?.id)})})})};export{ProductGalleryCarousel as default};

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

@@ -1,20 +1,20 @@
-import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import i from"../../../../../image/components/NextImage.liquid.js";import{getDisplayStyle as o,getAspectRatio as r,getSrcImage as s}from"../../common/common.js";import{getShapeByLayout as a,getMinHeightByPosition as p,checkDisplayGalleryByWidth as l,getZoomDisplay as d,getCarouselVerticalConfigByPosition as m}from"../../common/productGallery.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getProductImagesStyles as n}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{LiquidIf as C,LiquidFor as h}from"@gem-sdk/system";import y from"../../../../../carousel/components/root/Carousel.liquid.js";import v from"../../../../../carousel/components/item/CarouselItem.liquid.js";let ProductGalleryCarousel=({builderPropUID:b,children:f,enableLazyLoadImage:w,...L})=>{let{featuredImageGalleryClasses:F,galleryItemClasses:x}=c(L),{galleryCarouselSettingAttrs:$}=u(L),{galleryCarouselStyle:I,galleryCarouselItemStyle:_}=n(L),k=()=>{let e=(e,i,o)=>{let r=t(i,o),s=t(e,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),p=["left","right","inside-left","inside-right"].includes(r??"");return p||a},i=l({shapeByLayout:j}),r={desktop:i.desktop&&e(L.type,L.position,"desktop"),tablet:i.tablet&&e(L.type,L.position,"tablet"),mobile:i.mobile&&e(L.type,L.position,"mobile")};return o(e=>!r[e],"flex")},j=a({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),V=(t,o)=>e`${i({srcIsLiquidCode:!0,src:`${s("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",style:o,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:w})}`,M=e=>`
-    ${C("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
-    ${C("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
-    ${C("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
-    ${v({id:"{{imageID}}",contentType:"productImage",className:`${x(`gp-gallery-image-item ${e}`)}`,parentId:`${b}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:_,children:`
-      <div class="gp-w-full gp-relative gp-h-full"
-        
+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=>`
+    ${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"
+        style="${c(t("pb",Z))};"
       >
-      ${V({aspectRatio:r(j),layout:L?.layout,qualityPercent:L?.qualityPercent,qualityType:L?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
+      ${P({aspectRatio:a(M),layout:$?.layout,qualityPercent:$?.qualityPercent,qualityType:$?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
 
-    ${C("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" >
+    ${y("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"/>
         <path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
       </svg>
     </div>`)}
-    ${C("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
+    ${y("media.media_type == 'model'",`<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"/>
         <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"/>
@@ -22,7 +22,7 @@ import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import
     </div>`)}
 
     <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="${g(d(L?.clickOpenLightBox))}"
+    style="${c(g($?.clickOpenLightBox))}"
     >
       <svg
         height="100%"
@@ -40,7 +40,7 @@ import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import
       </svg>
     </div>
     </div>
-    `})}`,P=()=>{let e=m(L.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`},Z=C("product.media.size > 1",h("media in product.media",`${C("media.media_type == 'image'",h("image in product.images",C("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
-          ${C("media.id == product.featured_media.id ",M(L?.borderActive?.border!=="none"?"active":""),M())}`));return e`
-    ${y({builderProps:{uid:b},rootId:`${b}-{{product.id}}`,rootClass:`${F}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:P(),slidesClass:p(L.position,L.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:$,rootStyles:{...k()},styles:I,disableMarginAuto:!0,children:Z})}
+    `})}`,B=()=>{let e=n($.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`},A=y("product.media.size > 1",b("media in product.media",`${y("media.media_type == 'image'",b("image in product.images",y("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
+          ${y("media.id == product.featured_media.id ",q($?.borderActive?.border!=="none"?"active":""),q())}`));return e`
+    ${v({builderProps:{uid:w},rootId:`${w}-{{product.id}}`,rootClass:`${x}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:B(),slidesClass:d($.position,$.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:_,rootStyles:{...V()},styles:k,disableMarginAuto:!0,children:A})}
   `};export{ProductGalleryCarousel as default};

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 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};
+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};

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 n from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as c,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let ProductGalleryGrid=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t=["desktop","mobile","tablet"],o={desktop:"none",tablet:"none",mobile:"none"};return t.forEach(e=>{let t=a(L?.position,e)||"",s="one-col"===t||"two-col"===t,d=i?!s:s;o[e]=d?"block":"none"}),e("d",o)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
+import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import 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`
       ${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: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`
+    `,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`
       ${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:c(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},{width:"100%",height:"100%"})}
+      ${Z({aspectRatio:n(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="${g(v(L?.clickOpenLightBox))}" >
+        style="${c(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="none"
-      class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i} data-[outline=deactive]:after:!gp-border-transparent`)}"
-      style="${g(I)}"
+      data-outline="${i?"active":"deactive"}"
+      class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i}`)}"
+      style="${c(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",g({...S()}))}">
+      <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()}))}">
         ${d("media != null",P(),T())}
       </div>
 
       <div class="${d("isMedia","gp-flex gp-justify-center gp-items-center")}"
-      style="${d("isMedia",g({...e("aspect",c(M))}))} ${g({...k()})}"
+      style="${d("isMedia",c({...e("aspect",n(M))}))} ${c({...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:c(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
+    ${m({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
   <div type="grid-gallery"
     class="${V}"
-    style="${g(q)}}"
+    style="${c(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 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};
+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};

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

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

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

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

@@ -0,0 +1,26 @@
+'use client';
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as C,useProduct as o,useCurrentDevice as l,useCurrentVariant as d,useSelectedOption as r,useEditorMode as n,useProductStore as s,getResponsiveValueByScreen as p,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as m,useState as f,useEffect as g,Children as h,isValidElement as u}from"react";import y from"./components/feature-gallery/FeatureImageWithGallery.js";import D from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import b from"../../../common/components/NoDataState.js";import{getProductImagesClassName as M}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as E}from"./common/getBorderActiveCss.js";import Z from"./components/gallery-grid/GalleryGrid.js";let getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),LAYOUT_FEATURE_IMAGE_GALLERY=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],ProductImagesV2=k=>{let w=m(()=>a(k),[k]),{redirectProductShopifyLink:L}=C(),{setting:A,styles:V,builderProps:v,builderAttrs:x,style:H,children:P}=w,G=o(),O=l(),T=d(),{isChangeSelectedOption:_}=r(),S=n(),j=s(e=>e.setProductFeaturedImage),[F,B]=f(!1),R=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,N=e=>e?.featuredImage,U=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,Y=m(()=>A?.typeDisplay==="all-images"&&!_,[_,A?.typeDisplay]),z=m(()=>{if(Y){let e;switch(A?.preDisplay){case"1st-images":e=N(G);break;case"1st-3d-mode":e=U(G);break;case"1st-video":e=R(G);break;case"1st-available-variant":e=T?.media}return j(e),e}},[Y,A?.preDisplay,j,G,T?.media]),J=m(()=>{let e=getProductGallery(G);return e?.length?e:[{id:G?.featuredImage?.id||"noImageError",src:G?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:G?.featuredImage?.width||480,height:G?.featuredImage?.height||480}]},[G]),W=m(()=>J.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[J]),X=m(()=>p(V?.position,O),[O,V?.position]),q=(e,t)=>{Q(e),t&&K()},K=()=>{B(!0)},Q=e=>{if(!e)return;let t=W[e];if(void 0!==t){let e=J[t];e&&j(e)}};g(()=>{if(T&&!Y){let e=W[T?.mediaId];if(void 0!==e){let t=J[e]??G?.featuredImage;t&&j(t)}}},[T,W,J,G?.featuredImage,j,Y]);let $=m(()=>{let e="popup"===p(A?.ftClickOpenLightBox,O)||p(A?.clickOpenLightBox,O);return e||"edit"!==S||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[A?.ftClickOpenLightBox,A?.clickOpenLightBox,O,S]),ee=()=>J.length>0?h.map(c(P),e=>u(e)?t(e.type,{...e.props,isInsideProductImage:!0,navigationPosition:A?.ftNavigationPosition,imageData:{imageShape:V?.ftShape,imageAlign:V?.align,imageLayout:V?.position},dotData:{dotSize:A?.ftDotSize,dotGapToCarousel:A?.ftDotGapToCarousel,dotStyle:A?.ftDotStyle}}):null):null,et=`
+      <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
+        <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
+        <path d="M225.946 320.879C225.946 320.879 169.954 292.883 177.953 214.227C185.952 135.571 183.286 143.57 183.286 143.57C183.286 143.57 196.617 99.5762 220.614 83.5784C220.614 83.5784 163.289 24.9199 117.962 131.572C117.962 131.572 105.963 195.563 115.295 238.224C124.627 280.884 145.958 315.546 145.958 315.546C145.958 315.546 165.955 335.543 188.618 335.543C211.282 335.543 225.946 320.879 225.946 320.879Z" fill="#CCCCCC"/>
+        <path d="M318.6 273.553C318.6 273.553 286.605 358.875 186.619 342.877C86.6325 326.879 113.295 153.57 113.295 153.57C113.295 153.57 102.123 282.854 160.581 320.874C176.779 331.409 197.935 331.504 213.408 319.93C223.66 312.261 232.445 298.883 231.279 275.553L318.6 273.553Z" fill="#E6E6E6"/>
+        <path d="M315.483 111.223C315.483 111.223 269.94 28.9197 171.287 56.9158C110.135 82.9705 111.274 150.057 111.274 150.057C103.9 261.289 183.264 259.493 201.95 140.904C205.231 120.082 198.617 108.242 198.617 108.242C198.617 108.242 189.285 136.238 160.622 142.237C131.915 148.246 127.007 138.688 127.96 124.24C127.97 124.095 127.979 123.952 127.989 123.809C128.775 112.106 133.316 100.968 140.937 92.0518C157.37 72.918 193.19 44.9769 231.279 103.576L233.945 110.169C233.945 110.169 281.036 122.87 315.483 111.223Z" fill="#E6E6E6"/>
+        <path d="M241.931 108.909C235.042 108.916 228.438 111.656 223.567 116.528C218.696 121.399 215.956 128.003 215.948 134.892V257.167C215.956 264.339 218.809 271.214 223.88 276.286C228.951 281.357 235.827 284.21 242.999 284.218H307.331C315.974 284.208 324.26 280.77 330.371 274.659C336.483 268.547 339.921 260.261 339.931 251.618V141.762C339.921 133.052 336.456 124.701 330.297 118.542C324.138 112.383 315.787 108.918 307.077 108.909L241.931 108.909Z" fill="#ADADAD"/>
+        <path d="M253.087 114.24C249.426 114.244 245.916 115.7 243.327 118.289C240.738 120.878 239.282 124.388 239.278 128.049V265.741C239.282 269.402 240.738 272.912 243.327 275.501C245.916 278.09 249.426 279.546 253.087 279.55H314.265C321.6 279.542 328.631 276.624 333.818 271.438C339.004 266.251 341.922 259.219 341.93 251.885V138.614C341.923 132.152 339.353 125.956 334.783 121.387C330.214 116.817 324.018 114.247 317.556 114.24H253.087Z" fill="#D2D2D2"/>
+        <path opacity="0.1" d="M250.832 115.006C249.11 116.287 247.711 117.953 246.747 119.87C245.782 121.788 245.279 123.904 245.277 126.05V263.742C245.281 267.403 246.737 270.913 249.326 273.502C251.915 276.091 255.425 277.547 259.086 277.551H320.264C322.585 277.542 324.895 277.24 327.14 276.651C323.01 278.99 318.344 280.218 313.598 280.217H252.421C248.759 280.213 245.249 278.757 242.66 276.168C240.072 273.579 238.615 270.069 238.611 266.408V128.716C238.616 125.331 239.863 122.065 242.116 119.538C244.368 117.011 247.469 115.399 250.832 115.006Z" fill="black"/>
+        <path d="M220.614 180.899C227.977 180.899 233.945 173.439 233.945 164.235C233.945 155.032 227.977 147.571 220.614 147.571C213.251 147.571 207.282 155.032 207.282 164.235C207.282 173.439 213.251 180.899 220.614 180.899Z" fill="#D6D6D6"/>
+        <path opacity="0.2" d="M229.946 164.235C229.946 156.173 225.366 149.45 219.281 147.905C220.152 147.684 221.048 147.571 221.947 147.571C229.31 147.571 235.278 155.032 235.278 164.235C235.278 173.439 229.31 180.9 221.947 180.9C221.048 180.899 220.152 180.787 219.281 180.565C225.366 179.021 229.946 172.297 229.946 164.235Z" fill="black"/>
+        <path d="M217.948 206.895V241.556C217.948 242.794 218.439 243.981 219.314 244.856C220.189 245.731 221.376 246.222 222.614 246.222C223.851 246.222 225.038 245.731 225.913 244.856C226.788 243.981 227.28 242.794 227.28 241.556V206.895C227.28 205.657 226.788 204.47 225.913 203.595C225.038 202.72 223.851 202.229 222.614 202.229C221.376 202.229 220.189 202.72 219.314 203.595C218.439 204.47 217.948 205.657 217.948 206.895Z" fill="#D6D6D6"/>
+        <path opacity="0.2" d="M225.28 241.556V206.895C225.276 205.893 224.95 204.92 224.35 204.119C223.749 203.317 222.907 202.731 221.947 202.446C222.378 202.308 222.828 202.235 223.28 202.229C224.517 202.23 225.703 202.722 226.578 203.597C227.453 204.472 227.945 205.657 227.946 206.895V241.556C227.945 242.793 227.453 243.979 226.578 244.854C225.703 245.729 224.517 246.221 223.28 246.222C222.828 246.216 222.378 246.143 221.947 246.005C222.907 245.72 223.749 245.134 224.35 244.332C224.95 243.531 225.276 242.558 225.28 241.556Z" fill="black"/>
+        <path d="M151.29 278.218C154.972 278.218 157.956 275.234 157.956 271.552C157.956 267.871 154.972 264.887 151.29 264.887C147.609 264.887 144.624 267.871 144.624 271.552C144.624 275.234 147.609 278.218 151.29 278.218Z" fill="white"/>
+        <path opacity="0.3" d="M155.29 271.552C155.289 270.016 154.759 268.527 153.787 267.337C152.815 266.147 151.462 265.329 149.957 265.021C150.925 264.824 151.926 264.844 152.885 265.081C153.845 265.317 154.74 265.765 155.505 266.39C156.27 267.015 156.887 267.802 157.311 268.695C157.735 269.588 157.954 270.564 157.954 271.552C157.954 272.541 157.735 273.517 157.311 274.41C156.887 275.302 156.27 276.09 155.505 276.715C154.74 277.34 153.845 277.787 152.885 278.024C151.926 278.261 150.925 278.281 149.957 278.084C151.462 277.776 152.815 276.958 153.787 275.768C154.759 274.578 155.289 273.089 155.29 271.552Z" fill="black"/>
+        <path d="M148.284 251.766C151.966 251.766 154.95 248.782 154.95 245.1C154.95 241.419 151.966 238.435 148.284 238.435C144.603 238.435 141.618 241.419 141.618 245.1C141.618 248.782 144.603 251.766 148.284 251.766Z" fill="white"/>
+        <path opacity="0.3" d="M152.284 245.1C152.283 243.564 151.753 242.075 150.781 240.885C149.809 239.694 148.456 238.876 146.951 238.569C147.919 238.371 148.92 238.392 149.879 238.629C150.839 238.865 151.734 239.312 152.499 239.938C153.264 240.563 153.881 241.35 154.305 242.243C154.729 243.136 154.948 244.112 154.948 245.1C154.948 246.089 154.729 247.065 154.305 247.957C153.881 248.85 153.264 249.638 152.499 250.263C151.734 250.888 150.839 251.335 149.879 251.572C148.92 251.809 147.919 251.829 146.951 251.632C148.456 251.324 149.809 250.506 150.781 249.316C151.753 248.126 152.283 246.637 152.284 245.1Z" fill="black"/>
+        <path d="M155.29 130.239C158.971 130.239 161.955 127.254 161.955 123.573C161.955 119.892 158.971 116.907 155.29 116.907C151.608 116.907 148.624 119.892 148.624 123.573C148.624 127.254 151.608 130.239 155.29 130.239Z" fill="white"/>
+        <path opacity="0.3" d="M159.289 123.573C159.289 122.037 158.758 120.547 157.786 119.357C156.815 118.167 155.462 117.349 153.956 117.042C154.925 116.844 155.925 116.865 156.885 117.101C157.844 117.338 158.739 117.785 159.504 118.41C160.27 119.035 160.887 119.823 161.31 120.716C161.734 121.609 161.954 122.585 161.954 123.573C161.954 124.561 161.734 125.537 161.31 126.43C160.887 127.323 160.27 128.111 159.504 128.736C158.739 129.361 157.844 129.808 156.885 130.045C155.925 130.281 154.925 130.302 153.956 130.104C155.462 129.797 156.815 128.979 157.786 127.789C158.758 126.599 159.289 125.109 159.289 123.573Z" fill="black"/>
+        <path opacity="0.2" d="M293.196 217.389C300.559 217.389 306.528 209.928 306.528 200.724C306.528 191.521 300.559 184.06 293.196 184.06C285.833 184.06 279.865 191.521 279.865 200.724C279.865 209.928 285.833 217.389 293.196 217.389Z" fill="white"/>
+        <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
+        <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
+      </svg>
+    `,ea=t(b,{elementType:"secondary",description:"Catch your customer's attention with attracted media.",descriptionActions:[{text:"Add image",callback:L},{text:"sync data",callback:"syncProduct"}],additionalMedia:et}),{wrapperClasses:ei}=M(k);return e("div",{...x,className:ei,style:H,children:[t("style",{dangerouslySetInnerHTML:{__html:E({settings:{...A,...V},uid:v?.uid,type:"React"})}}),LAYOUT_FEATURE_IMAGE_GALLERY.includes(X)&&t(y,{...w,gallery:J,priorityFeatureImage:z,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),"only-feature"===X&&t(D,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),["one-col","two-col"].includes(X)&&t(Z,{gallery:J,...w,onHandleClickImage:(e,t)=>q(e||"",t),noDataChildren:ea,children:ee()}),$&&t(I,{productImages:J,builderPropUID:v?.uid,open:F,onHandleClose:()=>B(!1),imageRatio:i(V?.ftShape)}),c(P,!0)]})};export{ProductImagesV2 as default};