{"version":3,"file":"InputFieldPhone.vue_vue_type_style_index_0_lang-OTOwLXcz.js","sources":["../../src/components/input/InputFieldPhone.vue"],"sourcesContent":["<template>\n  <div :hidden=\"hidden\">\n    <InputLabel v-if=\"label\" :for=\"name\">{{ label }}</InputLabel>\n    <div\n      ref=\"input_container\"\n      :class=\"disable ? 'hover:cursor-disabled' : ''\"\n      class=\"mt-1 relative flex flex-col\"\n    >\n      <vue-tel-input\n        v-model=\"value\"\n        :class=\"disable ? 'hover:cursor-disabled' : ''\"\n        :defaultCountry=\"defaultCountry\"\n        :disabled=\"disable\"\n        :dropdownOptions=\"dropdownOptions\"\n        :enabledCountryCode=\"enabledCountryCode\"\n        :inputOptions=\"inputOptions\"\n        :only-countries=\"onlyCountries\"\n        :styleClasses=\"[\n          'flex rounded-xl shadow-sm flex-1 border border-neutral-3 dark:border-dark focus-within:outline-none focus-within:ring-primary-1 ' +\n            'focus-within:border-primary-2 sm:text-sm h-[48px]',\n          error\n            ? 'border-danger shadow-md focus:shadow-danger/20 shadow-danger/20 invalid'\n            : '',\n          noRightBorderRadius && 'rounded-r-none',\n        ]\"\n        @on-input=\"handleInputChange\"\n        @country-changed=\"country_changed\"\n      >\n        <template #arrow-icon>\n          <svg\n            :class=\"disable ? 'opacity-0' : ''\"\n            fill=\"none\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 7.5L10 12.5L15 7.5\"\n              stroke=\"#667085\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.66667\"\n            />\n          </svg>\n        </template>\n      </vue-tel-input>\n      <slot name=\"append\"></slot>\n      <transition name=\"fade\">\n        <InputValidationError\n          v-if=\"errors && errors.length > 0\"\n          :errors=\"errors\"\n        />\n        <InputHint v-else>{{ hint }}</InputHint>\n      </transition>\n      <transition name=\"fade\">\n        <input-error-message v-if=\"errorMessage\">\n          {{ errorMessage }}\n        </input-error-message>\n      </transition>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from \"@vue/reactivity\";\nimport { computed, onMounted } from \"vue\";\nimport { VueTelInput } from \"vue-tel-input\";\nimport InputErrorMessage from \"./InputErrorMessage.vue\";\nimport InputHint from \"./InputHint.vue\";\nimport InputLabel from \"./InputLabel.vue\";\nimport InputValidationError from \"./InputValidationError.vue\";\n\nconst props = defineProps({\n  label: {\n    type: String,\n    default: \"\",\n  },\n  defaultCountry: {\n    type: String,\n    default: \"\",\n  },\n  name: {\n    type: String,\n    default: \"\",\n  },\n  modelValue: {\n    type: String,\n    default: \"\",\n  },\n  error: {\n    type: Boolean,\n  },\n  errorMessage: {\n    type: String,\n  },\n  inputClass: {\n    type: String,\n    default: \"\",\n  },\n  hint: {\n    type: String,\n    default: \"\",\n  },\n  errors: {\n    type: Array,\n  },\n  autocomplete: {\n    type: String,\n    default: \"off\",\n  },\n  required: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: \"\",\n  },\n  noRightBorderRadius: {\n    type: Boolean,\n    default: false,\n  },\n  disable: {\n    type: Boolean,\n    default: false,\n  },\n  hidden: {\n    type: Boolean,\n    default: false,\n  },\n  dropdownOptions: {\n    type: Object,\n    default: () => ({\n      disabled: false,\n      showFlags: true,\n    }),\n  },\n  onlyCountries: {\n    type: Array,\n    default: [],\n  },\n  enabledCountryCode: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst value = defineModel();\nconst selectedCountry = ref<null | any>(null);\nconst input_container = ref<HTMLElement>();\nconst inputWidth = ref(\"100%\");\nconst resizeWidth = () => {\n  if (input_container.value) {\n    inputWidth.value = input_container.value?.clientWidth + \"px\";\n  }\n};\n\nonMounted(() => {\n  setTimeout(() => {\n    resizeWidth();\n    addEventListener(\"resize\", () => {\n      resizeWidth();\n    });\n  }, 1000);\n});\n\nconst inputOptions = computed(() => {\n  return {\n    styleClasses: `flex-1 min-w-0 block w-full border p-4 rounded-none transition duration-150 ease-in-out placeholder-content-inactive dark:placeholder-content-7 focus:outline-none focus:ring-primary-1 focus:border-primary-2 sm:text-sm ${props.inputClass}`,\n    required: props.required,\n    name: props.name,\n    placeholder: \"Enter Phone\",\n    maxlength: 13,\n    autocomplete: props.autocomplete,\n  };\n});\n\nconst formattedNumber = ref();\nconst isValid = ref<boolean>();\n\nconst country_changed = (country: any) => {\n  selectedCountry.value = country;\n};\n\nconst handleInputChange = (\n  _event: unknown,\n  phoneObject: { number: string; valid: boolean }\n) => {\n  formattedNumber.value = phoneObject?.number;\n  isValid.value = phoneObject?.valid;\n};\n\ndefineExpose({ selectedCountry, formattedNumber, isValid });\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n};\n</script>\n<style>\n.vue-tel-input .vti__dropdown-list {\n  @apply h-60 z-[8] mt-6 mb-2 dark:border-neutral-2 overflow-y-auto shadow-lg rounded-lg py-4 bg-white dark:bg-black scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-200 dark:scrollbar-track-neutral-2 !important;\n  width: v-bind(inputWidth);\n}\n\n.vue-tel-input .vti__dropdown {\n  @apply h-10 my-auto hover:bg-white dark:hover:bg-black !important;\n}\n\n.vti__dropdown-item.last-preferred {\n  @apply dark:border-neutral-2;\n}\n\nspan.vti__flag {\n  @apply font-normal !important;\n}\n\n.vti__dropdown.open {\n  @apply bg-white dark:bg-black;\n}\n\n.vue-tel-input .vti__selection {\n  @apply gap-0.5 text-header  text-sm !important;\n}\n\n.vue-tel-input .vti__country-code {\n  @apply font-medium dark:text-white xs:block hidden;\n}\n\n.vue-tel-input .vti__dropdown {\n  @apply flex items-center py-[14px] px-[12px] relative rounded-l-xl border-r border-gray-300 dark:border-dark bg-white dark:bg-black text-gray-500 sm:text-sm my-0 h-full !important;\n}\n\n.vue-tel-input .vti__dropdown.disabled {\n  @apply bg-gray-3 dark:bg-content-6 !important;\n}\n\n.vue-tel-input .vti__dropdown:has(+ .vti__input:disabled) {\n  @apply bg-gray-3 dark:bg-content-6 cursor-not-allowed opacity-100 dark:border-content-0 !important;\n}\n\n.vue-tel-input .vti__dropdown:has(+ .vti__input:disabled) .opacity\\-0 {\n  @apply w-0;\n}\n\n.vti__dropdown-item {\n  @apply dark:text-neutral-5 py-1.5;\n}\n\n.vti__dropdown-item span {\n  @apply dark:text-content-4;\n}\n\n.vti__dropdown {\n  @apply hover:bg-white dark:hover:bg-black;\n}\n\n.vue-tel-input:focus-within .vti__dropdown {\n  @apply border-primary-2;\n}\n\n.vue-tel-input.invalid .vti__dropdown {\n  @apply border-danger;\n}\n\n.vue-tel-input:not(:placeholder-shown) {\n  @apply dark:!bg-black;\n}\n\n.vue-tel-input .vti__input {\n  @apply disabled:text-secondary disabled:dark:text-gray-0 disabled:bg-gray-3 disabled:dark:bg-content-6 disabled:cursor-not-allowed flex-1 min-w-0 block w-full border py-3 px-4 rounded-none rounded-r-xl placeholder-content-inactive dark:placeholder-content-7 focus:outline-none focus:ring-primary-1 focus:border-primary-2 sm:text-sm dark:bg-transparent dark:text-white !important;\n}\n\n.vti__dropdown-item.highlighted {\n  @apply dark:bg-black;\n}\n\n.vti__country-code {\n  @apply hidden !important;\n}\n</style>\n"],"names":["__default__","props","__props","value","_useModel","selectedCountry","ref","input_container","inputWidth","resizeWidth","_a","onMounted","inputOptions","computed","formattedNumber","isValid","country_changed","country","handleInputChange","_event","phoneObject","__expose"],"mappings":"4rBAoMeA,EAAA,CACb,aAAc,EAChB,uyBA9HA,MAAMC,EAAQC,EA2ERC,EAAQC,gBAAY,EACpBC,EAAkBC,EAAgB,IAAI,EACtCC,EAAkBD,EAAiB,EACnCE,EAAaF,EAAI,MAAM,EACvBG,EAAc,IAAM,OACpBF,EAAgB,QACPC,EAAA,QAAQE,EAAAH,EAAgB,QAAhB,YAAAG,EAAuB,aAAc,KAE5D,EAEAC,EAAU,IAAM,CACd,WAAW,IAAM,CACHF,EAAA,EACZ,iBAAiB,SAAU,IAAM,CACnBA,EAAA,CAAA,CACb,GACA,GAAI,CAAA,CACR,EAEK,MAAAG,EAAeC,EAAS,KACrB,CACL,aAAc,6NAA6NZ,EAAM,UAAU,GAC3P,SAAUA,EAAM,SAChB,KAAMA,EAAM,KACZ,YAAa,cACb,UAAW,GACX,aAAcA,EAAM,YACtB,EACD,EAEKa,EAAkBR,EAAI,EACtBS,EAAUT,EAAa,EAEvBU,EAAmBC,GAAiB,CACxCZ,EAAgB,MAAQY,CAC1B,EAEMC,EAAoB,CACxBC,EACAC,IACG,CACHN,EAAgB,MAAQM,GAAA,YAAAA,EAAa,OACrCL,EAAQ,MAAQK,GAAA,YAAAA,EAAa,KAC/B,EAEA,OAAAC,EAAa,CAAE,gBAAAhB,EAAiB,gBAAAS,EAAiB,QAAAC,CAAA,CAAS"}