@gem-sdk/components 17.0.0-dev.54 → 17.0.0-dev.56
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.
- package/dist/cjs/carousel-v3/components/arrow/Arrow.liquid.js +8 -8
- package/dist/cjs/carousel-v3/components/arrow/common/classes.js +1 -1
- package/dist/cjs/carousel-v3/components/root/Carousel.js +1 -1
- package/dist/cjs/carousel-v3/components/root/Carousel.liquid.js +1 -1
- package/dist/esm/carousel-v3/components/arrow/Arrow.liquid.js +6 -6
- package/dist/esm/carousel-v3/components/arrow/common/classes.js +1 -1
- package/dist/esm/carousel-v3/components/root/Carousel.js +1 -1
- package/dist/esm/carousel-v3/components/root/Carousel.liquid.js +4 -4
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/classes.js"),s=require("./common/styles.js"),r=require("./common/helpers.js"),l=require("@gem-sdk/system");exports.default=o=>{let{custom:a,left:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("./common/classes.js"),s=require("./common/styles.js"),r=require("./common/helpers.js"),l=require("@gem-sdk/system");exports.default=o=>{let{custom:a,left:i}=o,{isRenderCustomIcon:u}=r.getData(o),{buttonClass:c,buttonContentClass:m}=t.getClass({...o,isLiquid:!0}),{buttonStyle:d,buttonContentStyle:g,innerBorderCss:n}=s.getStyle(o),p=l.If(u,a??"",`<svg
|
|
2
2
|
height="100%"
|
|
3
3
|
width="100%"
|
|
4
4
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
fill="currentColor"
|
|
7
7
|
>
|
|
8
8
|
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
|
|
9
|
-
</svg>`),
|
|
9
|
+
</svg>`),y=e.template`
|
|
10
10
|
<div
|
|
11
11
|
class="${m}"
|
|
12
|
-
style="${
|
|
12
|
+
style="${g}"
|
|
13
13
|
>
|
|
14
|
-
${
|
|
14
|
+
${p||""}
|
|
15
15
|
</div>
|
|
16
16
|
`;return e.template`
|
|
17
17
|
<button
|
|
18
18
|
type="button"
|
|
19
|
-
aria-label='Carousel ${
|
|
19
|
+
aria-label='Carousel ${i?"Back":"Next"} Arrow'
|
|
20
20
|
class="${c}"
|
|
21
|
-
style="${
|
|
21
|
+
style="${d}"
|
|
22
22
|
>
|
|
23
|
-
<style type="text/css">${
|
|
24
|
-
${
|
|
23
|
+
<style type="text/css">${n}</style>
|
|
24
|
+
${y}
|
|
25
25
|
</button>
|
|
26
26
|
`};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/system"),r=require("./helpers.js");exports.getClass=s=>{let{className:t,componentId:g,rootId:p,left:i,uid:l,isHiddenWhenDisabled:o,disabled:a,showWhenHover:
|
|
1
|
+
"use strict";var e=require("@gem-sdk/system"),r=require("./helpers.js");exports.getClass=s=>{let{className:t,componentId:g,rootId:p,left:i,uid:l,isHiddenWhenDisabled:o,disabled:a,showWhenHover:c,showArrow:u,vertical:n,isLiquid:f=!1}=s,v=r.getResponsiveSetting(u||{}),y=i?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",b=`gp-invisible ${f?"":"gp-opacity-0"}`,d=e.createClass({"gp-z-1 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+l]:!0,...t&&{[t]:!0},...g&&{[g]:!0},...p&&{[p]:!0},[y]:!0,...{[b]:o&&a,"gp-cursor-default gp-text-gray-300":a,"gp-cursor-pointer gp-text-gray-500":!a,"!gp-invisible group-hover/carousel:!gp-visible":c,...r.getClassArrowDisplay(v)}}),m=e.createClass({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...r.getClassArrowRotate(!!i,n)});return{buttonClass:d,buttonContentClass:m}};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@gem-sdk/core"),o=require("../arrow/common/helpers.js"),i=require("../../hooks/useCarousel.js"),l=require("./common/helpers.js"),s=require("./common/classes.js"),n=require("./common/styles.js"),a=require("./common/attrs.js"),d=require("../arrow/Arrow.js"),u=require("../dot/Dots.js"),c=require("../swiper/Swiper.js");require("@gem-sdk/system");const p=r.forwardRef((p,m)=>{let{children:v,builderAttrs:C,builderProps:S,styles:h,isHiddenArrowWhenDisabled:k=!0,hiddenDotWhenOnlyOne:w,elmRef:y,isEnableCheckHasScrollableContent:g,onSwiperReady:j}=p,f=o.mappingNavigationCarousel(p.setting),b={...p,setting:f},q=r.Children.count(t.filterToolbarPreview(v))??0,[x,P]=r.useState(null),{arrowButtonSize:E,arrowBackgroundColor:O,arrowGapToEachSide:D="16",roundedArrow:T,arrowIconSize:A,arrowCustomColor:I,arrowBorder:N,arrowShadow:R,showWhenHover:z}=f??{},M=r.useRef({prevOrder:"",prevContent:"",version:0}),B=r.useMemo(()=>{let e=f?.childItem||[],r=e.join("|"),t=[...e].sort().join("|"),o=M.current;return o.prevOrder&&o.prevContent&&t===o.prevContent&&r!==o.prevOrder&&o.version++,o.prevOrder=r,o.prevContent=t,`reorder-${o.version}`},[f?.childItem]),{isInfinity:V,localRef:W,sliderSettings:$,totalSlideItem:H,currentSlide:F,isRenderDots:G,showNavigation:_,isScrollToStart:J,isScrollToEnd:K,handleDotClick:U,getItemsPerPage:L,handleNextAndPrevSlide:Q,dispatchEventSelectSlide:X,getNumberOfFullWidthShow:Y,setCurrentSlide:Z,shouldDuplicateSlides:ee,setIsScrollToStart:er,setIsScrollToEnd:et}=i.useCarousel(b,m,x,q),{loopConfig:eo,arrowShowConfig:ei}=l.getData(b),{rootClassRender:el,wrapperClassRender:es,wrapperInnerClass:en,sliderClass:ea}=s.getClass(b),{rootStyleRender:ed,wrapperStyleRender:eu,wrapperInnerStyle:ec}=n.getStyle(b),{rootAttrRender:ep,sliderAttr:em}=a.getAttr(b),ev=t.useCurrentDevice(),eC=f?.sneakPeak?.[ev],eS=(r,t)=>{let o="next"===r;if(q<=1)return null;let i
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@gem-sdk/core"),o=require("../arrow/common/helpers.js"),i=require("../../hooks/useCarousel.js"),l=require("./common/helpers.js"),s=require("./common/classes.js"),n=require("./common/styles.js"),a=require("./common/attrs.js"),d=require("../arrow/Arrow.js"),u=require("../dot/Dots.js"),c=require("../swiper/Swiper.js");require("@gem-sdk/system");const p=r.forwardRef((p,m)=>{let{children:v,builderAttrs:C,builderProps:S,styles:h,isHiddenArrowWhenDisabled:k=!0,hiddenDotWhenOnlyOne:w,elmRef:y,isEnableCheckHasScrollableContent:g,onSwiperReady:j}=p,f=o.mappingNavigationCarousel(p.setting),b={...p,setting:f},q=r.Children.count(t.filterToolbarPreview(v))??0,[x,P]=r.useState(null),{arrowButtonSize:E,arrowBackgroundColor:O,arrowGapToEachSide:D="16",roundedArrow:T,arrowIconSize:A,arrowCustomColor:I,arrowBorder:N,arrowShadow:R,showWhenHover:z}=f??{},M=r.useRef({prevOrder:"",prevContent:"",version:0}),B=r.useMemo(()=>{let e=f?.childItem||[],r=e.join("|"),t=[...e].sort().join("|"),o=M.current;return o.prevOrder&&o.prevContent&&t===o.prevContent&&r!==o.prevOrder&&o.version++,o.prevOrder=r,o.prevContent=t,`reorder-${o.version}`},[f?.childItem]),{isInfinity:V,localRef:W,sliderSettings:$,totalSlideItem:H,currentSlide:F,isRenderDots:G,showNavigation:_,isScrollToStart:J,isScrollToEnd:K,handleDotClick:U,getItemsPerPage:L,handleNextAndPrevSlide:Q,dispatchEventSelectSlide:X,getNumberOfFullWidthShow:Y,setCurrentSlide:Z,shouldDuplicateSlides:ee,setIsScrollToStart:er,setIsScrollToEnd:et}=i.useCarousel(b,m,x,q),{loopConfig:eo,arrowShowConfig:ei}=l.getData(b),{rootClassRender:el,wrapperClassRender:es,wrapperInnerClass:en,sliderClass:ea}=s.getClass(b),{rootStyleRender:ed,wrapperStyleRender:eu,wrapperInnerStyle:ec}=n.getStyle(b),{rootAttrRender:ep,sliderAttr:em}=a.getAttr(b),ev=t.useCurrentDevice(),eC=f?.sneakPeak?.[ev],eS=(r,t)=>{let o="next"===r;if(q<=1)return null;let i=!V&&(o?x?.isEnd:x?.isBeginning);return e.jsx(d.default,{uid:S?.uid,custom:f?.arrowCustom??"",showArrow:ei,arrowButtonSize:E||{},arrowIconSize:A||{},arrowBackgroundColor:O||"",arrowCustomColor:I,gapToEachSize:D,showWhenHover:z,arrowBorder:N||{},arrowCorner:T||{},arrowShadow:R||{},onClick:e=>{e.stopPropagation(),Q(r)},left:!o,disabled:g?o?!V&&K||!t:!V&&J||!t:i,vertical:f?.vertical,isHiddenWhenDisabled:k,rootId:p?.parentClass})},eh=r.useCallback(e=>{P(e),j?.(e)},[]),ek=r.useCallback(()=>{p?.isDisableResetSlide||(Z(0),er(!0),et(!1))},[p?.isDisableResetSlide,Z,et,er]),ew=r.Children.toArray(t.filterToolbarPreview(v)).filter(r.isValidElement),ey=ee(q),eg=ey?2*q:q,ej=r.useMemo(()=>{if(!ey)return ew;let e=ew.map((e,t)=>{if(!r.isValidElement(e))return e;let o=e.key,i=o?`${o}-duplicate-${t}`:`duplicate-${t}`;return r.cloneElement(e,{...e.props||{},key:i})});return[...ew,...e]},[ey,ew]),ef=r.useMemo(()=>{let e=r.Children.toArray(v),t=e[0];return r.isValidElement(t)?t.key:""},[v]),eb=JSON.stringify($.autoplay),eq=r.useMemo(()=>{let e=[q,B,ej.length,ef,$.dir,$.loop,$.virtual,$.direction,$.isSneakPeekCenter,eb];return e.join("-")},[q,B,ej.length,ef,$.dir,$.loop,$.virtual,$.direction,$.isSneakPeekCenter,eb]);return e.jsx("div",{ref:y,...ep,className:el,style:ed,children:e.jsxs("div",{ref:W,...C,className:es,style:eu,children:[e.jsxs("div",{className:en,style:ec,children:[eS("prev",!!_),r.createElement(c.Swiper,{...em,...$,sliderClass:ea,thumbsSwiper:p?.thumbsSwiper,onSwiperReady:eh,totalSlides:H,key:eq,sliderOrder:B,onSwiperReset:ek},t.isEmptyChildren(v)?e.jsx("div",{children:"No Slider"}):e.jsx(e.Fragment,{children:ej.map((e,t)=>{if(!r.isValidElement(e))return null;let o=e.props??{};return r.createElement(e.type,{...o,key:e.key,indexKey:t.toString(),parentSettings:f,parentStyle:h,background:f?.background,parentUid:S?.uid,dispatchEventSelectSlide:X})})})),eS("next",!!_)]}),G&&e.jsx(u.default,{dotStyle:f?.dotStyle,dotGapToCarousel:f?.dotGapToCarousel,vertical:f?.vertical,showDots:f?.dot,slideItemsPerPage:L(),enabledSneakPeak:eC,dotColor:f?.dotColor,dotActiveColor:f?.dotActiveColor,dotSize:f?.dotSize,sneakPeakType:f?.sneakPeakType,totalSlideItem:eg,hiddenWhenOnlyOne:w,currentSlide:F,loop:eo,numberOfFullWidthShow:Y(ev),onHandleClick:U,slideDuplicated:ey}),t.filterToolbarPreview(v,!0)]})})});exports.default=p;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),r=require("../arrow/Arrow.liquid.js"),t=require("../dot/Dots.liquid.js"),s=require("../arrow/common/helpers.js"),o=require("./common/helpers.js"),a=require("./common/classes.js"),i=require("./common/styles.js"),l=require("./common/attrs.js"),d=require("../../../helpers.js");exports.default=n=>{let{children:u,builderAttrs:c,builderProps:p,styles:v,isHiddenArrowWhenDisabled:g=!0,hiddenDotWhenOnlyOne:$,rootId:m,rawChildren:S,conditionAppendJs:h,productBadgeLiquid:w}=n,f=s.mappingNavigationCarousel(n.setting),y={...n,setting:f},{arrowButtonSize:C,arrowBackgroundColor:q,arrowGapToEachSide:j="16",roundedArrow:k,arrowIconSize:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),r=require("../arrow/Arrow.liquid.js"),t=require("../dot/Dots.liquid.js"),s=require("../arrow/common/helpers.js"),o=require("./common/helpers.js"),a=require("./common/classes.js"),i=require("./common/styles.js"),l=require("./common/attrs.js"),d=require("../../../helpers.js");exports.default=n=>{let{children:u,builderAttrs:c,builderProps:p,styles:v,isHiddenArrowWhenDisabled:g=!0,hiddenDotWhenOnlyOne:$,rootId:m,rawChildren:S,conditionAppendJs:h,productBadgeLiquid:w}=n,f=s.mappingNavigationCarousel(n.setting),y={...n,setting:f},{arrowButtonSize:C,arrowBackgroundColor:q,arrowGapToEachSide:j="16",roundedArrow:k,arrowIconSize:P,arrowCustomColor:A,arrowBorder:D,arrowShadow:E,showWhenHover:I}=f??{},{uniqueComponentId:b,loopConfig:R,arrowShowConfig:_,stateData:x}=o.getData(y),{rootClassRender:G,wrapperClassRender:O,wrapperInnerClass:T,sliderClass:W}=a.getClass(y),{sliderWrapperStyle:z,rootStyleRender:B,wrapperStyleRender:L,wrapperInnerStyle:H}=i.getStyle(y),{rootAttrRender:M,sliderAttr:N}=l.getAttr(y),U=()=>e.RenderIf(e.isLocalEnv,`<script ${d.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${d.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),V=e=>r.default({uid:p?.uid,componentId:b,custom:f?.arrowCustom??"",showArrow:_,arrowButtonSize:C||{},arrowIconSize:P||{},arrowBackgroundColor:q??"",arrowCustomColor:A,gapToEachSize:j,showWhenHover:I,arrowBorder:D||{},arrowCorner:k||{},arrowShadow:E||{},left:"next"!==e,onClick:e=>{e.stopPropagation()},vertical:f?.vertical,isHiddenWhenDisabled:g,rootId:m});return e.template`
|
|
2
2
|
<gp-carousel-v3 gp-data='${x}' ${M} style="${B}" class="${G}">
|
|
3
3
|
<div
|
|
4
4
|
${c}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{template as t}from"@gem-sdk/core";import{getClass as s}from"./common/classes.js";import{getStyle as o}from"./common/styles.js";import{getData as e}from"./common/helpers.js";import{If as r}from"@gem-sdk/system";let l=l=>{let{custom:m,left:i}=l,{isRenderCustomIcon:a}=e(l),{buttonClass:p,buttonContentClass:c}=s(l),{buttonStyle:n,buttonContentStyle:
|
|
1
|
+
import{template as t}from"@gem-sdk/core";import{getClass as s}from"./common/classes.js";import{getStyle as o}from"./common/styles.js";import{getData as e}from"./common/helpers.js";import{If as r}from"@gem-sdk/system";let l=l=>{let{custom:m,left:i}=l,{isRenderCustomIcon:a}=e(l),{buttonClass:p,buttonContentClass:c}=s({...l,isLiquid:!0}),{buttonStyle:n,buttonContentStyle:d,innerBorderCss:u}=o(l),w=r(a,m??"",`<svg
|
|
2
2
|
height="100%"
|
|
3
3
|
width="100%"
|
|
4
4
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -6,12 +6,12 @@ import{template as t}from"@gem-sdk/core";import{getClass as s}from"./common/clas
|
|
|
6
6
|
fill="currentColor"
|
|
7
7
|
>
|
|
8
8
|
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
|
|
9
|
-
</svg>`),
|
|
9
|
+
</svg>`),y=t`
|
|
10
10
|
<div
|
|
11
11
|
class="${c}"
|
|
12
|
-
style="${
|
|
12
|
+
style="${d}"
|
|
13
13
|
>
|
|
14
|
-
${
|
|
14
|
+
${w||""}
|
|
15
15
|
</div>
|
|
16
16
|
`;return t`
|
|
17
17
|
<button
|
|
@@ -20,7 +20,7 @@ import{template as t}from"@gem-sdk/core";import{getClass as s}from"./common/clas
|
|
|
20
20
|
class="${p}"
|
|
21
21
|
style="${n}"
|
|
22
22
|
>
|
|
23
|
-
<style type="text/css">${
|
|
24
|
-
${
|
|
23
|
+
<style type="text/css">${u}</style>
|
|
24
|
+
${y}
|
|
25
25
|
</button>
|
|
26
26
|
`};export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createClass as e}from"@gem-sdk/system";import{getClassArrowDisplay as r,getClassArrowRotate as g,getResponsiveSetting as p}from"./helpers.js";let t=t=>{let{className:s,componentId:o,rootId:i,left:l,uid:
|
|
1
|
+
import{createClass as e}from"@gem-sdk/system";import{getClassArrowDisplay as r,getClassArrowRotate as g,getResponsiveSetting as p}from"./helpers.js";let t=t=>{let{className:s,componentId:o,rootId:i,left:l,uid:c,isHiddenWhenDisabled:n,disabled:u,showWhenHover:a,showArrow:f,vertical:m,isLiquid:v=!1}=t,b=p(f||{}),d=l?"gp-carousel-action-back gem-slider-previous":"gp-carousel-action-next gem-slider-next",x=`gp-invisible ${v?"":"gp-opacity-0"}`,y=e({"gp-z-1 gp-items-center gp-justify-center gp-overflow-hidden gp-shrink-0 before:gp-left-0 before:gp-top-0":!0,["gp-carousel-arrow-"+c]:!0,...s&&{[s]:!0},...o&&{[o]:!0},...i&&{[i]:!0},[d]:!0,...{[x]:n&&u,"gp-cursor-default gp-text-gray-300":u,"gp-cursor-pointer gp-text-gray-500":!u,"!gp-invisible group-hover/carousel:!gp-visible":a,...r(b)}}),h=e({"gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full":!0,...g(!!l,m)});return{buttonClass:y,buttonContentClass:h}};export{t as getClass};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,Children as i,useState as n,useRef as l,useMemo as s,useCallback as a,isValidElement as d,cloneElement as p,createElement as m}from"react";import{filterToolbarPreview as u,useCurrentDevice as c,isEmptyChildren as S}from"@gem-sdk/core";import{mappingNavigationCarousel as h}from"../arrow/common/helpers.js";import{useCarousel as k}from"../../hooks/useCarousel.js";import{getData as v}from"./common/helpers.js";import{getClass as y}from"./common/classes.js";import{getStyle as f}from"./common/styles.js";import{getAttr as w}from"./common/attrs.js";import C from"../arrow/Arrow.js";import g from"../dot/Dots.js";import{Swiper as j}from"../swiper/Swiper.js";import"@gem-sdk/system";let b=t((t,b)=>{let{children:O,builderAttrs:P,builderProps:A,styles:D,isHiddenArrowWhenDisabled:I=!0,hiddenDotWhenOnlyOne:x,elmRef:z,isEnableCheckHasScrollableContent:N,onSwiperReady:T}=t,B=h(t.setting),R={...t,setting:B},W=i.count(u(O))??0,[$,E]=n(null),{arrowButtonSize:H,arrowBackgroundColor:G,arrowGapToEachSide:F="16",roundedArrow:J,arrowIconSize:K,arrowCustomColor:U,arrowBorder:q,arrowShadow:L,showWhenHover:M}=B??{},Q=l({prevOrder:"",prevContent:"",version:0}),V=s(()=>{let e=B?.childItem||[],r=e.join("|"),o=[...e].sort().join("|"),t=Q.current;return t.prevOrder&&t.prevContent&&o===t.prevContent&&r!==t.prevOrder&&t.version++,t.prevOrder=r,t.prevContent=o,`reorder-${t.version}`},[B?.childItem]),{isInfinity:X,localRef:Y,sliderSettings:Z,totalSlideItem:_,currentSlide:ee,isRenderDots:er,showNavigation:eo,isScrollToStart:et,isScrollToEnd:ei,handleDotClick:en,getItemsPerPage:el,handleNextAndPrevSlide:es,dispatchEventSelectSlide:ea,getNumberOfFullWidthShow:ed,setCurrentSlide:ep,shouldDuplicateSlides:em,setIsScrollToStart:eu,setIsScrollToEnd:ec}=k(R,b,$,W),{loopConfig:eS,arrowShowConfig:eh}=v(R),{rootClassRender:ek,wrapperClassRender:ev,wrapperInnerClass:ey,sliderClass:ef}=y(R),{rootStyleRender:ew,wrapperStyleRender:eC,wrapperInnerStyle:eg}=f(R),{rootAttrRender:ej,sliderAttr:eb}=w(R),eO=c(),eP=B?.sneakPeak?.[eO],eA=(r,o)=>{let i="next"===r;if(W<=1)return null;let n
|
|
2
|
+
import{jsx as e,jsxs as r,Fragment as o}from"react/jsx-runtime";import{forwardRef as t,Children as i,useState as n,useRef as l,useMemo as s,useCallback as a,isValidElement as d,cloneElement as p,createElement as m}from"react";import{filterToolbarPreview as u,useCurrentDevice as c,isEmptyChildren as S}from"@gem-sdk/core";import{mappingNavigationCarousel as h}from"../arrow/common/helpers.js";import{useCarousel as k}from"../../hooks/useCarousel.js";import{getData as v}from"./common/helpers.js";import{getClass as y}from"./common/classes.js";import{getStyle as f}from"./common/styles.js";import{getAttr as w}from"./common/attrs.js";import C from"../arrow/Arrow.js";import g from"../dot/Dots.js";import{Swiper as j}from"../swiper/Swiper.js";import"@gem-sdk/system";let b=t((t,b)=>{let{children:O,builderAttrs:P,builderProps:A,styles:D,isHiddenArrowWhenDisabled:I=!0,hiddenDotWhenOnlyOne:x,elmRef:z,isEnableCheckHasScrollableContent:N,onSwiperReady:T}=t,B=h(t.setting),R={...t,setting:B},W=i.count(u(O))??0,[$,E]=n(null),{arrowButtonSize:H,arrowBackgroundColor:G,arrowGapToEachSide:F="16",roundedArrow:J,arrowIconSize:K,arrowCustomColor:U,arrowBorder:q,arrowShadow:L,showWhenHover:M}=B??{},Q=l({prevOrder:"",prevContent:"",version:0}),V=s(()=>{let e=B?.childItem||[],r=e.join("|"),o=[...e].sort().join("|"),t=Q.current;return t.prevOrder&&t.prevContent&&o===t.prevContent&&r!==t.prevOrder&&t.version++,t.prevOrder=r,t.prevContent=o,`reorder-${t.version}`},[B?.childItem]),{isInfinity:X,localRef:Y,sliderSettings:Z,totalSlideItem:_,currentSlide:ee,isRenderDots:er,showNavigation:eo,isScrollToStart:et,isScrollToEnd:ei,handleDotClick:en,getItemsPerPage:el,handleNextAndPrevSlide:es,dispatchEventSelectSlide:ea,getNumberOfFullWidthShow:ed,setCurrentSlide:ep,shouldDuplicateSlides:em,setIsScrollToStart:eu,setIsScrollToEnd:ec}=k(R,b,$,W),{loopConfig:eS,arrowShowConfig:eh}=v(R),{rootClassRender:ek,wrapperClassRender:ev,wrapperInnerClass:ey,sliderClass:ef}=y(R),{rootStyleRender:ew,wrapperStyleRender:eC,wrapperInnerStyle:eg}=f(R),{rootAttrRender:ej,sliderAttr:eb}=w(R),eO=c(),eP=B?.sneakPeak?.[eO],eA=(r,o)=>{let i="next"===r;if(W<=1)return null;let n=!X&&(i?$?.isEnd:$?.isBeginning);return e(C,{uid:A?.uid,custom:B?.arrowCustom??"",showArrow:eh,arrowButtonSize:H||{},arrowIconSize:K||{},arrowBackgroundColor:G||"",arrowCustomColor:U,gapToEachSize:F,showWhenHover:M,arrowBorder:q||{},arrowCorner:J||{},arrowShadow:L||{},onClick:e=>{e.stopPropagation(),es(r)},left:!i,disabled:N?i?!X&&ei||!o:!X&&et||!o:n,vertical:B?.vertical,isHiddenWhenDisabled:I,rootId:t?.parentClass})},eD=a(e=>{E(e),T?.(e)},[]),eI=a(()=>{t?.isDisableResetSlide||(ep(0),eu(!0),ec(!1))},[t?.isDisableResetSlide,ep,ec,eu]),ex=i.toArray(u(O)).filter(d),ez=em(W),eN=ez?2*W:W,eT=s(()=>{if(!ez)return ex;let e=ex.map((e,r)=>{if(!d(e))return e;let o=e.key,t=o?`${o}-duplicate-${r}`:`duplicate-${r}`;return p(e,{...e.props||{},key:t})});return[...ex,...e]},[ez,ex]),eB=s(()=>{let e=i.toArray(O),r=e[0];return d(r)?r.key:""},[O]),eR=JSON.stringify(Z.autoplay),eW=s(()=>{let e=[W,V,eT.length,eB,Z.dir,Z.loop,Z.virtual,Z.direction,Z.isSneakPeekCenter,eR];return e.join("-")},[W,V,eT.length,eB,Z.dir,Z.loop,Z.virtual,Z.direction,Z.isSneakPeekCenter,eR]);return e("div",{ref:z,...ej,className:ek,style:ew,children:r("div",{ref:Y,...P,className:ev,style:eC,children:[r("div",{className:ey,style:eg,children:[eA("prev",!!eo),m(j,{...eb,...Z,sliderClass:ef,thumbsSwiper:t?.thumbsSwiper,onSwiperReady:eD,totalSlides:_,key:eW,sliderOrder:V,onSwiperReset:eI},S(O)?e("div",{children:"No Slider"}):e(o,{children:eT.map((e,r)=>{if(!d(e))return null;let o=e.props??{};return m(e.type,{...o,key:e.key,indexKey:r.toString(),parentSettings:B,parentStyle:D,background:B?.background,parentUid:A?.uid,dispatchEventSelectSlide:ea})})})),eA("next",!!eo)]}),er&&e(g,{dotStyle:B?.dotStyle,dotGapToCarousel:B?.dotGapToCarousel,vertical:B?.vertical,showDots:B?.dot,slideItemsPerPage:el(),enabledSneakPeak:eP,dotColor:B?.dotColor,dotActiveColor:B?.dotActiveColor,dotSize:B?.dotSize,sneakPeakType:B?.sneakPeakType,totalSlideItem:eN,hiddenWhenOnlyOne:x,currentSlide:ee,loop:eS,numberOfFullWidthShow:ed(eO),onHandleClick:en,slideDuplicated:ez}),u(O,!0)]})})});export{b as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{template as o,WrapRenderChildren as r,RenderChildren as
|
|
1
|
+
import{template as o,WrapRenderChildren as r,RenderChildren as s,RenderIf as e,isLocalEnv as t,baseAssetURL as i}from"@gem-sdk/core";import a from"../arrow/Arrow.liquid.js";import l from"../dot/Dots.liquid.js";import{mappingNavigationCarousel as d}from"../arrow/common/helpers.js";import{getData as p}from"./common/helpers.js";import{getClass as n}from"./common/classes.js";import{getStyle as m}from"./common/styles.js";import{getAttr as c}from"./common/attrs.js";import{getStaticLocale as u,getSettingPreloadData as $}from"../../../helpers.js";let v=v=>{let{children:f,builderAttrs:g,builderProps:w,styles:h,isHiddenArrowWhenDisabled:S=!0,hiddenDotWhenOnlyOne:y,rootId:C,rawChildren:j,conditionAppendJs:k,productBadgeLiquid:E}=v,I=d(v.setting),A={...v,setting:I},{arrowButtonSize:G,arrowBackgroundColor:P,arrowGapToEachSide:T="16",roundedArrow:b,arrowIconSize:q,arrowCustomColor:x,arrowBorder:z,arrowShadow:B,showWhenHover:D}=I??{},{uniqueComponentId:O,loopConfig:W,arrowShowConfig:_,stateData:H}=p(A),{rootClassRender:M,wrapperClassRender:N,wrapperInnerClass:R,sliderClass:U}=n(A),{sliderWrapperStyle:V,rootStyleRender:F,wrapperStyleRender:J,wrapperInnerStyle:K}=m(A),{rootAttrRender:L,sliderAttr:Q}=c(A),X=()=>e(t,`<script ${$('class="gps-link" delay',"src")}="{{ 'gp-carousel-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${$('class="gps-link" delay',"src")}="${i}/assets-v2/gp-carousel-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`),Y=o=>a({uid:w?.uid,componentId:O,custom:I?.arrowCustom??"",showArrow:_,arrowButtonSize:G||{},arrowIconSize:q||{},arrowBackgroundColor:P??"",arrowCustomColor:x,gapToEachSize:T,showWhenHover:D,arrowBorder:z||{},arrowCorner:b||{},arrowShadow:B||{},left:"next"!==o,onClick:o=>{o.stopPropagation()},vertical:I?.vertical,isHiddenWhenDisabled:S,rootId:C});return o`
|
|
2
2
|
<gp-carousel-v3 gp-data='${H}' ${L} style="${F}" class="${M}">
|
|
3
3
|
<div
|
|
4
|
-
${
|
|
4
|
+
${g}
|
|
5
5
|
class="${N}"
|
|
6
6
|
style="${J}"
|
|
7
7
|
>
|
|
@@ -11,12 +11,12 @@ import{template as o,WrapRenderChildren as r,RenderChildren as e,RenderIf as s,i
|
|
|
11
11
|
<div ${Q} style="${V}">
|
|
12
12
|
<div class="${U}">
|
|
13
13
|
${o`
|
|
14
|
-
${
|
|
14
|
+
${j?.length?r({uid:w?.uid??"",customProps:j[0]?.customProps},j.map((r,e)=>{if(r)return o`${s({...r,index:e,parentSettings:I,parentStyle:h,background:I?.background,parentUid:w?.uid})}`})):f??`<div>${u("Carousel","no_slider")}</div>`}`}
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
17
|
${Y("next")}
|
|
18
18
|
</div>
|
|
19
|
-
${
|
|
19
|
+
${l({loop:W,showDots:I?.dot,dotStyle:I?.dotStyle,dotGapToCarousel:I?.dotGapToCarousel,vertical:I?.vertical,uniqueComponentId:O,hiddenWhenOnlyOne:y})}
|
|
20
20
|
</div>
|
|
21
21
|
</gp-carousel-v3>
|
|
22
22
|
${k?`{% if ${k} %} ${X()} {% endif %}`:X()}
|