{"version":3,"sources":["webpack:///./src/components/PhoneNumberInput.vue?88d0","webpack:///src/components/PhoneNumberInput.vue","webpack:///./src/components/PhoneNumberInput.vue?a5c6","webpack:///./src/components/PhoneNumberInput.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_t","attrs","color","colors","items","countries","append-icon","item-value","item-text","scopedSlots","_u","key","fn","data","_v","_s","item","name","$t","model","value","callback","$$v","countryCode","expression","phoneNumberExample","countryCallingCode","placeholder","mask","type","phoneNumberInput","staticRenderFns","PhoneNumberInputvue_type_script_lang_js_","props","String","default","defaultCountryCode","required","nationalModeOperation","Boolean","computed","Object","objectSpread","vuex_esm","currentCountry","_this","country","find","c","code","keys","map","filter","p","phoneNumber","index_es6","toUpperCase","examples_mobile","internationalPhoneNumberExample","formatInternational","nationalPhoneNumberExample","formatNational","phonePartMask","split","length","replace","watch","number","format","methods","formatted","toLowerCase","formattedNumber","$emit","components_PhoneNumberInputvue_type_script_lang_js_","component","componentNormalizer","__webpack_exports__"],"mappings":"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","file":"js/chunk-fa63.dfcd89c1.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"flex flex-col\"},[_c('label',{staticClass:\"text-base font-medium first-case md:text-lg\"},[_vm._t(\"label\")],2),_c('div',{staticClass:\"flex flex-wrap\"},[_c('div',{staticClass:\"w-full sm:w-1/3\"},[_c('v-autocomplete',{staticClass:\"poppins py-0 pin-b\",attrs:{\"color\":(\"\" + (_vm.colors.secondaryColor)),\"items\":_vm.countries,\"append-icon\":\"ic-arrow_drop_down\",\"item-value\":\"code\",\"item-text\":\"name\"},scopedSlots:_vm._u([{key:\"item\",fn:function(data){return [_c('span',{staticClass:\"poppins text-base md:text-lg\"},[_vm._v(_vm._s(data.item.name))])]}},{key:\"selection\",fn:function(data){return [_c('span',{staticClass:\"poppins text-base md:text-lg\"},[_vm._v(\"\\r\\n              \"+_vm._s(_vm.$t((\"messages.countries.\" + (data.item.code))))+\"\\r\\n            \")])]}}]),model:{value:(_vm.countryCode),callback:function ($$v) {_vm.countryCode=$$v},expression:\"countryCode\"}})],1),_c('div',{staticClass:\"w-full sm:w-2/3\"},[_c('div',{staticClass:\"flex items-baseline\"},[_c('span',{staticClass:\"text-lg mx-2\"},[_vm._v(\"+\"+_vm._s(_vm.phoneNumberExample.countryCallingCode))]),_c('v-text-field',{staticClass:\"poppins ml-1 py-0 text-md md:text-lg\",attrs:{\"color\":(\"\" + (_vm.colors.secondaryColor)),\"placeholder\":_vm.mask,\"mask\":_vm.mask,\"type\":\"text\"},model:{value:(_vm.phoneNumberInput),callback:function ($$v) {_vm.phoneNumberInput=$$v},expression:\"phoneNumberInput\"}})],1)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"flex flex-col\">\r\n    <label class=\"text-base font-medium first-case md:text-lg\">\r\n      <slot name=\"label\" />\r\n    </label>\r\n    <div class=\"flex flex-wrap\">\r\n      <div class=\"w-full sm:w-1/3\">\r\n        <v-autocomplete\r\n          :color=\"`${colors.secondaryColor}`\"\r\n          v-model=\"countryCode\"\r\n          :items=\"countries\"\r\n          class=\"poppins py-0 pin-b\"\r\n          append-icon=\"ic-arrow_drop_down\"\r\n          item-value=\"code\"\r\n          item-text=\"name\"\r\n        >\r\n          <template \r\n            slot=\"item\" \r\n            slot-scope=\"data\">\r\n            <span class=\"poppins text-base md:text-lg\">{{\r\n              data.item.name\r\n            }}</span>\r\n          </template>\r\n          <template \r\n            slot=\"selection\" \r\n            slot-scope=\"data\">\r\n            <span class=\"poppins text-base md:text-lg\">\r\n              {{ $t(`messages.countries.${data.item.code}`) }}\r\n            </span>\r\n          </template>\r\n        </v-autocomplete>\r\n      </div>\r\n      <div class=\"w-full sm:w-2/3\">\r\n        <div class=\"flex items-baseline\">\r\n          <span \r\n            class=\"text-lg mx-2\"\r\n          >+{{ phoneNumberExample.countryCallingCode }}</span\r\n          >\r\n          <v-text-field            \r\n            :color=\"`${colors.secondaryColor}`\"\r\n            :placeholder=\"mask\"\r\n            v-model=\"phoneNumberInput\"\r\n            :mask=\"mask\"\r\n            class=\"poppins ml-1 py-0 text-md md:text-lg\"\r\n            type=\"text\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  getExampleNumber,\r\n  parsePhoneNumberFromString\r\n} from 'libphonenumber-js';\r\nimport examples from 'libphonenumber-js/examples.mobile.json';\r\nimport { mapGetters } from 'vuex';\r\n\r\nexport default {\r\n  props: {\r\n    value: {\r\n      type: String,\r\n      default: null\r\n    },\r\n    defaultCountryCode: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    nationalModeOperation:{\r\n      type: Boolean,\r\n      required:false,\r\n      default:false\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      countryCode: 'sv',\r\n      phoneNumberInput: null\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapGetters({\r\n      colors: 'currentColors'\r\n    }),\r\n    currentCountry() {\r\n      const country = this.countries.find(c => c.code === this.countryCode);\r\n      if (!country) return {};\r\n\r\n      return country;\r\n    },\r\n    countries() {\r\n      const countries = this.$t('messages.countries');\r\n      if (this.nationalModeOperation){\r\n      return Object.keys(countries).map(code => {\r\n        return {\r\n          code: code,\r\n          name: countries[code]\r\n        };\r\n      }).filter((p) => (p.code === 'sv'));\r\n      }\r\n      else {\r\n      return Object.keys(countries).map(code => {\r\n        return {\r\n          code: code,\r\n          name: countries[code]\r\n        };\r\n      });\r\n      }\r\n    },\r\n    phoneNumberExample() {\r\n      const phoneNumber = this.countryCode\r\n        ? getExampleNumber(this.countryCode.toUpperCase(), examples)\r\n        : null;\r\n      return phoneNumber;\r\n    },\r\n    mask() {\r\n      const internationalPhoneNumberExample = this.phoneNumberExample\r\n        ? this.phoneNumberExample.formatInternational()\r\n        : null;\r\n      const nationalPhoneNumberExample = this.phoneNumberExample\r\n        ? this.phoneNumberExample.formatNational()\r\n        : null;\r\n\r\n      const phonePartMask = internationalPhoneNumberExample\r\n        ? internationalPhoneNumberExample.split(' ')\r\n        : [];\r\n\r\n      const mask =\r\n        phonePartMask.length > 1\r\n          ? nationalPhoneNumberExample.replace(/\\d/g, '#')\r\n          : '';\r\n\r\n      return mask;\r\n    }\r\n  },\r\n  watch: {\r\n    defaultCountryCode(code) {\r\n      this.countryCode = code;\r\n    },\r\n    value(number) {\r\n      this.phoneNumberInput = number;\r\n    },\r\n    phoneNumberInput(number) {\r\n      this.format(number);\r\n    },\r\n    countryCode() {\r\n      this.format(this.phoneNumberInput);\r\n    }\r\n  },\r\n  methods: {\r\n    format(number) {\r\n      if (number) {\r\n        const phoneNumber = parsePhoneNumberFromString(\r\n          number,\r\n          this.countryCode.toUpperCase()\r\n        );\r\n        if (phoneNumber) {\r\n          const formatted = {\r\n            countryCode: this.countryCode.toLowerCase(),\r\n            formattedNumber: phoneNumber.number,\r\n            mask: this.phoneNumberExample.formatNational().replace(/\\d/g, '#').replace(' ', '')\r\n          };\r\n          this.$emit('formatted', formatted);\r\n        }\r\n      }\r\n      this.$emit('input', number);\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style>\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PhoneNumberInput.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PhoneNumberInput.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PhoneNumberInput.vue?vue&type=template&id=6d25ce08&\"\nimport script from \"./PhoneNumberInput.vue?vue&type=script&lang=js&\"\nexport * from \"./PhoneNumberInput.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}