{"version":3,"file":"BI46yUl2.js","sources":["../../../../src/components/dialog/productRequest/editContactDataProductRequest.vue"],"sourcesContent":["<template>\n  <Dialog width-class=\"md:max-w-[510px]\">\n    <div id=\"product-request-dialog\" class=\"overflow-auto h-fit\">\n      <div v-if=\"!session.isLoggedIn\" class=\"m-sm md:m-md !mb-0\">\n        <Trans keypath=\"shop.dialog.productRequest.notLoggedInText\">\n          <span\n            class=\"font-bold text-primary-base hover:cursor-pointer\"\n            @click=\"dialogStore.openDialog(DialogIdent.LOGIN)\"\n          >\n            {{ t('shop.dialog.productRequest.loginNow') }}\n          </span>\n        </Trans>\n        <div class=\"mt-md md:mt-xl\">\n          <ContentSeparator class=\"relative separator-overwrite\" />\n        </div>\n      </div>\n\n      <ClientOnly>\n        <div\n          id=\"product-request-form\"\n          :class=\"`${session.isLoggedIn ? '' : '!pt-0 '} p-sm md:p-md`\"\n        >\n          <FormKit\n            :id=\"formId\"\n            type=\"form\"\n            class=\"max-w-md\"\n            :actions=\"false\"\n            :incomplete-message=\"false\"\n            spellcheck=\"false\"\n            :config=\"{\n              validationVisibility: 'blur',\n              classes: {\n                input:\n                  useSiteIdent() !== SiteIdent.default ? 'rounded-corners' : '',\n              },\n            }\"\n            @submit=\"setContactData\"\n          >\n            <div class=\"flex flex-row w-full flex-nowrap mb-sm\">\n              <p class=\"!mr-auto !ml-0 shrink-0 text-xl font-bold font-text\">\n                {{ t('shop.dialog.productRequest.myContactData') }}\n              </p>\n              <div\n                class=\"w-full border-dashed border-b-1 border-border-light mb-2xs ml-2xs\"\n              ></div>\n            </div>\n            <TextInput\n              id=\"officename\"\n              v-model=\"contactData.officename\"\n              name=\"officename\"\n              label=\"shop.dialog.productRequest.officename\"\n              :placeholder=\"t('shop.dialog.productRequest.officename')\"\n              :required-message=\"\n                t('shop.dialog.productRequest.officename.required')\n              \"\n              autofocus\n            />\n\n            <ValidationRow\n              name=\"zipCity\"\n              combined-validation-message=\"shop.dialog.productRequest.zipRow.errorMsg\"\n              combined-messages-only\n            >\n              <TextInput\n                v-model=\"contactData.zipCity.zip\"\n                name=\"zip\"\n                label=\"shop.dialog.productRequest.zip\"\n                placeholder=\"shop.dialog.productRequest.zip.placeholder\"\n                width=\"basis-3/12\"\n                :validation=\"zipCodeValidation\"\n              />\n              <TextInput\n                v-model=\"contactData.zipCity.city\"\n                name=\"city\"\n                label=\"shop.dialog.productRequest.city\"\n                placeholder=\"shop.dialog.productRequest.city\"\n                width=\"basis-9/12\"\n              />\n            </ValidationRow>\n            <TextInput\n              id=\"productRequestOfficeTitle\"\n              v-model=\"contactData.title\"\n              name=\"title\"\n              label=\"shop.dialog.productRequest.title\"\n              placeholder=\"shop.dialog.productRequest.title.placeholder\"\n              :required=\"false\"\n            />\n            <TextInput\n              id=\"firstname\"\n              v-model=\"contactData.firstname\"\n              name=\"firstname\"\n              label=\"shop.dialog.productRequest.firstname\"\n              placeholder=\"shop.dialog.productRequest.firstname.placeholder\"\n              required-message=\"shop.dialog.productRequest.firstname.errorMsg\"\n            />\n            <TextInput\n              id=\"lastname\"\n              v-model=\"contactData.lastname\"\n              name=\"lastname\"\n              label=\"shop.dialog.productRequest.lastname\"\n              placeholder=\"shop.dialog.productRequest.lastname.placeholder\"\n              required-message=\"shop.dialog.productRequest.lastname.errorMsg\"\n            />\n            <Email\n              id=\"email\"\n              v-model=\"contactData.email\"\n              name=\"email\"\n              label=\"shop.dialog.productRequest.email\"\n              placeholder=\"shop.dialog.productRequest.email.placeholder\"\n              required-message=\"shop.dialog.productRequest.email.errorMsg\"\n              matches-message=\"shop.dialog.productRequest.email.errorMsg\"\n              required\n            />\n\n            <Checkbox\n              :model-value=\"contactData.checkboxCallMe\"\n              class=\"mb-sm\"\n              label=\"shop.dialog.productRequest.callMe\"\n              name=\"checkboxCallMe\"\n            />\n\n            <PhoneCanonical\n              v-model=\"contactData.phone.fullPhoneNumber\"\n              :country-code=\"$languageCode.toUpperCase() as CountryCode\"\n              :required=\"contactData.checkboxCallMe\"\n            />\n\n            <ButtonBasic\n              classes=\"w-full px-sm md:px-0 pt-sm\"\n              :label=\"t('shop.dialog.productRequest.contactData.accept')\"\n              :type=\"EButtonType.SUBMIT\"\n              :btn-style=\"EButtonStyle.CTA\"\n              :loading-animation=\"isLoading\"\n              bg-color=\"var(--thm-btn-primary-base)\"\n              :disabled=\"isLoading\"\n              full-width\n              @click=\"checkValidity()\"\n            ></ButtonBasic>\n            <div\n              class=\"flex items-center justify-center w-full gap-2 cursor-pointer text-primary-base mt-md\"\n              @click=\"dialogStore.closeDialog()\"\n            >\n              <span class=\"anim__underline-link anim-link\">\n                {{ t('formFields.form.cancel') }}\n              </span>\n            </div>\n          </FormKit>\n        </div>\n      </ClientOnly>\n    </div>\n  </Dialog>\n</template>\n<script setup lang=\"ts\">\nimport Dialog from '@/components/dialog/components/dialogFrame/local/dialogFrame.vue';\nimport { useDialogStore, DialogIdent } from '~/stores/useDialogStore';\nimport { EButtonStyle, EButtonType } from '~~/src/@types/basic-button';\nimport ButtonBasic from '~~/src/components/components/core/basic-button/basic-button.vue';\nimport Trans from '@/components/Trans.vue';\nimport ContentSeparator from '@/components/block/seperator/contentSeparator.vue';\nimport { TextInput, Checkbox, Email, PhoneCanonical } from '@/complib';\nimport ValidationRow from '@/components/formFields/validationRow/validationRow.vue';\nimport {\n  type ProductRequestContactData,\n  useProductRequestContactData,\n} from './useProductRequestDialog';\nimport { useZipCodeValidation } from '~/components/formFields/composables/useZipCodeValidation';\nimport type { CountryCode } from '~/components/formFields/types';\nimport { SiteIdent } from '~/utils/types';\n\nconst formId = 'productRequest-contactData';\nconst zipCodeValidation = useZipCodeValidation();\n\nconst { t } = useTrans();\nconst dialogStore = useDialogStore();\ndialogStore.setHeadline(t('shop.tile.product.productRequest'));\nconst { isLoading, contactData, updateContactData, session } =\n  await useProductRequestContactData();\n\nconst checkValidity = async () => {\n  const form = document.getElementById(formId);\n  if (!form) return;\n\n  // Sleep for quarter second till form is updated with validation information\n  await new Promise((r) => setTimeout(r, 250));\n  const invalidElements = form.querySelectorAll('[data-invalid=true]');\n\n  if (!invalidElements.length) return;\n\n  invalidElements[0].scrollIntoView({\n    behavior: 'smooth',\n  });\n};\n\nconst setContactData = async (data: ProductRequestContactData) => {\n  (document.activeElement as HTMLElement)?.blur();\n  updateContactData(data);\n  dialogStore.closeDialog();\n};\n</script>\n<style lang=\"postcss\">\n#product-request-dialog {\n  :deep(.separator-overwrite .separator) {\n    @apply !pb-0;\n  }\n  #product-request-form {\n    .formkit-inner > input,\n    .formkit-inner > div,\n    .formkit-input {\n      @apply w-full;\n    }\n\n    .formkit-outer .rounded-corners {\n      @apply rounded-[6px];\n    }\n\n    .formkit-outer:has(> .formkit-messages) {\n      .rounded-corners {\n        @apply rounded-b-none;\n      }\n\n      .formkit-inner > * {\n        @apply !border-b-status-danger-base;\n      }\n    }\n\n    .formkit-outer:has(> .formkit-messages) {\n      @apply rounded-b-none;\n    }\n\n    .formkit-form .custom-button {\n      @apply w-full justify-center !mx-0 !px-4;\n    }\n\n    .formkit-outer .formkit-messages,\n    .formkit-messages-custom {\n      @apply !bg-[rgba(255,255,255,.6)] rounded-b pl-[9px] py-[2px] text-sm leading-xs text-status-danger-base;\n    }\n\n    .formkit-outer .formkit-message {\n      @apply !text-status-danger-base text-sm leading-xs;\n    }\n\n    .form-popup {\n      @apply absolute flex justify-end h-0 top-[10px] right-4;\n    }\n\n    .form-custom-popper {\n      --popper-theme-background-color: #5c8a8e !important;\n      --popper-theme-background-color-hover: #5c8a8e !important;\n    }\n  }\n}\n</style>\n"],"names":["formId","zipCodeValidation","useZipCodeValidation","t","useTrans","dialogStore","useDialogStore","isLoading","contactData","updateContactData","session","__temp","__restore","_withAsyncContext","useProductRequestContactData","checkValidity","form","r","invalidElements","setContactData","data","_a"],"mappings":"o1CAyKMA,EAAS,kGACf,MAAMC,EAAoBC,IAEpB,CAAE,EAAAC,GAAMC,IACRC,EAAcC,IACRD,EAAA,YAAYF,EAAE,kCAAkC,CAAC,EAC7D,KAAM,CAAE,UAAAI,EAAW,YAAAC,EAAa,kBAAAC,EAAmB,QAAAC,IACjD,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,EAA6B,CAAA,mBAE/BC,EAAgB,SAAY,CAC1B,MAAAC,EAAO,SAAS,eAAehB,CAAM,EAC3C,GAAI,CAACgB,EAAM,OAGX,MAAM,IAAI,QAASC,GAAM,WAAWA,EAAG,GAAG,CAAC,EACrC,MAAAC,EAAkBF,EAAK,iBAAiB,qBAAqB,EAE9DE,EAAgB,QAELA,EAAA,CAAC,EAAE,eAAe,CAChC,SAAU,QAAA,CACX,CAAA,EAGGC,EAAiB,MAAOC,GAAoC,QAC/DC,EAAA,SAAS,gBAAT,MAAAA,EAAwC,OACzCZ,EAAkBW,CAAI,EACtBf,EAAY,YAAY,CAAA"}