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

package/dist/cjs/carousel-v3/components/root/common/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const getStyle=e=>{let{styles:t,setting:r,style:o,rootStyles:l}=e,{arrowGapToEachSide:a="16"}=r??{},c=core.makeStyleResponsive("h",core.getHeightByShapeGlobalSize(t?.sizeSetting)),s=core.makeStyleWithDefault("w",core.getWidthByShapeGlobalSize(t?.sizeSetting,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),g=system.createStyle({...o,...c,...s,...core.getBgByDevice({backgroundColor:t?.backgroundColor,backgroundImage:t?.backgroundImage})}),i=system.createStyle({...core.makeContainerWidthOrHeight({vertical:r?.vertical,dotStyle:r?.dotStyle}),gap:a+"px"}),y=system.createStyle({...core.makeStyleResponsive("jc",t?.align),...l}),S=system.createStyle({...s,...c}),m=system.createStyle({overflow:"hidden",flex:1,width:"100%",height:"100%"});return{rootStyleRender:y,wrapperStyleRender:g,wrapperInnerStyle:i,sliderStyle:S,sliderWrapperStyle:m}};exports.getStyle=getStyle;
+"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const getStyle=e=>{let{styles:t,setting:r,style:o,rootStyles:s}=e,{arrowGapToEachSide:c="16"}=r??{},i=core.makeStyleResponsive("h",core.getHeightByShapeGlobalSize(t?.sizeSetting)),l=core.makeStyleWithDefault("w",core.getWidthByShapeGlobalSize(t?.sizeSetting,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),a=system.createStyle({...o,...!e?.isProductList&&i,...l,...core.getBgByDevice({backgroundColor:t?.backgroundColor,backgroundImage:t?.backgroundImage})}),g=system.createStyle({...core.makeContainerWidthOrHeight({vertical:r?.vertical,dotStyle:r?.dotStyle}),gap:c+"px"}),y=system.createStyle({...core.makeStyleResponsive("jc",t?.align),...s,...!!e?.isProductList&&i}),S=system.createStyle({...l,...i}),d=system.createStyle({overflow:"hidden",flex:1,width:"100%",height:"100%"});return{rootStyleRender:y,wrapperStyleRender:a,wrapperInnerStyle:g,sliderStyle:S,sliderWrapperStyle:d}};exports.getStyle=getStyle;

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

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

package/dist/cjs/product/components/product-images-v2/hooks/useGalleryCarousel.js

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

package/dist/cjs/product/components/product-list-v3/ProductListCarouselLayout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Carousel=require("../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../carousel-v3/components/item/CarouselItem.js"),ChildrenDroppable=require("../../../grid/components/ChildrenDroppable.js"),helpers=require("./common/helpers.js"),attrs=require("./common/attrs.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js");const ProductListCarouselLayout=e=>{let{children:s,builderProps:r,productSortedById:t,advanced:o}=e,l=core.useEditorMode(),{carouselConfigSetting:u,carouselConfigStyle:a}=helpers.getData(e),{productListAttr:i,getAttrProductItemEditor:c}=attrs.getAttr(e),{carouselItemStyle:d}=styles.getStyle(e),{carouselClass:n,productItemClass:m}=classes.getClass(e);return jsxRuntime.jsx(Carousel.default,{advanced:o,builderProps:{uid:r?.uid},rootAttrs:{...i},rootClass:n,setting:u,styles:a,children:t?.map(e=>jsxRuntime.jsx(CarouselItem.default,{style:d,children:jsxRuntime.jsx(core.ProductProvider,{product:e,readOnly:!0,children:jsxRuntime.jsx("div",{..."edit"===l?c(e?.baseID):{},className:m,children:core.isEmptyChildren(s)?jsxRuntime.jsx(ChildrenDroppable.default,{}):s})})},e?.baseID))})};exports.default=ProductListCarouselLayout;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Carousel=require("../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../carousel-v3/components/item/CarouselItem.js"),ChildrenDroppable=require("../../../grid/components/ChildrenDroppable.js"),helpers=require("./common/helpers.js"),attrs=require("./common/attrs.js"),styles=require("./common/styles.js"),classes=require("./common/classes.js");const ProductListCarouselLayout=e=>{let{children:s,builderProps:r,productSortedById:t,advanced:o}=e,l=core.useEditorMode(),{carouselConfigSetting:u,carouselConfigStyle:i}=helpers.getData(e),{productListAttr:a,getAttrProductItemEditor:c}=attrs.getAttr(e),{carouselItemStyle:d}=styles.getStyle(e),{carouselClass:n,productItemClass:m}=classes.getClass(e);return jsxRuntime.jsx(Carousel.default,{advanced:o,builderProps:{uid:r?.uid},rootAttrs:{...a},rootClass:n,setting:u,styles:i,isProductList:!0,children:t?.map(e=>jsxRuntime.jsx(CarouselItem.default,{style:d,children:jsxRuntime.jsx(core.ProductProvider,{product:e,readOnly:!0,children:jsxRuntime.jsx("div",{..."edit"===l?c(e?.baseID):{},className:m,children:core.isEmptyChildren(s)?jsxRuntime.jsx(ChildrenDroppable.default,{}):s})})},e?.baseID))})};exports.default=ProductListCarouselLayout;

package/dist/esm/carousel-v3/components/root/common/styles.js

@@ -1 +1 @@
-import{makeStyleResponsive as e,getHeightByShapeGlobalSize as t,makeStyleWithDefault as o,getWidthByShapeGlobalSize as g,getBgByDevice as r,makeContainerWidthOrHeight as l}from"@gem-sdk/core";import{createStyle as i}from"@gem-sdk/system";let getStyle=d=>{let{styles:a,setting:c,style:m,rootStyles:n}=d,{arrowGapToEachSide:k="16"}=c??{},s=e("h",t(a?.sizeSetting)),b=o("w",g(a?.sizeSetting,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),p=i({...m,...s,...b,...r({backgroundColor:a?.backgroundColor,backgroundImage:a?.backgroundImage})}),w=i({...l({vertical:c?.vertical,dotStyle:c?.dotStyle}),gap:k+"px"}),S=i({...e("jc",a?.align),...n}),h=i({...b,...s}),u=i({overflow:"hidden",flex:1,width:"100%",height:"100%"});return{rootStyleRender:S,wrapperStyleRender:p,wrapperInnerStyle:w,sliderStyle:h,sliderWrapperStyle:u}};export{getStyle};
+import{makeStyleResponsive as t,getHeightByShapeGlobalSize as e,makeStyleWithDefault as o,getWidthByShapeGlobalSize as r,getBgByDevice as g,makeContainerWidthOrHeight as i}from"@gem-sdk/core";import{createStyle as l}from"@gem-sdk/system";let getStyle=d=>{let{styles:c,setting:a,style:s,rootStyles:m}=d,{arrowGapToEachSide:n="16"}=a??{},k=t("h",e(c?.sizeSetting)),u=o("w",r(c?.sizeSetting,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),b=l({...s,...!d?.isProductList&&k,...u,...g({backgroundColor:c?.backgroundColor,backgroundImage:c?.backgroundImage})}),p=l({...i({vertical:a?.vertical,dotStyle:a?.dotStyle}),gap:n+"px"}),w=l({...t("jc",c?.align),...m,...!!d?.isProductList&&k}),S=l({...u,...k}),h=l({overflow:"hidden",flex:1,width:"100%",height:"100%"});return{rootStyleRender:w,wrapperStyleRender:b,wrapperInnerStyle:p,sliderStyle:S,sliderWrapperStyle:h}};export{getStyle};

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 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};
+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/hooks/useGalleryCarousel.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.0-staging.1206",
+  "version": "4.0.0-staging.1208",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",