{"version":3,"file":"BRqKBCfA.js","sources":["../../../../src/components/block/mailchimpPaywallForm/mailchimp-paywall-form.vue"],"sourcesContent":["<template>\n  <ContainerBasic\n    container-type=\"FULL_WIDTH\"\n    class=\"px-0 !mt-3xl scroll-to-form\"\n  >\n    <ClientOnly>\n      <div ref=\"bannerNode\">\n        <div\n          class=\"touch:md:h-[30px] lg:h-[30px] h-[20px]\"\n          style=\"background-color: #628e92\"\n        />\n        <div\n          class=\"min-h-[329px] bg-left-bottom bg-cover relative\"\n          :style=\"`background-image: url(${imageUrl})`\"\n        >\n          <ContainerBasic container-type=\"PAGE\">\n            <div class=\"relative\">\n              <div\n                class=\"absolute right-1/2 touch:md:right-0 lg:right-0 translate-x-1/2 touch:md:translate-x-0 touch:md:-translate-y-[52.95%] lg:translate-x-0 lg:-translate-y-[52.95%] -translate-y-[85.95%] w-full touch:md:w-auto lg:w-auto\"\n              >\n                <div class=\"relative flex items-center justify-center\">\n                  <img\n                    v-if=\"!isDesktopView\"\n                    src=\"@/assets/images/icon_badge_mobile.svg\"\n                    class=\"mx-auto\"\n                    loading=\"lazy\"\n                  />\n                  <img\n                    v-if=\"isDesktopView\"\n                    src=\"@/assets/images/icon_badge.svg\"\n                    class=\"mx-auto\"\n                    loading=\"lazy\"\n                  />\n                  <div ref=\"text\" class=\"absolute text-center\">\n                    <p class=\"text-[32px] font-bold\">100%</p>\n                    <p>{{ t('event.forFree') }}</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"flex flex-col px-0 touch:md:flex-row touch:md:px-sm lg:flex-row lg:px-sm pb-4xl touch:md:pb-xl lg:pb-xl pt-3xl touch:md:pt-xl lg:pt-xl\"\n            >\n              <div\n                class=\"basis-full touch:md:basis-3/4 lg:basis-3/4 px-md touch:md:pl-0 touch:md:pr-lg lg:pl-0 lg:pr-lg\"\n              >\n                <Headline\n                  classes=\"font-josefin text-[24px] touch:md:text-[40px] lg:text-[40px] font-bold\"\n                  align-text=\"left\"\n                  :headline=\"blockData.headline\"\n                  level=\"h2\"\n                  max-width=\"\"\n                />\n\n                <WYSIWYGContentRaw\n                  class=\"mt-sm\"\n                  :content=\"blockData.text\"\n                  inner-classes=\"!ml-0 px-0\"\n                ></WYSIWYGContentRaw>\n\n                <div\n                  v-if=\"blockData.paywallCheckboxes.length\"\n                  class=\"flex flex-row flex-wrap mt-md\"\n                >\n                  <div\n                    v-for=\"checkbox in blockData.paywallCheckboxes\"\n                    :key=\"checkbox.value\"\n                    class=\"basis-full md:basis-1/2 text-[27px] font-josefin flex items-center min-w-0\"\n                  >\n                    <img\n                      src=\"@/assets/images/checkbox_checked.svg\"\n                      loading=\"lazy\"\n                    />\n                    <p class=\"min-w-0 break-words\">{{ checkbox.label }}</p>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"basis-full touch:md:basis-1/4 lg:basis-1/4 mt-md touch:md:mt-xl lg:mt-xl px-md touch:md:pl-sm touch:md:pr-0 lg:pl-sm lg:pr-0\"\n              >\n                <FormKit\n                  id=\"paywallForm\"\n                  type=\"form\"\n                  class=\"max-w-md\"\n                  spellcheck=\"false\"\n                  :actions=\"false\"\n                  :incomplete-message=\"false\"\n                  :config=\"{ validationVisibility: 'blur' }\"\n                  @submit=\"onSubmit\"\n                  @node=\"watchForm\"\n                >\n                  <FormKit\n                    type=\"text\"\n                    name=\"EMAIL\"\n                    label=\"Ihre E-Mail-Adresse\"\n                    placeholder=\"max@mustermann.de\"\n                    validation=\"required|email\"\n                    validation-visibility=\"blur\"\n                    input-class=\"w-full input\"\n                    inner-class=\"relative pt-[5px]\"\n                    label-class=\"text-md !leading-[19px] font-bold\"\n                  />\n\n                  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->\n                  <FormKit\n                    type=\"hidden\"\n                    name=\"b_a8780ef3529534dbe1b892a2a_da0d21a119\"\n                    value=\"\"\n                  />\n\n                  <ButtonBasic\n                    classes=\"w-full my-sm px-0\"\n                    label=\"Checklisten anfordern\"\n                    bg-color=\"#555555\"\n                    :type=\"EButtonType.SUBMIT\"\n                    :btn-style=\"EButtonStyle.CTA\"\n                    :show-dialog=\"showDialog\"\n                    :dialog-content=\"dialogContent\"\n                    :full-width=\"true\"\n                    @close-dialog=\"onDialogWindowClosed\"\n                  />\n\n                  <p class=\"text-[14px] leading-5\">\n                    <Trans\n                      keypath=\"forms.termsDescription\"\n                      tag=\"label\"\n                      for=\"forms.privacy\"\n                    >\n                      <a\n                        href=\"/agb\"\n                        target=\"_blank\"\n                        class=\"font-bold text-vdv-base\"\n                      >\n                        {{ t('forms.agb') }}\n                      </a>\n                      <a\n                        href=\"/datenschutz\"\n                        target=\"_blank\"\n                        class=\"font-bold text-vdv-base\"\n                      >\n                        {{ t('forms.privacy') }}\n                      </a>\n                    </Trans>\n                  </p>\n                </FormKit>\n              </div>\n            </div>\n          </ContainerBasic>\n        </div>\n      </div>\n    </ClientOnly>\n  </ContainerBasic>\n</template>\n\n<script setup lang=\"ts\">\nimport { reset } from '@formkit/core';\nimport { useResizeObserver } from '@vueuse/core';\nimport { EButtonStyle, EButtonType } from '@/@types/basic-button';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport { Headline, WYSIWYGContentRaw } from '~/complib';\nimport ButtonBasic from '~~/src/components/components/core/basic-button/vdv/basic-button.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { MailchimpPaywallFormData } from './blockType';\nimport Trans from '@/components/Trans.vue';\nimport { FormKit } from '@formkit/vue';\n\nconst { t } = useTrans();\nconst isMobile = inject(mq_breakpointIsMobile);\nconst isDesktopView = useIsDesktopView();\nconst form = ref(null);\nconst bannerNode = ref(null);\nconst imageUrl = ref('');\nconst text = ref(null);\n\nconst showDialog = ref(false);\nconst dialogContent = ref({\n  dialogHeadline: '',\n  dialogText: '',\n});\nconst dialogContentSuccess = {\n  dialogHeadline: t('forms.dialogContent.successHeader'),\n  dialogText: t('forms.dialogContent.successBody'),\n};\nconst dialogContentError = {\n  dialogHeadline: t('forms.dialogContent.errorHeader'),\n  dialogText: '',\n  dialogType: 'error',\n};\n\nconst props = defineProps({\n  blockData: {\n    type: Object as PropType<MailchimpPaywallFormData>,\n    required: true,\n    default: {} as MailchimpPaywallFormData,\n  },\n});\n\nonMounted(() => {\n  imageUrl.value = props.blockData.image\n    ? props.blockData.image[isMobile.value ? 'mobile' : 'desktop'].url\n    : '';\n});\n\nuseResizeObserver(bannerNode, () => {\n  imageUrl.value = props.blockData.image\n    ? props.blockData.image[isMobile.value ? 'mobile' : 'desktop'].url\n    : '';\n\n  if (!isDesktopView.value) {\n    text.value.classList.add(\n      'inline-flex',\n      'items-baseline',\n      'gap-2',\n      'bottom-3',\n    );\n  } else {\n    text.value.classList.remove(\n      'inline-flex',\n      'items-baseline',\n      'gap-2',\n      'bottom-3',\n    );\n  }\n});\n\nfunction onDialogWindowClosed() {\n  showDialog.value = false;\n  reset('paywallForm');\n}\n\nif (import.meta.client) {\n  (window as any).mc = {\n    validateResponse: function (response: any) {\n      dialogContent.value = {\n        dialogHeadline: '',\n        dialogText: '',\n      };\n      if (response.result === 'success') {\n        dialogContent.value = dialogContentSuccess;\n        showDialog.value = true;\n      } else {\n        dialogContentError.dialogText =\n          t('forms.dialogContent.errorBody') +\n          '<br />' +\n          '<span class=\"italic\">' +\n          response.msg +\n          '</span>';\n        dialogContent.value = dialogContentError;\n        showDialog.value = true;\n      }\n    },\n  };\n}\n\nfunction onSubmit() {\n  (document.activeElement as HTMLElement)?.blur();\n  let url = props.blockData.formAction;\n  url = url.replace('/post?u=', '/post-json?u=');\n  url +=\n    '&' +\n    new URLSearchParams(form.value.value).toString() +\n    '&c=window.mc.validateResponse';\n\n  // Create script with url and callback (if specified)\n  const script = window.document.createElement('script');\n  script.src = url;\n\n  // Insert script tag into the DOM (append to <head>)\n  const ref = window.document.getElementsByTagName('script')[0];\n  ref.parentNode.insertBefore(script, ref);\n\n  // After the script is loaded (and executed), remove it\n  script.onload = function () {\n    ref.parentNode.removeChild(script);\n  };\n}\n\nfunction watchForm(n: any) {\n  form.value = n;\n}\n</script>\n\n<style scoped lang=\"postcss\"></style>\n"],"names":["t","useTrans","isMobile","inject","mq_breakpointIsMobile","isDesktopView","useIsDesktopView","form","ref","bannerNode","imageUrl","text","showDialog","dialogContent","dialogContentSuccess","dialogContentError","props","__props","onMounted","useResizeObserver","onDialogWindowClosed","reset","response","onSubmit","_a","url","script","watchForm","n"],"mappings":"qjEAuKM,KAAA,CAAE,EAAAA,GAAMC,IACRC,EAAWC,EAAOC,CAAqB,EACvCC,EAAgBC,IAChBC,EAAOC,EAAI,IAAI,EACfC,EAAaD,EAAI,IAAI,EACrBE,EAAWF,EAAI,EAAE,EACjBG,EAAOH,EAAI,IAAI,EAEfI,EAAaJ,EAAI,EAAK,EACtBK,EAAgBL,EAAI,CACxB,eAAgB,GAChB,WAAY,EAAA,CACb,EACKM,EAAuB,CAC3B,eAAgBd,EAAE,mCAAmC,EACrD,WAAYA,EAAE,iCAAiC,CAAA,EAE3Ce,EAAqB,CACzB,eAAgBf,EAAE,iCAAiC,EACnD,WAAY,GACZ,WAAY,OAAA,EAGRgB,EAAQC,EAQdC,EAAU,IAAM,CACdR,EAAS,MAAQM,EAAM,UAAU,MAC7BA,EAAM,UAAU,MAAMd,EAAS,MAAQ,SAAW,SAAS,EAAE,IAC7D,EAAA,CACL,EAEDiB,EAAkBV,EAAY,IAAM,CAClCC,EAAS,MAAQM,EAAM,UAAU,MAC7BA,EAAM,UAAU,MAAMd,EAAS,MAAQ,SAAW,SAAS,EAAE,IAC7D,GAECG,EAAc,MAQjBM,EAAK,MAAM,UAAU,OACnB,cACA,iBACA,QACA,UAAA,EAXFA,EAAK,MAAM,UAAU,IACnB,cACA,iBACA,QACA,UAAA,CASJ,CACD,EAED,SAASS,GAAuB,CAC9BR,EAAW,MAAQ,GACnBS,EAAM,aAAa,CACrB,CAGG,OAAe,GAAK,CACnB,iBAAkB,SAAUC,EAAe,CACzCT,EAAc,MAAQ,CACpB,eAAgB,GAChB,WAAY,EAAA,EAEVS,EAAS,SAAW,WACtBT,EAAc,MAAQC,EACtBF,EAAW,MAAQ,KAEnBG,EAAmB,WACjBf,EAAE,+BAA+B,EACjC,8BAEAsB,EAAS,IACT,UACFT,EAAc,MAAQE,EACtBH,EAAW,MAAQ,GAEvB,CAAA,EAIJ,SAASW,GAAW,QACjBC,EAAA,SAAS,gBAAT,MAAAA,EAAwC,OACrC,IAAAC,EAAMT,EAAM,UAAU,WACpBS,EAAAA,EAAI,QAAQ,WAAY,eAAe,EAE3CA,GAAA,IACA,IAAI,gBAAgBlB,EAAK,MAAM,KAAK,EAAE,SACtC,EAAA,gCAGF,MAAMmB,EAAS,OAAO,SAAS,cAAc,QAAQ,EACrDA,EAAO,IAAMD,EAGb,MAAMjB,EAAM,OAAO,SAAS,qBAAqB,QAAQ,EAAE,CAAC,EAC5DA,EAAI,WAAW,aAAakB,EAAQlB,CAAG,EAGvCkB,EAAO,OAAS,UAAY,CAC1BlB,EAAI,WAAW,YAAYkB,CAAM,CAAA,CAErC,CAEA,SAASC,EAAUC,EAAQ,CACzBrB,EAAK,MAAQqB,CACf"}