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

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 m}from"../../common/productGallery.js";import{getProductImagesClassName as i}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 n 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 f}from"@gem-sdk/system";let ProductGalleryCarousel=h=>{let{builderPropUID:j,productImages:C,activeIndexFormFeatureImage:I,onClickFeatureArrow:P,builderPropsClass:b,arrow:T,priorityFeatureImage:w,...x}=h,k=r(),{galleryItemClasses:q}=i(x),{galleryCarouselSettingAttrs:G}=l(x),{galleryCarouselStyle:N,galleryCarouselItemStyle:A}=a(x),{isDisplay:v,shapeByLayout:B,isShowButtonLightbox:M,filteredProductImages:$,handleClickCarouselItem:D}=y(h);return e(o,{children:v&&e(u,{parentClass:b,rootClass:b,setting:G,styles:N,slidesClass:m(k,x.position,x.navigationPosition),builderProps:{uid:`${j}-carousel`},isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,children:$?.map(o=>{let r=c(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:q(`gp-gallery-image-item gem-slider-item-${j} `),onClickItem:()=>D(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:x?.layout,qualityPercent:x?.qualityPercent,qualityType:x?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(n,{contentType:o?.contentType||""}),f(M,e(p,{}))]},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/useGalleryCarousel.js

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

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