{"version":3,"file":"BMgHs90s.js","sources":["../../../../src/complib/formFields/phone/usePhone.ts","../../../../src/complib/formFields/phone/phoneCanonical.vue","../../../../src/complib/formFields/validationRow/components/dynamicValidationRow.vue"],"sourcesContent":["import type { CountryCode } from '~~/src/components/formFields/types';\n\nexport function usePhoneField(countryCode: CountryCode, initialValue?: string) {\n  const countryPhoneMap: Record<CountryCode, string> = {\n    DE: '+49',\n    AT: '+43',\n    NL: '+31',\n  };\n\n  const country = ref(countryPhoneMap[countryCode]);\n  const number = ref('');\n\n  if (initialValue) {\n    setPhoneValue(initialValue);\n  }\n  const fullPhoneNumber = ref('');\n\n  watch([country, number], ([countryValue, numberValue]) => {\n    if (numberValue) {\n      const sanitizedNumber = getSanitizedPhonePart(numberValue);\n      if (countryValue.length && sanitizedNumber.length) {\n        fullPhoneNumber.value = countryValue + sanitizedNumber;\n        return;\n      }\n    }\n    fullPhoneNumber.value = '';\n  });\n\n  function getSanitizedPhonePart(phonePart: string) {\n    let sanitizedPart = '';\n    sanitizedPart = phonePart.replace(/^0+/, '');\n    return sanitizedPart.replace(/^\\s/g, '');\n  }\n\n  function setPhoneValue(value: string) {\n    if (value.startsWith('+')) {\n      country.value = value.slice(0, 3);\n      number.value = value.slice(3);\n    } else {\n      country.value = countryPhoneMap[countryCode];\n      number.value = value;\n    }\n  }\n\n  return {\n    country,\n    number,\n    fullPhoneNumber,\n    countryPhoneMap,\n    setPhoneValue,\n  };\n}\n","<template>\n  <DynamicValidationRow\n    name=\"phone\"\n    label=\"formFields.phone.label\"\n    validation-message=\"forms.phoneValidationMessage\"\n    :required=\"required\"\n  >\n    <TextInput\n      v-model=\"country\"\n      name=\"phoneCountry\"\n      width=\"basis-3/12\"\n      placeholder=\"+49\"\n      :disabled=\"true\"\n      :required=\"false\"\n    />\n    <TextInput\n      v-model=\"number\"\n      name=\"phoneNumber\"\n      width=\"basis-full\"\n      :validation=\"[['matches', /^[0-9]*$/]]\"\n      :maxlength=\"24\"\n      placeholder=\"formFields.phone.phoneNumber\"\n      :required=\"required\"\n      :validation-visibility=\"validationVisibility\"\n    />\n\n    <FormKit v-model=\"fullPhoneNumber\" type=\"hidden\" name=\"fullPhoneNumber\" />\n  </DynamicValidationRow>\n</template>\n<script setup lang=\"ts\">\nimport type {\n  CountryCode,\n  ValidationVisibility,\n} from '~~/src/components/formFields/types';\nimport { TextInput, DynamicValidationRow } from '@/complib';\nimport { usePhoneField } from './usePhone';\nimport { FormKit } from '@formkit/vue';\nimport type { FormkitFieldProps } from '~/@types/formie';\n\ninterface CanonicalPhoneFieldProps extends FormkitFieldProps {\n  countryCode: CountryCode;\n}\n\nconst props = withDefaults(defineProps<CanonicalPhoneFieldProps>(), {\n  required: true,\n  countryCode: 'DE' as CountryCode,\n  validationVisibility: 'blur' as ValidationVisibility,\n});\n\nconst value = defineModel({\n  default: '',\n});\n\nconst { country, number, fullPhoneNumber, countryPhoneMap, setPhoneValue } =\n  usePhoneField(props.countryCode, value.value);\n\nwatch(\n  () => fullPhoneNumber.value,\n  (nV) => {\n    value.value = nV;\n  },\n);\n\nwatch(\n  () => value.value,\n  (nV) => setPhoneValue(nV),\n);\n\nwatch(\n  () => props.countryCode,\n  (newCountryCode) => {\n    country.value = countryPhoneMap[newCountryCode];\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'change', data: string): void;\n}>();\n\nwatch(\n  () => fullPhoneNumber.value,\n  (newFullPhoneNumber) => {\n    emit('change', newFullPhoneNumber);\n  },\n);\n</script>\n","<template>\n  <div\n    :class=\"[\n      'group validation-row',\n      {\n        'rounded-fields': isMinilu,\n        'has-messages': showMessages,\n      },\n    ]\"\n    class=\"mb-sm\"\n  >\n    <label v-if=\"label\">\n      <FormLabel :label=\"label\" :required=\"required\" />\n    </label>\n    <FormKit\n      type=\"group\"\n      :parent=\"parentNode\"\n      :name=\"name\"\n      @node=\"(node) => (group = node)\"\n    >\n      <template #default>\n        <div class=\"flex flex-row gap-sm\">\n          <slot />\n        </div>\n        <div\n          v-if=\"showMessages\"\n          class=\"formkit-messages-custom\"\n          :class=\"{\n            'bg-minilu-bg rounded-br-minilu-md rounded-bl-minilu-md text-minilu-red':\n              isMinilu,\n            'bg-vdv-bg-base text-sign-red': !isMinilu,\n          }\"\n        >\n          <template v-if=\"validationMessage\">\n            {{ t(validationMessage) }}\n          </template>\n          <template\n            v-else-if=\"\n              combinedValidationMessage &&\n              (Object.values(messages).every((cur) => cur.length) ||\n                (combinedMessagesOnly && Object.values(messages).length > 0))\n            \"\n          >\n            {{ t(combinedValidationMessage) }}\n          </template>\n          <template v-else>\n            <div v-for=\"(msg, i) in displayMessages\" :key=\"i\">\n              {{ t(msg) }}\n            </div>\n          </template>\n        </div>\n      </template>\n    </FormKit>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { FormLabel } from '@/complib';\nimport { useValidationRow } from '../useValidationRow';\nimport { FormKit } from '@formkit/vue';\nimport { SiteIdent } from '~/utils/types';\nimport type { FormKitNode } from '@formkit/core';\n\ndefineProps({\n  name: {\n    type: String,\n    default: '',\n  },\n  validationMessage: {\n    type: String,\n    default: '',\n  },\n  label: {\n    type: String,\n    default: '',\n  },\n  required: {\n    type: Boolean,\n    default: true,\n  },\n  combinedValidationMessage: {\n    type: String,\n    default: '',\n  },\n  combinedMessagesOnly: {\n    type: Boolean,\n    default: false,\n  },\n  parentNode: {\n    type: Object as PropType<FormKitNode>,\n    default: null,\n  },\n});\n\nconst { messages, showMessages, displayMessages, group } = useValidationRow();\nconst { t } = useTrans();\n\nconst isMinilu = useSiteIdent() !== SiteIdent.default;\n</script>\n<style scoped lang=\"postcss\">\n.group :deep(.formkit-outer) {\n  @apply !mb-0;\n  .formkit-messages {\n    @apply !hidden;\n  }\n}\n\n.group.has-messages :deep(input) {\n  @apply rounded-br-none rounded-bl-none;\n}\n\n.group :deep(.formkit-messages-custom) {\n  @apply px-sm py-[2px];\n}\n</style>\n"],"names":["usePhoneField","countryCode","initialValue","countryPhoneMap","country","ref","number","setPhoneValue","fullPhoneNumber","watch","countryValue","numberValue","sanitizedNumber","getSanitizedPhonePart","phonePart","sanitizedPart","value","props","__props","_useModel","nV","newCountryCode","emit","__emit","newFullPhoneNumber","messages","showMessages","displayMessages","group","useValidationRow","t","useTrans","isMinilu","useSiteIdent","SiteIdent"],"mappings":"6VAEgB,SAAAA,EAAcC,EAA0BC,EAAuB,CAC7E,MAAMC,EAA+C,CACnD,GAAI,MACJ,GAAI,MACJ,GAAI,KAAA,EAGAC,EAAUC,EAAIF,EAAgBF,CAAW,CAAC,EAC1CK,EAASD,EAAI,EAAE,EAEjBH,GACFK,EAAcL,CAAY,EAEtB,MAAAM,EAAkBH,EAAI,EAAE,EAExBI,EAAA,CAACL,EAASE,CAAM,EAAG,CAAC,CAACI,EAAcC,CAAW,IAAM,CACxD,GAAIA,EAAa,CACT,MAAAC,EAAkBC,EAAsBF,CAAW,EACrD,GAAAD,EAAa,QAAUE,EAAgB,OAAQ,CACjDJ,EAAgB,MAAQE,EAAeE,EACvC,MACF,CACF,CACAJ,EAAgB,MAAQ,EAAA,CACzB,EAED,SAASK,EAAsBC,EAAmB,CAChD,IAAIC,EAAgB,GACJ,OAAAA,EAAAD,EAAU,QAAQ,MAAO,EAAE,EACpCC,EAAc,QAAQ,OAAQ,EAAE,CACzC,CAEA,SAASR,EAAcS,EAAe,CAChCA,EAAM,WAAW,GAAG,GACtBZ,EAAQ,MAAQY,EAAM,MAAM,EAAG,CAAC,EACzBV,EAAA,MAAQU,EAAM,MAAM,CAAC,IAEpBZ,EAAA,MAAQD,EAAgBF,CAAW,EAC3CK,EAAO,MAAQU,EAEnB,CAEO,MAAA,CACL,QAAAZ,EACA,OAAAE,EACA,gBAAAE,EACA,gBAAAL,EACA,cAAAI,CAAA,CAEJ,8jBCRA,MAAMU,EAAQC,EAMRF,EAAQG,EAAWD,EAAA,YAExB,EAEK,CAAE,QAAAd,EAAS,OAAAE,EAAQ,gBAAAE,EAAiB,gBAAAL,EAAiB,cAAAI,GACzDP,EAAciB,EAAM,YAAaD,EAAM,KAAK,EAE9CP,EACE,IAAMD,EAAgB,MACrBY,GAAO,CACNJ,EAAM,MAAQI,CAChB,CAAA,EAGFX,EACE,IAAMO,EAAM,MACXI,GAAOb,EAAca,CAAE,CAAA,EAG1BX,EACE,IAAMQ,EAAM,YACXI,GAAmB,CACVjB,EAAA,MAAQD,EAAgBkB,CAAc,CAChD,CAAA,EAGF,MAAMC,EAAOC,EAIb,OAAAd,EACE,IAAMD,EAAgB,MACrBgB,GAAuB,CACtBF,EAAK,SAAUE,CAAkB,CACnC,CAAA,osCCUF,KAAM,CAAE,SAAAC,EAAU,aAAAC,EAAc,gBAAAC,EAAiB,MAAAC,CAAA,EAAUC,IACrD,CAAE,EAAAC,GAAMC,IAERC,EAAWC,MAAmBC,EAAU"}