@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/esm/link/settings/configs/settings.js

@@ -0,0 +1 @@
+let LinkSettings=[{id:"setting",controls:[{id:"type",label:"Link Type",type:"select",options:[{value:"auto",label:"Auto"},{value:"product",label:"Product"},{value:"collection",label:"Collection"},{value:"custom",label:"Custom"}],default:"auto"},{id:"href",label:"Href",type:"input",default:"#",hide:!0},{id:"target",label:"Open in",type:"select",options:[{value:"_self",label:"Current Tab"},{value:"_blank",label:"New Tab"},{value:"_top",label:"Top"}],default:"_self"}]}];export{LinkSettings};

package/dist/esm/marquee/common/classes.js

@@ -0,0 +1 @@
+import{composeClasses as e,cls as s}from"@gem-sdk/core";let getAlignClasses=e("gp-flex gp-w-full gp-relative"),getContentClasses=e("!gp-relative"),getWrapperClasses=l=>e(s("gem-marquee gp-overflow-hidden gp-flex gp-items-center gp-w-full gp-h-full",l)),getFastMarqueeClasses=e("gp-overflow-hidden gp-w-full gp-h-full"),getFastMarqueeContentClasses=e("gp-flex gp-items-center gp-marque-child-item gem-child-marquee-item gp-w-full"),getFastMarqueeContentChildrenClasses=l=>e(s("gp-inline-flex gp-items-center gp-relative gp-transition-all",l?"gp-w-full":"")),getFastMarqueeChildrenIconClasses=e("gp-inline-flex gp-items-center  [&>svg]:gp-h-full [&>svg]:gp-w-full"),getItemWrapperClasses=(l,t)=>e(s("gp-relative gp-overflow-hidden gem-marquee-item ",t,l,`gem-marquee-item-${l}`)),getPlaceHolderWrapperClasses=e("first-block gp-w-[0.01px]");export{getAlignClasses,getContentClasses,getFastMarqueeChildrenIconClasses,getFastMarqueeClasses,getFastMarqueeContentChildrenClasses,getFastMarqueeContentClasses,getItemWrapperClasses,getPlaceHolderWrapperClasses,getWrapperClasses};

package/dist/esm/marquee/common/helpers.js

@@ -0,0 +1 @@
+import{getResponsiveValueByScreen as e}from"@gem-sdk/core";let useMarqueeLiquidStyles=(t,r)=>{let{itemWidthType:i}=t||{},u=t=>{let u=e(i,t);if("FIT_CONTENT"===u)return!1;if("BASE_ON_NUMBER_OF_ITEMS"===u)return!0;let l=e(r?.itemMaxWidth,t);return l?.includes("%")};return{isFullWidth:u("desktop"),getIsFullWidthValue:u}};export{useMarqueeLiquidStyles};

package/dist/esm/marquee/common/styles.js

@@ -0,0 +1 @@
+import{makeStyleResponsive as e,getGlobalColorResponsiveStyle as t,getRadiusStyleActiveState as l,getStyleShadow as a,makeStyle as o,getSingleColorVariable as i,getHeightByShapeGlobalSize as r,makeStyleWithDefault as s,getWidthByShapeGlobalSize as p,getValueByDevice as n,getResponsiveValueByScreen as d}from"@gem-sdk/core";let getAlignStyles=t=>({...e("jc",t?.align)}),getContentStyles=e=>{let{style:l,backgroundColor:a,styleWidth:o,styleHeight:i}=e||{};return{...i,...o,...l,...t("bg",a)}},getFastMarqueeChildrenIconStyles=e=>{let{index:t,itemSize:l,iconSeparatorColor:a,getHeightOfIconSeparatorSize:i,getWidthOfIconSeparatorSize:r,getIconPosition:s}=e??{};return{...o({c:a}),...t<l?s():"0px",...i?.(),...r?.()}},getItemWrapperStyles=e=>{let{itemBackgroundColor:r,itemBorderStyle:s,itemCorner:p,itemShadow:n,hasItemShadow:d,itemStyle:b}=e||{};return{...t("bg",r),...l({...p,active:{...p||{},radiusType:"custom"}}),...b,...a({value:n,styleAppliedFor:"box-shadow",isEnableShadow:d}),...o({b:s?.border,bw:s?.width,bc:i(s?.color)})}},getMarqueeStyles=t=>{let{setting:l,styles:a,itemSize:o=0}=t||{},{sizeSetting:i,iconSeparatorSize:b,itemSpacing:u}=a||{},{itemWidthType:m,isShowIconSeparator:g,iconSeparatorSvg:h}=l||{},k=e("h",r(i)),c=s("w",p(i,!0),{desktop:"--g-ct-w",tablet:"--g-ct-w",mobile:"--g-ct-w"}),x=e=>{let t=d(a?.itemMaxWidth,e),l=parseInt(t??"0");t=Math.max(l,40)+"px";let i=d(m,e);return"FIT_CONTENT"===i&&(t="auto"),"BASE_ON_NUMBER_OF_ITEMS"===i&&(t=`calc(100% / ${o})`),t},w=e=>"auto"===x(e)?"unset":x(e),y=()=>({...e("w",{desktop:x("desktop"),tablet:x("tablet"),mobile:x("mobile")}),...e("minw",{desktop:x("desktop"),tablet:x("tablet"),mobile:x("mobile")}),...e("maxw",{desktop:w("desktop"),tablet:w("tablet"),mobile:w("mobile")})}),S=()=>({...e("w",{desktop:`${n(b,"desktop")||0}px`,tablet:`${n(b,"tablet")||0}px`,mobile:`${n(b,"mobile")||0}px`}),...e("minw",{desktop:`${n(b,"desktop")||0}px`,tablet:`${n(b,"tablet")||0}px`,mobile:`${n(b,"mobile")||0}px`})}),W=()=>e("h",{desktop:`${n(b,"desktop")||0}px`,tablet:`${n(b,"tablet")||0}px`,mobile:`${n(b,"mobile")||0}px`}),M=e=>{let t=d(u,e);return t??"0px"},$=()=>({...e("ml",{desktop:M("desktop"),tablet:M("tablet"),mobile:M("mobile")}),...e("mr",{desktop:M("desktop"),tablet:M("tablet"),mobile:M("mobile")})}),q=t=>({...e("pr",{desktop:B("desktop",t),tablet:B("tablet",t),mobile:B("mobile",t)})}),C=g&&h,B=(e,t)=>{let l=d(a?.itemSpacing,e),i=0>parseInt(l||"0")?"0px":l??"0px";return C?"0px":t<o&&i||"0px"},I=()=>e("w",{desktop:"calc(100%)",tablet:"calc(100%)",mobile:"calc(100%)"});return{styleHeight:k,styleWidth:c,getIconPosition:$,getWidthOfIconSeparatorSize:S,getHeightOfIconSeparatorSize:W,getWidthForWrapperItem:y,getItemPaddingRightSpacingValue:q,getWidthForItem:I}},getWidthValue=(e,t)=>{let l=d(t,e);return l?"100%":"auto"},getWidthMarquee=t=>({...e("w",{desktop:getWidthValue("desktop",t),tablet:getWidthValue("tablet",t),mobile:getWidthValue("mobile",t)}),...e("minw",{desktop:getWidthValue("desktop",t),tablet:getWidthValue("tablet",t),mobile:getWidthValue("mobile",t)})}),getContainerBaseStyle=e=>{let{style:t,play:l,pauseOnHover:a,pauseOnClick:o}=e??{};return{...t,"--pause-on-hover":!l||a?"paused":"running","--pause-on-click":!l||a&&!o||o?"paused":"running","--width":"100%","--transform":"none","min-width":"100%"}},getMarqueeBaseStyle=e=>{let{play:t,direction:l,delay:a,loop:o,autoFill:i}=e||{};return{"--play":t?"running":"paused","--direction":"left"===l?"normal":"reverse","--delay":`${a}s`,"--iteration-count":o?`${o}`:"infinite","--min-width":i?"auto":"100%",...getWidthMarquee(e?.isFullWidthResponsive)}},getChildBaseStyle=(e,t)=>({"--transform":"up"===e?"rotate(90deg)":"down"===e?"rotate(-90deg)":"none",...getWidthMarquee(t)});export{getAlignStyles,getChildBaseStyle,getContainerBaseStyle,getContentStyles,getFastMarqueeChildrenIconStyles,getItemWrapperStyles,getMarqueeBaseStyle,getMarqueeStyles,getWidthMarquee};

package/dist/esm/marquee/components/Marquee.js

@@ -1,153 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEditorMode, filterToolbarPreview, makeStyleResponsive, getGlobalColorResponsiveStyle, cls, isEmptyChildren, makeStyle } from '@gem-sdk/core';
-import { useMemo, Children, isValidElement } from 'react';
-import { useMarqueeStyles } from '../hooks/useMarqueeStyles.js';
-import { useMarqueeScrollToItem } from '../hooks/useMarqueeScrollToItem.js';
-import FastMarquee from './MarqueeBase.js';
-
-const Marquee = ({ children, style, builderAttrs, ...props })=>{
-    const { styles, setting, builderProps } = props;
-    const { iconSeparatorSvg, isShowIconSeparator, stopOnHover, speed } = setting || {};
-    const mode = useEditorMode();
-    const { getValueForIconSeparator, styleWidth, styleHeight, iconSeparatorColor, backgroundColor, itemSpacingValue, isFullWidth, getWidthForWrapperItem, getItemSpacingValue } = useMarqueeStyles({
-        children,
-        style,
-        builderAttrs,
-        ...props
-    });
-    const { rate, wrapperElement, timeToScroll, hoverItem, setHoverItem, setActiveItem, activeItem, // onClickMarquee,
-    direction, isPause } = useMarqueeScrollToItem({
-        children,
-        style,
-        builderAttrs,
-        ...props
-    });
-    const itemSize = useMemo(()=>{
-        return Children.count(filterToolbarPreview(children));
-    }, [
-        children
-    ]);
-    const isPlay = useMemo(()=>{
-        if (mode !== 'edit') {
-            return true;
-        }
-        if (isPause) {
-            return false;
-        }
-        if (builderProps?.isPreview) {
-            return true;
-        }
-        return mode === 'edit' ? rate > 0 : true;
-    }, [
-        rate,
-        builderProps?.isPreview,
-        mode,
-        isPause
-    ]);
-    const rateUse = useMemo(()=>{
-        if (isPlay) {
-            return (speed || 0) * 100;
-        }
-        return rate;
-    }, [
-        rate,
-        isPlay,
-        speed
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "gp-flex gp-w-full gp-relative",
-        style: {
-            ...makeStyleResponsive('jc', styles?.align)
-        },
-        children: /*#__PURE__*/ jsxs("div", {
-            "data-id": builderProps?.uid,
-            className: "gp-relative gp-overflow-hidden",
-            style: {
-                ...styleHeight,
-                ...styleWidth,
-                ...style,
-                ...getGlobalColorResponsiveStyle('bg', backgroundColor)
-            },
-            ...builderAttrs,
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: cls(builderProps?.uid, 'gem-marquee  gp-flex gp-items-center gp-w-full gp-h-full'),
-                    ref: wrapperElement,
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: "gp-overflow-hidden gp-w-full gp-h-full",
-                        children: /*#__PURE__*/ jsx(FastMarquee, {
-                            autoFill: true,
-                            play: isPlay,
-                            speed: rateUse,
-                            isFullWidth: isFullWidth,
-                            pauseOnHover: stopOnHover,
-                            direction: direction,
-                            uniqueId: builderProps?.uid,
-                            style: {
-                                ...styleWidth,
-                                width: '100%'
-                            },
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: "gp-flex gp-items-center  gp-marque-child-item gp-w-full",
-                                children: isEmptyChildren(children) ? /*#__PURE__*/ jsx("div", {
-                                    children: "No Slider"
-                                }) : Children.map(filterToolbarPreview(children), (child, index)=>{
-                                    if (/*#__PURE__*/ isValidElement(child)) {
-                                        return /*#__PURE__*/ jsxs("div", {
-                                            className: cls('gp-inline-flex gp-items-center gp-relative gp-transition-all', isFullWidth ? 'gp-w-full' : ''),
-                                            style: {
-                                                ...getItemSpacingValue(index),
-                                                textWrap: 'wrap',
-                                                ...getWidthForWrapperItem
-                                            },
-                                            children: [
-                                                /*#__PURE__*/ jsx(child.type, {
-                                                    ...child.props,
-                                                    index: index,
-                                                    activeItem: activeItem,
-                                                    hoverItem: hoverItem,
-                                                    timeToScroll: Math.abs(timeToScroll || 0) * 1000,
-                                                    setHoverItem: setHoverItem,
-                                                    setActiveItem: setActiveItem,
-                                                    className: `gem-marquee-item gem-marquee-item-${index} `,
-                                                    itemBorderStyle: styles?.itemBorderStyle,
-                                                    itemCorner: styles?.itemCorner,
-                                                    itemBackgroundColor: styles?.itemBackgroundColor,
-                                                    hasItemShadow: setting?.hasItemShadow,
-                                                    itemShadow: styles?.itemShadow,
-                                                    itemStyle: {
-                                                        width: `calc(100%)`
-                                                    }
-                                                }),
-                                                isShowIconSeparator && iconSeparatorSvg && /*#__PURE__*/ jsx("span", {
-                                                    style: {
-                                                        ...makeStyle({
-                                                            c: iconSeparatorColor,
-                                                            h: getValueForIconSeparator(),
-                                                            w: getValueForIconSeparator(),
-                                                            minw: getValueForIconSeparator()
-                                                        }),
-                                                        marginLeft: index < itemSize ? itemSpacingValue : '0px',
-                                                        marginRight: index < itemSize ? itemSpacingValue : '0px'
-                                                    },
-                                                    className: cls('gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full'),
-                                                    dangerouslySetInnerHTML: {
-                                                        __html: iconSeparatorSvg
-                                                    }
-                                                })
-                                            ]
-                                        }, child.key);
-                                    }
-                                    return null;
-                                })
-                            })
-                        })
-                    })
-                }),
-                filterToolbarPreview(children, true)
-            ]
-        })
-    });
-};
-
-export { Marquee as default };
+'use client';
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{filterToolbarPreview as s,cls as t,isEmptyChildren as i}from"@gem-sdk/core";import{useMemo as o,Children as m,isValidElement as a}from"react";import{useMarqueeStyles as l}from"../hooks/useMarqueeStyles.js";import{useMarqueeScrollToItem as d}from"../hooks/useMarqueeScrollToItem.js";import c from"./MarqueeBase.js";import{useMarquee as n}from"../hooks/useMarquee.js";import{createClass as u,createStyle as h,If as p}from"@gem-sdk/system";import{getAlignClasses as v,getContentClasses as y,getWrapperClasses as f,getFastMarqueeClasses as S,getFastMarqueeContentClasses as N,getFastMarqueeContentChildrenClasses as w,getFastMarqueeChildrenIconClasses as I}from"../common/classes.js";import{getMarqueeStyles as k,getAlignStyles as j,getContentStyles as q,getFastMarqueeChildrenIconStyles as M}from"../common/styles.js";let Marquee=({children:g,style:B,builderAttrs:C,advanced:x,...H})=>{let{styles:T,setting:F,builderProps:P}=H,{iconSeparatorSvg:_,isShowIconSeparator:A,stopOnHover:L,speed:O}=F||{},{backgroundColor:W,iconSeparatorColor:b}=T||{},z=o(()=>m.count(s(g)),[g]),{isFullWidth:D}=l({setting:F,styles:T,itemSize:z}),{styleHeight:E,styleWidth:G,getWidthForWrapperItem:J,getHeightOfIconSeparatorSize:K,getWidthOfIconSeparatorSize:Q,getIconPosition:R,getItemPaddingRightSpacingValue:U,getWidthForItem:V}=k({setting:F,styles:T,itemSize:z}),{rate:X,wrapperElement:Y,scrollTime:Z,hoverItem:$,setHoverItem:ee,setActiveItem:er,activeItem:es,direction:et,isPause:ei,scrollToItemClass:eo}=d({children:g,style:B,builderAttrs:C,...H}),{isPlay:em,rateUse:ea}=n({children:g,isPause:ei,isPreview:P?.isPreview,rate:X,speed:O}),el=u(v),ed=h(j(T)),ec=h(q({style:B,backgroundColor:W,styleWidth:G,styleHeight:E})),en=u(y),eu=u(f(P?.uid)),eh=u(S),ep=u(N),ev=u(w(D)),ey=e=>h(M({index:e,itemSize:z,iconSeparatorColor:b,getHeightOfIconSeparatorSize:K,getWidthOfIconSeparatorSize:Q,getIconPosition:R})),ef=u(I),eS=e=>h({...U(e),"text-wrap":"wrap",...J()}),eN=h(V());return e("div",{"data-id":P?.uid,className:t(P?.uid,x?.cssClass),children:e("div",{className:el,style:ed,children:r("div",{"data-id":P?.uid,className:en,style:ec,...C,children:[e("div",{className:eu,ref:Y,children:e("div",{className:eh,children:e(c,{autoFill:!0,play:em,speed:ea,isFullWidth:D,pauseOnHover:L,direction:et,uniqueId:P?.uid,style:{...G,width:"100%"},children:e("div",{className:ep,children:i(g)?e("div",{children:"No Slider"}):m.map(s(g),(s,t)=>a(s)?r("div",{className:ev,style:eS(t),children:[e(s.type,{...s.props,index:t,activeItem:es,hoverItem:$,timeToScroll:Z,setHoverItem:ee,setActiveItem:er,className:eo(t),itemBorderStyle:T?.itemBorderStyle,itemCorner:T?.itemCorner,itemBackgroundColor:T?.itemBackgroundColor,hasItemShadow:F?.hasItemShadow,itemShadow:T?.itemShadow,itemStyle:eN}),p(!!(A&&_),e("span",{style:ey(t),className:ef,dangerouslySetInnerHTML:{__html:_??""}}))]},s.key):null)})})})}),s(g,!0)]})})})};export{Marquee as default};

package/dist/esm/marquee/components/Marquee.liquid.js

@@ -1,229 +1,28 @@
-import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, template, RenderIf, isLocalEnv, baseAssetURL, cls, getGlobalColorResponsiveStyle, WrapRenderChildren, RenderChildren, makeStyle, getValueByDevice, getResponsiveValueByScreen } from '@gem-sdk/core';
-import MarqueeBase from './MarqueeBase.liquid.js';
-
-const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...props })=>{
-    const { styles, setting, builderProps } = props;
-    const { itemSpacing, sizeSetting, iconSeparatorSize, iconSeparatorColor, backgroundColor } = styles || {};
-    const { iconSeparatorSvg, isShowIconSeparator, itemWidthType } = setting || {};
-    const styleHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(sizeSetting));
-    const styleWidth = makeStyleWithDefault('w', getWidthByShapeGlobalSize(sizeSetting, true), {
-        desktop: '--g-ct-w',
-        tablet: '--g-ct-w',
-        mobile: '--g-ct-w'
-    });
-    const getItemSpacingValue = (currentDevice)=>{
-        const itemSpacingValueByScreen = getResponsiveValueByScreen(itemSpacing, currentDevice);
-        return itemSpacingValueByScreen || '0px';
-    };
-    const getIconPosition = ()=>{
-        return {
-            ...makeStyleResponsive('ml', {
-                desktop: getItemSpacingValue('desktop'),
-                tablet: getItemSpacingValue('tablet'),
-                mobile: getItemSpacingValue('mobile')
-            }),
-            ...makeStyleResponsive('mr', {
-                desktop: getItemSpacingValue('desktop'),
-                tablet: getItemSpacingValue('tablet'),
-                mobile: getItemSpacingValue('mobile')
-            })
-        };
-    };
-    const getSpacingResponsive = (key)=>{
-        return makeStyleResponsive(key, {
-            desktop: hasIcon ? '0px' : getItemSpacingValue('desktop'),
-            tablet: hasIcon ? '0px' : getItemSpacingValue('tablet'),
-            mobile: hasIcon ? '0px' : getItemSpacingValue('mobile')
-        });
-    };
-    const getWidthOfIconSeparatorSize = ()=>{
-        return {
-            ...makeStyleResponsive('w', {
-                desktop: `${getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-                tablet: `${getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-                mobile: `${getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-            }),
-            ...makeStyleResponsive('minw', {
-                desktop: `${getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-                tablet: `${getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-                mobile: `${getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-            })
-        };
-    };
-    const getHeightOfIconSeparatorSize = ()=>{
-        return makeStyleResponsive('h', {
-            desktop: `${getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-            tablet: `${getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-            mobile: `${getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-        });
-    };
-    const itemSize = rawChildren.length;
-    const getIsFullWidthValue = (currentDevice)=>{
-        const itemWidthTypeValue = getResponsiveValueByScreen(itemWidthType, currentDevice);
-        if (itemWidthTypeValue === 'FIT_CONTENT') {
-            return false;
-        }
-        if (itemWidthTypeValue === 'BASE_ON_NUMBER_OF_ITEMS') {
-            return true;
-        }
-        const itemMaxWidthValue = getResponsiveValueByScreen(styles?.itemMaxWidth, currentDevice);
-        return itemMaxWidthValue?.includes('%');
-    };
-    const getItemMaxWidthValueByScreen = (device)=>{
-        let value = getResponsiveValueByScreen(styles?.itemMaxWidth, device);
-        const itemWidthTypeValue = getResponsiveValueByScreen(itemWidthType, device);
-        if (itemWidthTypeValue === 'FIT_CONTENT') {
-            value = 'auto';
-        }
-        if (itemWidthTypeValue === 'BASE_ON_NUMBER_OF_ITEMS') {
-            value = `calc(100% / ${itemSize})`;
-        }
-        return value;
-    };
-    const getMaxWidth = (device)=>{
-        return getItemMaxWidthValueByScreen(device) === 'auto' ? 'unset' : getItemMaxWidthValueByScreen(device);
-    };
-    const getWidthForWrapperItem = ()=>{
-        return {
-            ...makeStyleResponsive('w', {
-                desktop: getItemMaxWidthValueByScreen('desktop'),
-                tablet: getItemMaxWidthValueByScreen('tablet'),
-                mobile: getItemMaxWidthValueByScreen('mobile')
-            }),
-            ...makeStyleResponsive('minw', {
-                desktop: getItemMaxWidthValueByScreen('desktop'),
-                tablet: getItemMaxWidthValueByScreen('tablet'),
-                mobile: getItemMaxWidthValueByScreen('mobile')
-            }),
-            ...makeStyleResponsive('maxw', {
-                desktop: getMaxWidth('desktop'),
-                tablet: getMaxWidth('tablet'),
-                mobile: getMaxWidth('mobile')
-            })
-        };
-    };
-    const isFullWidthResponsive = ()=>{
-        return {
-            desktop: getIsFullWidthValue('desktop'),
-            tablet: getIsFullWidthValue('tablet'),
-            mobile: getIsFullWidthValue('mobile')
-        };
-    };
-    const getWidthForItem = ()=>{
-        return makeStyleResponsive('w', {
-            desktop: `calc(100%)`,
-            tablet: `calc(100%)`,
-            mobile: `calc(100%)`
-        });
-    };
-    const getFullWidthForItemByDevice = (device)=>{
-        const isFullWidth = getIsFullWidthValue(device);
-        return isFullWidth ? '100%' : 'unset';
-    };
-    const getFullWidthForItem = ()=>{
-        return makeStyleResponsive('w', {
-            desktop: getFullWidthForItemByDevice('desktop'),
-            tablet: getFullWidthForItemByDevice('tablet'),
-            mobile: getFullWidthForItemByDevice('mobile')
-        });
-    };
-    const hasIcon = isShowIconSeparator && iconSeparatorSvg;
-    const wrapperStyle = {
-        '--z': style?.['--z'],
-        '--pos': style?.['--pos'],
-        '--top': style?.['--top'],
-        '--right': style?.['--right'],
-        '--bottom': style?.['--bottom'],
-        '--left': style?.['--left']
-    };
-    return template` 
-  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-marquee.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets-v2/gp-marquee.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  <gp-marquee
-   data-id="${builderProps?.uid}"
-    style="${wrapperStyle}"
-  gp-data='${JSON.stringify({
-        setting: {
-            ...setting,
-            uid: builderProps?.uid
-        },
-        styles
-    })}'
-  class="${cls(builderProps?.uid, advanced?.cssClass)}"
-  >
-   <div
-      class="gp-flex gp-w-full gp-relative"
-      style="${{
-        ...makeStyleResponsive('jc', styles?.align)
-    }}"
-    >
-  <div class="!gp-relative gp-overflow-hidden" style="${{
-        ...styleHeight,
-        ...styleWidth,
-        ...getGlobalColorResponsiveStyle('bg', backgroundColor),
-        ...style
-    }}">
-        <div
-    class="gem-marquee gp-overflow-hidden gp-w-full gp-h-full"
-     
-    >
-     <div class="gp-overflow-hidden gp-w-full gp-h-full">
-       ${MarqueeBase({
-        speed: props.setting?.speed,
-        autoFill: true,
-        direction: props.setting?.direction,
-        play: (props.setting?.speed || 0) > 0,
-        isFullWidthResponsive: isFullWidthResponsive(),
-        pauseOnHover: props.setting?.stopOnHover,
-        children: ` <div class="gp-flex gem-child-marquee-item gp-items-center" style="${getFullWidthForItem()}">
-      ${rawChildren?.length ? WrapRenderChildren({
-            uid: builderProps?.uid || '',
-            customProps: rawChildren[0]?.customProps
-        }, rawChildren.map((child, index)=>{
-            if (child) {
-                return template` <div
-                  class="gp-inline-flex gp-items-center gp-relative"
-                  style="${{
-                    ...index < itemSize ? getSpacingResponsive('pr') : {},
-                    'text-wrap': 'wrap',
-                    ...getWidthForWrapperItem()
-                }}"
-                >
-                  ${RenderChildren({
-                    ...child,
-                    index,
-                    itemBorderStyle: styles?.itemBorderStyle,
-                    itemCorner: styles?.itemCorner,
-                    itemBackgroundColor: styles?.itemBackgroundColor,
-                    hasItemShadow: setting?.hasItemShadow,
-                    itemShadow: styles?.itemShadow,
-                    itemStyles: getWidthForItem()
-                })}
-                   ${isShowIconSeparator && iconSeparatorSvg ? template`<span
-                      style="${{
-                    ...makeStyle({
-                        c: iconSeparatorColor
-                    }),
-                    ...getWidthOfIconSeparatorSize(),
-                    ...getHeightOfIconSeparatorSize(),
-                    ...index < itemSize ? getIconPosition() : {}
-                }}"
-                      class="gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full"
-                     
-                    >
-                    ${iconSeparatorSvg}
-                    </span>` : ''}
-                </div>`;
-            }
-        })) : children}
-    </div>`
-    })}
-     </div>
-    </div>
-  
-  </div>
+import{template as e,cls as s,WrapRenderChildren as t,RenderChildren as i,RenderIf as r,isLocalEnv as o,baseAssetURL as d}from"@gem-sdk/core";import a from"./MarqueeBase.liquid.js";import{useMarqueeLiquidStyles as m}from"../common/helpers.js";import{createClass as l,createStyle as p,createStateOrContext as c,If as u}from"@gem-sdk/system";import{getMarqueeStyles as n,getAlignStyles as $,getContentStyles as v,getFastMarqueeChildrenIconStyles as g}from"../common/styles.js";import{getAlignClasses as f,getContentClasses as S,getWrapperClasses as h,getFastMarqueeContentClasses as y,getFastMarqueeClasses as q,getFastMarqueeContentChildrenClasses as j,getFastMarqueeChildrenIconClasses as k}from"../common/classes.js";let Marquee=({children:w,style:B,builderAttrs:C,rawChildren:b,advanced:E,...M})=>{let{styles:O,setting:I,builderProps:P}=M,{iconSeparatorColor:x,backgroundColor:A}=O||{},{iconSeparatorSvg:F,isShowIconSeparator:G}=I||{},H=b.length,{isFullWidth:N,getIsFullWidthValue:R}=m(I,O),{styleHeight:_,styleWidth:J,getWidthForWrapperItem:T,getHeightOfIconSeparatorSize:V,getWidthOfIconSeparatorSize:W,getIconPosition:z,getItemPaddingRightSpacingValue:D,getWidthForItem:K}=n({itemSize:H,setting:I,styles:O}),L=()=>({desktop:R("desktop"),tablet:R("tablet"),mobile:R("mobile")}),Q=l(f),U=p($(O)),X=p(v({style:B,backgroundColor:A,styleWidth:J,styleHeight:_})),Y=l(S),Z=l(h(P?.uid)),ee=l(y),es=l(q),et=l(j(N)),ei=e=>p(g({index:e,itemSize:H,iconSeparatorColor:x,getHeightOfIconSeparatorSize:V,getWidthOfIconSeparatorSize:W,getIconPosition:z})),er=l(k),eo=e=>p({...D(e),"text-wrap":"wrap",...T()}),ed=p(K()),ea=c({setting:{...I,uid:P?.uid},styles:O}),em=()=>r(o,'<script src="{{ \'gp-marquee-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${d}/assets-v2/gp-marquee-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
+  ${em()}
+  <gp-marquee data-id="${P?.uid}" gp-data='${JSON.stringify(ea)}'
+   class="${s(P?.uid,E?.cssClass)}">
+   <div class="${Q}" style="${U}">
+      <div class="${Y}" style="${X}">
+         <div class="${Z}">
+            <div class="${es}">
+               ${a({speed:M.setting?.speed,autoFill:!0,direction:M.setting?.direction,play:(M.setting?.speed??0)>0,pauseOnHover:M.setting?.stopOnHover,isFullWidthResponsive:L(),children:`
+               <div class="${ee}">
+                  ${b?.length?t({uid:P?.uid??"",customProps:b[0]?.customProps},b.map((s,t)=>{if(s)return e`
+                  <div class="${et}"
+                     style="${eo(t)}">
+                     ${i({...s,index:t,itemBorderStyle:O?.itemBorderStyle,itemCorner:O?.itemCorner,itemBackgroundColor:O?.itemBackgroundColor,hasItemShadow:I?.hasItemShadow,itemShadow:O?.itemShadow,itemStyles:ed})}
+                     ${u(!!(G&&F),e`<span style="${ei(t)}"
+                        class="${er}">
+                        ${F}
+                     </span>`)}
+                  </div>
+                  `})):w}
+               </div>
+               `})}
+            </div>
+         </div>
+      </div>
    </div>
-  </gp-marquee>
-`;
-};
-
-export { Marquee as default };
+</gp-marquee>
+`};export{Marquee as default};

package/dist/esm/marquee/components/MarqueeBase.js

@@ -1,212 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEditorMode } from '@gem-sdk/core';
-import { memo, forwardRef, useState, useRef, useCallback, useEffect, useMemo, Fragment, Children } from 'react';
-
-const Marquee = /*#__PURE__*/ forwardRef(function Marquee({ style = {}, className = '', autoFill = false, play = true, pauseOnHover = false, pauseOnClick = false, direction = 'left', speed = 50, delay = 0, loop = 0, onFinish, onCycleComplete, onMount, children, isFullWidth, uniqueId }, ref) {
-    const mode = useEditorMode();
-    // React Hooks
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [marqueeWidth, setMarqueeWidth] = useState(0);
-    const [multiplier, setMultiplier] = useState(1);
-    const [isMounted, setIsMounted] = useState(false);
-    const rootRef = useRef(null);
-    const containerRef = ref || rootRef;
-    const marqueeRef = useRef(null);
-    const timeout = useRef(null);
-    // Calculate width of container and marquee and set multiplier
-    const calculateWidth = useCallback(()=>{
-        if (marqueeRef.current && containerRef.current) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const marqueeRect = marqueeRef.current.getBoundingClientRect();
-            let containerWidth = containerRect.width;
-            let marqueeWidth = marqueeRect.width;
-            if (marqueeWidth < 40) {
-                return;
-            }
-            if (isFullWidth) {
-                marqueeWidth = containerWidth;
-                marqueeRef.current.style.width = `${marqueeWidth}px`;
-            } else {
-                marqueeRef.current.style.width = 'auto';
-            }
-            // Swap width and height if direction is up or down
-            if (direction === 'up' || direction === 'down') {
-                containerWidth = containerRect.height;
-                marqueeWidth = marqueeRect.height;
-            }
-            if (autoFill && containerWidth && marqueeWidth) {
-                setMultiplier(Math.min(60, marqueeWidth < containerWidth ? Math.ceil(containerWidth / marqueeWidth) + 1 : 1));
-            } else {
-                setMultiplier(2);
-            }
-            setContainerWidth(containerWidth);
-            setMarqueeWidth(marqueeWidth);
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        autoFill,
-        containerRef,
-        direction,
-        isFullWidth,
-        children
-    ]);
-    // Calculate width and multiplier on mount and on window resize
-    useEffect(()=>{
-        if (!isMounted) return;
-        if (marqueeRef.current && containerRef.current) {
-            const resizeObserver = new ResizeObserver(()=>{
-                timeout.current && clearTimeout(timeout.current);
-                timeout.current = setTimeout(()=>{
-                    calculateWidth();
-                }, 600);
-            });
-            resizeObserver.observe(marqueeRef.current);
-            resizeObserver.observe(containerRef.current);
-            return ()=>{
-                if (!resizeObserver) return;
-                resizeObserver.disconnect();
-            };
-        }
-    }, [
-        calculateWidth,
-        containerRef,
-        isMounted
-    ]);
-    // Recalculate width when children change
-    useEffect(()=>{
-        if (mode === 'edit') {
-            timeout.current = setTimeout(()=>{
-                calculateWidth();
-            }, 500);
-        }
-    }, [
-        children,
-        calculateWidth,
-        mode
-    ]);
-    useEffect(()=>{
-        setIsMounted(true);
-        return ()=>{
-            timeout.current && clearTimeout(timeout.current);
-        };
-    }, []);
-    // Runs the onMount callback, if it is a function, when Marquee is mounted.
-    useEffect(()=>{
-        if (typeof onMount === 'function') {
-            onMount();
-        }
-    }, [
-        onMount
-    ]);
-    // Animation duration
-    const duration = useMemo(()=>{
-        if (autoFill) {
-            return marqueeWidth * multiplier / speed;
-        } else {
-            return marqueeWidth < containerWidth ? containerWidth / speed : marqueeWidth / speed;
-        }
-    }, [
-        autoFill,
-        containerWidth,
-        marqueeWidth,
-        multiplier,
-        speed
-    ]);
-    const containerStyle = useMemo(()=>({
-            ...style,
-            marginLeft: '1px',
-            ['--pause-on-hover']: !play || pauseOnHover ? 'paused' : 'running',
-            ['--pause-on-click']: !play || pauseOnHover && !pauseOnClick || pauseOnClick ? 'paused' : 'running',
-            ['--width']: direction === 'up' || direction === 'down' ? `100vh` : '100%',
-            ['--transform']: direction === 'up' ? 'rotate(-90deg)' : direction === 'down' ? 'rotate(90deg)' : 'none'
-        }), [
-        style,
-        play,
-        pauseOnHover,
-        pauseOnClick,
-        direction
-    ]);
-    const marqueeStyle = useMemo(()=>({
-            ['--play']: play ? 'running' : 'paused',
-            ['--direction']: direction === 'left' ? 'normal' : 'reverse',
-            ['--duration']: `${duration}s`,
-            ['--delay']: `${delay}s`,
-            ['--iteration-count']: loop ? `${loop}` : 'infinite',
-            ['--min-width']: autoFill ? `auto` : '100%',
-            width: isFullWidth ? '100%' : 'auto'
-        }), [
-        play,
-        direction,
-        duration,
-        delay,
-        loop,
-        autoFill,
-        isFullWidth
-    ]);
-    const childStyle = useMemo(()=>({
-            ['--transform']: direction === 'up' ? 'rotate(90deg)' : direction === 'down' ? 'rotate(-90deg)' : 'none',
-            width: isFullWidth ? '100%' : 'auto',
-            minWidth: isFullWidth ? '100%' : 'unset'
-        }), [
-        direction,
-        isFullWidth
-    ]);
-    // Render {multiplier} number of children
-    const multiplyChildren = useCallback((multiplier)=>{
-        return [
-            ...Array(Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0)
-        ].map((_, i)=>/*#__PURE__*/ jsx(Fragment, {
-                children: Children.map(children, (child)=>{
-                    return /*#__PURE__*/ jsx("div", {
-                        "marquee-item-key": `${uniqueId}-${i + 100}`,
-                        style: childStyle,
-                        className: "rfm-child",
-                        children: child
-                    });
-                })
-            }, i));
-    }, [
-        childStyle,
-        children,
-        uniqueId
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        ref: containerRef,
-        style: {
-            ...containerStyle,
-            overflow: 'unset'
-        },
-        className: 'rfm-marquee-container ' + className,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "rfm-marquee",
-                style: marqueeStyle,
-                onAnimationIteration: onCycleComplete,
-                onAnimationEnd: onFinish,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `rfm-initial-child-container`,
-                        ref: marqueeRef,
-                        children: Children.map(children, (child)=>{
-                            return /*#__PURE__*/ jsx("div", {
-                                style: childStyle,
-                                "marquee-item-key": `${uniqueId}-0`,
-                                className: `rfm-child ${isFullWidth ? 'gp-w-full' : ''}`,
-                                children: child
-                            }, String(child));
-                        })
-                    }),
-                    multiplyChildren(multiplier - 1)
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "rfm-marquee",
-                style: marqueeStyle,
-                children: multiplyChildren(multiplier)
-            })
-        ]
-    });
-});
-var FastMarquee = /*#__PURE__*/ memo(Marquee);
-
-export { FastMarquee as default };
+'use client';
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{memo as a,forwardRef as i,useCallback as m,Fragment as t,Children as s}from"react";import{useMarqueeBase as l}from"../hooks/useMarqueeBase.js";import{createStyle as n}from"@gem-sdk/system";let Marquee=i(function(a,i){let{className:c="",onFinish:o,onCycleComplete:d,children:u,isFullWidth:f,uniqueId:h}=a,{containerRef:q,containerStyle:p,childStyle:y,marqueeStyle:v,marqueeRef:N,multiplier:M}=l(a,i),k=m(r=>[...Array(Number.isFinite(r)&&r>=0?r:0)].map((r,a)=>e(t,{children:s.map(u,r=>e("div",{"marquee-item-key":`${h}-${a+100}`,style:y,className:"rfm-child",children:r}))},a)),[y,u,h]),$=n(p),g=n(y),A=n(v);return r("div",{ref:q,style:{...$,overflow:"unset"},className:"rfm-marquee-container "+c,children:[r("div",{className:"rfm-marquee",style:A,onAnimationIteration:d,onAnimationEnd:o,children:[e("div",{className:"rfm-initial-child-container",ref:N,children:s.map(u,r=>e("div",{style:g,"marquee-item-key":`${h}-0`,className:`rfm-child ${f?"gp-w-full":""}`,children:r},String(r)))}),k(M-1)]}),e("div",{className:"rfm-marquee",style:v,children:k(M)})]})});var MarqueeBase=a(Marquee);export{MarqueeBase as default};