@gem-sdk/components 12.0.0-staging.13 → 12.0.0-staging.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";var React=require("react"),core=require("@gem-sdk/core"),useTrackPreviewPause=require("./useTrackPreviewPause.js");const useCarousel=(e,t,r,s)=>{let a;let{builderProps:n,moveToIdx:i,styles:o,setting:l,isHiddenArrowWhenDisabled:u=!0,elmRef:c,isEnableCheckHasScrollableContent:d,onClickArrow:p,onHandleChangeSlideByInteraction:f,onChangeActive:m}=e,[v,y]=React.useState(!0),[g,R]=React.useState(!0),[S,k]=React.useState(!1),{loop:h,navigationEnable:V={desktop:!0},navigationStyle:b}=l??{},[B,P]=React.useState(s),[w,T]=React.useState(l?.defaultCurrentSlider??0),{isFirstPreviewClicked:N}=useTrackPreviewPause.default(l?.runPreview),E=React.useRef(),x=React.useRef(i??0),C=core.useCurrentDevice(),M=core.useEditorMode(),{onListener:O,saveToElementInteractionData:I,getInteractionPreviousData:L,trigger:z}=core.useInteraction(),D=React.useMemo(()=>core.getResponsiveValueByScreen(h,C,!1),[h,C]),q=React.useCallback(()=>{if(!l?.slidesToShow)return null;let e={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(l?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[l?.slidesToShow]),H=React.useCallback(()=>{if(!l?.slidesToShow)return null;let e={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(l?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[l?.slidesToShow]),j=React.useMemo(()=>{let e=H();if(e)return e;let t={};return core.DEVICES.forEach(e=>{let r=core.getResponsiveValueByScreen(l?.sneakPeak,e),s=r?"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?core.getResponsiveValueByScreen(l?.sneakPeakOffsetCenter,e)??0:core.getResponsiveValueByScreen(l?.sneakPeakOffsetForward,e)??0:0,a="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?-2:-1,n=core.getResponsiveValueByScreen(l?.itemNumber,e);t[e]="number"==typeof n?n+s/100*a:"auto"}),t},[H,l?.itemNumber,l?.sneakPeak,l?.sneakPeakOffsetCenter,l?.sneakPeakOffsetForward,l?.sneakPeakType]),F=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(j,C),t=core.getResponsiveValueByScreen(h,C,!1);return t&&Number(e??0)>s||!t&&Number(e??0)>=s},[j,C,h,s]),$=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(V,C),t=core.getResponsiveValueByScreen(b,C);return r&&e&&"none"!==t&&v&&!F},[V,C,b,r,v,F]),A=React.useMemo(()=>{let e=q();return e||l?.itemNumber},[q,l?.itemNumber]),U=React.useCallback(e=>{let t="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?2:1;return"number"==typeof core.getResponsiveValueByScreen(A,e,4)?core.getResponsiveValueByScreen(A,e,4)-t:void 0},[l?.sneakPeakType,A]),W=()=>{let e="auto"===core.getResponsiveValueByScreen(j,C,1)?1:core.getResponsiveValueByScreen(j,C,1);return e??1},G=e=>{let t=e*W();return t>=B-W()&&(t=B-W()),t},J=e=>{let t="edit"===M?{[e]:!1}:l?.enableDrag;return core.getResponsiveValueByScreen(t,e)},K=(e,t)=>{let a=l?.sneakPeak?.[C]?e:t?e:G(e);if(t){if(s<et){r?.slideTo(a);return}if(r?.realIndex===a)return;if(a===Number(r?.realIndex)+1||0===a&&r?.realIndex===s-1)return r?.slideNext();if(a===Number(r?.realIndex)-1||a===s-1&&r?.realIndex===0)return r?.slidePrev();let e="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C)&&"number"==typeof core.getResponsiveValueByScreen(l?.itemNumber,C)&&Number(core.getResponsiveValueByScreen(l?.itemNumber,C))%2==0;e?r?.slideToLoopCenterSneakPeek(a):r?.slideToLoop(a)}else r?.slideTo(a);x.current=a};React.useImperativeHandle(t,()=>({nextSlideInteraction:Z,previousSlideInteraction:_,moveToSlideInteraction:ee,getSwiper:()=>r}));let Q=e=>{z({event:"gp:rollback:select-slide",selector:`[data-id="${n?.uid}"]`,element:c?.current}),z({event:"gp:select-slide",selector:`[data-id="${n?.uid}"]`,data:e,element:c?.current})},X=e=>{r?.slideTo(e),f&&f(e)},Y=(e,t)=>{let{key:s,data:a,isRollback:n,element:i}=e,o=Math.max(r?.activeIndex??0,0);if(n&&void 0===a)return;if(n){if("specific"===t){let{previousData:e}=L(i,s);X(Number(e))}else{let e="next"===t?o-1:o+1;X(e)}return}let l="specific"===t?Math.max(x.current,0):o;I(i,s,l.toString());let u="specific"===t?Number(a):"next"===t?o+1:o-1;X(u)},Z=e=>{Y(e,"next")},_=e=>{Y(e,"previous")},ee=e=>{Y(e,"specific")},et=W(),er=React.useMemo(()=>!!B&&r&&core.getResponsiveValueByScreen(l?.dot,C)&&!F&&s>1,[B,r,l?.dot,C,F,s]),es=core.getResponsiveValueByScreen(l?.vertical,C,!1)?"vertical":"horizontal",ea=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(h,C,!1),t=r?.width??0,s={0:"mobile",768:"tablet",1025:"desktop"},a=Number(Object.entries(s).find(([,e])=>e===C)?.[0]??1025),n=Object.entries(s).reduce((r,[s,a])=>{if(!r)return;let n=Number(s),o=core.getResponsiveValueByScreen(l?.sneakPeak,a,!1),u=o&&"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,a),c=core.getResponsiveValueByScreen(l?.itemNumber,a),d=u&&"number"==typeof c,p=J(a),f=d?(t-t/et*(c-2))/2:0,m=d&&e?B:l?.initialSlide||i||0,v={allowTouchMove:p,slidesOffsetBefore:f,slidesOffsetAfter:f,initialSlide:m};return r[n]=v,r},{}),u="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C)&&"number"==typeof core.getResponsiveValueByScreen(l?.itemNumber,C)&&Number(core.getResponsiveValueByScreen(l?.itemNumber,C))>1;return{speed:o?.playSpeed??500,dir:l?.rtl?"rtl":"ltr",spaceBetween:core.getResponsiveValueByScreen(o?.spacing,C)||0,loop:e,slidesPerView:"auto"===core.getResponsiveValueByScreen(j,C,1)?"auto":et,direction:es,breakpoints:n,isSneakPeekCenter:u,slidesOffsetBefore:n?.[a]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,autoplay:{delay:(l?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:l?.pauseOnHover,stopOnLastSlide:!e}}},[o?.playSpeed,l?.rtl,o?.spacing,C,h,et,l?.sneakPeakType,l?.pauseOnHover,l?.autoplayTimeout,r?.width,B]),en=React.useCallback(e=>{let t=r&&r.params?.slidesPerView,s=t?r?.slidesPerViewDynamic():1;if(e<=1)return!1;let a="auto"===ea.slidesPerView?s:ea.slidesPerView;if(!D||e<Number(a)||!v)return!1;let n=core.getResponsiveValueByScreen(l?.sneakPeak,C,!1),i=n&&"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C),o=Number.isNaN(Number(a))?1:Math.ceil(Number(a));i&&o%2==0&&(o+=1);let u=i?Math.max(1,Math.ceil(o/2)):1;return e<o+u},[r,ea.slidesPerView,D,v,l?.sneakPeak,l?.sneakPeakType,C]);React.useEffect(()=>{let e=`[data-id="${n?.uid}"]`;O({event:"gp:change-next-slide",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};Z({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-previous-slide",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};_({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-image-step",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};ee({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:s,isRollback:a,uniqueStorageKey:n}=t||{};ee({element:r,data:s,isRollback:a,key:n})})},[]),React.useEffect(()=>{P(s)},[s]);let ei=e=>{"next"===e?r?.slideNext():r?.slidePrev(),p&&(a&&clearTimeout(a),a=setTimeout(()=>p&&p(),500))};return React.useEffect(()=>{if("number"==typeof i){if(x.current=i,r?.params?.loop){r?.slideToLoop(i);return}r?.slideTo(i)}},[r,i,u]),React.useEffect(()=>{if(!r)return;let e=()=>{P(r.slides.length)},t=()=>{m&&m(r.realIndex)},s=()=>{T(r.realIndex),R(r?.translate===0),k(r?.translate<=r?.maxTranslate())};return r.on("transitionEnd",s),r.on("slideChange",e),r.on("slideChangeTransitionStart",t),()=>{r?.off("slideChange",e),r?.off("slideChangeTransitionStart",t),r?.off("transitionEnd",s)}},[ea.loop,r]),React.useEffect(()=>{r?.wrapperEl&&(r.wrapperEl.style.transitionTimingFunction=l?.animationMode??"ease")},[r,l?.animationMode]),React.useEffect(()=>{if(r&&r.autoplay){let e="edit"===M?!!N&&l?.runPreview&&l?.autoplay:l?.autoplay;e?r.autoplay.start():r.autoplay.stop()}},[r,l?.autoplay,M,N,l?.runPreview]),React.useEffect(()=>{let e=e=>{if(n?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;r?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[r,n?.uid]),React.useEffect(()=>{if(!r)return;let e=r.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=core.getResponsiveValueByScreen(l?.vertical,C)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),r?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),r?.update()},[C,l?.vertical,r,r?.params]),React.useEffect(()=>{if(!r||!d)return;let e=()=>{let e=r?.slides?.slice(0,s)||[],t=Number(ea?.spaceBetween||0),a=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),n=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),i=r.params?.direction==="horizontal"?n>(r.width||0):a>(r.height||0);y(i)};return e(),r.on("resize",e),r.on("update",e),r.on("slidesLengthChange",e),r.on("orientationchange",e),()=>{r.off("resize",e),r.off("update",e),r.off("slidesLengthChange",e),r.off("orientationchange",e)}},[r]),{isInfinity:D,sliderSettings:ea,totalSlideItem:B,currentSlide:w,localRef:E,isRenderDots:er,showNavigation:$,isScrollToStart:g,isScrollToEnd:S,handleDotClick:K,getItemsPerPage:W,handleNextAndPrevSlide:ei,dispatchEventSelectSlide:Q,getNumberOfFullWidthShow:U,setCurrentSlide:T,shouldDuplicateSlides:en,setIsScrollToStart:R,setIsScrollToEnd:k,isHideNavigation:F}};exports.useCarousel=useCarousel;
1
+ "use strict";var React=require("react"),core=require("@gem-sdk/core"),useTrackPreviewPause=require("./useTrackPreviewPause.js");const useCarousel=(e,t,r,s)=>{let n;let{builderProps:a,moveToIdx:i,styles:o,setting:l,isHiddenArrowWhenDisabled:u=!0,elmRef:c,isEnableCheckHasScrollableContent:d,onClickArrow:p,onHandleChangeSlideByInteraction:f,onChangeActive:m}=e,[v,y]=React.useState(!0),[g,R]=React.useState(!0),[S,k]=React.useState(!1),{loop:h,navigationEnable:V={desktop:!0},navigationStyle:b}=l??{},[B,P]=React.useState(s),[w,T]=React.useState(l?.defaultCurrentSlider??0),{isFirstPreviewClicked:N}=useTrackPreviewPause.default(l?.runPreview),E=React.useRef(),x=React.useRef(i??0),C=core.useCurrentDevice(),M=core.useEditorMode(),{onListener:O,saveToElementInteractionData:I,getInteractionPreviousData:L,trigger:z}=core.useInteraction(),D=React.useMemo(()=>core.getResponsiveValueByScreen(h,C,!1),[h,C]),q=React.useCallback(()=>{if(!l?.slidesToShow)return null;let e={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(l?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[l?.slidesToShow]),H=React.useCallback(()=>{if(!l?.slidesToShow)return null;let e={};return core.DEVICES.forEach(t=>{let r=core.getResponsiveValueByScreen(l?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[l?.slidesToShow]),j=React.useMemo(()=>{let e=H();if(e)return e;let t={};return core.DEVICES.forEach(e=>{let r=core.getResponsiveValueByScreen(l?.sneakPeak,e),s=r?"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?core.getResponsiveValueByScreen(l?.sneakPeakOffsetCenter,e)??0:core.getResponsiveValueByScreen(l?.sneakPeakOffsetForward,e)??0:0,n="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?-2:-1,a=core.getResponsiveValueByScreen(l?.itemNumber,e);t[e]="number"==typeof a?a+s/100*n:"auto"}),t},[H,l?.itemNumber,l?.sneakPeak,l?.sneakPeakOffsetCenter,l?.sneakPeakOffsetForward,l?.sneakPeakType]),F=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(j,C),t=core.getResponsiveValueByScreen(h,C,!1);return t&&Number(e??0)>s||!t&&Number(e??0)>=s},[j,C,h,s]),$=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(V,C),t=core.getResponsiveValueByScreen(b,C);return r&&e&&"none"!==t&&v&&!F},[V,C,b,r,v,F]),A=React.useMemo(()=>{let e=q();return e||l?.itemNumber},[q,l?.itemNumber]),U=React.useCallback(e=>{let t="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,e)?2:1;return"number"==typeof core.getResponsiveValueByScreen(A,e,4)?core.getResponsiveValueByScreen(A,e,4)-t:void 0},[l?.sneakPeakType,A]),W=()=>{let e="auto"===core.getResponsiveValueByScreen(j,C,1)?1:core.getResponsiveValueByScreen(j,C,1);return e??1},G=e=>{let t=e*W();return t>=B-W()&&(t=B-W()),t},J=e=>{let t="edit"===M?{[e]:!1}:l?.enableDrag;return core.getResponsiveValueByScreen(t,e)},K=(e,t)=>{let n=l?.sneakPeak?.[C]?e:t?e:G(e);if(t){if(s<et){r?.slideTo(n);return}if(r?.realIndex===n)return;if(n===Number(r?.realIndex)+1||0===n&&r?.realIndex===s-1)return r?.slideNext();if(n===Number(r?.realIndex)-1||n===s-1&&r?.realIndex===0)return r?.slidePrev();let e="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C)&&"number"==typeof core.getResponsiveValueByScreen(l?.itemNumber,C)&&Number(core.getResponsiveValueByScreen(l?.itemNumber,C))%2==0;e?r?.slideToLoopCenterSneakPeek(n):r?.slideToLoop(n)}else r?.slideTo(n);x.current=n};React.useImperativeHandle(t,()=>({nextSlideInteraction:Z,previousSlideInteraction:_,moveToSlideInteraction:ee,getSwiper:()=>r}));let Q=e=>{z({event:"gp:rollback:select-slide",selector:`[data-id="${a?.uid}"]`,element:c?.current}),z({event:"gp:select-slide",selector:`[data-id="${a?.uid}"]`,data:e,element:c?.current})},X=e=>{r?.slideTo(e),f&&f(e)},Y=(e,t)=>{let{key:s,data:n,isRollback:a,element:i}=e,o=Math.max(r?.activeIndex??0,0);if(a&&void 0===n)return;if(a){if("specific"===t){let{previousData:e}=L(i,s);X(Number(e))}else{let e="next"===t?o-1:o+1;X(e)}return}let l="specific"===t?Math.max(x.current,0):o;I(i,s,l.toString());let u="specific"===t?Number(n):"next"===t?o+1:o-1;X(u)},Z=e=>{Y(e,"next")},_=e=>{Y(e,"previous")},ee=e=>{Y(e,"specific")},et=W(),er=React.useMemo(()=>!!B&&r&&core.getResponsiveValueByScreen(l?.dot,C)&&!F&&s>1,[B,r,l?.dot,C,F,s]),es=core.getResponsiveValueByScreen(l?.vertical,C,!1)?"vertical":"horizontal",en=e=>{let{swiperWidth:t,slidesPerView:r,itemNumberByDevice:s,centeredSlides:n}=e;if(!n||!s)return 0;let a=t/r,i=(Number(s)-2)/2-1;return-(a/2+i*a)},ea=React.useMemo(()=>{let e=core.getResponsiveValueByScreen(h,C,!1),t=r?.width??0,s={0:"mobile",768:"tablet",1025:"desktop"},n=Number(Object.entries(s).find(([,e])=>e===C)?.[0]??1025),a=Object.entries(s).reduce((e,[r,s])=>{if(!e)return;let n=Number(r),a=core.getResponsiveValueByScreen(l?.sneakPeak,s,!1),o=a&&"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,s),u=core.getResponsiveValueByScreen(l?.itemNumber,s),c=J(s),d=en({swiperWidth:t,slidesPerView:et,itemNumberByDevice:u,centeredSlides:o}),p=l?.initialSlide||i||0,f={allowTouchMove:c,slidesOffsetBefore:d,slidesOffsetAfter:d,initialSlide:p,centeredSlides:o};return e[n]=f,e},{}),u="center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C)&&"number"==typeof core.getResponsiveValueByScreen(l?.itemNumber,C)&&Number(core.getResponsiveValueByScreen(l?.itemNumber,C))>1;return{speed:o?.playSpeed??500,dir:l?.rtl?"rtl":"ltr",spaceBetween:core.getResponsiveValueByScreen(o?.spacing,C)||0,loop:e,slidesPerView:"auto"===core.getResponsiveValueByScreen(j,C,1)?"auto":et,direction:es,breakpoints:a,isSneakPeekCenter:u,slidesOffsetBefore:a?.[n]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,autoplay:{delay:(l?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:l?.pauseOnHover,stopOnLastSlide:!e}}},[o?.playSpeed,l?.rtl,o?.spacing,C,h,et,l?.sneakPeakType,l?.pauseOnHover,l?.autoplayTimeout,r?.width,B]),ei=React.useCallback(e=>{let t=r&&r.params?.slidesPerView,s=t?r?.slidesPerViewDynamic():1;if(e<=1)return!1;let n="auto"===ea.slidesPerView?s:ea.slidesPerView;if(!D||e<Number(n)||!v)return!1;let a=core.getResponsiveValueByScreen(l?.sneakPeak,C,!1),i=a&&"center"===core.getResponsiveValueByScreen(l?.sneakPeakType,C),o=Number.isNaN(Number(n))?1:Math.ceil(Number(n));i&&o%2==0&&(o+=1);let u=i?Math.max(1,Math.ceil(o/2)):1;return e<o+u},[r,ea.slidesPerView,D,v,l?.sneakPeak,l?.sneakPeakType,C]);React.useEffect(()=>{let e=`[data-id="${a?.uid}"]`;O({event:"gp:change-next-slide",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};Z({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-previous-slide",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};_({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-image-step",selector:e,elementRef:E},e=>{let{data:t,isRollback:r,uniqueStorageKey:s}=e||{};ee({element:E.current,data:t,isRollback:r,key:s})}),O({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:s,isRollback:n,uniqueStorageKey:a}=t||{};ee({element:r,data:s,isRollback:n,key:a})})},[]),React.useEffect(()=>{P(s)},[s]);let eo=e=>{"next"===e?r?.slideNext():r?.slidePrev(),p&&(n&&clearTimeout(n),n=setTimeout(()=>p&&p(),500))};return React.useEffect(()=>{if("number"==typeof i){if(x.current=i,r?.params?.loop){r?.slideToLoop(i);return}r?.slideTo(i)}},[r,i,u]),React.useEffect(()=>{if(!r)return;let e=()=>{P(r.slides.length)},t=()=>{m&&m(r.realIndex)},s=()=>{T(r.realIndex),R(r?.translate===0),k(r?.translate<=r?.maxTranslate())};return r.on("transitionEnd",s),r.on("slideChange",e),r.on("slideChangeTransitionStart",t),()=>{r?.off("slideChange",e),r?.off("slideChangeTransitionStart",t),r?.off("transitionEnd",s)}},[ea.loop,r]),React.useEffect(()=>{r?.wrapperEl&&(r.wrapperEl.style.transitionTimingFunction=l?.animationMode??"ease")},[r,l?.animationMode]),React.useEffect(()=>{if(r&&r.autoplay){let e="edit"===M?!!N&&l?.runPreview&&l?.autoplay:l?.autoplay;e?r.autoplay.start():r.autoplay.stop()}},[r,l?.autoplay,M,N,l?.runPreview]),React.useEffect(()=>{let e=e=>{if(a?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;r?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[r,a?.uid]),React.useEffect(()=>{if(!r)return;let e=r.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=core.getResponsiveValueByScreen(l?.vertical,C)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),r?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),r?.update()},[C,l?.vertical,r,r?.params]),React.useEffect(()=>{if(!r||!d)return;let e=()=>{let e=r?.slides?.slice(0,s)||[],t=Number(ea?.spaceBetween||0),n=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),a=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),i=r.params?.direction==="horizontal"?a>(r.width||0):n>(r.height||0);y(i)};return e(),r.on("resize",e),r.on("update",e),r.on("slidesLengthChange",e),r.on("orientationchange",e),()=>{r.off("resize",e),r.off("update",e),r.off("slidesLengthChange",e),r.off("orientationchange",e)}},[r]),{isInfinity:D,sliderSettings:ea,totalSlideItem:B,currentSlide:w,localRef:E,isRenderDots:er,showNavigation:$,isScrollToStart:g,isScrollToEnd:S,handleDotClick:K,getItemsPerPage:W,handleNextAndPrevSlide:eo,dispatchEventSelectSlide:Q,getNumberOfFullWidthShow:U,setCurrentSlide:T,shouldDuplicateSlides:ei,setIsScrollToStart:R,setIsScrollToEnd:k,isHideNavigation:F}};exports.useCarousel=useCarousel;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),dynamic=require("next/dynamic"),Loading=require("../../../common/components/Loading.js"),React=require("react"),core=require("@gem-sdk/core"),SalePageProductListWarning=require("../SalePageProductListWarning.js"),Head=require("next/head"),ProductListGridLayout=require("./ProductListGridLayout.js"),ProductListCarouselLayout=require("./ProductListCarouselLayout.js"),styles=require("./common/styles.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),helpers=require("./common/helpers.js"),helpers$1=require("../../../dialog/common/helpers.js");const ProductNotFound=dynamic(()=>Promise.resolve().then(function(){return require("../ProductNotFound.js")}),{loading:Loading.default}),ProductList=e=>{let{children:t,styles:r,builderProps:o,setting:s,builderAttrs:a}=e,{isRelatedProduct:d,productSetting:i}=helpers.getData(e),l=i.relatedTag&&i.relatedTag[0],{isEditMode:c,isPreviewSharePageMode:u}=core.useRenderMode(),n=core.useCurrentDevice(),m=core.usePageType(),g=core.usePageStore(e=>e.dynamicProduct),h=core.usePageStore(e=>e.dynamicCollection),[P,p]=React.useState(1),[j,x]=React.useState(!0),[f,y]=React.useState(),[R,b]=React.useState(!1),v="GP_FUNNEL_PAGE"===m,S="GP_COLLECTION"==m;S&&(i.productSrc="DynamicCollection",i.collectionId=h?.collectionId??"latest");let T=i?.productSrc??"Collection",I=g?.productId&&g?.productId!==i.relatedProductId?g?.productId:i.relatedProductId,k=core.useFetchHandle(),L=core.usePageStore(e=>e.publicStoreFrontData),C=React.useMemo(()=>core.hasPublicStoreFrontData(L)?core.createStoreFrontFetcher(L):k,[L]),{data:O}=core.useProductQuery(d&&I?I:void 0,{revalidateOnMount:c||u},C),E=i.relatedTag&&"tags"===i.relatedTag[0]&&(!O?.tags||O?.tags.length===0),M=i.relatedTag&&"collection"===i.relatedTag[0]&&(!O?.collections?.edges||O?.collections.edges.length===0),N=i.relatedTag&&"vendor"===i.relatedTag[0]&&!O?.vendor,q=E||M||N,w=core.useProductsQueryAll(f,{revalidateOnMount:c||u},C),W=c||u,F=core.useProductsQuery("PickProduct"===T?i?.productIds:void 0,{revalidateOnMount:W},{defaultSelectedProductCount:i?.numOfSelectedProducts}),G=React.useMemo(()=>({id:i?.collectionId??"latest",numberOfProducts:s?.numberOfProducts??4,orderBy:s?.orderBy}),[i?.collectionId,Number(s?.numberOfProducts),s?.orderBy]),Q=core.useCollectionQuery("PickProduct"!==T?G:void 0,{revalidateOnMount:W});React.useEffect(()=>{if(d&&O&&i.relatedTag&&"recommended-product"!==i.relatedType){let e;switch(b(!1),i.hasRelatedExclude&&(e=i?.relatedExclude&&i.relatedExclude.split(",").map(e=>e.trim())),i.relatedTag[0]){case"vendor":y({vendor:i.relatedTag&&"vendor"===i.relatedTag[0]?O?.vendor:"",limit:s?.numberOfProducts,idNEQ:O.id});break;case"collection":{let t;let r=O?.collections?.edges.map(e=>e.node?.id);if(!r||r?.length===0){b(!0);break}y(t=e&&e.length>0?{idNEQ:O.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r},{titleNotIn:e}]}],limit:s?.numberOfProducts}:{idNEQ:O.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r}]}],limit:s?.numberOfProducts});break}case"tags":{let t;if(!O.tags||0===O.tags.length){b(!0);break}y(t=e&&e.length>0?{idNEQ:O.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:O.tags},{nameNotIn:e}]}],limit:s?.numberOfProducts}:{idNEQ:O.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:O.tags}]}],limit:s?.numberOfProducts})}}}},[O,i.relatedType,i.relatedTag,s?.numberOfProducts,i.relatedExclude,i.hasRelatedExclude,d]);let A="PickProduct"===T?F.isValidating:Q.isValidating,H="PickProduct"===T?F.isLoading:Q.isLoading,B="PickProduct"===T?F.error:Q.error,D=Q.data?.collections?.edges?.[0]?.node,$="PickProduct"===T?core.flattenConnection(F.data?.products):core.flattenConnection(D?.products),_=core.usePageStore(e=>e.assignedProductIds),z=core.usePageStore(e=>e.isApplyAllProducts),V=React.useMemo(()=>(_??[]).length>0&&!z||z,[_,z]),U=w?.data?.products&&V?core.flattenConnection(w?.data?.products):[],J=d?U:"PickProduct"===T&&i?.productIds?.length?i?.productIds?.map(e=>$?.find(t=>t?.baseID===e)).filter(Boolean)??$:"PickProduct"!==T?$:$.filter((e,t)=>t<(i?.numOfSelectedProducts??4)),K=React.useMemo(()=>R&&d&&c||!J.length&&!H&&j&&c,[j,H,R,d,c,J.length]),X=React.useMemo(()=>!J||R&&d,[R,d,J]),Y=React.useMemo(()=>{if(!s?.sameHeight)return[];let e=0,t=Math.ceil((J?.length??0)/+(s?.slidesToShow?.[n]??1));return Array.from(Array(J?.length??0)).map((o,a)=>(a>=+(s?.slidesToShow?.[n]??1)*(e+1)&&++e,{gridRow:`${1+P*e}/${P+1+P*e}`,marginBottom:e+1<t?helpers$1.getPropertyByDevice(r?.horizontalGutter,n):void 0}))},[s?.sameHeight,s?.slidesToShow,P,J?.length,n,r?.horizontalGutter]),Z=React.useMemo(()=>A||H||B||!J||R&&d,[B,H,R,d,A,J]);React.useEffect(()=>{if(Z||!s?.sameHeight)return;let e=null,t=setTimeout(()=>{let{builderData:t}=o??{},r=t?.childrens?.[0];if(!r)return;let s=document.querySelector(`[data-id=${r}] div`);s&&(p(s.childElementCount||1),e=new MutationObserver(()=>{let e=s.childElementCount||1;p(e)}),c&&e.observe(s,{childList:!0,subtree:!1}))},500);return()=>{clearTimeout(t),e&&e.disconnect()}},[o,Z,c,s?.sameHeight]);let ee=React.useMemo(()=>({collection:D,products:J,settings:{loop:s?.loop??{desktop:!1},scrollMode:s?.scrollMode??{desktop:"snap"},slidesToShow:s?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:r?.layout,dot:s?.dot,dotStyle:s?.dotStyle,arrow:s?.arrow,controlOverContent:s?.controlOverContent},styles:{horizontalGutter:r?.horizontalGutter,verticalGutter:r?.verticalGutter,fullWidth:r?.fullWidth,spacing:r?.spacing,width:r?.width,height:r?.height}}),[D,J,s,r]);if(o?.isPreview&&v)return jsxRuntime.jsx(jsxRuntime.Fragment,{});if(K)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(j,jsxRuntime.jsx(ProductNotFound,{builderAttrs:a,collectionHandle:D?.handle,productSrc:T,onClose:()=>x(!1),children:t,relatedTagString:l,assignProductNoTags:q,noAssignedProduct:!I}))});let{productListWrapStyle:et,productListContentStyle:er,productListWrapAlignStyle:eo}=styles.getStyle(e),{productListWrapClass:es}=classes.getClass(e),ea=()=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(r?.layout==="grid",jsxRuntime.jsx(ProductListGridLayout.default,{...e,productSortedById:J,generateGridRowArray:Y}),jsxRuntime.jsx(ProductListCarouselLayout.default,{...e,productSortedById:J}))});return jsxRuntime.jsxs("div",{...a,className:es,style:et,children:[!!r?.preloadBgImage&&jsxRuntime.jsxs(Head,{children:[!!r.backgroundImage?.desktop?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage.desktop.image.src,as:"image"}),!!r.backgroundImage?.tablet?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage?.tablet?.image?.src,as:"image"}),!!r.backgroundImage?.mobile?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage?.mobile?.image?.src,as:"image"})]}),A||H?jsxRuntime.jsx(Loading.default,{}):B?jsxRuntime.jsxs("div",{children:["Error: ",B?.message]}):X?jsxRuntime.jsx("div",{children:"Products not found"}):jsxRuntime.jsx(core.ProductListProvider,{...ee,children:jsxRuntime.jsx("div",{className:"gp-flex gp-w-full",style:eo,children:jsxRuntime.jsxs("div",{style:er,children:[v&&jsxRuntime.jsx(SalePageProductListWarning.default,{}),ea()]})})}),core.filterToolbarPreview(t,!0)]})};exports.default=ProductList;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),dynamic=require("next/dynamic"),Loading=require("../../../common/components/Loading.js"),React=require("react"),core=require("@gem-sdk/core"),SalePageProductListWarning=require("../SalePageProductListWarning.js"),Head=require("next/head"),ProductListGridLayout=require("./ProductListGridLayout.js"),ProductListCarouselLayout=require("./ProductListCarouselLayout.js"),styles=require("./common/styles.js"),system=require("@gem-sdk/system"),classes=require("./common/classes.js"),helpers=require("./common/helpers.js"),helpers$1=require("../../../dialog/common/helpers.js");const ProductNotFound=dynamic(()=>Promise.resolve().then(function(){return require("../ProductNotFound.js")}),{loading:Loading.default}),ProductList=e=>{let{children:t,styles:r,builderProps:o,setting:s,builderAttrs:a}=e,{isRelatedProduct:d,productSetting:i}=helpers.getData(e),l=i.relatedTag&&i.relatedTag[0],{isEditMode:c,isPreviewSharePageMode:u}=core.useRenderMode(),n=core.useCurrentDevice(),g=core.usePageType(),m=core.usePageStore(e=>e.dynamicProduct),h=core.usePageStore(e=>e.dynamicCollection),[P,p]=React.useState(1),[j,x]=React.useState(!0),[f,y]=React.useState(),[R,b]=React.useState(!1),v="GP_FUNNEL_PAGE"===g,S="GP_COLLECTION"==g;S&&(i.productSrc="DynamicCollection",i.collectionId=h?.collectionId??"latest");let I=i?.productSrc??"Collection",T=m?.productId&&m?.productId!==i.relatedProductId?m?.productId:i.relatedProductId,k=core.useFetchHandle(),L=core.usePageStore(e=>e.publicStoreFrontData),C=React.useMemo(()=>core.hasPublicStoreFrontData(L)?core.createStoreFrontFetcher(L):k,[L]),{data:O}=core.useProductQuery(d&&T?T:void 0,{revalidateOnMount:c||u},C),E=i.relatedTag&&"tags"===i.relatedTag[0]&&(!O?.tags||O?.tags.length===0),M=i.relatedTag&&"collection"===i.relatedTag[0]&&(!O?.collections?.edges||O?.collections.edges.length===0),N=i.relatedTag&&"vendor"===i.relatedTag[0]&&!O?.vendor,q=E||M||N,w=core.useProductsQueryAll(f,{revalidateOnMount:c||u},C),W=c||u,F=core.useProductsQuery("PickProduct"===I?i?.productIds:void 0,{revalidateOnMount:W},{defaultSelectedProductCount:i?.numOfSelectedProducts}),G=React.useMemo(()=>({id:i?.collectionId??"latest",numberOfProducts:s?.numberOfProducts??4,orderBy:s?.orderBy}),[i?.collectionId,Number(s?.numberOfProducts),s?.orderBy]),Q=core.useCollectionQuery("PickProduct"!==I?G:void 0,{revalidateOnMount:W});React.useEffect(()=>{if(d&&O&&i.relatedTag&&"recommended-product"!==i.relatedType){let e;switch(b(!1),i.hasRelatedExclude&&(e=i?.relatedExclude&&i.relatedExclude.split(",").map(e=>e.trim())),i.relatedTag[0]){case"vendor":y({vendor:i.relatedTag&&"vendor"===i.relatedTag[0]?O?.vendor:"",limit:s?.numberOfProducts,idNEQ:O.id});break;case"collection":{let t;let r=O?.collections?.edges.map(e=>e.node?.id);if(!r||r?.length===0){b(!0);break}y(t=e&&e.length>0?{idNEQ:O.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r},{titleNotIn:e}]}],limit:s?.numberOfProducts}:{idNEQ:O.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:r}]}],limit:s?.numberOfProducts});break}case"tags":{let t;if(!O.tags||0===O.tags.length){b(!0);break}y(t=e&&e.length>0?{idNEQ:O.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:O.tags},{nameNotIn:e}]}],limit:s?.numberOfProducts}:{idNEQ:O.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:O.tags}]}],limit:s?.numberOfProducts})}}}},[O,i.relatedType,i.relatedTag,s?.numberOfProducts,i.relatedExclude,i.hasRelatedExclude,d]);let A="PickProduct"===I?F.isValidating:Q.isValidating,B="PickProduct"===I?F.isLoading:Q.isLoading,D="PickProduct"===I?F.error:Q.error,H=Q.data?.collections?.edges?.[0]?.node,$="PickProduct"===I?core.flattenConnection(F.data?.products):core.flattenConnection(H?.products),_=core.usePageStore(e=>e.assignedProductIds),z=core.usePageStore(e=>e.isApplyAllProducts),V=React.useMemo(()=>(_??[]).length>0&&!z||z,[_,z]),U=w?.data?.products&&V?core.flattenConnection(w?.data?.products):[],J=d?U:"PickProduct"===I&&i?.productIds?.length?i?.productIds?.map(e=>$?.find(t=>t?.baseID===e)).filter(Boolean)??$:"PickProduct"!==I?$:$.filter((e,t)=>t<(i?.numOfSelectedProducts??4)),K=React.useMemo(()=>R&&d&&c||!J.length&&!B&&j&&c,[j,B,R,d,c,J.length]),X=React.useMemo(()=>!J||R&&d,[R,d,J]),Y=React.useMemo(()=>{if(!s?.sameHeight)return[];let e=0,t=Math.ceil((J?.length??0)/+(s?.slidesToShow?.[n]??1));return Array.from(Array(J?.length??0)).map((o,a)=>(a>=+(s?.slidesToShow?.[n]??1)*(e+1)&&++e,{gridRow:`${1+P*e}/${P+1+P*e}`,marginBottom:e+1<t?helpers$1.getPropertyByDevice(r?.horizontalGutter,n):void 0}))},[s?.sameHeight,s?.slidesToShow,P,J?.length,n,r?.horizontalGutter]),Z=React.useMemo(()=>A||B||D||!J||R&&d,[D,B,R,d,A,J]),ee=O?.collections?.edges.map(e=>e.node?.id)??[];React.useEffect(()=>{Z||setTimeout(()=>{let{builderData:e}=o??{},t=e?.childrens?.[0];if(!t)return;let r=document.querySelector(`[data-id=${t}] div`);r&&p(r.childElementCount||1)},c?0:500)},[o,Z,c,ee]);let et=React.useMemo(()=>({collection:H,products:J,settings:{loop:s?.loop??{desktop:!1},scrollMode:s?.scrollMode??{desktop:"snap"},slidesToShow:s?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:r?.layout,dot:s?.dot,dotStyle:s?.dotStyle,arrow:s?.arrow,controlOverContent:s?.controlOverContent},styles:{horizontalGutter:r?.horizontalGutter,verticalGutter:r?.verticalGutter,fullWidth:r?.fullWidth,spacing:r?.spacing,width:r?.width,height:r?.height}}),[H,J,s,r]);if(o?.isPreview&&v)return jsxRuntime.jsx(jsxRuntime.Fragment,{});if(K)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(j,jsxRuntime.jsx(ProductNotFound,{builderAttrs:a,collectionHandle:H?.handle,productSrc:I,onClose:()=>x(!1),children:t,relatedTagString:l,assignProductNoTags:q,noAssignedProduct:!T}))});let{productListWrapStyle:er,productListContentStyle:eo,productListWrapAlignStyle:es}=styles.getStyle(e),{productListWrapClass:ea}=classes.getClass(e),ed=()=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:system.If(r?.layout==="grid",jsxRuntime.jsx(ProductListGridLayout.default,{...e,productSortedById:J,generateGridRowArray:Y}),jsxRuntime.jsx(ProductListCarouselLayout.default,{...e,productSortedById:J}))});return jsxRuntime.jsxs("div",{...a,className:ea,style:er,children:[!!r?.preloadBgImage&&jsxRuntime.jsxs(Head,{children:[!!r.backgroundImage?.desktop?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage.desktop.image.src,as:"image"}),!!r.backgroundImage?.tablet?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage?.tablet?.image?.src,as:"image"}),!!r.backgroundImage?.mobile?.image?.src&&jsxRuntime.jsx("link",{rel:"preload",href:r.backgroundImage?.mobile?.image?.src,as:"image"})]}),A||B?jsxRuntime.jsx(Loading.default,{}):D?jsxRuntime.jsxs("div",{children:["Error: ",D?.message]}):X?jsxRuntime.jsx("div",{children:"Products not found"}):jsxRuntime.jsx(core.ProductListProvider,{...et,children:jsxRuntime.jsx("div",{className:"gp-flex gp-w-full",style:es,children:jsxRuntime.jsxs("div",{style:eo,children:[v&&jsxRuntime.jsx(SalePageProductListWarning.default,{}),ed()]})})}),core.filterToolbarPreview(t,!0)]})};exports.default=ProductList;
@@ -1 +1 @@
1
- import{useState as e,useRef as t,useMemo as r,useCallback as i,useImperativeHandle as n,useEffect as a}from"react";import{useCurrentDevice as l,useEditorMode as s,useInteraction as o,getResponsiveValueByScreen as u,DEVICES as d}from"@gem-sdk/core";import p from"./useTrackPreviewPause.js";let useCarousel=(f,m,c,k)=>{let h;let{builderProps:b,moveToIdx:y,styles:P,setting:g,isHiddenArrowWhenDisabled:w=!0,elmRef:T,isEnableCheckHasScrollableContent:v,onClickArrow:N,onHandleChangeSlideByInteraction:x,onChangeActive:S}=f,[C,O]=e(!0),[E,L]=e(!0),[M,I]=e(!1),{loop:z,navigationEnable:V={desktop:!0},navigationStyle:B}=g??{},[j,F]=e(k),[H,R]=e(g?.defaultCurrentSlider??0),{isFirstPreviewClicked:$}=p(g?.runPreview),A=t(),D=t(y??0),q=l(),U=s(),{onListener:W,saveToElementInteractionData:G,getInteractionPreviousData:J,trigger:K}=o(),Q=r(()=>u(z,q,!1),[z,q]),X=i(()=>{if(!g?.slidesToShow)return null;let e={};return d.forEach(t=>{let r=u(g?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[g?.slidesToShow]),Y=i(()=>{if(!g?.slidesToShow)return null;let e={};return d.forEach(t=>{let r=u(g?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[g?.slidesToShow]),Z=r(()=>{let e=Y();if(e)return e;let t={};return d.forEach(e=>{let r=u(g?.sneakPeak,e),i=r?"center"===u(g?.sneakPeakType,e)?u(g?.sneakPeakOffsetCenter,e)??0:u(g?.sneakPeakOffsetForward,e)??0:0,n="center"===u(g?.sneakPeakType,e)?-2:-1,a=u(g?.itemNumber,e);t[e]="number"==typeof a?a+i/100*n:"auto"}),t},[Y,g?.itemNumber,g?.sneakPeak,g?.sneakPeakOffsetCenter,g?.sneakPeakOffsetForward,g?.sneakPeakType]),_=r(()=>{let e=u(Z,q),t=u(z,q,!1);return t&&Number(e??0)>k||!t&&Number(e??0)>=k},[Z,q,z,k]),ee=r(()=>{let e=u(V,q),t=u(B,q);return c&&e&&"none"!==t&&C&&!_},[V,q,B,c,C,_]),et=r(()=>{let e=X();return e||g?.itemNumber},[X,g?.itemNumber]),er=i(e=>{let t="center"===u(g?.sneakPeakType,e)?2:1;return"number"==typeof u(et,e,4)?u(et,e,4)-t:void 0},[g?.sneakPeakType,et]),ei=()=>{let e="auto"===u(Z,q,1)?1:u(Z,q,1);return e??1},en=e=>{let t=e*ei();return t>=j-ei()&&(t=j-ei()),t},ea=e=>{let t="edit"===U?{[e]:!1}:g?.enableDrag;return u(t,e)},el=(e,t)=>{let r=g?.sneakPeak?.[q]?e:t?e:en(e);if(t){if(k<em){c?.slideTo(r);return}if(c?.realIndex===r)return;if(r===Number(c?.realIndex)+1||0===r&&c?.realIndex===k-1)return c?.slideNext();if(r===Number(c?.realIndex)-1||r===k-1&&c?.realIndex===0)return c?.slidePrev();let e="center"===u(g?.sneakPeakType,q)&&"number"==typeof u(g?.itemNumber,q)&&Number(u(g?.itemNumber,q))%2==0;e?c?.slideToLoopCenterSneakPeek(r):c?.slideToLoop(r)}else c?.slideTo(r);D.current=r};n(m,()=>({nextSlideInteraction:ed,previousSlideInteraction:ep,moveToSlideInteraction:ef,getSwiper:()=>c}));let es=e=>{K({event:"gp:rollback:select-slide",selector:`[data-id="${b?.uid}"]`,element:T?.current}),K({event:"gp:select-slide",selector:`[data-id="${b?.uid}"]`,data:e,element:T?.current})},eo=e=>{c?.slideTo(e),x&&x(e)},eu=(e,t)=>{let{key:r,data:i,isRollback:n,element:a}=e,l=Math.max(c?.activeIndex??0,0);if(n&&void 0===i)return;if(n){if("specific"===t){let{previousData:e}=J(a,r);eo(Number(e))}else{let e="next"===t?l-1:l+1;eo(e)}return}let s="specific"===t?Math.max(D.current,0):l;G(a,r,s.toString());let o="specific"===t?Number(i):"next"===t?l+1:l-1;eo(o)},ed=e=>{eu(e,"next")},ep=e=>{eu(e,"previous")},ef=e=>{eu(e,"specific")},em=ei(),ec=r(()=>!!j&&c&&u(g?.dot,q)&&!_&&k>1,[j,c,g?.dot,q,_,k]),ek=u(g?.vertical,q,!1)?"vertical":"horizontal",eh=r(()=>{let e=u(z,q,!1),t=c?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},i=Number(Object.entries(r).find(([,e])=>e===q)?.[0]??1025),n=Object.entries(r).reduce((r,[i,n])=>{if(!r)return;let a=Number(i),l=u(g?.sneakPeak,n,!1),s=l&&"center"===u(g?.sneakPeakType,n),o=u(g?.itemNumber,n),d=s&&"number"==typeof o,p=ea(n),f=d?(t-t/em*(o-2))/2:0,m=d&&e?j:g?.initialSlide||y||0,c={allowTouchMove:p,slidesOffsetBefore:f,slidesOffsetAfter:f,initialSlide:m};return r[a]=c,r},{}),a="center"===u(g?.sneakPeakType,q)&&"number"==typeof u(g?.itemNumber,q)&&Number(u(g?.itemNumber,q))>1;return{speed:P?.playSpeed??500,dir:g?.rtl?"rtl":"ltr",spaceBetween:u(P?.spacing,q)||0,loop:e,slidesPerView:"auto"===u(Z,q,1)?"auto":em,direction:ek,breakpoints:n,isSneakPeekCenter:a,slidesOffsetBefore:n?.[i]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,autoplay:{delay:(g?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:g?.pauseOnHover,stopOnLastSlide:!e}}},[P?.playSpeed,g?.rtl,P?.spacing,q,z,em,g?.sneakPeakType,g?.pauseOnHover,g?.autoplayTimeout,c?.width,j]),eb=i(e=>{let t=c&&c.params?.slidesPerView,r=t?c?.slidesPerViewDynamic():1;if(e<=1)return!1;let i="auto"===eh.slidesPerView?r:eh.slidesPerView;if(!Q||e<Number(i)||!C)return!1;let n=u(g?.sneakPeak,q,!1),a=n&&"center"===u(g?.sneakPeakType,q),l=Number.isNaN(Number(i))?1:Math.ceil(Number(i));a&&l%2==0&&(l+=1);let s=a?Math.max(1,Math.ceil(l/2)):1;return e<l+s},[c,eh.slidesPerView,Q,C,g?.sneakPeak,g?.sneakPeakType,q]);a(()=>{let e=`[data-id="${b?.uid}"]`;W({event:"gp:change-next-slide",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ed({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-previous-slide",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ep({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-image-step",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ef({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:i,isRollback:n,uniqueStorageKey:a}=t||{};ef({element:r,data:i,isRollback:n,key:a})})},[]),a(()=>{F(k)},[k]);let ey=e=>{"next"===e?c?.slideNext():c?.slidePrev(),N&&(h&&clearTimeout(h),h=setTimeout(()=>N&&N(),500))};return a(()=>{if("number"==typeof y){if(D.current=y,c?.params?.loop){c?.slideToLoop(y);return}c?.slideTo(y)}},[c,y,w]),a(()=>{if(!c)return;let e=()=>{F(c.slides.length)},t=()=>{S&&S(c.realIndex)},r=()=>{R(c.realIndex),L(c?.translate===0),I(c?.translate<=c?.maxTranslate())};return c.on("transitionEnd",r),c.on("slideChange",e),c.on("slideChangeTransitionStart",t),()=>{c?.off("slideChange",e),c?.off("slideChangeTransitionStart",t),c?.off("transitionEnd",r)}},[eh.loop,c]),a(()=>{c?.wrapperEl&&(c.wrapperEl.style.transitionTimingFunction=g?.animationMode??"ease")},[c,g?.animationMode]),a(()=>{if(c&&c.autoplay){let e="edit"===U?!!$&&g?.runPreview&&g?.autoplay:g?.autoplay;e?c.autoplay.start():c.autoplay.stop()}},[c,g?.autoplay,U,$,g?.runPreview]),a(()=>{let e=e=>{if(b?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;c?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[c,b?.uid]),a(()=>{if(!c)return;let e=c.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=u(g?.vertical,q)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),c?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),c?.update()},[q,g?.vertical,c,c?.params]),a(()=>{if(!c||!v)return;let e=()=>{let e=c?.slides?.slice(0,k)||[],t=Number(eh?.spaceBetween||0),r=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),i=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),n=c.params?.direction==="horizontal"?i>(c.width||0):r>(c.height||0);O(n)};return e(),c.on("resize",e),c.on("update",e),c.on("slidesLengthChange",e),c.on("orientationchange",e),()=>{c.off("resize",e),c.off("update",e),c.off("slidesLengthChange",e),c.off("orientationchange",e)}},[c]),{isInfinity:Q,sliderSettings:eh,totalSlideItem:j,currentSlide:H,localRef:A,isRenderDots:ec,showNavigation:ee,isScrollToStart:E,isScrollToEnd:M,handleDotClick:el,getItemsPerPage:ei,handleNextAndPrevSlide:ey,dispatchEventSelectSlide:es,getNumberOfFullWidthShow:er,setCurrentSlide:R,shouldDuplicateSlides:eb,setIsScrollToStart:L,setIsScrollToEnd:I,isHideNavigation:_}};export{useCarousel};
1
+ import{useState as e,useRef as t,useMemo as r,useCallback as i,useImperativeHandle as n,useEffect as a}from"react";import{useCurrentDevice as l,useEditorMode as s,useInteraction as o,getResponsiveValueByScreen as u,DEVICES as d}from"@gem-sdk/core";import p from"./useTrackPreviewPause.js";let useCarousel=(f,m,c,k)=>{let h;let{builderProps:b,moveToIdx:y,styles:P,setting:g,isHiddenArrowWhenDisabled:w=!0,elmRef:T,isEnableCheckHasScrollableContent:v,onClickArrow:N,onHandleChangeSlideByInteraction:x,onChangeActive:S}=f,[C,O]=e(!0),[E,L]=e(!0),[M,I]=e(!1),{loop:z,navigationEnable:V={desktop:!0},navigationStyle:B}=g??{},[j,F]=e(k),[H,R]=e(g?.defaultCurrentSlider??0),{isFirstPreviewClicked:$}=p(g?.runPreview),A=t(),D=t(y??0),q=l(),U=s(),{onListener:W,saveToElementInteractionData:G,getInteractionPreviousData:J,trigger:K}=o(),Q=r(()=>u(z,q,!1),[z,q]),X=i(()=>{if(!g?.slidesToShow)return null;let e={};return d.forEach(t=>{let r=u(g?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[g?.slidesToShow]),Y=i(()=>{if(!g?.slidesToShow)return null;let e={};return d.forEach(t=>{let r=u(g?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[g?.slidesToShow]),Z=r(()=>{let e=Y();if(e)return e;let t={};return d.forEach(e=>{let r=u(g?.sneakPeak,e),i=r?"center"===u(g?.sneakPeakType,e)?u(g?.sneakPeakOffsetCenter,e)??0:u(g?.sneakPeakOffsetForward,e)??0:0,n="center"===u(g?.sneakPeakType,e)?-2:-1,a=u(g?.itemNumber,e);t[e]="number"==typeof a?a+i/100*n:"auto"}),t},[Y,g?.itemNumber,g?.sneakPeak,g?.sneakPeakOffsetCenter,g?.sneakPeakOffsetForward,g?.sneakPeakType]),_=r(()=>{let e=u(Z,q),t=u(z,q,!1);return t&&Number(e??0)>k||!t&&Number(e??0)>=k},[Z,q,z,k]),ee=r(()=>{let e=u(V,q),t=u(B,q);return c&&e&&"none"!==t&&C&&!_},[V,q,B,c,C,_]),et=r(()=>{let e=X();return e||g?.itemNumber},[X,g?.itemNumber]),er=i(e=>{let t="center"===u(g?.sneakPeakType,e)?2:1;return"number"==typeof u(et,e,4)?u(et,e,4)-t:void 0},[g?.sneakPeakType,et]),ei=()=>{let e="auto"===u(Z,q,1)?1:u(Z,q,1);return e??1},en=e=>{let t=e*ei();return t>=j-ei()&&(t=j-ei()),t},ea=e=>{let t="edit"===U?{[e]:!1}:g?.enableDrag;return u(t,e)},el=(e,t)=>{let r=g?.sneakPeak?.[q]?e:t?e:en(e);if(t){if(k<em){c?.slideTo(r);return}if(c?.realIndex===r)return;if(r===Number(c?.realIndex)+1||0===r&&c?.realIndex===k-1)return c?.slideNext();if(r===Number(c?.realIndex)-1||r===k-1&&c?.realIndex===0)return c?.slidePrev();let e="center"===u(g?.sneakPeakType,q)&&"number"==typeof u(g?.itemNumber,q)&&Number(u(g?.itemNumber,q))%2==0;e?c?.slideToLoopCenterSneakPeek(r):c?.slideToLoop(r)}else c?.slideTo(r);D.current=r};n(m,()=>({nextSlideInteraction:ed,previousSlideInteraction:ep,moveToSlideInteraction:ef,getSwiper:()=>c}));let es=e=>{K({event:"gp:rollback:select-slide",selector:`[data-id="${b?.uid}"]`,element:T?.current}),K({event:"gp:select-slide",selector:`[data-id="${b?.uid}"]`,data:e,element:T?.current})},eo=e=>{c?.slideTo(e),x&&x(e)},eu=(e,t)=>{let{key:r,data:i,isRollback:n,element:a}=e,l=Math.max(c?.activeIndex??0,0);if(n&&void 0===i)return;if(n){if("specific"===t){let{previousData:e}=J(a,r);eo(Number(e))}else{let e="next"===t?l-1:l+1;eo(e)}return}let s="specific"===t?Math.max(D.current,0):l;G(a,r,s.toString());let o="specific"===t?Number(i):"next"===t?l+1:l-1;eo(o)},ed=e=>{eu(e,"next")},ep=e=>{eu(e,"previous")},ef=e=>{eu(e,"specific")},em=ei(),ec=r(()=>!!j&&c&&u(g?.dot,q)&&!_&&k>1,[j,c,g?.dot,q,_,k]),ek=u(g?.vertical,q,!1)?"vertical":"horizontal",eh=e=>{let{swiperWidth:t,slidesPerView:r,itemNumberByDevice:i,centeredSlides:n}=e;if(!n||!i)return 0;let a=t/r,l=(Number(i)-2)/2-1;return-(a/2+l*a)},eb=r(()=>{let e=u(z,q,!1),t=c?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},i=Number(Object.entries(r).find(([,e])=>e===q)?.[0]??1025),n=Object.entries(r).reduce((e,[r,i])=>{if(!e)return;let n=Number(r),a=u(g?.sneakPeak,i,!1),l=a&&"center"===u(g?.sneakPeakType,i),s=u(g?.itemNumber,i),o=ea(i),d=eh({swiperWidth:t,slidesPerView:em,itemNumberByDevice:s,centeredSlides:l}),p=g?.initialSlide||y||0,f={allowTouchMove:o,slidesOffsetBefore:d,slidesOffsetAfter:d,initialSlide:p,centeredSlides:l};return e[n]=f,e},{}),a="center"===u(g?.sneakPeakType,q)&&"number"==typeof u(g?.itemNumber,q)&&Number(u(g?.itemNumber,q))>1;return{speed:P?.playSpeed??500,dir:g?.rtl?"rtl":"ltr",spaceBetween:u(P?.spacing,q)||0,loop:e,slidesPerView:"auto"===u(Z,q,1)?"auto":em,direction:ek,breakpoints:n,isSneakPeekCenter:a,slidesOffsetBefore:n?.[i]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,autoplay:{delay:(g?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:g?.pauseOnHover,stopOnLastSlide:!e}}},[P?.playSpeed,g?.rtl,P?.spacing,q,z,em,g?.sneakPeakType,g?.pauseOnHover,g?.autoplayTimeout,c?.width,j]),ey=i(e=>{let t=c&&c.params?.slidesPerView,r=t?c?.slidesPerViewDynamic():1;if(e<=1)return!1;let i="auto"===eb.slidesPerView?r:eb.slidesPerView;if(!Q||e<Number(i)||!C)return!1;let n=u(g?.sneakPeak,q,!1),a=n&&"center"===u(g?.sneakPeakType,q),l=Number.isNaN(Number(i))?1:Math.ceil(Number(i));a&&l%2==0&&(l+=1);let s=a?Math.max(1,Math.ceil(l/2)):1;return e<l+s},[c,eb.slidesPerView,Q,C,g?.sneakPeak,g?.sneakPeakType,q]);a(()=>{let e=`[data-id="${b?.uid}"]`;W({event:"gp:change-next-slide",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ed({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-previous-slide",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ep({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-image-step",selector:e,elementRef:A},e=>{let{data:t,isRollback:r,uniqueStorageKey:i}=e||{};ef({element:A.current,data:t,isRollback:r,key:i})}),W({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:i,isRollback:n,uniqueStorageKey:a}=t||{};ef({element:r,data:i,isRollback:n,key:a})})},[]),a(()=>{F(k)},[k]);let eP=e=>{"next"===e?c?.slideNext():c?.slidePrev(),N&&(h&&clearTimeout(h),h=setTimeout(()=>N&&N(),500))};return a(()=>{if("number"==typeof y){if(D.current=y,c?.params?.loop){c?.slideToLoop(y);return}c?.slideTo(y)}},[c,y,w]),a(()=>{if(!c)return;let e=()=>{F(c.slides.length)},t=()=>{S&&S(c.realIndex)},r=()=>{R(c.realIndex),L(c?.translate===0),I(c?.translate<=c?.maxTranslate())};return c.on("transitionEnd",r),c.on("slideChange",e),c.on("slideChangeTransitionStart",t),()=>{c?.off("slideChange",e),c?.off("slideChangeTransitionStart",t),c?.off("transitionEnd",r)}},[eb.loop,c]),a(()=>{c?.wrapperEl&&(c.wrapperEl.style.transitionTimingFunction=g?.animationMode??"ease")},[c,g?.animationMode]),a(()=>{if(c&&c.autoplay){let e="edit"===U?!!$&&g?.runPreview&&g?.autoplay:g?.autoplay;e?c.autoplay.start():c.autoplay.stop()}},[c,g?.autoplay,U,$,g?.runPreview]),a(()=>{let e=e=>{if(b?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;c?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[c,b?.uid]),a(()=>{if(!c)return;let e=c.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=u(g?.vertical,q)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),c?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),c?.update()},[q,g?.vertical,c,c?.params]),a(()=>{if(!c||!v)return;let e=()=>{let e=c?.slides?.slice(0,k)||[],t=Number(eb?.spaceBetween||0),r=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),i=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),n=c.params?.direction==="horizontal"?i>(c.width||0):r>(c.height||0);O(n)};return e(),c.on("resize",e),c.on("update",e),c.on("slidesLengthChange",e),c.on("orientationchange",e),()=>{c.off("resize",e),c.off("update",e),c.off("slidesLengthChange",e),c.off("orientationchange",e)}},[c]),{isInfinity:Q,sliderSettings:eb,totalSlideItem:j,currentSlide:H,localRef:A,isRenderDots:ec,showNavigation:ee,isScrollToStart:E,isScrollToEnd:M,handleDotClick:el,getItemsPerPage:ei,handleNextAndPrevSlide:eP,dispatchEventSelectSlide:es,getNumberOfFullWidthShow:er,setCurrentSlide:R,shouldDuplicateSlides:ey,setIsScrollToStart:L,setIsScrollToEnd:I,isHideNavigation:_}};export{useCarousel};
@@ -1 +1 @@
1
- import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import r from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as i,useEffect as a}from"react";import{useRenderMode as c,useCurrentDevice as n,usePageType as s,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as P,useProductsQuery as f,useCollectionQuery as b,flattenConnection as T,ProductListProvider as k,filterToolbarPreview as I}from"@gem-sdk/core";import v from"../SalePageProductListWarning.js";import y from"next/head";import O from"./ProductListGridLayout.js";import N from"./ProductListCarouselLayout.js";import{getStyle as S}from"./common/styles.js";import{If as C}from"@gem-sdk/system";import{getClass as E}from"./common/classes.js";import{getData as w}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=r(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=r=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:M}=r,{isRelatedProduct:A,productSetting:B}=w(r),F=B.relatedTag&&B.relatedTag[0],{isEditMode:H,isPreviewSharePageMode:Q}=c(),z=n(),D=s(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===D,ee="GP_COLLECTION"==D;ee&&(B.productSrc="DynamicCollection",B.collectionId=$?.collectionId??"latest");let et=B?.productSrc??"Collection",eo=R?.productId&&R?.productId!==B.relatedProductId?R?.productId:B.relatedProductId,er=m(),ed=u(e=>e.publicStoreFrontData),el=i(()=>g(ed)?h(ed):er,[ed]),{data:ei}=p(A&&eo?eo:void 0,{revalidateOnMount:H||Q},el),ea=B.relatedTag&&"tags"===B.relatedTag[0]&&(!ei?.tags||ei?.tags.length===0),ec=B.relatedTag&&"collection"===B.relatedTag[0]&&(!ei?.collections?.edges||ei?.collections.edges.length===0),en=B.relatedTag&&"vendor"===B.relatedTag[0]&&!ei?.vendor,es=ea||ec||en,eu=P(J,{revalidateOnMount:H||Q},el),em=H||Q,eg=f("PickProduct"===et?B?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:B?.numOfSelectedProducts}),eh=i(()=>({id:B?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[B?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});a(()=>{if(A&&ei&&B.relatedTag&&"recommended-product"!==B.relatedType){let e;switch(Y(!1),B.hasRelatedExclude&&(e=B?.relatedExclude&&B.relatedExclude.split(",").map(e=>e.trim())),B.relatedTag[0]){case"vendor":K({vendor:B.relatedTag&&"vendor"===B.relatedTag[0]?ei?.vendor:"",limit:G?.numberOfProducts,idNEQ:ei.id});break;case"collection":{let t;let o=ei?.collections?.edges.map(e=>e.node?.id);if(!o||o?.length===0){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o},{titleNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o}]}],limit:G?.numberOfProducts});break}case"tags":{let t;if(!ei.tags||0===ei.tags.length){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags},{nameNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags}]}],limit:G?.numberOfProducts})}}}},[ei,B.relatedType,B.relatedTag,G?.numberOfProducts,B.relatedExclude,B.hasRelatedExclude,A]);let eP="PickProduct"===et?eg.isValidating:ep.isValidating,ef="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,eT=ep.data?.collections?.edges?.[0]?.node,ek="PickProduct"===et?T(eg.data?.products):T(eT?.products),eI=u(e=>e.assignedProductIds),ev=u(e=>e.isApplyAllProducts),ey=i(()=>(eI??[]).length>0&&!ev||ev,[eI,ev]),eO=eu?.data?.products&&ey?T(eu?.data?.products):[],eN=A?eO:"PickProduct"===et&&B?.productIds?.length?B?.productIds?.map(e=>ek?.find(t=>t?.baseID===e)).filter(Boolean)??ek:"PickProduct"!==et?ek:ek.filter((e,t)=>t<(B?.numOfSelectedProducts??4)),eS=i(()=>X&&A&&H||!eN.length&&!ef&&q&&H,[q,ef,X,A,H,eN.length]),eC=i(()=>!eN||X&&A,[X,A,eN]),eE=i(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((eN?.length??0)/+(G?.slidesToShow?.[z]??1));return Array.from(Array(eN?.length??0)).map((o,r)=>(r>=+(G?.slidesToShow?.[z]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,z):void 0}))},[G?.sameHeight,G?.slidesToShow,_,eN?.length,z,j?.horizontalGutter]),ew=i(()=>eP||ef||eb||!eN||X&&A,[eb,ef,X,A,eP,eN]);a(()=>{if(ew||!G?.sameHeight)return;let e=null,t=setTimeout(()=>{let{builderData:t}=x??{},o=t?.childrens?.[0];if(!o)return;let r=document.querySelector(`[data-id=${o}] div`);r&&(V(r.childElementCount||1),e=new MutationObserver(()=>{let e=r.childElementCount||1;V(e)}),H&&e.observe(r,{childList:!0,subtree:!1}))},500);return()=>{clearTimeout(t),e&&e.disconnect()}},[x,ew,H,G?.sameHeight]);let eL=i(()=>({collection:eT,products:eN,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[eT,eN,G,j]);if(x?.isPreview&&Z)return e(t,{});if(eS)return e(t,{children:C(q,e(ProductNotFound,{builderAttrs:M,collectionHandle:eT?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:es,noAssignedProduct:!eo}))});let{productListWrapStyle:eW,productListContentStyle:ej,productListWrapAlignStyle:ex}=S(r),{productListWrapClass:eG}=E(r),eM=()=>e(t,{children:C(j?.layout==="grid",e(O,{...r,productSortedById:eN,generateGridRowArray:eE}),e(N,{...r,productSortedById:eN}))});return o("div",{...M,className:eG,style:eW,children:[!!j?.preloadBgImage&&o(y,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),eP||ef?e(d,{}):eb?o("div",{children:["Error: ",eb?.message]}):eC?e("div",{children:"Products not found"}):e(k,{...eL,children:e("div",{className:"gp-flex gp-w-full",style:ex,children:o("div",{style:ej,children:[Z&&e(v,{}),eM()]})})}),I(W,!0)]})};export{ProductList as default};
1
+ import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import r from"next/dynamic";import d from"../../../common/components/Loading.js";import{useState as l,useMemo as i,useEffect as a}from"react";import{useRenderMode as c,useCurrentDevice as s,usePageType as n,usePageStore as u,useFetchHandle as m,hasPublicStoreFrontData as g,createStoreFrontFetcher as h,useProductQuery as p,useProductsQueryAll as P,useProductsQuery as f,useCollectionQuery as b,flattenConnection as k,ProductListProvider as I,filterToolbarPreview as T}from"@gem-sdk/core";import y from"../SalePageProductListWarning.js";import v from"next/head";import O from"./ProductListGridLayout.js";import N from"./ProductListCarouselLayout.js";import{getStyle as S}from"./common/styles.js";import{If as C}from"@gem-sdk/system";import{getClass as E}from"./common/classes.js";import{getData as w}from"./common/helpers.js";import{getPropertyByDevice as L}from"../../../dialog/common/helpers.js";let ProductNotFound=r(()=>import("../ProductNotFound.js"),{loading:d}),ProductList=r=>{let{children:W,styles:j,builderProps:x,setting:G,builderAttrs:A}=r,{isRelatedProduct:M,productSetting:B}=w(r),F=B.relatedTag&&B.relatedTag[0],{isEditMode:Q,isPreviewSharePageMode:z}=c(),D=s(),H=n(),R=u(e=>e.dynamicProduct),$=u(e=>e.dynamicCollection),[_,V]=l(1),[q,U]=l(!0),[J,K]=l(),[X,Y]=l(!1),Z="GP_FUNNEL_PAGE"===H,ee="GP_COLLECTION"==H;ee&&(B.productSrc="DynamicCollection",B.collectionId=$?.collectionId??"latest");let et=B?.productSrc??"Collection",eo=R?.productId&&R?.productId!==B.relatedProductId?R?.productId:B.relatedProductId,er=m(),ed=u(e=>e.publicStoreFrontData),el=i(()=>g(ed)?h(ed):er,[ed]),{data:ei}=p(M&&eo?eo:void 0,{revalidateOnMount:Q||z},el),ea=B.relatedTag&&"tags"===B.relatedTag[0]&&(!ei?.tags||ei?.tags.length===0),ec=B.relatedTag&&"collection"===B.relatedTag[0]&&(!ei?.collections?.edges||ei?.collections.edges.length===0),es=B.relatedTag&&"vendor"===B.relatedTag[0]&&!ei?.vendor,en=ea||ec||es,eu=P(J,{revalidateOnMount:Q||z},el),em=Q||z,eg=f("PickProduct"===et?B?.productIds:void 0,{revalidateOnMount:em},{defaultSelectedProductCount:B?.numOfSelectedProducts}),eh=i(()=>({id:B?.collectionId??"latest",numberOfProducts:G?.numberOfProducts??4,orderBy:G?.orderBy}),[B?.collectionId,Number(G?.numberOfProducts),G?.orderBy]),ep=b("PickProduct"!==et?eh:void 0,{revalidateOnMount:em});a(()=>{if(M&&ei&&B.relatedTag&&"recommended-product"!==B.relatedType){let e;switch(Y(!1),B.hasRelatedExclude&&(e=B?.relatedExclude&&B.relatedExclude.split(",").map(e=>e.trim())),B.relatedTag[0]){case"vendor":K({vendor:B.relatedTag&&"vendor"===B.relatedTag[0]?ei?.vendor:"",limit:G?.numberOfProducts,idNEQ:ei.id});break;case"collection":{let t;let o=ei?.collections?.edges.map(e=>e.node?.id);if(!o||o?.length===0){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o},{titleNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasCollectionProductsWith:[{hasCollectionWith:[{idIn:o}]}],limit:G?.numberOfProducts});break}case"tags":{let t;if(!ei.tags||0===ei.tags.length){Y(!0);break}K(t=e&&e.length>0?{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags},{nameNotIn:e}]}],limit:G?.numberOfProducts}:{idNEQ:ei.id,hasProductTagsWith:[{hasTagsWith:[{nameIn:ei.tags}]}],limit:G?.numberOfProducts})}}}},[ei,B.relatedType,B.relatedTag,G?.numberOfProducts,B.relatedExclude,B.hasRelatedExclude,M]);let eP="PickProduct"===et?eg.isValidating:ep.isValidating,ef="PickProduct"===et?eg.isLoading:ep.isLoading,eb="PickProduct"===et?eg.error:ep.error,ek=ep.data?.collections?.edges?.[0]?.node,eI="PickProduct"===et?k(eg.data?.products):k(ek?.products),eT=u(e=>e.assignedProductIds),ey=u(e=>e.isApplyAllProducts),ev=i(()=>(eT??[]).length>0&&!ey||ey,[eT,ey]),eO=eu?.data?.products&&ev?k(eu?.data?.products):[],eN=M?eO:"PickProduct"===et&&B?.productIds?.length?B?.productIds?.map(e=>eI?.find(t=>t?.baseID===e)).filter(Boolean)??eI:"PickProduct"!==et?eI:eI.filter((e,t)=>t<(B?.numOfSelectedProducts??4)),eS=i(()=>X&&M&&Q||!eN.length&&!ef&&q&&Q,[q,ef,X,M,Q,eN.length]),eC=i(()=>!eN||X&&M,[X,M,eN]),eE=i(()=>{if(!G?.sameHeight)return[];let e=0,t=Math.ceil((eN?.length??0)/+(G?.slidesToShow?.[D]??1));return Array.from(Array(eN?.length??0)).map((o,r)=>(r>=+(G?.slidesToShow?.[D]??1)*(e+1)&&++e,{gridRow:`${1+_*e}/${_+1+_*e}`,marginBottom:e+1<t?L(j?.horizontalGutter,D):void 0}))},[G?.sameHeight,G?.slidesToShow,_,eN?.length,D,j?.horizontalGutter]),ew=i(()=>eP||ef||eb||!eN||X&&M,[eb,ef,X,M,eP,eN]),eL=ei?.collections?.edges.map(e=>e.node?.id)??[];a(()=>{ew||setTimeout(()=>{let{builderData:e}=x??{},t=e?.childrens?.[0];if(!t)return;let o=document.querySelector(`[data-id=${t}] div`);o&&V(o.childElementCount||1)},Q?0:500)},[x,ew,Q,eL]);let eW=i(()=>({collection:ek,products:eN,settings:{loop:G?.loop??{desktop:!1},scrollMode:G?.scrollMode??{desktop:"snap"},slidesToShow:G?.slidesToShow??{desktop:4,tablet:3,mobile:1},layout:j?.layout,dot:G?.dot,dotStyle:G?.dotStyle,arrow:G?.arrow,controlOverContent:G?.controlOverContent},styles:{horizontalGutter:j?.horizontalGutter,verticalGutter:j?.verticalGutter,fullWidth:j?.fullWidth,spacing:j?.spacing,width:j?.width,height:j?.height}}),[ek,eN,G,j]);if(x?.isPreview&&Z)return e(t,{});if(eS)return e(t,{children:C(q,e(ProductNotFound,{builderAttrs:A,collectionHandle:ek?.handle,productSrc:et,onClose:()=>U(!1),children:W,relatedTagString:F,assignProductNoTags:en,noAssignedProduct:!eo}))});let{productListWrapStyle:ej,productListContentStyle:ex,productListWrapAlignStyle:eG}=S(r),{productListWrapClass:eA}=E(r),eM=()=>e(t,{children:C(j?.layout==="grid",e(O,{...r,productSortedById:eN,generateGridRowArray:eE}),e(N,{...r,productSortedById:eN}))});return o("div",{...A,className:eA,style:ej,children:[!!j?.preloadBgImage&&o(v,{children:[!!j.backgroundImage?.desktop?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage.desktop.image.src,as:"image"}),!!j.backgroundImage?.tablet?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.tablet?.image?.src,as:"image"}),!!j.backgroundImage?.mobile?.image?.src&&e("link",{rel:"preload",href:j.backgroundImage?.mobile?.image?.src,as:"image"})]}),eP||ef?e(d,{}):eb?o("div",{children:["Error: ",eb?.message]}):eC?e("div",{children:"Products not found"}):e(I,{...eW,children:e("div",{className:"gp-flex gp-w-full",style:eG,children:o("div",{style:ex,children:[Z&&e(y,{}),eM()]})})}),T(W,!0)]})};export{ProductList as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "12.0.0-staging.13",
3
+ "version": "12.0.0-staging.14",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -43,7 +43,7 @@
43
43
  },
44
44
  "dependencies": {
45
45
  "@gem-sdk/keen-slider": "^6.8.8",
46
- "@gem-sdk/swiper": "0.0.8",
46
+ "@gem-sdk/swiper": "0.0.10",
47
47
  "node-html-parser": "^6.1.13",
48
48
  "react-transition-group": "^4.4.5",
49
49
  "react-youtube": "^10.1.0"