1import{d as t}from"./defineElement-Bh-rOTph.js";import"./GlobalStylesStore--z5tmrDj.js";import{T as s}from"./TemplateElement-u6hNeGmQ.js";import{u as e}from"./directives-geaH8KPO.js";import{t as r}from"./input.template-C_DLI5Yj.js";import{h as a}from"./html-BmWsKWcd.js";import"./StyledElement-Dmi2NcTH.js";import"./ReCaptchaStore-CwaBCWJv.js";import"./load-script-BgZogJL7.js";import"./UserCentrics-D8W_hTLS.js";import"./honeypot-field-BwKi0UAI.js";import"./input-field.class-Doi4_VBo.js";import"./form-field.class-DyP4nvuO.js";import"./InputEvents-ff9pfHZS.js";class i extends s{properties(){return{action:"",method:"POST",name:"",ctaLabel:"",ctaClass:"btn btn-brand",negativeCtaLabel:"",negativeCtaClass:"btn btn-outline-dark",agbText:!1,gridGap:"gap-4",errors:{},showGlobalErrorMessage:!1,globalErrorMessage:"Es ist ein Fehler aufgetreten!",showSuccessMessage:!1,successMessage:"Das hat geklappt!",inputs:[],redirectTarget:!1}}events(){return{form:{submit:async t=>{t.preventDefault(),t.stopPropagation(),this.showGlobalErrorMessage=!1,this.showSuccessMessage=!1,this.errors={},await(this.$refs.captcha?.setToken());const s={};new FormData(t.target).forEach(((t,e)=>{s[e]=t}));try{const t=await fetch(this.action,{method:this.method,headers:{"Content-Type":"application/json"},body:JSON.stringify(s)});if(!t.ok)return this.errors=await t.json()||{},void(0===Object.keys(this.errors).length&&(this.showGlobalErrorMessage=!0));this.dispatch("ASYNC_FORM_SUBMITTED"),this.redirectTarget?(this.errors={},this.redirectToTarget()):this.successMessage&&(this.showSuccessMessage=!0)}catch(t){this.showGlobalErrorMessage=!0}}}}}getError(t){return this.errors[t]||""}redirectToTarget(){window.location.href=this.redirectTarget}template(){return a` 2 <form class="block space-y-5" action="${this.action}" method="${this.method}" id="${this.name}"> 3 <div class="grid grid-cols-12 ${this.gridGap}"> 4 ${this.inputs.map((t=>{const s=this.getError(t.name);return a` ${r(t,s)} `}))} 5 </div> 6 7 ${this.agbText?a` <div class="rich-text-style text-center">${e(this.agbText)}</div>`:null} 8 ${this.showGlobalErrorMessage?a` <div class="text-sm text-center text-danger-500">${this.globalErrorMessage}</div> `:null} 9 10 <div 11 class="flex flex-col gap-4 ${this.negativeCtaLabel?"justify-between":"justify-center"} md:flex-row md:gap-0" 12 > 13 ${this.negativeCtaLabel?a` <div class="text-center"> 14 <button onclick="history.back()" class="btn ${this.negativeCtaClass}"> 15 ${this.negativeCtaLabel} 16 </button> 17 </div>`:null} 18 ${this.showSuccessMessage?a`<div class="text-center text-info-500">${e(this.successMessage)}</div> `:a` 19 <div class="text-center"> 20 <button ref="submitButton" class="btn ${this.ctaClass}"> 21 <span>${this.ctaLabel}</span> 22 </button> 23 </div> 24 `} 25 </div> 26 </form> 27 `}}t("async-form-element",i);export{i as default}; 28//# sourceMappingURL=async-form-element-Db0WR6bi.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.