"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),s=require("./MarqueeBase.liquid.js"),t=require("../common/helpers.js"),r=require("@gem-sdk/system"),a=require("../common/styles.js"),l=require("../common/classes.js");exports.default=({children:i,style:d,builderAttrs:o,rawChildren:n,advanced:c,...u})=>{let{styles:p,setting:m,builderProps:g}=u,{iconSeparatorColor:C,backgroundColor:y}=p||{},{iconSeparatorSvg:S,isShowIconSeparator:v}=m||{},$=n.length,{isFullWidth:q,getIsFullWidthValue:h}=t.useMarqueeLiquidStyles(m,p),{styleHeight:f,styleWidth:M,getWidthForWrapperItem:j,getHeightOfIconSeparatorSize:F,getWidthOfIconSeparatorSize:I,getIconPosition:b,getItemPaddingRightSpacingValue:k,getWidthForItem:w}=a.getMarqueeStyles({itemSize:$,setting:m,styles:p}),O=r.createClass(l.getAlignClasses),R=r.createStyle(a.getAlignStyles(p)),A=r.createStyle(a.getContentStyles({style:d,backgroundColor:y,styleWidth:M,styleHeight:f})),B=r.createClass(l.getContentClasses),E=r.createClass(l.getWrapperClasses(g?.uid)),x=r.createClass(l.getFastMarqueeContentClasses),P=r.createClass(l.getFastMarqueeClasses),_=r.createClass(l.getFastMarqueeContentChildrenClasses(q)),L=e=>r.createStyle(a.getFastMarqueeChildrenIconStyles({index:e,itemSize:$,iconSeparatorColor:C,getHeightOfIconSeparatorSize:F,getWidthOfIconSeparatorSize:I,getIconPosition:b})),W=r.createClass(l.getFastMarqueeChildrenIconClasses),G=e=>r.createStyle({...k(e),"text-wrap":"wrap",...j()}),H=r.createStyle(w()),N=r.createStateOrContext({setting:{...m,uid:g?.uid},styles:p});return e.template`
  ${e.RenderIf(e.isLocalEnv,'<script src="{{ \'gp-marquee-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${e.baseAssetURL}/assets-v2/gp-marquee-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  <gp-marquee data-id="${g?.uid}" gp-data='${JSON.stringify(N)}'
   class="${e.cls(g?.uid,c?.cssClass)}">
   <div class="${O}" style="${R}">
      <div class="${B}" style="${A}">
         <div class="${E}">
            <div class="${P}">
               ${s.default({autoFill:!0,direction:u.setting?.direction,play:(u.setting?.speed??0)>0,pauseOnHover:u.setting?.stopOnHover,isFullWidthResponsive:{desktop:h("desktop"),tablet:h("tablet"),mobile:h("mobile")},children:`
               <div class="${x}">
                  ${n?.length?e.WrapRenderChildren({uid:g?.uid??"",customProps:n[0]?.customProps},n.map((s,t)=>{if(s)return e.template`
                  <div class="${_}"
                     style="${G(t)}">
                     ${e.RenderChildren({...s,index:t,itemBorderStyle:p?.itemBorderStyle,itemCorner:p?.itemCorner,itemBackgroundColor:p?.itemBackgroundColor,hasItemShadow:m?.hasItemShadow,itemShadow:p?.itemShadow,itemStyles:H})}
                     ${r.If(!!(v&&S),e.template`<span style="${L(t)}"
                        class="${W}">
                        ${S}
                     </span>`)}
                  </div>
                  `})):i}
               </div>
               `})}
            </div>
         </div>
      </div>
   </div>
</gp-marquee>
`};
