import{template as e}from"@gem-sdk/core";import{getDynamicSourceLocales as t,createSettingId as m}from"../../../helpers.js";import{createStyle as s,createClass as a,If as i}from"@gem-sdk/system";import{composeContainerStyles as o,composeInnerStyles as l}from"./common/styles.js";import{composeContainerClasses as r,composeInnerClasses as p,getClassTitle as d}from"./common/classes.js";import{FormEmail as n}from"../../settings/form-email/configs/translate.js";let $=({builderProps:$,builderAttrs:c,setting:u,advanced:f,pageContext:g,styles:y})=>{let{placeholder:j,required:v,hideOnClient:h,defaultEmail:k,showTitle:q,title:x}=u??{},E=t({val:j,uid:$?.uid,settingId:m({id:n?.placeholder?.id}),pageContext:g??{}}),F=s(o(u,f)),C=s(l(u,f,y)),I=a(r({setting:u,advanced:f,builderProps:$,type:"liquid"})),N=a(p(u,$)),b=a(d());return e`
    <div
      ${{...c}}
      data-id="${$?.uid}"
      class="${I}"
      style="${F}"
    >
      ${i(q,`<span className="${b}">${x}</span>`)}
      <input
        type="email"
        class="${N}"
        style="${C}"
        placeholder="${E}"
        name="${"contact[email]"}"
        ${i(v,"required")}
        autocomplete="email"
        ${i(h,`value="${k}"`)}
      ></input>
    </div>
  `};export{$ as default};
