{"version":3,"file":"NewsletterFooter.vue.bundle.js","sources":["../../../Frontend/vue/views/NewsletterFooter/NewsLetterFooter.vue","../../../Frontend/vue/views/NewsletterFooter/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\r\n  import useVuelidate from \"@vuelidate/core\"\r\n  import { email, required } from \"@vuelidate/validators\"\r\n  import { INewsletterFooterCmsData } from \"@/view-models/newsletter.model\"\r\n  import TextInput from \"@/components/IcForm/TextInput.vue\"\r\n\r\n  const cmsData = CMSDataProvider.get<INewsletterFooterCmsData>(CMS_DATA_ID.NEWSLETTER_FOOTER)\r\n\r\n  const firstname = ref(\"\")\r\n  const emailadress = ref(\"\")\r\n  const submitted = ref(false)\r\n  const loading = ref(false)\r\n  const submitSuccess = ref(false)\r\n  const submitFailed = ref(false)\r\n\r\n  const onFormSubmit = async () => {\r\n    loading.value = true\r\n    submitted.value = true\r\n\r\n    const isFormCorrect = await v$.value.$validate()\r\n\r\n    if (!isFormCorrect) {\r\n      nextTick(() => {\r\n        document.querySelector(\".invalid-feedback\")?.scrollIntoView({ block: \"center\", behavior: \"smooth\" })\r\n      })\r\n\r\n      loading.value = false\r\n\r\n      return\r\n    }\r\n\r\n    try {\r\n      await NewsletterService.Post({\r\n        firstname: firstname.value,\r\n        email: emailadress.value,\r\n        culture: cmsData.culture,\r\n        mailingKey: cmsData.mailingKey,\r\n      })\r\n\r\n      submitSuccess.value = true\r\n    } catch (error) {\r\n      submitFailed.value = true\r\n    } finally {\r\n      loading.value = false\r\n    }\r\n  }\r\n\r\n  const rules = {\r\n    firstname: {\r\n      required,\r\n    },\r\n    emailadress: {\r\n      required,\r\n      email,\r\n    },\r\n  }\r\n\r\n  const v$ = useVuelidate(rules, {\r\n    firstname,\r\n    emailadress,\r\n  })\r\n</script>\r\n\r\n<template>\r\n  <h3 class=\"label--sm mb-8\">\r\n    {{ cmsData.title }}\r\n  </h3>\r\n  <form @submit.prevent=\"onFormSubmit\">\r\n    <label\r\n      for=\"newsletter-footer-firstname\"\r\n      class=\"block mb-2 label--xs\"\r\n    >\r\n      {{ cmsData.nameLabel }}\r\n    </label>\r\n    <div class=\"flex\">\r\n      <TextInput\r\n        id=\"newsletter-footer-firstname\"\r\n        v-model=\"firstname\"\r\n        class=\"w-10/12\"\r\n        :validation=\"{\r\n          model: v$.firstname.$error,\r\n          message: cmsData.requiredErrorMessage,\r\n          submitted: submitted,\r\n        }\"\r\n        :placeholder=\"cmsData.namePlaceholder\"\r\n        :input-props=\"{\r\n          class:\r\n            'h-12 w-full py-2.5 px-6 bg-wg-900 rounded-2xl placeholder:text-wg-300 placeholder:uppercase placeholder:text-label-sm placeholder:tracking-[2.24px]',\r\n        }\"\r\n      />\r\n    </div>\r\n    <label\r\n      for=\"newsletter-footer-email\"\r\n      class=\"block mb-2 label--xs\"\r\n    >\r\n      {{ cmsData.emailLabel }}\r\n    </label>\r\n    <div class=\"flex gap-2\">\r\n      <TextInput\r\n        id=\"newsletter-footer-email\"\r\n        v-model=\"emailadress\"\r\n        class=\"w-10/12\"\r\n        :validation=\"{\r\n          model: v$.emailadress.$error,\r\n          message: cmsData.requiredErrorMessage,\r\n          submitted: submitted,\r\n          invalid: [\r\n            {\r\n              value: v$.emailadress.email.$invalid,\r\n              message: cmsData.validEmailErrorMessage,\r\n            },\r\n          ],\r\n        }\"\r\n        :placeholder=\"cmsData.emailPlaceholder\"\r\n        :input-props=\"{\r\n          class:\r\n            'h-12 w-full py-2.5 px-6 bg-wg-900 rounded-2xl placeholder:text-wg-300 placeholder:uppercase placeholder:text-label-sm placeholder:tracking-[2.24px]',\r\n        }\"\r\n      />\r\n      <div class=\"my-4 flex justify-center items-start\">\r\n        <button\r\n          type=\"submit\"\r\n          :aria-label=\"cmsData.buttonLabel\"\r\n          class=\"icon chevron-right size-12 shrink-0 rounded-2xl after:text-neutral-700 bg-wg-50\"\r\n        ></button>\r\n      </div>\r\n    </div>\r\n    <div\r\n      v-if=\"loading\"\r\n      class=\"themed-paragraph paragraph--lg\"\r\n    >\r\n      {{ cmsData.loadingLabel }}\r\n    </div>\r\n    <div\r\n      v-else-if=\"submitSuccess\"\r\n      class=\"themed-paragraph paragraph--lg\"\r\n    >\r\n      {{ cmsData.submitSuccess }}\r\n    </div>\r\n    <div\r\n      v-else-if=\"submitFailed\"\r\n      class=\"mt-2 text-red-600 paragraph--lg\"\r\n    >\r\n      {{ cmsData.submitError }}\r\n    </div>\r\n  </form>\r\n</template>\r\n","import { createApp } from \"vue\"\r\nimport NewsLetterFooter from \"./NewsLetterFooter.vue\"\r\n\r\nconst app = createApp(NewsLetterFooter)\r\napp.mount(\"#newsletter-app-footer\")\r\n"],"names":["cmsData","CMSDataProvider","CMS_DATA_ID","firstname","ref","emailadress","submitted","loading","submitSuccess","submitFailed","onFormSubmit","v$","nextTick","NewsletterService","useVuelidate","required","email","app","createApp","NewsLetterFooter"],"mappings":"ouBAME,MAAMA,EAAUC,EAAgB,IAA8BC,EAAY,iBAAiB,EAErFC,EAAYC,EAAI,EAAE,EAClBC,EAAcD,EAAI,EAAE,EACpBE,EAAYF,EAAI,EAAK,EACrBG,EAAUH,EAAI,EAAK,EACnBI,EAAgBJ,EAAI,EAAK,EACzBK,EAAeL,EAAI,EAAK,EAExBM,EAAe,SAAY,CAM/B,GALAH,EAAQ,MAAQ,GAChBD,EAAU,MAAQ,GAId,CAFkB,MAAMK,EAAG,MAAM,UAAU,EAE3B,CAClBC,EAAS,IAAM,CACJ,SAAA,cAAc,mBAAmB,GAAG,eAAe,CAAE,MAAO,SAAU,SAAU,SAAU,CAAA,CACpG,EAEDL,EAAQ,MAAQ,GAEhB,MAAA,CAGE,GAAA,CACF,MAAMM,EAAkB,KAAK,CAC3B,UAAWV,EAAU,MACrB,MAAOE,EAAY,MACnB,QAASL,EAAQ,QACjB,WAAYA,EAAQ,UAAA,CACrB,EAEDQ,EAAc,MAAQ,QACR,CACdC,EAAa,MAAQ,EAAA,QACrB,CACAF,EAAQ,MAAQ,EAAA,CAEpB,EAYMI,EAAKG,EAVG,CACZ,UAAW,CACT,SAAAC,CACF,EACA,YAAa,CACX,SAAAA,EACA,MAAAC,CAAA,CAEJ,EAE+B,CAC7B,UAAAb,EACA,YAAAE,CAAA,CACD,0gDCzDGY,EAAMC,EAAUC,CAAgB,EACtCF,EAAI,MAAM,wBAAwB"}