{"version":3,"sources":["webpack:///./src/components/CountrySearch.vue?d612","webpack:///./src/components/CountrySearch.vue?ef7c","webpack:///src/components/CountrySearch.vue","webpack:///./src/components/CountrySearch.vue?8af4","webpack:///./src/components/CountrySearch.vue?7afd"],"names":["_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CountrySearch_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CountrySearch_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n","render","_vm","this","_h","$createElement","_c","_self","staticClass","selectedElement","on","click","$event","reset","attrs","inputType","name","label","placeholder","model","value","callback","$$v","selectedValue","expression","_v","_s","class","inactive","inputValue","valid-input","inputIsValid","$t","autoComplete","focusInputField","invalidInput","input","searchDebounce","trim","directives","rawName","_e","searching","searchError","_l","element","index","key","selectCountry","src","flag","alt","type","readonly","contenteditable","domProps","keyup","indexOf","_k","keyCode","staticRenderFns","CountrySearchvue_type_script_lang_js_","data","_this","countries","filter","length","searchCountry","oldSelection","props","startingValue","default","methods","onBlurInput","console","_this2","$store","dispatch","then","res","catch","e","$emit","cca2","computed","inputCheck","watch","handler","state","validCountryCodes","includes","toUpperCase","components","CustomInput","components_CountrySearchvue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__"],"mappings":"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","file":"js/lazy-view-components-CountrySearch.004cda73.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CountrySearch.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CountrySearch.vue?vue&type=style&index=0&lang=less&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"searchable-dropdown\"},[_c('div',{staticClass:\"input-area\"},[(!_vm.selectedElement)?_c('custom-input',{staticClass:\"searchinput\",class:{'inactive' : !_vm.selectedElement && _vm.inputValue, 'valid-input' : _vm.inputIsValid},attrs:{\"inputType\":'text',\"name\":_vm.name,\"label\":_vm.$t('country-search.country'),\"placeholder\":_vm.$t('country-search.search'),\"autoComplete\":'disabled',\"focusInputField\":_vm.focusInputField,\"invalidInput\":_vm.invalidInput},on:{\"input\":function($event){return _vm.searchDebounce(_vm.inputValue)}},model:{value:(_vm.inputValue),callback:function ($$v) {_vm.inputValue=(typeof $$v === 'string'? $$v.trim(): $$v)},expression:\"inputValue\"}}):_c('div',{staticClass:\"selected-info\",on:{\"click\":function($event){return _vm.reset(_vm.selectedElement)}}},[_c('custom-input',{attrs:{\"inputType\":'text',\"name\":'dropdown-value',\"label\":'Country',\"placeholder\":'Search country'},model:{value:(_vm.selectedValue),callback:function ($$v) {_vm.selectedValue=$$v},expression:\"selectedValue\"}}),_c('span',{staticClass:\"additional-country-info\"},[_vm._v(_vm._s(_vm.selectedElement.name))])],1),_c('i',{staticClass:\"fa-light fa-chevron-down chevron\"})],1),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.inputValue && !_vm.selectedElement),expression:\"inputValue && !selectedElement\"}],staticClass:\"dropdown-list custom-scrollbar-light\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.searching),expression:\"searching\"}],staticClass:\"searching\"},[_c('i',{staticClass:\"fa-light fa-circle-notch fa-spin\"})]),(_vm.searchError)?_c('div',{staticClass:\"search-error\"},[_vm._v(_vm._s(_vm.$t('country-search.no-result')))]):_vm._e(),(!_vm.searching && !_vm.searchError)?_c('div',_vm._l((_vm.countries),function(element,index){return _c('div',{key:index,staticClass:\"element\",on:{\"click\":function($event){return _vm.selectCountry(element)}}},[_c('img',{staticClass:\"flag\",attrs:{\"src\":element.flag,\"alt\":element.name}}),_c('input',{staticClass:\"element-input\",attrs:{\"type\":\"text\",\"name\":element.name,\"readonly\":\"\",\"contenteditable\":\"false\"},domProps:{\"value\":element.name},on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }return _vm.selectCountry(element)}}})])}),0):_vm._e()])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"searchable-dropdown\">\n        <div class=\"input-area\">\n            <custom-input \n                class=\"searchinput\" \n                :class=\"{'inactive' : !selectedElement && inputValue, 'valid-input' : inputIsValid}\"\n                v-if=\"!selectedElement\" \n                v-model.trim=\"inputValue\" \n                @input=\"searchDebounce(inputValue)\"\n                :inputType=\"'text'\" \n                :name=\"name\" \n                :label=\"$t('country-search.country')\" \n                :placeholder=\"$t('country-search.search')\" \n                :autoComplete=\"'disabled'\" \n                :focusInputField=\"focusInputField\" \n                :invalidInput=\"invalidInput\"\n            />\n                <!-- :invalidInput=\"inputCheck ||  invalidInput\" -->\n                <!-- :invalidInput=\"invalidInput || (!selectedElement && inputValue && !inputIsValid)\" -->\n            \n            <div v-else @click=\"reset(selectedElement)\" class=\"selected-info\">\n                <custom-input \n                    :inputType=\"'text'\" \n                    v-model=\"selectedValue\" \n                    :name=\"'dropdown-value'\" \n                    :label=\"'Country'\" \n                    :placeholder=\"'Search country'\" \n                />\n                <span class=\"additional-country-info\">{{selectedElement.name}}</span>\n            </div>\n            <i class=\"fa-light fa-chevron-down chevron\"></i>\n        </div>\n        \n        <div class=\"dropdown-list custom-scrollbar-light\" v-show=\"inputValue && !selectedElement\">\n            <div v-show=\"searching\" class=\"searching\"><i class=\"fa-light fa-circle-notch fa-spin\"></i></div>\n            <div v-if=\"searchError\" class=\"search-error\">{{$t('country-search.no-result')}}</div>\n            <div v-if=\"!searching && !searchError\">\n                \n                <div v-for=\"(element, index) in countries\" :key=\"index\" class=\"element\" @click=\"selectCountry(element)\">\n                    <img class=\"flag\" :src=\"element.flag\" :alt=\"element.name\">\n                    <input type=\"text\" :name=\"element.name\" :value=\"element.name\" readonly class=\"element-input\" v-on:keyup.enter=\"selectCountry(element)\" contenteditable=\"false\">\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n<script>\nimport CustomInput from \"@/components/CustomInput\";\nimport debounce from 'lodash/debounce'\n  export default {\n    name: 'CountrySearch',\n    data(){\n      return{\n          selectedElement: null,\n          inputValue: this.startingValue,\n          countries: [],\n          searching: false,\n          searchDebounce: debounce((filter) => {\n                this.searching = true\n                this.searchError = false\n                if (filter.length) this.searchCountry(filter)\n                else { \n                    this.countries = []\n                    this.searching = false\n                }\n            }, 500),\n            focusInputField: null,\n            searchError: false,\n            oldSelection: null,\n            inputIsValid: false\n      }\n    },\n    props: {\n        startingValue: {\n            type: String,\n            default: ''\n            },\n        selectedValue: {\n            type: String\n        },\n        invalidInput: {\n            type: Boolean\n        },\n        name: {\n            type: String\n        }\n    },\n    methods:{\n        onBlurInput(){\n            console.log(event)\n            this.selectedElement = this.oldSelection \n        },\n        searchCountry(){\n            this.searchError = false\n            this.searching = true\n            this.$store.dispatch('getCountry', this.inputValue).then((res) => {\n                this.countries = res\n                this.searching = false\n            }).catch((e) => {\n                this.searching = false\n                this.searchError = true\n            })\n        },\n        reset(){\n            this.searchCountry()\n            this.inputValue = this.selectedElement.name\n            this.oldSelection = this.selectedElement\n            this.selectedElement = null\n            this.$emit('on-element-reset')\n            this.focusInputField = true\n        },\n        selectCountry(element){\n            this.selectedElement = element\n            this.$emit('on-element-selected', this.selectedElement.cca2)\n        }\n    },\n    computed:{\n        inputCheck(){\n            return !this.inputIsValid && this.inputValue.length && !this.selectedElement\n        }\n    },\n    watch: {\n        inputValue:{\n            handler: function (val, oldVal) {\n               if( !this.selectedElement && this.$store.state.validCountryCodes.includes(this.inputValue.toUpperCase())  ){\n                    console.log(\"Its valid\")\n                    this.inputIsValid = true\n                    this.$emit('on-element-selected', this.inputValue.toUpperCase())\n               } else {\n                   console.log(\"its invalid\")\n                   this.inputIsValid = false\n                   this.$emit('on-element-reset')\n                   \n               }\n            }\n        }\n    },\n    components:{\n        CustomInput\n    }\n\n}\n\n</script>\n\n<style lang=\"less\">\n.searchable-dropdown{\n    position: relative;\n    .input-area{\n        position: relative;\n        .chevron{\n            position: absolute;\n            top: 46px;\n            right: 4px;\n            opacity: .4;\n\n        }\n    }\n    .searching, .search-error{\n        padding: 4px 12px;\n    }\n    .element{\n        padding: 4px 12px;\n        &:hover, &:focus-within{\n            cursor: pointer;\n            background: #d6d9db;\n        }\n        .element-input{\n            cursor: pointer;    \n            pointer-events: none;\n            outline: none;\n            border: none;\n            // opacity: 0;\n            // width: 10px;\n            :focus{\n                -webkit-touch-callout: none; /* iOS Safari */\n                -webkit-user-select: none; /* Safari */\n                -khtml-user-select: none; /* Konqueror HTML */\n                -moz-user-select: none; /* Old versions of Firefox */\n                -ms-user-select: none; /* Internet Explorer/Edge */\n                user-select: none;\n            }\n            &::selection{\n                background: none;\n            }\n            &::-moz-selection{\n                background: none;\n            }\n        }\n    }\n    .dropdown-list{\n        position: absolute;\n        z-index: 99;\n        width: 100%;\n        max-height: 250px;\n        margin-top: 4px;\n        overflow-y: auto;\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n        border-radius: 8px;\n        background: #ffffff;\n        opacity: 0;\n        pointer-events: none;\n\n        .flag{\n            width: 12px;\n            margin-right: 12px;\n        }\n    }\n    &:focus-within {\n        .dropdown-list{\n            transition: .2s;\n            opacity: 1;\n            pointer-events: auto;\n        }\n    }\n        .dropdown-list:hover{\n            transition: .2s;\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n    .selected-info{\n        position: relative;\n        .additional-country-info{\n            position: absolute;\n            opacity: .4;\n            right: 22px;\n            top: 42px;\n        }\n    }\n    .searchinput.inactive:not(:focus-within):not(.valid-input){\n        input{\n            // padding-right: 25px;\n            // opacity: 0.4;\n        }\n    }\n    .searchinput.valid-input{\n        opacity: 1;\n    }\n    \n}\n</style>\n\n","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/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CountrySearch.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/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CountrySearch.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CountrySearch.vue?vue&type=template&id=1520f3bc&\"\nimport script from \"./CountrySearch.vue?vue&type=script&lang=js&\"\nexport * from \"./CountrySearch.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CountrySearch.vue?vue&type=style&index=0&lang=less&\"\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":""}