import{template as s,dataStringify as t,isLocalEnv as i,baseAssetURL as e}from"@gem-sdk/core";import{createStyle as o,createClass as r,createAttr as l,createStateOrContext as a,Liquid as d,If as m}from"@gem-sdk/system";import{getButtonAttributes as n}from"../common/attrs.js";import{getButtonStyles as p,getTypoStyles as c,getButtonIconStyles as u,getButtonWrapperStyles as $}from"../common/styles.js";import{getButtonClasses as f,getButtonIconClasses as g,getButtonLabelClasses as b,getButtonWrapperClasses as L,getButtonContentWrapperClasses as y,getButtonContainerClasses as j}from"../common/classes.js";import{getSettingPreloadData as v}from"../../helpers.js";import q from"./ButtonIcon.liquid.js";import k from"./ButtonLabel.liquid.js";import S from"./ButtonLoadingIndicator.liquid.js";import{getData as h,getInsertLinkData as B}from"../common/helpers.js";let Button=E=>{let{advanced:I,className:T,nodePrice:A,customAttrs:G,styles:H={},setting:M={},builderProps:_,wrapClassName:x="",translateSetting:C,isForceValue:N}=E,{iconSvg:O,btnLink:P,htmlType:R,disabled:V,enableBtnLink:w,shouldClearSpace:z,disabledLoading:D=!0}=M,{enableTextStyle:F=!0}=H,{customCss:J,wrapStyle:K,restStyle:Q,dataState:U,dataIdAttr:W,isShowIcon:X,isScrollToElement:Y,getArialLabel:Z,getLabelToDisplay:ss,checkIsShowLabel:st,checkIsEditableLabel:si}=h(E),{HTMLTag:se,urlData:so,shouldRenderLink:sr}=B({enableBtnLink:w,htmlType:R,setting:P,defaultTag:"button",isLiquid:!0}),sl=o({...p(H,M?.enableHoverEffect)}),sa=o({...c(H)}),sd=o({...c(H),...u(H,M)}),sm=o({...$(Q,H)}),sn=r({...f({styles:H,className:T,shouldRenderLink:sr,uid:_?.uid,advanced:I})}),sp=r({...g(ss({isLiquid:!0,translateSetting:C,isForceValue:N}),z,F)}),sc=r({...b(H,si({isLiquid:!0}))}),su=r({...L(x,T,I?.cssClass)}),s$=r({...y(M)}),sf=r({...j()}),sg=l({...n({disabled:V,dataState:U,dataId:W,arialLabel:Z({isLiquid:!0})})}),sb=a({btnLink:M?.btnLink});return d(s`
    <gp-button
      gp-data='${t(sb)}'
      style="${{...K}}"
      class="${sf}"
    >
      <div style="${sm}" class="${su}">
        <style>${J}</style>
        ${m(Y,`<a
            class="gp-trigger-button-link gp-hidden"
            href=${so.href}
            target=${so.target}
          ></a>`)}
        <${se}
          ${{...sg}}
          ${{...G}}
          ${{...so}}
          style="${sl}"
          class="${sn}"
        >
        ${m(!D,S(),"")}
        <div class="${s$}">
          ${m(X,q({iconSvg:O??"",styles:sd,classes:sp}))}
          ${m(F&&st({isLiquid:!0}),k({label:ss({isLiquid:!0,translateSetting:C,isForceValue:N}),styles:sa,classes:sc}))}
        </div>
        ${m(!!A,A?.toString()??"","")}
        </${se}>
      </div>
      ${m(i,`<script ${v('class="gps-link" delay',"src")}="{{ 'gp-button-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${v('class="gps-link" delay',"src")}="${e}/assets-v2/gp-button-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
    </gp-button>
  `)};export{Button as default};
