diff --git a/.coveralls.yml b/.coveralls.yml new file mode 100644 index 000000000..5bbdab303 --- /dev/null +++ b/.coveralls.yml @@ -0,0 +1 @@ +repo_token: h4mSYiVLxUBNL77JwRz2ohH8Of8e4qSuc diff --git a/.eslintignore b/.eslintignore index d2c9ebe95..160898105 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,3 +6,4 @@ node_modules/* Gruntfile.js package.json webpack.*.js +coverage/* diff --git a/.gitignore b/.gitignore index 4ef3ce85c..0d36522a9 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,5 @@ node_modules/ /src/main.js .grunt/ npm-debug.log + +coverage diff --git a/.travis.yml b/.travis.yml index 958b7058e..c97a5995a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,5 @@ language: node_js node_js: - "4.1.2" +after_success: npm run coverage +after_script: npm run coveralls diff --git a/README.md b/README.md index d9133fb8c..49d8d7add 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ [![Build Status](https://travis-ci.org/patw0929/react-intl-tel-input.svg)](https://travis-ci.org/patw0929/react-intl-tel-input) [![npm version](https://badge.fury.io/js/react-intl-tel-input.svg)](http://badge.fury.io/js/react-intl-tel-input) +[![Coverage Status](https://coveralls.io/repos/github/patw0929/react-intl-tel-input/badge.svg?branch=master)](https://coveralls.io/github/patw0929/react-intl-tel-input?branch=master) +[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)]() + +[![NPM](https://nodei.co/npm/react-intl-tel-input.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-intl-tel-input/) Rewrite [International Telephone Input](https://github.com/jackocnr/intl-tel-input) in React.js. @@ -53,10 +57,22 @@ Please see the [Demo Page](http://patw0929.github.io/react-intl-tel-input/) To build, watch and serve the examples (which will also watch the component source), run `npm run example`. + +## Contributing + +To contribute to react-intl-tel-input, clone this repo locally and commit your code on a separate branch. Please write tests for your code, and run the linter before opening a pull-request: + +```bash +npm test +npm run lint +``` + + ## Inspired by [International Telephone Input](https://github.com/jackocnr/intl-tel-input) - [@jackocnr](https://github.com/jackocnr) + ## License MIT diff --git a/example/assets/example.js b/example/assets/example.js index 65ef05c1f..af818a68b 100644 --- a/example/assets/example.js +++ b/example/assets/example.js @@ -1,7 +1,7 @@ -!function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var i={};return e.m=t,e.c=i,e.p="./assets/",e(0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var l=function(){function t(t,e){for(var i=0;i=0},retrieveLiIndex:function(t){for(var e=t.parentNode.childNodes,i=0,n=0,o=e.length;o>n;n++){if(e[n]===t)return i;1===e[n].nodeType&&"li"===e[n].tagName.toLowerCase()&&i++}return-1},getNumeric:function(t){return t.replace(/\D/g,"")},getClean:function(t){var e="+"===t.charAt(0)?"+":"";return e+this.getNumeric(t)},startsWith:function(t,e){return t.substr(0,e.length).toUpperCase()===e},isWindow:function(t){return null!==t&&t===t.window},getWindow:function(t){return this.isWindow(t)?t:9===t.nodeType&&t.defaultView},offset:function(t){var e=void 0,i=void 0,n={top:0,left:0},a=t&&t.ownerDocument;return e=a.documentElement,"undefined"!==o(t.getBoundingClientRect)&&(n=t.getBoundingClientRect()),i=this.getWindow(a),{top:n.top+i.pageYOffset-e.clientTop,left:n.left+i.pageXOffset-e.clientLeft}},getOuterHeight:function(t){return t.offsetHeight+parseFloat(window.getComputedStyle(t).getPropertyValue("margin-top"))+parseFloat(window.getComputedStyle(t).getPropertyValue("margin-bottom"))},getCountryData:function(t,e,i){for(var n=s["default"].getCountries(),o=0,a=n.length;a>o;o++)if(n[o].iso2===t)return n[o];return e?null:("function"==typeof i&&i(t),{})},hasClass:function(t,e){return t.classList?t.classList.contains(e):!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))},addClass:function(t,e){t.classList?t.classList.add(e):this.hasClass(t,e)||(t.className+=" "+e)},removeClass:function(t,e){if(t.classList)t.classList.remove(e);else if(this.hasClass(t,e)){var i=new RegExp("(\\s|^)"+e+"(\\s|$)");t.className=t.className.replace(i," ")}}}},function(t,e,i){var n,o;/*! +!function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var i={};return e.m=t,e.c=i,e.p="./assets/",e(0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var l=function(){function t(t,e){for(var i=0;i=0},retrieveLiIndex:function(t){if(!t)return-1;for(var e=t.parentNode.childNodes,i=0,n=0,o=e.length;o>n;n++){if(e[n]===t)return i;1===e[n].nodeType&&"li"===e[n].tagName.toLowerCase()&&i++}return-1},getNumeric:function(t){return t.replace(/\D/g,"")},getClean:function(t){var e="+"===t.charAt(0)?"+":"";return e+this.getNumeric(t)},startsWith:function(t,e){return t.substr(0,e.length).toUpperCase()===e},isWindow:function(t){return null!==t&&t===t.window},getWindow:function(t){return this.isWindow(t)?t:9===t.nodeType&&t.defaultView},offset:function(t){var e=void 0,i=void 0,n={top:0,left:0},a=t&&t.ownerDocument;return e=a.documentElement,"undefined"!==o(t.getBoundingClientRect)&&(n=t.getBoundingClientRect()),i=this.getWindow(a),{top:n.top+i.pageYOffset-e.clientTop,left:n.left+i.pageXOffset-e.clientLeft}},getOuterHeight:function(t){return t.offsetHeight+parseFloat(window.getComputedStyle(t).getPropertyValue("margin-top"))+parseFloat(window.getComputedStyle(t).getPropertyValue("margin-bottom"))},getCountryData:function(t,e,i){for(var n=s["default"].getCountries(),o=0,a=n.length;a>o;o++)if(n[o].iso2===t)return n[o];return e?null:("function"==typeof i&&i(t),{})},hasClass:function(t,e){return t.classList?t.classList.contains(e):!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))},addClass:function(t,e){t.classList?t.classList.add(e):this.hasClass(t,e)||(t.className+=" "+e)},removeClass:function(t,e){if(t.classList)t.classList.remove(e);else if(this.hasClass(t,e)){var i=new RegExp("(\\s|^)"+e+"(\\s|$)");t.className=t.className.replace(i," ")}},getDigitsOnRight:function(t,e){for(var i=0,n=e,o=t.length;o>n;n++)this.isNumeric(t.charAt(n))&&i++;return i},getCursorFromLeftChar:function(t,e,i){for(var n=e;n>0;n--){var o=t.charAt(n-1);if(this.isNumeric(o)||t.substr(n-2,2)===i)return n}return 0},getCursorFromDigitsOnRight:function(t,e){for(var i=t.length-1;i>=0;i--)if(this.isNumeric(t.charAt(i))&&0===--e)return i;return 0}}},function(t,e,i){var n,o;/*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){function i(){for(var t=[],e=0;e1?e-1:0),n=1;e>n;n++)i[n-1]=arguments[n];return t.bind.apply(t,[t].concat(i))}Object.defineProperty(e,"__esModule",{value:!0});var u=function(){function t(t,e){for(var i=0;it+n+o,r=t-o>e,s=!a&&r?"-"+(o-1)+"px":"";(0,d.findDOMNode)(this.refs.listElement).style.top=s,(0,d.findDOMNode)(this.refs.listElement).setAttribute("class","country-list")}},{key:"appendListItem",value:function(t,e){var i=this,n=this.props.preferredCountries.length;return t.map(function(t,o){if(i.props.isMobile)return h["default"].createElement("option",{key:"country-"+o,"data-dial-code":t.dialCode,value:t.iso2},t.name+" +"+t.dialCode);var a="preferred"===e?o:o+n,r={country:!0,highlight:i.props.highlightedCountry===a},s=void 0;return r[e]=!0,s=(0,c["default"])(r),h["default"].createElement("li",{key:"country-"+o,className:s,"data-dial-code":t.dialCode,"data-country-code":t.iso2,onMouseOver:i.handleMouseOver,onClick:l(i.selectFlag,t.iso2)},h["default"].createElement("div",{ref:"selectedFlag",className:"flag"},h["default"].createElement("div",{ref:"selectedFlagInner",className:"iti-flag "+t.iso2})),h["default"].createElement("span",{className:"country-name"},t.name),h["default"].createElement("span",{className:"dial-code"},"+",t.dialCode))})}},{key:"selectFlag",value:function(t){this.props.selectFlag(t)}},{key:"handleMouseOver",value:function(t){if(t.currentTarget.getAttribute("class").indexOf("country")>-1){var e=y["default"].retrieveLiIndex(t.currentTarget);this.props.changeHighlightCountry(!0,e)}}},{key:"handleChangeCountry",value:function(t){this.selectFlag(t.target.value)}},{key:"render",value:function(){var t="",e=this.props.preferredCountries,i=void 0,n=this.props.countries,o=(0,c["default"])({"country-list":!0,hide:!this.props.showDropdown}),a=void 0;return this.props.isMobile?(t=this.appendListItem(n,""),h["default"].createElement("select",{className:"iti-mobile-select",onChange:this.handleChangeCountry},t)):(e.length&&(i=this.appendListItem(e,"preferred"),a=h["default"].createElement("div",{className:"divider"})),t=this.appendListItem(n,""),h["default"].createElement("ul",{ref:"listElement",className:o},i,a,t))}}]),e}(p.Component);b.propTypes={isMobile:p.PropTypes.bool,selectFlag:p.PropTypes.func,countries:p.PropTypes.array,inputTop:p.PropTypes.number,inputOuterHeight:p.PropTypes.number,preferredCountries:p.PropTypes.array,highlightedCountry:p.PropTypes.number,changeHighlightCountry:p.PropTypes.func,showDropdown:p.PropTypes.bool},e["default"]=b},function(t,e,i){function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=("undefined"==typeof e?"undefined":r(e))&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof e?"undefined":r(e)));t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var l=function(){function t(t,e){for(var i=0;i0?m["default"].getCountryData(this.props.preferredCountries[0]):g["default"].getCountries()[0]),e.iso2}},{key:"setNumber",value:function(t,e,i,n,o){this.props.nationalMode||"+"===t.charAt(0)||(t="+"+t),this.updateFlagFromNumber(t),this.updateVal(t,e,i,n,o)}},{key:"getDigitsOnRight",value:function(t,e){for(var i=0,n=e,o=t.length;o>n;n++)m["default"].isNumeric(t.charAt(n))&&i++;return i}},{key:"getCursorFromLeftChar",value:function(t,e,i){for(var n=e;n>0;n--){var o=t.charAt(n-1);if(m["default"].isNumeric(o)||t.substr(n-2,2)===i)return n}return 0}},{key:"getCursorFromDigitsOnRight",value:function(t,e){for(var i=t.length-1;i>=0;i--)if(m["default"].isNumeric(t.charAt(i))&&0===--e)return i;return 0}},{key:"setPreferredCountries",value:function(){this.preferredCountries=[];for(var t=0,e=this.props.preferredCountries.length;e>t;t++){var i=this.props.preferredCountries[t].toLowerCase(),n=m["default"].getCountryData(i,!0);n&&this.preferredCountries.push(n)}}},{key:"setInstanceCountryData",value:function(){var t=this;this.props.onlyCountries.length?this.countries=g["default"].getCountries().filter(function(e){return t.props.onlyCountries.indexOf(e.iso2)>-1},this):this.countries=g["default"].getCountries();for(var e={},i=0,n=this.countries.length;n>i;i++){var o=this.countries[i];if(e=this.addCountryCode(e,o.iso2,o.dialCode,o.priority),o.areaCodes)for(var a=0,r=o.areaCodes.length;r>a;a++)e=this.addCountryCode(e,o.iso2,o.dialCode+o.areaCodes[a])}this.countryCodes=e}},{key:"getDialCode",value:function(t){var e="";if("+"===t.charAt(0))for(var i="",n=0,o=t.length;o>n;n++){var a=t.charAt(n);if(m["default"].isNumeric(a)&&(i+=a,this.countryCodes[i]&&(e=t.substr(0,n+1)),4===i.length))break}return e}},{key:"getNumber",value:function(t){var e=m["default"].trim(t),i=this.props.nationalMode?this.selectedCountryData.iso2:"";return window.intlTelInputUtils?window.intlTelInputUtils.formatNumberByType(e,i):!1}},{key:"notifyPhoneNumberChange",value:function(t){if("function"==typeof this.props.onPhoneNumberChange){var e=this.isValidNumber(t);this.props.onPhoneNumberChange(e,t,this.selectedCountryData,this.getNumber(t))}}},{key:"scrollTo",value:function(t,e){var i=(0,h.findDOMNode)(this.refs.flagDropDown).querySelector(".country-list"),n=parseFloat(window.getComputedStyle(i).getPropertyValue("height"),10),o=m["default"].offset(i).top,a=o+n,r=m["default"].getOuterHeight(t),s=m["default"].offset(t).top,l=s+r,u=n/2-r/2,p=s-o+i.scrollTop;if(o>s)e&&(p-=u),i.scrollTop=p;else if(l>a){e&&(p+=u);var d=n-r;i.scrollTop=p-d}}},{key:"isValidNumber",value:function(t){var e=m["default"].trim(t),i=this.props.nationalMode?this.selectedCountryData.iso2:"";return window.intlTelInputUtils?window.intlTelInputUtils.isValidNumber(e,i):!1}},{key:"setInitialState",value:function(){var t=this.props.value||"";if(this.selectFlag(this.props.defaultCountry||"",!1),this.getDialCode(t))this.updateFlagFromNumber(t);else if("auto"!==this.tempCountry){var e=this.tempCountry;this.tempCountry||(e=this.preferredCountries.length?this.preferredCountries[0].iso2:this.countries[0].iso2),this.selectFlag(e,!1),t||this.updateDialCode(this.selectedCountryData.dialCode,!1)}this.updateVal(t)}},{key:"updateDialCode",value:function(t,e){var i=(0,h.findDOMNode)(this.refs.telInput).value,n=void 0;if(t="+"+t,this.props.nationalMode&&"+"!==i.charAt(0))n=i;else if(i){var o=this.getDialCode(i);if(o.length>1)n=i.replace(o,t);else{var a="+"!==i.charAt(0)?m["default"].trim(i):"";n=t+a}}else n=!this.props.autoHideDialCode||e?t:"";this.updateVal(n,null,e)}},{key:"isUnknownNanp",value:function(t,e){return"+1"===e&&m["default"].getNumeric(t).length>=4}},{key:"updateFlagFromNumber",value:function(t){t&&this.props.nationalMode&&this.selectedCountryData&&"1"===this.selectedCountryData.dialCode&&"+"!==t.charAt(0)&&("1"!==t.charAt(0)&&(t="1"+t),t="+"+t);var e=this.getDialCode(t),i=null;if(e){var n=this.countryCodes[m["default"].getNumeric(e)],o=this.selectedCountryData&&-1!==n.indexOf(this.selectedCountryData.iso2);if(!o||this.isUnknownNanp(t,e))for(var a=0,r=n.length;r>a;a++)if(n[a]){i=n[a];break}}else"+"===t.charAt(0)&&m["default"].getNumeric(t).length&&(i="");null!==i&&""!==i&&this.state.countryCode!==i&&this.selectFlag(i)}},{key:"initRequests",value:function(){var t=this;this.props.utilsScript?this.windowLoaded?this.loadUtils():window.addEventListener("load",function(){t.loadUtils()}):this.utilsScriptDeferred.resolve(),"auto"===this.tempCountry?this.loadAutoCountry():this.autoCountryDeferred.resolve()}},{key:"loadAutoCountry",value:function(){var t=this,e=void 0!==window.localStorage?window.localStorage.getItem("itiAutoCountry"):"";e&&(this.autoCountry=e),this.autoCountry?this.autoCountryLoaded():this.startedLoadingAutoCountry||(this.startedLoadingAutoCountry=!0,"function"==typeof this.props.geoIpLookup&&this.props.geoIpLookup(function(e){t.autoCountry=e.toLowerCase(),void 0!==window.localStorage&&window.localStorage.setItem("itiAutoCountry",t.autoCountry),t.autoCountryLoaded()}))}},{key:"autoCountryLoaded",value:function(){"auto"===this.tempCountry&&(this.tempCountry=this.autoCountry,this.autoCountryDeferred.resolve())}},{key:"loadUtils",value:function(){var t=this;if(window.intlTelInputUtils)return void this.utilsScriptDeferred.resolve();var e=new XMLHttpRequest;e.open("GET",this.props.utilsScript,!0),e.onload=function(){if(e.status>=200&&e.status<400){var i=e.responseText;i&&(window.execScript?window.execScript(i):window.eval(i)),t.utilsScriptDeferred.resolve()}},e.send()}},{key:"processCountryData",value:function(){g["default"].initialize(this.props.countriesData),this.setInstanceCountryData.call(this),this.setPreferredCountries.call(this)}},{key:"addCountryCode",value:function(t,e,i,n){i in t||(t[i]=[]);var o=n||0;return t[i][o]=e,t}},{key:"handleSelectedFlagKeydown",value:function(t){this.state.countryList.showDropdown||t.which!==this.keys.UP&&t.which!==this.keys.DOWN&&t.which!==this.keys.SPACE&&t.which!==this.keys.ENTER||(t.preventDefault(),t.stopPropagation(),this.toggleDropdown(!0)),t.which===this.keys.TAB&&this.toggleDropdown(!1)}},{key:"handleInvalidKey",value:function(){var t=this;m["default"].addClass((0,h.findDOMNode)(this.refs.telInput),"iti-invalid-key"),setTimeout(function(){m["default"].removeClass((0,h.findDOMNode)(t.refs.telInput),"iti-invalid-key")},100)}},{key:"handleInputKey",value:function(t,e,i){var n=(0,h.findDOMNode)(this.refs.telInput).value,o=void 0,a=0,r=(0,h.findDOMNode)(this.refs.telInput);if(this.isGoodBrowser?(a=this.getDigitsOnRight(n,r.selectionEnd),t?n=n.substr(0,r.selectionStart)+t+n.substring(r.selectionEnd,n.length):o=n.substr(r.selectionStart-2,2)):t&&(n+=t),this.setNumber(n,null,e,!0,i),this.isGoodBrowser){var s=void 0;n=(0,h.findDOMNode)(this.refs.telInput).value,a?(s=this.getCursorFromDigitsOnRight(n,a),t||(s=this.getCursorFromLeftChar(n,s,o))):s=n.length,r.setSelectionRange(s,s)}}},{key:"updatePlaceholder",value:function(){if(window.intlTelInputUtils&&!this.hadInitialPlaceholder&&this.props.autoPlaceholder&&this.selectedCountryData){var t=this.selectedCountryData.iso2,e=window.intlTelInputUtils.numberType[this.props.numberType||"FIXED_LINE"],i=t?window.intlTelInputUtils.getExampleNumber(t,this.props.nationalMode,e):"";"function"==typeof this.props.preprocessPlaceholder&&(i=this.props.preprocessPlaceholder(i,t)),(0,h.findDOMNode)(this.refs.telInput).setAttribute("placeholder",i)}}},{key:"handleKeyPress",value:function(t){if(this.props.autoFormat&&t.which>=this.keys.SPACE&&!t.ctrlKey&&!t.metaKey&&window.intlTelInputUtils&&!this.state.telInput.readonly){t.preventDefault();var e=t.which>=this.keys.ZERO&&t.which<=this.keys.NINE||t.which===this.keys.PLUS,i=(0,h.findDOMNode)(this.refs.telInput),n=this.isGoodBrowser&&i.selectionStart===i.selectionEnd,o=i.getAttribute("maxlength"),a=i.value,r=o?a.lengthr&&(a=a.substr(0,r))}else a=t;this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry},telInput:{value:a,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}})}},{key:"selectFlag",value:function(t){var e=this,i=arguments.length<=1||void 0===arguments[1]?!0:arguments[1];this.selectedCountryData=t?m["default"].getCountryData(t,!1,this.props.noCountryDataHandler):{},this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry},countryCode:t},function(){if(e.updatePlaceholder(),e.selectedCountryData.dialCode&&e.updateDialCode(e.selectedCountryData.dialCode,!0),i&&((0,h.findDOMNode)(e.refs.telInput).focus(),e.isGoodBrowser)){var n=e.state.telInput.value.length;(0,h.findDOMNode)(e.refs.telInput).setSelectionRange(n,n)}if("function"==typeof e.props.onSelectFlag&&e.props.onSelectFlag(e.selectedCountryData),t&&"auto"!==t){var o=(0,h.findDOMNode)(e.refs.flagDropDown).querySelector('.country-list [data-country-code="'+t+'"]:not(.preferred)'),a=m["default"].retrieveLiIndex(o);e.setState({countryList:{showDropdown:!1,highlightedCountry:a}})}})}},{key:"ensurePlus",value:function(){if(!this.props.nationalMode){var t=this.state.telInput.value,e=(0,h.findDOMNode)(this.refs.telInput);if("+"!==t.charAt(0)){var i=this.isGoodBrowser?e.selectionStart+1:0;this.setState({telInput:{value:"+"+t,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}}),this.isGoodBrowser&&e.setSelectionRange(i,i)}}}},{key:"handleDocumentKeyDown",value:function(t){var e=this,i=void 0;t.preventDefault(),t.which===this.keys.UP||t.which===this.keys.DOWN?this.handleUpDownKey(t.which):t.which===this.keys.ENTER?this.handleEnterKey():t.which===this.keys.ESC?this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry}}):(t.which>=this.keys.A&&t.which<=this.keys.Z||t.which===this.keys.SPACE)&&(i&&clearTimeout(i),this.query||(this.query=""),this.query+=String.fromCharCode(t.which),this.searchForCountry(this.query),i=setTimeout(function(){e.query=""},1e3))}},{key:"handleDocumentClick",value:function(){this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry}})}},{key:"searchForCountry",value:function(t){for(var e=0,i=this.countries.length;i>e;e++)if(m["default"].startsWith(this.countries[e].name,t)){var n=(0,h.findDOMNode)(this.refs.flagDropDown).querySelector('.country-list [data-country-code="'+this.countries[e].iso2+'"]:not(.preferred)'),o=m["default"].retrieveLiIndex(n);this.setState({countryList:{showDropdown:!0,highlightedCountry:o}}),this.scrollTo(n,!0);break}}},{key:"handleEnterKey",value:function(){var t=this,e=(0,h.findDOMNode)(this.refs.flagDropDown).querySelectorAll(".highlight")[0];if(e){var i=m["default"].retrieveLiIndex(e),n=e.getAttribute("data-country-code");this.setState({countryList:{showDropdown:!1,highlightedCountry:i},countryCode:n},function(){t.selectFlag(t.state.countryCode)})}}},{key:"toggleDropdown",value:function(t){this.setState({countryList:{showDropdown:!!t,highlightedCountry:this.state.countryList.highlightedCountry}})}},{key:"handleUpDownKey",value:function(t){var e=(0,h.findDOMNode)(this.refs.flagDropDown).querySelectorAll(".highlight")[0],i=e?e.previousElementSibling:void 0,n=e?e.nextElementSibling:void 0,o=t===this.keys.UP?i:n;if(o){o.getAttribute("class").indexOf("divider")>-1&&(o=t===this.keys.UP?o.previousElementSibling:o.nextElementSibling),this.scrollTo(o);var a=m["default"].retrieveLiIndex(o);this.setState({countryList:{showDropdown:!0,highlightedCountry:a}})}}},{key:"handleInputChange",value:function(t){this.setState({telInput:{value:t.target.value,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}})}},{key:"changeHighlightCountry",value:function(t,e){this.setState({countryList:{showDropdown:t,highlightedCountry:e}})}},{key:"render",value:function(){var t=this.props.css[0],e=this.props.css[1];return this.state.countryList.showDropdown&&(t+=" expanded"),p["default"].createElement("div",{className:t},p["default"].createElement(f["default"],{ref:"flagDropDown",clickSelectedFlag:this.clickSelectedFlag,selectFlag:this.selectFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.countryList.showDropdown,inputTop:this.state.telInput.offsetTop,inputOuterHeight:this.state.telInput.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.countryList.highlightedCountry}),p["default"].createElement(b["default"],{ref:"telInput",handleKeyUp:this.handleKeyUp,handleKeyPress:this.handleKeyPress,handleInputChange:this.handleInputChange,className:e,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,fieldName:this.props.fieldName,value:this.state.telInput.value}))}}]),e}(u.Component);C.defaultProps={css:["intl-tel-input",""],fieldName:"",value:"",countriesData:null,allowExtensions:!1,autoFormat:!0,autoPlaceholder:!0,preprocessPlaceholder:null,autoHideDialCode:!0,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",onlyCountries:[],preferredCountries:["us","gb"],utilsScript:"",onPhoneNumberChange:null,onSelectFlag:null},C.propTypes={css:u.PropTypes.arrayOf(u.PropTypes.string),fieldName:u.PropTypes.string,value:u.PropTypes.string,countriesData:u.PropTypes.arrayOf(u.PropTypes.array),allowExtensions:u.PropTypes.bool,autoFormat:u.PropTypes.bool,autoPlaceholder:u.PropTypes.bool,preprocessPlaceholder:u.PropTypes.func,autoHideDialCode:u.PropTypes.bool,defaultCountry:u.PropTypes.string,geoIpLookup:u.PropTypes.func,nationalMode:u.PropTypes.bool,numberType:u.PropTypes.string,noCountryDataHandler:u.PropTypes.func,onlyCountries:u.PropTypes.arrayOf(u.PropTypes.string),preferredCountries:u.PropTypes.arrayOf(u.PropTypes.string),utilsScript:u.PropTypes.string,onPhoneNumberChange:u.PropTypes.func,onSelectFlag:u.PropTypes.func,disabled:u.PropTypes.bool},e["default"]=C},function(t,e){!function(e){function i(t){var e=x[t]={};return h(t.split(/\s+/),function(t){e[t]=!0}),e}var n={},o=Array.prototype,a=Object.prototype,r=a.hasOwnProperty,s=a.toString,l=o.forEach,u=o.indexOf,p=o.slice,h=function(t,e,i){var o,a,s;if(t)if(l&&t.forEach===l)t.forEach(e,i);else if(t.length===+t.length){for(a=0,s=t.length;s>a;a++)if(a in t&&e.call(i,t[a],a,t)===n)return}else for(o in t)if(r.call(t,o)&&e.call(i,t[o],o,t)===n)return},d=function(t){return!!(t&&t.constructor&&t.call&&t.apply)},g=function(t){return h(p.call(arguments,1),function(e){var i;for(i in e)void 0!==e[i]&&(t[i]=e[i])}),t},c=function(t,e,i){var n;if(e){if(u)return u.call(e,t,i);for(n=e.length,i=i?0>i?Math.max(0,n+i):i:0;n>i;i++)if(i in e&&e[i]===t)return i}return-1},f={};h("Boolean Number String Function Array Date RegExp Object".split(" "),function(t,e){f["[object "+t+"]"]=t.toLowerCase()});var y=function(t){return null==t?String(t):f[s.call(t)]||"object"},b={},x={};b.Callbacks=function(t){t="string"==typeof t?x[t]||i(t):g({},t);var e,n,o,a,r,s,l=[],u=!t.once&&[],p=function f(i){for(e=t.memory&&i,n=!0,s=a||0,a=0,r=l.length,o=!0;l&&r>s;s++)if(l[s].apply(i[0],i[1])===!1&&t.stopOnFalse){e=!1;break}o=!1,l&&(u?u.length&&f(u.shift()):e?l=[]:d.disable())},d={add:function(){if(l){var i=l.length;!function n(e){h(e,function(e){var i=y(e);"function"===i?t.unique&&d.has(e)||l.push(e):e&&e.length&&"string"!==i&&n(e)})}(arguments),o?r=l.length:e&&(a=i,p(e))}return this},remove:function(){return l&&h(arguments,function(t){for(var e;(e=c(t,l,e))>-1;)l.splice(e,1),o&&(r>=e&&r--,s>=e&&s--)}),this},has:function(t){return c(t,l)>-1},empty:function(){return l=[],this},disable:function(){return l=u=e=void 0,this},disabled:function(){return!l},lock:function(){return u=void 0,e||d.disable(),this},locked:function(){return!u},fireWith:function(t,e){return e=e||[],e=[t,e.slice?e.slice():e],!l||n&&!u||(o?u.push(e):p(e)),this},fire:function(){return d.fireWith(this,arguments),this},fired:function(){return!!n}};return d},b.Deferred=function(t){var e=[["resolve","done",b.Callbacks("once memory"),"resolved"],["reject","fail",b.Callbacks("once memory"),"rejected"],["notify","progress",b.Callbacks("memory")]],i="pending",n={state:function(){return i},always:function(){return o.done(arguments).fail(arguments),this},then:function(){var t=arguments;return b.Deferred(function(i){h(e,function(e,n){var a=e[0],r=t[n];o[e[1]](d(r)?function(){var t;try{t=r.apply(this,arguments)}catch(e){return void i.reject(e)}t&&d(t.promise)?t.promise().done(i.resolve).fail(i.reject).progress(i.notify):i["notify"!==a?"resolveWith":a+"With"](this===o?i:this,[t])}:i[a])}),t=null}).promise()},promise:function(t){return null!=t?g(t,n):n}},o={};return n.pipe=n.then,h(e,function(t,a){var r=t[2],s=t[3];n[t[1]]=r.add,s&&r.add(function(){i=s},e[1^a][2].disable,e[2][2].lock),o[t[0]]=r.fire,o[t[0]+"With"]=r.fireWith}),n.promise(o),t&&t.call(o,o),o},b.when=function(t){var e,i,n,o=0,a="array"===y(t)&&1===arguments.length?t:p.call(arguments),r=a.length,s=1!==r||t&&d(t.promise)?r:0,l=1===s?t:b.Deferred(),u=function(t,i,n){return function(o){i[t]=this,n[t]=arguments.length>1?p.call(arguments):o,n===e?l.notifyWith(i,n):--s||l.resolveWith(i,n)}};if(r>1)for(e=new Array(r),i=new Array(r),n=new Array(r);r>o;o++)a[o]&&d(a[o].promise)?a[o].promise().done(u(o,n,a)).fail(l.reject).progress(u(o,i,e)):--s;return s||l.resolveWith(n,a),l.promise()},"undefined"!=typeof t&&t.exports?t.exports=b:"undefined"!=typeof e._?e._.mixin(b):e._=b}(this)}])})}).call(e,i(5)(t))},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,e,i){t.exports=i.p+"libphonenumber.js"},function(t,e,i){var n=i(8);"string"==typeof n&&(n=[[t.id,n,""]]);i(12)(n,{})},function(t,e,i){e=t.exports=i(9)(),e.push([t.id,".intl-tel-input{position:relative;display:inline-block}.intl-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.intl-tel-input .hide{display:none}.intl-tel-input .v-hide{visibility:hidden}.intl-tel-input input,.intl-tel-input input[type=text],.intl-tel-input input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-left:48px;margin-left:0;transition:background-color 100ms ease-out}.intl-tel-input input.iti-invalid-key{transition:background-color 0;background-color:#FFC7C7}.intl-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:1px}.intl-tel-input .flag-dropdown:hover{cursor:pointer}.intl-tel-input .flag-dropdown:hover .selected-flag{background-color:rgba(0,0,0,.05)}.intl-tel-input input[disabled]+.flag-dropdown:hover,.intl-tel-input input[readonly]+.flag-dropdown:hover{cursor:default}.intl-tel-input input[disabled]+.flag-dropdown:hover .selected-flag,.intl-tel-input input[readonly]+.flag-dropdown:hover .selected-flag{background-color:transparent}.intl-tel-input .selected-flag{z-index:1;position:relative;width:42px;height:100%;padding:0 0 0 8px}.intl-tel-input .selected-flag .iti-flag{position:absolute;top:0;bottom:0;margin:auto}.intl-tel-input .selected-flag .arrow{position:absolute;top:50%;margin-top:-2px;right:4px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.intl-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.intl-tel-input .country-list{list-style:none;position:absolute;z-index:2;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll}.intl-tel-input .country-list .flag{display:inline-block;width:20px}@media (max-width:500px){.intl-tel-input .country-list{white-space:normal}}.intl-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.intl-tel-input .country-list .country{padding:5px 10px}.intl-tel-input .country-list .country .dial-code{color:#999}.intl-tel-input .country-list .country.highlight{background-color:rgba(0,0,0,.05)}.intl-tel-input .country-list .flag,.intl-tel-input .country-list .country-name,.intl-tel-input .country-list .dial-code{vertical-align:middle}.intl-tel-input .country-list .flag,.intl-tel-input .country-list .country-name{margin-right:6px}.intl-tel-input select{position:absolute;top:0;left:0;z-index:1;width:42px;height:100%;opacity:0}.iti-flag.be{width:18px}.iti-flag.ch{width:15px}.iti-flag.mc{width:19px}.iti-flag.ne{width:18px}.iti-flag.np{width:13px}.iti-flag.va{width:15px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.iti-flag{background-size:5630px 15px}}.iti-flag.ac{height:10px;background-position:0 0}.iti-flag.ad{height:14px;background-position:-22px 0}.iti-flag.ae{height:10px;background-position:-44px 0}.iti-flag.af{height:14px;background-position:-66px 0}.iti-flag.ag{height:14px;background-position:-88px 0}.iti-flag.ai{height:10px;background-position:-110px 0}.iti-flag.al{height:15px;background-position:-132px 0}.iti-flag.am{height:10px;background-position:-154px 0}.iti-flag.ao{height:14px;background-position:-176px 0}.iti-flag.aq{height:14px;background-position:-198px 0}.iti-flag.ar{height:13px;background-position:-220px 0}.iti-flag.as{height:10px;background-position:-242px 0}.iti-flag.at{height:14px;background-position:-264px 0}.iti-flag.au{height:10px;background-position:-286px 0}.iti-flag.aw{height:14px;background-position:-308px 0}.iti-flag.ax{height:13px;background-position:-330px 0}.iti-flag.az{height:10px;background-position:-352px 0}.iti-flag.ba{height:10px;background-position:-374px 0}.iti-flag.bb{height:14px;background-position:-396px 0}.iti-flag.bd{height:12px;background-position:-418px 0}.iti-flag.be{height:15px;background-position:-440px 0}.iti-flag.bf{height:14px;background-position:-460px 0}.iti-flag.bg{height:12px;background-position:-482px 0}.iti-flag.bh{height:12px;background-position:-504px 0}.iti-flag.bi{height:12px;background-position:-526px 0}.iti-flag.bj{height:14px;background-position:-548px 0}.iti-flag.bl{height:14px;background-position:-570px 0}.iti-flag.bm{height:10px;background-position:-592px 0}.iti-flag.bn{height:10px;background-position:-614px 0}.iti-flag.bo{height:14px;background-position:-636px 0}.iti-flag.bq{height:14px;background-position:-658px 0}.iti-flag.br{height:14px;background-position:-680px 0}.iti-flag.bs{height:10px;background-position:-702px 0}.iti-flag.bt{height:14px;background-position:-724px 0}.iti-flag.bv{height:15px;background-position:-746px 0}.iti-flag.bw{height:14px;background-position:-768px 0}.iti-flag.by{height:10px;background-position:-790px 0}.iti-flag.bz{height:14px;background-position:-812px 0}.iti-flag.ca{height:10px;background-position:-834px 0}.iti-flag.cc{height:10px;background-position:-856px 0}.iti-flag.cd{height:15px;background-position:-878px 0}.iti-flag.cf{height:14px;background-position:-900px 0}.iti-flag.cg{height:14px;background-position:-922px 0}.iti-flag.ch{height:15px;background-position:-944px 0}.iti-flag.ci{height:14px;background-position:-961px 0}.iti-flag.ck{height:10px;background-position:-983px 0}.iti-flag.cl{height:14px;background-position:-1005px 0}.iti-flag.cm{height:14px;background-position:-1027px 0}.iti-flag.cn{height:14px;background-position:-1049px 0}.iti-flag.co{height:14px;background-position:-1071px 0}.iti-flag.cp{height:14px;background-position:-1093px 0}.iti-flag.cr{height:12px;background-position:-1115px 0}.iti-flag.cu{height:10px;background-position:-1137px 0}.iti-flag.cv{height:12px;background-position:-1159px 0}.iti-flag.cw{height:14px;background-position:-1181px 0}.iti-flag.cx{height:10px;background-position:-1203px 0}.iti-flag.cy{height:14px;background-position:-1225px 0}.iti-flag.cz{height:14px;background-position:-1247px 0}.iti-flag.de{height:12px;background-position:-1269px 0}.iti-flag.dg{height:10px;background-position:-1291px 0}.iti-flag.dj{height:14px;background-position:-1313px 0}.iti-flag.dk{height:15px;background-position:-1335px 0}.iti-flag.dm{height:10px;background-position:-1357px 0}.iti-flag.do{height:13px;background-position:-1379px 0}.iti-flag.dz{height:14px;background-position:-1401px 0}.iti-flag.ea{height:14px;background-position:-1423px 0}.iti-flag.ec{height:14px;background-position:-1445px 0}.iti-flag.ee{height:13px;background-position:-1467px 0}.iti-flag.eg{height:14px;background-position:-1489px 0}.iti-flag.eh{height:10px;background-position:-1511px 0}.iti-flag.er{height:10px;background-position:-1533px 0}.iti-flag.es{height:14px;background-position:-1555px 0}.iti-flag.et{height:10px;background-position:-1577px 0}.iti-flag.eu{height:14px;background-position:-1599px 0}.iti-flag.fi{height:12px;background-position:-1621px 0}.iti-flag.fj{height:10px;background-position:-1643px 0}.iti-flag.fk{height:10px;background-position:-1665px 0}.iti-flag.fm{height:11px;background-position:-1687px 0}.iti-flag.fo{height:15px;background-position:-1709px 0}.iti-flag.fr{height:14px;background-position:-1731px 0}.iti-flag.ga{height:15px;background-position:-1753px 0}.iti-flag.gb{height:10px;background-position:-1775px 0}.iti-flag.gd{height:12px;background-position:-1797px 0}.iti-flag.ge{height:14px;background-position:-1819px 0}.iti-flag.gf{height:14px;background-position:-1841px 0}.iti-flag.gg{height:14px;background-position:-1863px 0}.iti-flag.gh{height:14px;background-position:-1885px 0}.iti-flag.gi{height:10px;background-position:-1907px 0}.iti-flag.gl{height:14px;background-position:-1929px 0}.iti-flag.gm{height:14px;background-position:-1951px 0}.iti-flag.gn{height:14px;background-position:-1973px 0}.iti-flag.gp{height:14px;background-position:-1995px 0}.iti-flag.gq{height:14px;background-position:-2017px 0}.iti-flag.gr{height:14px;background-position:-2039px 0}.iti-flag.gs{height:10px;background-position:-2061px 0}.iti-flag.gt{height:13px;background-position:-2083px 0}.iti-flag.gu{height:11px;background-position:-2105px 0}.iti-flag.gw{height:10px;background-position:-2127px 0}.iti-flag.gy{height:12px;background-position:-2149px 0}.iti-flag.hk{height:14px;background-position:-2171px 0}.iti-flag.hm{height:10px;background-position:-2193px 0}.iti-flag.hn{height:10px;background-position:-2215px 0}.iti-flag.hr{height:10px;background-position:-2237px 0}.iti-flag.ht{height:12px;background-position:-2259px 0}.iti-flag.hu{height:10px;background-position:-2281px 0}.iti-flag.ic{height:14px;background-position:-2303px 0}.iti-flag.id{height:14px;background-position:-2325px 0}.iti-flag.ie{height:10px;background-position:-2347px 0}.iti-flag.il{height:15px;background-position:-2369px 0}.iti-flag.im{height:10px;background-position:-2391px 0}.iti-flag.in{height:14px;background-position:-2413px 0}.iti-flag.io{height:10px;background-position:-2435px 0}.iti-flag.iq{height:14px;background-position:-2457px 0}.iti-flag.ir{height:12px;background-position:-2479px 0}.iti-flag.is{height:15px;background-position:-2501px 0}.iti-flag.it{height:14px;background-position:-2523px 0}.iti-flag.je{height:12px;background-position:-2545px 0}.iti-flag.jm{height:10px;background-position:-2567px 0}.iti-flag.jo{height:10px;background-position:-2589px 0}.iti-flag.jp{height:14px;background-position:-2611px 0}.iti-flag.ke{height:14px;background-position:-2633px 0}.iti-flag.kg{height:12px;background-position:-2655px 0}.iti-flag.kh{height:13px;background-position:-2677px 0}.iti-flag.ki{height:10px;background-position:-2699px 0}.iti-flag.km{height:12px;background-position:-2721px 0}.iti-flag.kn{height:14px;background-position:-2743px 0}.iti-flag.kp{height:10px;background-position:-2765px 0}.iti-flag.kr{height:14px;background-position:-2787px 0}.iti-flag.kw{height:10px;background-position:-2809px 0}.iti-flag.ky{height:10px;background-position:-2831px 0}.iti-flag.kz{height:10px;background-position:-2853px 0}.iti-flag.la{height:14px;background-position:-2875px 0}.iti-flag.lb{height:14px;background-position:-2897px 0}.iti-flag.lc{height:10px;background-position:-2919px 0}.iti-flag.li{height:12px;background-position:-2941px 0}.iti-flag.lk{height:10px;background-position:-2963px 0}.iti-flag.lr{height:11px;background-position:-2985px 0}.iti-flag.ls{height:14px;background-position:-3007px 0}.iti-flag.lt{height:12px;background-position:-3029px 0}.iti-flag.lu{height:12px;background-position:-3051px 0}.iti-flag.lv{height:10px;background-position:-3073px 0}.iti-flag.ly{height:10px;background-position:-3095px 0}.iti-flag.ma{height:14px;background-position:-3117px 0}.iti-flag.mc{height:15px;background-position:-3139px 0}.iti-flag.md{height:10px;background-position:-3160px 0}.iti-flag.me{height:10px;background-position:-3182px 0}.iti-flag.mf{height:14px;background-position:-3204px 0}.iti-flag.mg{height:14px;background-position:-3226px 0}.iti-flag.mh{height:11px;background-position:-3248px 0}.iti-flag.mk{height:10px;background-position:-3270px 0}.iti-flag.ml{height:14px;background-position:-3292px 0}.iti-flag.mm{height:14px;background-position:-3314px 0}.iti-flag.mn{height:10px;background-position:-3336px 0}.iti-flag.mo{height:14px;background-position:-3358px 0}.iti-flag.mp{height:10px;background-position:-3380px 0}.iti-flag.mq{height:14px;background-position:-3402px 0}.iti-flag.mr{height:14px;background-position:-3424px 0}.iti-flag.ms{height:10px;background-position:-3446px 0}.iti-flag.mt{height:14px;background-position:-3468px 0}.iti-flag.mu{height:14px;background-position:-3490px 0}.iti-flag.mv{height:14px;background-position:-3512px 0}.iti-flag.mw{height:14px;background-position:-3534px 0}.iti-flag.mx{height:12px;background-position:-3556px 0}.iti-flag.my{height:10px;background-position:-3578px 0}.iti-flag.mz{height:14px;background-position:-3600px 0}.iti-flag.na{height:14px;background-position:-3622px 0}.iti-flag.nc{height:10px;background-position:-3644px 0}.iti-flag.ne{height:15px;background-position:-3666px 0}.iti-flag.nf{height:10px;background-position:-3686px 0}.iti-flag.ng{height:10px;background-position:-3708px 0}.iti-flag.ni{height:12px;background-position:-3730px 0}.iti-flag.nl{height:14px;background-position:-3752px 0}.iti-flag.no{height:15px;background-position:-3774px 0}.iti-flag.np{height:15px;background-position:-3796px 0}.iti-flag.nr{height:10px;background-position:-3811px 0}.iti-flag.nu{height:10px;background-position:-3833px 0}.iti-flag.nz{height:10px;background-position:-3855px 0}.iti-flag.om{height:10px;background-position:-3877px 0}.iti-flag.pa{height:14px;background-position:-3899px 0}.iti-flag.pe{height:14px;background-position:-3921px 0}.iti-flag.pf{height:14px;background-position:-3943px 0}.iti-flag.pg{height:15px;background-position:-3965px 0}.iti-flag.ph{height:10px;background-position:-3987px 0}.iti-flag.pk{height:14px;background-position:-4009px 0}.iti-flag.pl{height:13px;background-position:-4031px 0}.iti-flag.pm{height:14px;background-position:-4053px 0}.iti-flag.pn{height:10px;background-position:-4075px 0}.iti-flag.pr{height:14px;background-position:-4097px 0}.iti-flag.ps{height:10px;background-position:-4119px 0}.iti-flag.pt{height:14px;background-position:-4141px 0}.iti-flag.pw{height:13px;background-position:-4163px 0}.iti-flag.py{height:11px;background-position:-4185px 0}.iti-flag.qa{height:8px;background-position:-4207px 0}.iti-flag.re{height:14px;background-position:-4229px 0}.iti-flag.ro{height:14px;background-position:-4251px 0}.iti-flag.rs{height:14px;background-position:-4273px 0}.iti-flag.ru{height:14px;background-position:-4295px 0}.iti-flag.rw{height:14px;background-position:-4317px 0}.iti-flag.sa{height:14px;background-position:-4339px 0}.iti-flag.sb{height:10px;background-position:-4361px 0}.iti-flag.sc{height:10px;background-position:-4383px 0}.iti-flag.sd{height:10px;background-position:-4405px 0}.iti-flag.se{height:13px;background-position:-4427px 0}.iti-flag.sg{height:14px;background-position:-4449px 0}.iti-flag.sh{height:10px;background-position:-4471px 0}.iti-flag.si{height:10px;background-position:-4493px 0}.iti-flag.sj{height:15px;background-position:-4515px 0}.iti-flag.sk{height:14px;background-position:-4537px 0}.iti-flag.sl{height:14px;background-position:-4559px 0}.iti-flag.sm{height:15px;background-position:-4581px 0}.iti-flag.sn{height:14px;background-position:-4603px 0}.iti-flag.so{height:14px;background-position:-4625px 0}.iti-flag.sr{height:14px;background-position:-4647px 0}.iti-flag.ss{height:10px;background-position:-4669px 0}.iti-flag.st{height:10px;background-position:-4691px 0}.iti-flag.sv{height:12px;background-position:-4713px 0}.iti-flag.sx{height:14px;background-position:-4735px 0}.iti-flag.sy{height:14px;background-position:-4757px 0}.iti-flag.sz{height:14px;background-position:-4779px 0}.iti-flag.ta{height:10px;background-position:-4801px 0}.iti-flag.tc{height:10px;background-position:-4823px 0}.iti-flag.td{height:14px;background-position:-4845px 0}.iti-flag.tf{height:14px;background-position:-4867px 0}.iti-flag.tg{height:13px;background-position:-4889px 0}.iti-flag.th{height:14px;background-position:-4911px 0}.iti-flag.tj{height:10px;background-position:-4933px 0}.iti-flag.tk{height:10px;background-position:-4955px 0}.iti-flag.tl{height:10px;background-position:-4977px 0}.iti-flag.tm{height:14px;background-position:-4999px 0}.iti-flag.tn{height:14px;background-position:-5021px 0}.iti-flag.to{height:10px;background-position:-5043px 0}.iti-flag.tr{height:14px;background-position:-5065px 0}.iti-flag.tt{height:12px;background-position:-5087px 0}.iti-flag.tv{height:10px;background-position:-5109px 0}.iti-flag.tw{height:14px;background-position:-5131px 0}.iti-flag.tz{height:14px;background-position:-5153px 0}.iti-flag.ua{height:14px;background-position:-5175px 0}.iti-flag.ug{height:14px;background-position:-5197px 0}.iti-flag.um{height:11px;background-position:-5219px 0}.iti-flag.us{height:11px;background-position:-5241px 0}.iti-flag.uy{height:14px;background-position:-5263px 0}.iti-flag.uz{height:10px;background-position:-5285px 0}.iti-flag.va{height:15px;background-position:-5307px 0}.iti-flag.vc{height:14px;background-position:-5324px 0}.iti-flag.ve{height:14px;background-position:-5346px 0}.iti-flag.vg{height:10px;background-position:-5368px 0}.iti-flag.vi{height:14px;background-position:-5390px 0}.iti-flag.vn{height:14px;background-position:-5412px 0}.iti-flag.vu{height:12px;background-position:-5434px 0}.iti-flag.wf{height:14px;background-position:-5456px 0}.iti-flag.ws{height:10px;background-position:-5478px 0}.iti-flag.xk{height:15px;background-position:-5500px 0}.iti-flag.ye{height:14px;background-position:-5522px 0}.iti-flag.yt{height:14px;background-position:-5544px 0}.iti-flag.za{height:14px;background-position:-5566px 0}.iti-flag.zm{height:14px;background-position:-5588px 0}.iti-flag.zw{height:10px;background-position:-5610px 0}.iti-flag{width:20px;height:15px;box-shadow:0 0 1px 0 #888;background-image:url("+i(10)+");background-repeat:no-repeat;background-color:#DBDBDB;background-position:20px 0}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.iti-flag{background-image:url("+i(11)+")}}.iti-flag.np{background-color:transparent}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e>"+e+" **/","/** "+e+"<< **/"],o=t.lastIndexOf(n[0]),a=i?n[0]+i+n[1]:"";if(t.lastIndexOf(n[0])>=0){var r=t.lastIndexOf(n[1])+n[1].length;return t.slice(0,o)+a+t.slice(r)}return t+a}function l(t,e,i,n){var o=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=s(t.styleSheet.cssText,e,o);else{var a=document.createTextNode(o),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(a,r[e]):t.appendChild(a)}}function u(t,e){var i=e.css,n=e.media,o=e.sourceMap;if(o&&"function"==typeof btoa)try{i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(JSON.stringify(o))+" */",i='@import url("data:text/css;base64,'+btoa(i)+'")'}catch(a){}if(n&&t.setAttribute("media",n),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var p={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},d=h(function(){return/msie 9\b/.test(window.navigator.userAgent.toLowerCase())}),g=h(function(){return document.head||document.getElementsByTagName("head")[0]}),c=null,f=0;t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=d());var i=o(t);return n(i,e),function(t){for(var a=[],r=0;r1?e-1:0),n=1;e>n;n++)i[n-1]=arguments[n];return t.bind.apply(t,[t].concat(i))}Object.defineProperty(e,"__esModule",{value:!0});var p=function(){function t(t,e){for(var i=0;it+n+o,r=t-o>e,s=!a&&r?"-"+(o-1)+"px":"";(0,d.findDOMNode)(this.refs.listElement).style.top=s,(0,d.findDOMNode)(this.refs.listElement).setAttribute("class","country-list")}},{key:"appendListItem",value:function(t,e){var i=this,n=this.props.preferredCountries.length;return t.map(function(t,o){if(i.props.isMobile)return h["default"].createElement("option",{key:"country-"+o,"data-dial-code":t.dialCode,value:t.iso2},t.name+" +"+t.dialCode);var a="preferred"===e?o:o+n,r={country:!0,highlight:i.props.highlightedCountry===a},s=void 0;return r[e]=!0,s=(0,c["default"])(r),h["default"].createElement("li",{key:"country-"+o,className:s,"data-dial-code":t.dialCode,"data-country-code":t.iso2,onMouseOver:i.handleMouseOver,onClick:l(i.selectFlag,t.iso2)},h["default"].createElement("div",{ref:"selectedFlag",className:"flag"},h["default"].createElement("div",{ref:"selectedFlagInner",className:"iti-flag "+t.iso2})),h["default"].createElement("span",{className:"country-name"},t.name),h["default"].createElement("span",{className:"dial-code"},"+",t.dialCode))})}},{key:"selectFlag",value:function(t){this.props.selectFlag(t)}},{key:"handleMouseOver",value:function(t){if(t.currentTarget.getAttribute("class").indexOf("country")>-1){var e=y["default"].retrieveLiIndex(t.currentTarget);this.props.changeHighlightCountry(!0,e)}}},{key:"handleChangeCountry",value:function(t){this.selectFlag(t.target.value)}},{key:"render",value:function(){var t="",e=this.props.preferredCountries,i=void 0,n=this.props.countries,o=(0,c["default"])({"country-list":!0,hide:!this.props.showDropdown}),a=void 0;return this.props.isMobile?(t=this.appendListItem(n,""),h["default"].createElement("select",{className:"iti-mobile-select",onChange:this.handleChangeCountry},t)):(e.length&&(i=this.appendListItem(e,"preferred"),a=h["default"].createElement("div",{className:"divider"})),t=this.appendListItem(n,""),h["default"].createElement("ul",{ref:"listElement",className:o},i,a,t))}}]),e}(u.Component);b.propTypes={isMobile:u.PropTypes.bool,selectFlag:u.PropTypes.func,countries:u.PropTypes.array,inputTop:u.PropTypes.number,inputOuterHeight:u.PropTypes.number,preferredCountries:u.PropTypes.array,highlightedCountry:u.PropTypes.number,changeHighlightCountry:u.PropTypes.func,showDropdown:u.PropTypes.bool},e["default"]=b},function(t,e,i){function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=("undefined"==typeof e?"undefined":r(e))&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof e?"undefined":r(e)));t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var l=function(){function t(t,e){for(var i=0;i0?m["default"].getCountryData(this.props.preferredCountries[0]):g["default"].getCountries()[0]),e.iso2}},{key:"setNumber",value:function(t,e,i,n,o){this.props.nationalMode||"+"===t.charAt(0)||(t="+"+t),this.updateFlagFromNumber(t),this.updateVal(t,e,i,n,o)}},{key:"setPreferredCountries",value:function(){this.preferredCountries=[];for(var t=0,e=this.props.preferredCountries.length;e>t;t++){var i=this.props.preferredCountries[t].toLowerCase(),n=m["default"].getCountryData(i,!0);n&&this.preferredCountries.push(n)}}},{key:"setInstanceCountryData",value:function(){var t=this;this.props.onlyCountries.length?this.countries=g["default"].getCountries().filter(function(e){return t.props.onlyCountries.indexOf(e.iso2)>-1},this):this.countries=g["default"].getCountries();for(var e={},i=0,n=this.countries.length;n>i;i++){var o=this.countries[i];if(e=this.addCountryCode(e,o.iso2,o.dialCode,o.priority),o.areaCodes)for(var a=0,r=o.areaCodes.length;r>a;a++)e=this.addCountryCode(e,o.iso2,o.dialCode+o.areaCodes[a])}this.countryCodes=e}},{key:"getDialCode",value:function(t){var e="";if("+"===t.charAt(0))for(var i="",n=0,o=t.length;o>n;n++){var a=t.charAt(n);if(m["default"].isNumeric(a)&&(i+=a,this.countryCodes[i]&&(e=t.substr(0,n+1)),4===i.length))break}return e}},{key:"getNumber",value:function(t){var e=m["default"].trim(t),i=this.props.nationalMode?this.selectedCountryData.iso2:"";return window.intlTelInputUtils?window.intlTelInputUtils.formatNumberByType(e,i):!1}},{key:"notifyPhoneNumberChange",value:function(t){if("function"==typeof this.props.onPhoneNumberChange){var e=this.isValidNumber(t);this.props.onPhoneNumberChange(e,t,this.selectedCountryData,this.getNumber(t))}}},{key:"scrollTo",value:function(t,e){var i=(0,h.findDOMNode)(this.refs.flagDropDown).querySelector(".country-list"),n=parseFloat(window.getComputedStyle(i).getPropertyValue("height"),10),o=m["default"].offset(i).top,a=o+n,r=m["default"].getOuterHeight(t),s=m["default"].offset(t).top,l=s+r,p=n/2-r/2,u=s-o+i.scrollTop;if(o>s)e&&(u-=p),i.scrollTop=u;else if(l>a){e&&(u+=p);var d=n-r;i.scrollTop=u-d}}},{key:"isValidNumber",value:function(t){var e=m["default"].trim(t),i=this.props.nationalMode?this.selectedCountryData.iso2:"";return window.intlTelInputUtils?window.intlTelInputUtils.isValidNumber(e,i):!1}},{key:"setInitialState",value:function(){var t=this.props.value||"";if(this.selectFlag(this.props.defaultCountry||"",!1),this.getDialCode(t))this.updateFlagFromNumber(t);else if("auto"!==this.tempCountry){var e=this.tempCountry;this.tempCountry||(e=this.preferredCountries.length?this.preferredCountries[0].iso2:this.countries[0].iso2),this.selectFlag(e,!1),t||this.updateDialCode(this.selectedCountryData.dialCode,!1)}this.updateVal(t)}},{key:"updateDialCode",value:function(t,e){var i=(0,h.findDOMNode)(this.refs.telInput).value,n=void 0;if(t="+"+t,this.props.nationalMode&&"+"!==i.charAt(0))n=i;else if(i){var o=this.getDialCode(i);if(o.length>1)n=i.replace(o,t);else{var a="+"!==i.charAt(0)?m["default"].trim(i):"";n=t+a}}else n=!this.props.autoHideDialCode||e?t:"";this.updateVal(n,null,e)}},{key:"isUnknownNanp",value:function(t,e){return"+1"===e&&m["default"].getNumeric(t).length>=4}},{key:"updateFlagFromNumber",value:function(t){t&&this.props.nationalMode&&this.selectedCountryData&&"1"===this.selectedCountryData.dialCode&&"+"!==t.charAt(0)&&("1"!==t.charAt(0)&&(t="1"+t),t="+"+t);var e=this.getDialCode(t),i=null;if(e){var n=this.countryCodes[m["default"].getNumeric(e)],o=this.selectedCountryData&&-1!==n.indexOf(this.selectedCountryData.iso2);if(!o||this.isUnknownNanp(t,e))for(var a=0,r=n.length;r>a;a++)if(n[a]){i=n[a];break}}else"+"===t.charAt(0)&&m["default"].getNumeric(t).length&&(i="");null!==i&&""!==i&&this.state.countryCode!==i&&this.selectFlag(i)}},{key:"initRequests",value:function(){var t=this;this.props.utilsScript?this.windowLoaded?this.loadUtils():window.addEventListener("load",function(){t.loadUtils()}):this.utilsScriptDeferred.resolve(),"auto"===this.tempCountry?this.loadAutoCountry():this.autoCountryDeferred.resolve()}},{key:"loadAutoCountry",value:function(){var t=this,e=void 0!==window.localStorage?window.localStorage.getItem("itiAutoCountry"):"";e&&(this.autoCountry=e),this.autoCountry?this.autoCountryLoaded():this.startedLoadingAutoCountry||(this.startedLoadingAutoCountry=!0,"function"==typeof this.props.geoIpLookup&&this.props.geoIpLookup(function(e){t.autoCountry=e.toLowerCase(),void 0!==window.localStorage&&window.localStorage.setItem("itiAutoCountry",t.autoCountry),t.autoCountryLoaded()}))}},{key:"autoCountryLoaded",value:function(){"auto"===this.tempCountry&&(this.tempCountry=this.autoCountry,this.autoCountryDeferred.resolve())}},{key:"loadUtils",value:function(){var t=this;if(window.intlTelInputUtils)return void this.utilsScriptDeferred.resolve();var e=new XMLHttpRequest;e.open("GET",this.props.utilsScript,!0),e.onload=function(){if(e.status>=200&&e.status<400){var i=e.responseText;i&&(window.execScript?window.execScript(i):window.eval(i)),t.utilsScriptDeferred.resolve()}},e.send()}},{key:"processCountryData",value:function(){g["default"].initialize(this.props.countriesData),this.setInstanceCountryData.call(this),this.setPreferredCountries.call(this)}},{key:"addCountryCode",value:function(t,e,i,n){i in t||(t[i]=[]);var o=n||0;return t[i][o]=e,t}},{key:"handleSelectedFlagKeydown",value:function(t){this.state.countryList.showDropdown||t.which!==this.keys.UP&&t.which!==this.keys.DOWN&&t.which!==this.keys.SPACE&&t.which!==this.keys.ENTER||(t.preventDefault(),t.stopPropagation(),this.toggleDropdown(!0)),t.which===this.keys.TAB&&this.toggleDropdown(!1)}},{key:"handleInvalidKey",value:function(){var t=this;m["default"].addClass((0,h.findDOMNode)(this.refs.telInput),"iti-invalid-key"),setTimeout(function(){m["default"].removeClass((0,h.findDOMNode)(t.refs.telInput),"iti-invalid-key")},100)}},{key:"handleInputKey",value:function(t,e,i){var n=(0,h.findDOMNode)(this.refs.telInput).value,o=void 0,a=0,r=(0,h.findDOMNode)(this.refs.telInput);if(this.isGoodBrowser?(a=m["default"].getDigitsOnRight(n,r.selectionEnd),t?n=n.substr(0,r.selectionStart)+t+n.substring(r.selectionEnd,n.length):o=n.substr(r.selectionStart-2,2)):t&&(n+=t),this.setNumber(n,null,e,!0,i),this.isGoodBrowser){var s=void 0;n=(0,h.findDOMNode)(this.refs.telInput).value,a?(s=m["default"].getCursorFromDigitsOnRight(n,a),t||(s=m["default"].getCursorFromLeftChar(n,s,o))):s=n.length,r.setSelectionRange(s,s)}}},{key:"updatePlaceholder",value:function(){if(window.intlTelInputUtils&&!this.hadInitialPlaceholder&&this.props.autoPlaceholder&&this.selectedCountryData){var t=this.selectedCountryData.iso2,e=window.intlTelInputUtils.numberType[this.props.numberType||"FIXED_LINE"],i=t?window.intlTelInputUtils.getExampleNumber(t,this.props.nationalMode,e):"";"function"==typeof this.props.preprocessPlaceholder&&(i=this.props.preprocessPlaceholder(i,t)),(0,h.findDOMNode)(this.refs.telInput).setAttribute("placeholder",i)}}},{key:"handleKeyPress",value:function(t){if(this.props.autoFormat&&t.which>=this.keys.SPACE&&!t.ctrlKey&&!t.metaKey&&window.intlTelInputUtils&&!this.state.telInput.readonly){t.preventDefault();var e=t.which>=this.keys.ZERO&&t.which<=this.keys.NINE||t.which===this.keys.PLUS,i=(0,h.findDOMNode)(this.refs.telInput),n=this.isGoodBrowser&&i.selectionStart===i.selectionEnd,o=i.getAttribute("maxlength"),a=i.value,r=o?a.lengthr&&(a=a.substr(0,r))}else a=t;this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry},telInput:{value:a,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}})}},{key:"selectFlag",value:function(t){var e=this,i=arguments.length<=1||void 0===arguments[1]?!0:arguments[1];this.selectedCountryData=t?m["default"].getCountryData(t,!1,this.props.noCountryDataHandler):{},this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry},countryCode:t},function(){if(e.updatePlaceholder(),e.selectedCountryData.dialCode&&e.updateDialCode(e.selectedCountryData.dialCode,!0),i&&((0,h.findDOMNode)(e.refs.telInput).focus(),e.isGoodBrowser)){var n=e.state.telInput.value.length;(0,h.findDOMNode)(e.refs.telInput).setSelectionRange(n,n)}if("function"==typeof e.props.onSelectFlag&&e.props.onSelectFlag(e.selectedCountryData),t&&"auto"!==t){var o=(0,h.findDOMNode)(e.refs.flagDropDown).querySelector('.country-list [data-country-code="'+t+'"]:not(.preferred)'),a=m["default"].retrieveLiIndex(o);e.setState({countryList:{showDropdown:!1,highlightedCountry:a}})}})}},{key:"ensurePlus",value:function(){if(!this.props.nationalMode){var t=this.state.telInput.value,e=(0,h.findDOMNode)(this.refs.telInput);if("+"!==t.charAt(0)){var i=this.isGoodBrowser?e.selectionStart+1:0;this.setState({telInput:{value:"+"+t,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}}),this.isGoodBrowser&&e.setSelectionRange(i,i)}}}},{key:"handleDocumentKeyDown",value:function(t){var e=this,i=void 0;t.preventDefault(),t.which===this.keys.UP||t.which===this.keys.DOWN?this.handleUpDownKey(t.which):t.which===this.keys.ENTER?this.handleEnterKey():t.which===this.keys.ESC?this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry}}):(t.which>=this.keys.A&&t.which<=this.keys.Z||t.which===this.keys.SPACE)&&(i&&clearTimeout(i),this.query||(this.query=""),this.query+=String.fromCharCode(t.which),this.searchForCountry(this.query),i=setTimeout(function(){e.query=""},1e3))}},{key:"handleDocumentClick",value:function(){this.setState({countryList:{showDropdown:!1,highlightedCountry:this.state.countryList.highlightedCountry}})}},{key:"searchForCountry",value:function(t){for(var e=0,i=this.countries.length;i>e;e++)if(m["default"].startsWith(this.countries[e].name,t)){var n=(0,h.findDOMNode)(this.refs.flagDropDown).querySelector('.country-list [data-country-code="'+this.countries[e].iso2+'"]:not(.preferred)'),o=m["default"].retrieveLiIndex(n);this.setState({countryList:{showDropdown:!0,highlightedCountry:o}}),this.scrollTo(n,!0);break}}},{key:"handleEnterKey",value:function(){var t=this,e=(0,h.findDOMNode)(this.refs.flagDropDown).querySelectorAll(".highlight")[0];if(e){var i=m["default"].retrieveLiIndex(e),n=e.getAttribute("data-country-code");this.setState({countryList:{showDropdown:!1,highlightedCountry:i},countryCode:n},function(){t.selectFlag(t.state.countryCode)})}}},{key:"toggleDropdown",value:function(t){this.setState({countryList:{showDropdown:!!t,highlightedCountry:this.state.countryList.highlightedCountry}})}},{key:"handleUpDownKey",value:function(t){var e=(0,h.findDOMNode)(this.refs.flagDropDown).querySelectorAll(".highlight")[0],i=e?e.previousElementSibling:void 0,n=e?e.nextElementSibling:void 0,o=t===this.keys.UP?i:n;if(o){o.getAttribute("class").indexOf("divider")>-1&&(o=t===this.keys.UP?o.previousElementSibling:o.nextElementSibling),this.scrollTo(o);var a=m["default"].retrieveLiIndex(o);this.setState({countryList:{showDropdown:!0,highlightedCountry:a}})}}},{key:"handleInputChange",value:function(t){this.setState({telInput:{value:t.target.value,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,offsetTop:this.state.telInput.offsetTop,outerHeight:this.state.telInput.outerHeight}})}},{key:"changeHighlightCountry",value:function(t,e){this.setState({countryList:{showDropdown:t,highlightedCountry:e}})}},{key:"render",value:function(){var t=this.props.css[0],e=this.props.css[1];return this.state.countryList.showDropdown&&(t+=" expanded"),u["default"].createElement("div",{className:t},u["default"].createElement(f["default"],{ref:"flagDropDown",clickSelectedFlag:this.clickSelectedFlag,selectFlag:this.selectFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.countryList.showDropdown,inputTop:this.state.telInput.offsetTop,inputOuterHeight:this.state.telInput.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.countryList.highlightedCountry}),u["default"].createElement(b["default"],{ref:"telInput",handleKeyUp:this.handleKeyUp,handleKeyPress:this.handleKeyPress,handleInputChange:this.handleInputChange,className:e,disabled:this.state.telInput.disabled,readonly:this.state.telInput.readonly,fieldName:this.props.fieldName,value:this.state.telInput.value}))}}]),e}(p.Component);w.defaultProps={css:["intl-tel-input",""],fieldName:"",value:"",countriesData:null,allowExtensions:!1,autoFormat:!0,autoPlaceholder:!0,preprocessPlaceholder:null,autoHideDialCode:!0,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",onlyCountries:[],preferredCountries:["us","gb"],utilsScript:"",onPhoneNumberChange:null,onSelectFlag:null},w.propTypes={css:p.PropTypes.arrayOf(p.PropTypes.string),fieldName:p.PropTypes.string,value:p.PropTypes.string,countriesData:p.PropTypes.arrayOf(p.PropTypes.array),allowExtensions:p.PropTypes.bool,autoFormat:p.PropTypes.bool,autoPlaceholder:p.PropTypes.bool,preprocessPlaceholder:p.PropTypes.func,autoHideDialCode:p.PropTypes.bool,defaultCountry:p.PropTypes.string,geoIpLookup:p.PropTypes.func,nationalMode:p.PropTypes.bool,numberType:p.PropTypes.string,noCountryDataHandler:p.PropTypes.func,onlyCountries:p.PropTypes.arrayOf(p.PropTypes.string),preferredCountries:p.PropTypes.arrayOf(p.PropTypes.string),utilsScript:p.PropTypes.string,onPhoneNumberChange:p.PropTypes.func,onSelectFlag:p.PropTypes.func,disabled:p.PropTypes.bool},e["default"]=w},function(t,e){!function(e){function i(t){var e=x[t]={};return h(t.split(/\s+/),function(t){e[t]=!0}),e}var n={},o=Array.prototype,a=Object.prototype,r=a.hasOwnProperty,s=a.toString,l=o.forEach,p=o.indexOf,u=o.slice,h=function(t,e,i){var o,a,s;if(t)if(l&&t.forEach===l)t.forEach(e,i);else if(t.length===+t.length){for(a=0,s=t.length;s>a;a++)if(a in t&&e.call(i,t[a],a,t)===n)return}else for(o in t)if(r.call(t,o)&&e.call(i,t[o],o,t)===n)return},d=function(t){return!!(t&&t.constructor&&t.call&&t.apply)},g=function(t){return h(u.call(arguments,1),function(e){var i;for(i in e)void 0!==e[i]&&(t[i]=e[i])}),t},c=function(t,e,i){var n;if(e){if(p)return p.call(e,t,i);for(n=e.length,i=i?0>i?Math.max(0,n+i):i:0;n>i;i++)if(i in e&&e[i]===t)return i}return-1},f={};h("Boolean Number String Function Array Date RegExp Object".split(" "),function(t,e){f["[object "+t+"]"]=t.toLowerCase()});var y=function(t){return null==t?String(t):f[s.call(t)]||"object"},b={},x={};b.Callbacks=function(t){t="string"==typeof t?x[t]||i(t):g({},t);var e,n,o,a,r,s,l=[],p=!t.once&&[],u=function f(i){for(e=t.memory&&i,n=!0,s=a||0,a=0,r=l.length,o=!0;l&&r>s;s++)if(l[s].apply(i[0],i[1])===!1&&t.stopOnFalse){e=!1;break}o=!1,l&&(p?p.length&&f(p.shift()):e?l=[]:d.disable())},d={add:function(){if(l){var i=l.length;!function n(e){h(e,function(e){var i=y(e);"function"===i?t.unique&&d.has(e)||l.push(e):e&&e.length&&"string"!==i&&n(e)})}(arguments),o?r=l.length:e&&(a=i,u(e))}return this},remove:function(){return l&&h(arguments,function(t){for(var e;(e=c(t,l,e))>-1;)l.splice(e,1),o&&(r>=e&&r--,s>=e&&s--)}),this},has:function(t){return c(t,l)>-1},empty:function(){return l=[],this},disable:function(){return l=p=e=void 0,this},disabled:function(){return!l},lock:function(){return p=void 0,e||d.disable(),this},locked:function(){return!p},fireWith:function(t,e){return e=e||[],e=[t,e.slice?e.slice():e],!l||n&&!p||(o?p.push(e):u(e)),this},fire:function(){return d.fireWith(this,arguments),this},fired:function(){return!!n}};return d},b.Deferred=function(t){var e=[["resolve","done",b.Callbacks("once memory"),"resolved"],["reject","fail",b.Callbacks("once memory"),"rejected"],["notify","progress",b.Callbacks("memory")]],i="pending",n={state:function(){return i},always:function(){return o.done(arguments).fail(arguments),this},then:function(){var t=arguments;return b.Deferred(function(i){h(e,function(e,n){var a=e[0],r=t[n];o[e[1]](d(r)?function(){var t;try{t=r.apply(this,arguments)}catch(e){return void i.reject(e)}t&&d(t.promise)?t.promise().done(i.resolve).fail(i.reject).progress(i.notify):i["notify"!==a?"resolveWith":a+"With"](this===o?i:this,[t])}:i[a])}),t=null}).promise()},promise:function(t){return null!=t?g(t,n):n}},o={};return n.pipe=n.then,h(e,function(t,a){var r=t[2],s=t[3];n[t[1]]=r.add,s&&r.add(function(){i=s},e[1^a][2].disable,e[2][2].lock),o[t[0]]=r.fire,o[t[0]+"With"]=r.fireWith}),n.promise(o),t&&t.call(o,o),o},b.when=function(t){var e,i,n,o=0,a="array"===y(t)&&1===arguments.length?t:u.call(arguments),r=a.length,s=1!==r||t&&d(t.promise)?r:0,l=1===s?t:b.Deferred(),p=function(t,i,n){return function(o){i[t]=this,n[t]=arguments.length>1?u.call(arguments):o,n===e?l.notifyWith(i,n):--s||l.resolveWith(i,n)}};if(r>1)for(e=new Array(r),i=new Array(r),n=new Array(r);r>o;o++)a[o]&&d(a[o].promise)?a[o].promise().done(p(o,n,a)).fail(l.reject).progress(p(o,i,e)):--s;return s||l.resolveWith(n,a),l.promise()},"undefined"!=typeof t&&t.exports?t.exports=b:"undefined"!=typeof e._?e._.mixin(b):e._=b}(this)}])})}).call(e,i(5)(t))},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,e,i){t.exports=i.p+"libphonenumber.js"},function(t,e,i){var n=i(8);"string"==typeof n&&(n=[[t.id,n,""]]);i(12)(n,{})},function(t,e,i){e=t.exports=i(9)(),e.push([t.id,".intl-tel-input{position:relative;display:inline-block}.intl-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.intl-tel-input .hide{display:none}.intl-tel-input .v-hide{visibility:hidden}.intl-tel-input input,.intl-tel-input input[type=text],.intl-tel-input input[type=tel]{position:relative;z-index:0;margin-top:0!important;margin-bottom:0!important;padding-left:48px;margin-left:0;transition:background-color 100ms ease-out}.intl-tel-input input.iti-invalid-key{transition:background-color 0;background-color:#FFC7C7}.intl-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:1px}.intl-tel-input .flag-dropdown:hover{cursor:pointer}.intl-tel-input .flag-dropdown:hover .selected-flag{background-color:rgba(0,0,0,.05)}.intl-tel-input input[disabled]+.flag-dropdown:hover,.intl-tel-input input[readonly]+.flag-dropdown:hover{cursor:default}.intl-tel-input input[disabled]+.flag-dropdown:hover .selected-flag,.intl-tel-input input[readonly]+.flag-dropdown:hover .selected-flag{background-color:transparent}.intl-tel-input .selected-flag{z-index:1;position:relative;width:42px;height:100%;padding:0 0 0 8px}.intl-tel-input .selected-flag .iti-flag{position:absolute;top:0;bottom:0;margin:auto}.intl-tel-input .selected-flag .arrow{position:absolute;top:50%;margin-top:-2px;right:4px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.intl-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.intl-tel-input .country-list{list-style:none;position:absolute;z-index:2;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,.2);background-color:#fff;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll}.intl-tel-input .country-list .flag{display:inline-block;width:20px}@media (max-width:500px){.intl-tel-input .country-list{white-space:normal}}.intl-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.intl-tel-input .country-list .country{padding:5px 10px}.intl-tel-input .country-list .country .dial-code{color:#999}.intl-tel-input .country-list .country.highlight{background-color:rgba(0,0,0,.05)}.intl-tel-input .country-list .flag,.intl-tel-input .country-list .country-name,.intl-tel-input .country-list .dial-code{vertical-align:middle}.intl-tel-input .country-list .flag,.intl-tel-input .country-list .country-name{margin-right:6px}.intl-tel-input select{position:absolute;top:0;left:0;z-index:1;width:42px;height:100%;opacity:0}.iti-flag.be{width:18px}.iti-flag.ch{width:15px}.iti-flag.mc{width:19px}.iti-flag.ne{width:18px}.iti-flag.np{width:13px}.iti-flag.va{width:15px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.iti-flag{background-size:5630px 15px}}.iti-flag.ac{height:10px;background-position:0 0}.iti-flag.ad{height:14px;background-position:-22px 0}.iti-flag.ae{height:10px;background-position:-44px 0}.iti-flag.af{height:14px;background-position:-66px 0}.iti-flag.ag{height:14px;background-position:-88px 0}.iti-flag.ai{height:10px;background-position:-110px 0}.iti-flag.al{height:15px;background-position:-132px 0}.iti-flag.am{height:10px;background-position:-154px 0}.iti-flag.ao{height:14px;background-position:-176px 0}.iti-flag.aq{height:14px;background-position:-198px 0}.iti-flag.ar{height:13px;background-position:-220px 0}.iti-flag.as{height:10px;background-position:-242px 0}.iti-flag.at{height:14px;background-position:-264px 0}.iti-flag.au{height:10px;background-position:-286px 0}.iti-flag.aw{height:14px;background-position:-308px 0}.iti-flag.ax{height:13px;background-position:-330px 0}.iti-flag.az{height:10px;background-position:-352px 0}.iti-flag.ba{height:10px;background-position:-374px 0}.iti-flag.bb{height:14px;background-position:-396px 0}.iti-flag.bd{height:12px;background-position:-418px 0}.iti-flag.be{height:15px;background-position:-440px 0}.iti-flag.bf{height:14px;background-position:-460px 0}.iti-flag.bg{height:12px;background-position:-482px 0}.iti-flag.bh{height:12px;background-position:-504px 0}.iti-flag.bi{height:12px;background-position:-526px 0}.iti-flag.bj{height:14px;background-position:-548px 0}.iti-flag.bl{height:14px;background-position:-570px 0}.iti-flag.bm{height:10px;background-position:-592px 0}.iti-flag.bn{height:10px;background-position:-614px 0}.iti-flag.bo{height:14px;background-position:-636px 0}.iti-flag.bq{height:14px;background-position:-658px 0}.iti-flag.br{height:14px;background-position:-680px 0}.iti-flag.bs{height:10px;background-position:-702px 0}.iti-flag.bt{height:14px;background-position:-724px 0}.iti-flag.bv{height:15px;background-position:-746px 0}.iti-flag.bw{height:14px;background-position:-768px 0}.iti-flag.by{height:10px;background-position:-790px 0}.iti-flag.bz{height:14px;background-position:-812px 0}.iti-flag.ca{height:10px;background-position:-834px 0}.iti-flag.cc{height:10px;background-position:-856px 0}.iti-flag.cd{height:15px;background-position:-878px 0}.iti-flag.cf{height:14px;background-position:-900px 0}.iti-flag.cg{height:14px;background-position:-922px 0}.iti-flag.ch{height:15px;background-position:-944px 0}.iti-flag.ci{height:14px;background-position:-961px 0}.iti-flag.ck{height:10px;background-position:-983px 0}.iti-flag.cl{height:14px;background-position:-1005px 0}.iti-flag.cm{height:14px;background-position:-1027px 0}.iti-flag.cn{height:14px;background-position:-1049px 0}.iti-flag.co{height:14px;background-position:-1071px 0}.iti-flag.cp{height:14px;background-position:-1093px 0}.iti-flag.cr{height:12px;background-position:-1115px 0}.iti-flag.cu{height:10px;background-position:-1137px 0}.iti-flag.cv{height:12px;background-position:-1159px 0}.iti-flag.cw{height:14px;background-position:-1181px 0}.iti-flag.cx{height:10px;background-position:-1203px 0}.iti-flag.cy{height:14px;background-position:-1225px 0}.iti-flag.cz{height:14px;background-position:-1247px 0}.iti-flag.de{height:12px;background-position:-1269px 0}.iti-flag.dg{height:10px;background-position:-1291px 0}.iti-flag.dj{height:14px;background-position:-1313px 0}.iti-flag.dk{height:15px;background-position:-1335px 0}.iti-flag.dm{height:10px;background-position:-1357px 0}.iti-flag.do{height:13px;background-position:-1379px 0}.iti-flag.dz{height:14px;background-position:-1401px 0}.iti-flag.ea{height:14px;background-position:-1423px 0}.iti-flag.ec{height:14px;background-position:-1445px 0}.iti-flag.ee{height:13px;background-position:-1467px 0}.iti-flag.eg{height:14px;background-position:-1489px 0}.iti-flag.eh{height:10px;background-position:-1511px 0}.iti-flag.er{height:10px;background-position:-1533px 0}.iti-flag.es{height:14px;background-position:-1555px 0}.iti-flag.et{height:10px;background-position:-1577px 0}.iti-flag.eu{height:14px;background-position:-1599px 0}.iti-flag.fi{height:12px;background-position:-1621px 0}.iti-flag.fj{height:10px;background-position:-1643px 0}.iti-flag.fk{height:10px;background-position:-1665px 0}.iti-flag.fm{height:11px;background-position:-1687px 0}.iti-flag.fo{height:15px;background-position:-1709px 0}.iti-flag.fr{height:14px;background-position:-1731px 0}.iti-flag.ga{height:15px;background-position:-1753px 0}.iti-flag.gb{height:10px;background-position:-1775px 0}.iti-flag.gd{height:12px;background-position:-1797px 0}.iti-flag.ge{height:14px;background-position:-1819px 0}.iti-flag.gf{height:14px;background-position:-1841px 0}.iti-flag.gg{height:14px;background-position:-1863px 0}.iti-flag.gh{height:14px;background-position:-1885px 0}.iti-flag.gi{height:10px;background-position:-1907px 0}.iti-flag.gl{height:14px;background-position:-1929px 0}.iti-flag.gm{height:14px;background-position:-1951px 0}.iti-flag.gn{height:14px;background-position:-1973px 0}.iti-flag.gp{height:14px;background-position:-1995px 0}.iti-flag.gq{height:14px;background-position:-2017px 0}.iti-flag.gr{height:14px;background-position:-2039px 0}.iti-flag.gs{height:10px;background-position:-2061px 0}.iti-flag.gt{height:13px;background-position:-2083px 0}.iti-flag.gu{height:11px;background-position:-2105px 0}.iti-flag.gw{height:10px;background-position:-2127px 0}.iti-flag.gy{height:12px;background-position:-2149px 0}.iti-flag.hk{height:14px;background-position:-2171px 0}.iti-flag.hm{height:10px;background-position:-2193px 0}.iti-flag.hn{height:10px;background-position:-2215px 0}.iti-flag.hr{height:10px;background-position:-2237px 0}.iti-flag.ht{height:12px;background-position:-2259px 0}.iti-flag.hu{height:10px;background-position:-2281px 0}.iti-flag.ic{height:14px;background-position:-2303px 0}.iti-flag.id{height:14px;background-position:-2325px 0}.iti-flag.ie{height:10px;background-position:-2347px 0}.iti-flag.il{height:15px;background-position:-2369px 0}.iti-flag.im{height:10px;background-position:-2391px 0}.iti-flag.in{height:14px;background-position:-2413px 0}.iti-flag.io{height:10px;background-position:-2435px 0}.iti-flag.iq{height:14px;background-position:-2457px 0}.iti-flag.ir{height:12px;background-position:-2479px 0}.iti-flag.is{height:15px;background-position:-2501px 0}.iti-flag.it{height:14px;background-position:-2523px 0}.iti-flag.je{height:12px;background-position:-2545px 0}.iti-flag.jm{height:10px;background-position:-2567px 0}.iti-flag.jo{height:10px;background-position:-2589px 0}.iti-flag.jp{height:14px;background-position:-2611px 0}.iti-flag.ke{height:14px;background-position:-2633px 0}.iti-flag.kg{height:12px;background-position:-2655px 0}.iti-flag.kh{height:13px;background-position:-2677px 0}.iti-flag.ki{height:10px;background-position:-2699px 0}.iti-flag.km{height:12px;background-position:-2721px 0}.iti-flag.kn{height:14px;background-position:-2743px 0}.iti-flag.kp{height:10px;background-position:-2765px 0}.iti-flag.kr{height:14px;background-position:-2787px 0}.iti-flag.kw{height:10px;background-position:-2809px 0}.iti-flag.ky{height:10px;background-position:-2831px 0}.iti-flag.kz{height:10px;background-position:-2853px 0}.iti-flag.la{height:14px;background-position:-2875px 0}.iti-flag.lb{height:14px;background-position:-2897px 0}.iti-flag.lc{height:10px;background-position:-2919px 0}.iti-flag.li{height:12px;background-position:-2941px 0}.iti-flag.lk{height:10px;background-position:-2963px 0}.iti-flag.lr{height:11px;background-position:-2985px 0}.iti-flag.ls{height:14px;background-position:-3007px 0}.iti-flag.lt{height:12px;background-position:-3029px 0}.iti-flag.lu{height:12px;background-position:-3051px 0}.iti-flag.lv{height:10px;background-position:-3073px 0}.iti-flag.ly{height:10px;background-position:-3095px 0}.iti-flag.ma{height:14px;background-position:-3117px 0}.iti-flag.mc{height:15px;background-position:-3139px 0}.iti-flag.md{height:10px;background-position:-3160px 0}.iti-flag.me{height:10px;background-position:-3182px 0}.iti-flag.mf{height:14px;background-position:-3204px 0}.iti-flag.mg{height:14px;background-position:-3226px 0}.iti-flag.mh{height:11px;background-position:-3248px 0}.iti-flag.mk{height:10px;background-position:-3270px 0}.iti-flag.ml{height:14px;background-position:-3292px 0}.iti-flag.mm{height:14px;background-position:-3314px 0}.iti-flag.mn{height:10px;background-position:-3336px 0}.iti-flag.mo{height:14px;background-position:-3358px 0}.iti-flag.mp{height:10px;background-position:-3380px 0}.iti-flag.mq{height:14px;background-position:-3402px 0}.iti-flag.mr{height:14px;background-position:-3424px 0}.iti-flag.ms{height:10px;background-position:-3446px 0}.iti-flag.mt{height:14px;background-position:-3468px 0}.iti-flag.mu{height:14px;background-position:-3490px 0}.iti-flag.mv{height:14px;background-position:-3512px 0}.iti-flag.mw{height:14px;background-position:-3534px 0}.iti-flag.mx{height:12px;background-position:-3556px 0}.iti-flag.my{height:10px;background-position:-3578px 0}.iti-flag.mz{height:14px;background-position:-3600px 0}.iti-flag.na{height:14px;background-position:-3622px 0}.iti-flag.nc{height:10px;background-position:-3644px 0}.iti-flag.ne{height:15px;background-position:-3666px 0}.iti-flag.nf{height:10px;background-position:-3686px 0}.iti-flag.ng{height:10px;background-position:-3708px 0}.iti-flag.ni{height:12px;background-position:-3730px 0}.iti-flag.nl{height:14px;background-position:-3752px 0}.iti-flag.no{height:15px;background-position:-3774px 0}.iti-flag.np{height:15px;background-position:-3796px 0}.iti-flag.nr{height:10px;background-position:-3811px 0}.iti-flag.nu{height:10px;background-position:-3833px 0}.iti-flag.nz{height:10px;background-position:-3855px 0}.iti-flag.om{height:10px;background-position:-3877px 0}.iti-flag.pa{height:14px;background-position:-3899px 0}.iti-flag.pe{height:14px;background-position:-3921px 0}.iti-flag.pf{height:14px;background-position:-3943px 0}.iti-flag.pg{height:15px;background-position:-3965px 0}.iti-flag.ph{height:10px;background-position:-3987px 0}.iti-flag.pk{height:14px;background-position:-4009px 0}.iti-flag.pl{height:13px;background-position:-4031px 0}.iti-flag.pm{height:14px;background-position:-4053px 0}.iti-flag.pn{height:10px;background-position:-4075px 0}.iti-flag.pr{height:14px;background-position:-4097px 0}.iti-flag.ps{height:10px;background-position:-4119px 0}.iti-flag.pt{height:14px;background-position:-4141px 0}.iti-flag.pw{height:13px;background-position:-4163px 0}.iti-flag.py{height:11px;background-position:-4185px 0}.iti-flag.qa{height:8px;background-position:-4207px 0}.iti-flag.re{height:14px;background-position:-4229px 0}.iti-flag.ro{height:14px;background-position:-4251px 0}.iti-flag.rs{height:14px;background-position:-4273px 0}.iti-flag.ru{height:14px;background-position:-4295px 0}.iti-flag.rw{height:14px;background-position:-4317px 0}.iti-flag.sa{height:14px;background-position:-4339px 0}.iti-flag.sb{height:10px;background-position:-4361px 0}.iti-flag.sc{height:10px;background-position:-4383px 0}.iti-flag.sd{height:10px;background-position:-4405px 0}.iti-flag.se{height:13px;background-position:-4427px 0}.iti-flag.sg{height:14px;background-position:-4449px 0}.iti-flag.sh{height:10px;background-position:-4471px 0}.iti-flag.si{height:10px;background-position:-4493px 0}.iti-flag.sj{height:15px;background-position:-4515px 0}.iti-flag.sk{height:14px;background-position:-4537px 0}.iti-flag.sl{height:14px;background-position:-4559px 0}.iti-flag.sm{height:15px;background-position:-4581px 0}.iti-flag.sn{height:14px;background-position:-4603px 0}.iti-flag.so{height:14px;background-position:-4625px 0}.iti-flag.sr{height:14px;background-position:-4647px 0}.iti-flag.ss{height:10px;background-position:-4669px 0}.iti-flag.st{height:10px;background-position:-4691px 0}.iti-flag.sv{height:12px;background-position:-4713px 0}.iti-flag.sx{height:14px;background-position:-4735px 0}.iti-flag.sy{height:14px;background-position:-4757px 0}.iti-flag.sz{height:14px;background-position:-4779px 0}.iti-flag.ta{height:10px;background-position:-4801px 0}.iti-flag.tc{height:10px;background-position:-4823px 0}.iti-flag.td{height:14px;background-position:-4845px 0}.iti-flag.tf{height:14px;background-position:-4867px 0}.iti-flag.tg{height:13px;background-position:-4889px 0}.iti-flag.th{height:14px;background-position:-4911px 0}.iti-flag.tj{height:10px;background-position:-4933px 0}.iti-flag.tk{height:10px;background-position:-4955px 0}.iti-flag.tl{height:10px;background-position:-4977px 0}.iti-flag.tm{height:14px;background-position:-4999px 0}.iti-flag.tn{height:14px;background-position:-5021px 0}.iti-flag.to{height:10px;background-position:-5043px 0}.iti-flag.tr{height:14px;background-position:-5065px 0}.iti-flag.tt{height:12px;background-position:-5087px 0}.iti-flag.tv{height:10px;background-position:-5109px 0}.iti-flag.tw{height:14px;background-position:-5131px 0}.iti-flag.tz{height:14px;background-position:-5153px 0}.iti-flag.ua{height:14px;background-position:-5175px 0}.iti-flag.ug{height:14px;background-position:-5197px 0}.iti-flag.um{height:11px;background-position:-5219px 0}.iti-flag.us{height:11px;background-position:-5241px 0}.iti-flag.uy{height:14px;background-position:-5263px 0}.iti-flag.uz{height:10px;background-position:-5285px 0}.iti-flag.va{height:15px;background-position:-5307px 0}.iti-flag.vc{height:14px;background-position:-5324px 0}.iti-flag.ve{height:14px;background-position:-5346px 0}.iti-flag.vg{height:10px;background-position:-5368px 0}.iti-flag.vi{height:14px;background-position:-5390px 0}.iti-flag.vn{height:14px;background-position:-5412px 0}.iti-flag.vu{height:12px;background-position:-5434px 0}.iti-flag.wf{height:14px;background-position:-5456px 0}.iti-flag.ws{height:10px;background-position:-5478px 0}.iti-flag.xk{height:15px;background-position:-5500px 0}.iti-flag.ye{height:14px;background-position:-5522px 0}.iti-flag.yt{height:14px;background-position:-5544px 0}.iti-flag.za{height:14px;background-position:-5566px 0}.iti-flag.zm{height:14px;background-position:-5588px 0}.iti-flag.zw{height:10px;background-position:-5610px 0}.iti-flag{width:20px;height:15px;box-shadow:0 0 1px 0 #888;background-image:url("+i(10)+");background-repeat:no-repeat;background-color:#DBDBDB;background-position:20px 0}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.iti-flag{background-image:url("+i(11)+")}}.iti-flag.np{background-color:transparent}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e>"+e+" **/","/** "+e+"<< **/"],o=t.lastIndexOf(n[0]),a=i?n[0]+i+n[1]:"";if(t.lastIndexOf(n[0])>=0){var r=t.lastIndexOf(n[1])+n[1].length;return t.slice(0,o)+a+t.slice(r)}return t+a}function l(t,e,i,n){var o=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=s(t.styleSheet.cssText,e,o);else{var a=document.createTextNode(o),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(a,r[e]):t.appendChild(a)}}function p(t,e){var i=e.css,n=e.media,o=e.sourceMap;if(o&&"function"==typeof btoa)try{i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(JSON.stringify(o))+" */",i='@import url("data:text/css;base64,'+btoa(i)+'")'}catch(a){}if(n&&t.setAttribute("media",n),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var u={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},d=h(function(){return/msie 9\b/.test(window.navigator.userAgent.toLowerCase())}),g=h(function(){return document.head||document.getElementsByTagName("head")[0]}),c=null,f=0;t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=d());var i=o(t);return n(i,e),function(t){for(var a=[],r=0;r 0; i--) { + const leftChar = val.charAt(i - 1); + if (this.isNumeric(leftChar) || val.substr(i - 2, 2) === originalLeftChars) { + return i; + } + } + return 0; + }, + + // after a reformat we need to make sure there are still the same number + // of digits to the right of the cursor + getCursorFromDigitsOnRight(val, digitsOnRight) { + for (let i = val.length - 1; i >= 0; i--) { + if (this.isNumeric(val.charAt(i))) { + if (--digitsOnRight === 0) { + return i; + } + } + } + return 0; + }, }; diff --git a/src/containers/IntlTelInputApp.js b/src/containers/IntlTelInputApp.js index 0a61ed5be..e64e8f2b0 100644 --- a/src/containers/IntlTelInputApp.js +++ b/src/containers/IntlTelInputApp.js @@ -126,9 +126,6 @@ export default class IntlTelInputApp extends Component { this.selectedCountryData = {}; this.addCountryCode = this.addCountryCode.bind(this); this.autoCountryLoaded = this.autoCountryLoaded.bind(this); - this.getCursorFromLeftChar = this.getCursorFromLeftChar.bind(this); - this.getCursorFromDigitsOnRight = this.getCursorFromDigitsOnRight.bind(this); - this.getDigitsOnRight = this.getDigitsOnRight.bind(this); this.getDialCode = this.getDialCode.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyUp = this.handleKeyUp.bind(this); @@ -248,44 +245,6 @@ export default class IntlTelInputApp extends Component { this.updateVal(number, format, addSuffix, preventConversion, isAllowedKey); } - // get the number of numeric digits to the right of the cursor so we can reposition - // the cursor correctly after the reformat has happened - getDigitsOnRight(val, selectionEnd) { - let digitsOnRight = 0; - for (let i = selectionEnd, max = val.length; i < max; i++) { - if (utils.isNumeric(val.charAt(i))) { - digitsOnRight++; - } - } - return digitsOnRight; - } - - // we start from the position in guessCursor, and work our way left - // until we hit the originalLeftChars or a number to make sure that - // after reformatting the cursor has the same char on the left in the case of a delete etc - getCursorFromLeftChar(val, guessCursor, originalLeftChars) { - for (let i = guessCursor; i > 0; i--) { - const leftChar = val.charAt(i - 1); - if (utils.isNumeric(leftChar) || val.substr(i - 2, 2) === originalLeftChars) { - return i; - } - } - return 0; - } - - // after a reformat we need to make sure there are still the same number - // of digits to the right of the cursor - getCursorFromDigitsOnRight(val, digitsOnRight) { - for (let i = val.length - 1; i >= 0; i--) { - if (utils.isNumeric(val.charAt(i))) { - if (--digitsOnRight === 0) { - return i; - } - } - } - return 0; - } - // process preferred countries - iterate through the preferences, // fetching the country data for each one setPreferredCountries() { @@ -707,7 +666,7 @@ export default class IntlTelInputApp extends Component { // we use the right instead of the left so that // A) we dont have to account for the new digit (or multiple digits if paste event), // and B) we're always on the right side of formatting suffixes - digitsOnRight = this.getDigitsOnRight(val, input.selectionEnd); + digitsOnRight = utils.getDigitsOnRight(val, input.selectionEnd); // if handling a new number character: insert it in the right place if (newNumericChar) { // replace any selection they may have made with the new char @@ -741,11 +700,11 @@ export default class IntlTelInputApp extends Component { newCursor = val.length; } else { // else count in the same number of digits from the right - newCursor = this.getCursorFromDigitsOnRight(val, digitsOnRight); + newCursor = utils.getCursorFromDigitsOnRight(val, digitsOnRight); // but if delete/paste etc, keep going left until hit the same left char as before if (!newNumericChar) { - newCursor = this.getCursorFromLeftChar(val, newCursor, originalLeftChars); + newCursor = utils.getCursorFromLeftChar(val, newCursor, originalLeftChars); } } // set the new cursor diff --git a/tests/FlagDropDown-test.js b/tests/FlagDropDown-test.js index 857597351..791a7d5a8 100644 --- a/tests/FlagDropDown-test.js +++ b/tests/FlagDropDown-test.js @@ -2,18 +2,33 @@ import React from 'react'; import { findDOMNode } from 'react-dom'; import ReactTestUtils from 'react-addons-test-utils'; import IntlTelInput from '../src/containers/IntlTelInputApp'; +import sinon from 'sinon'; +import fs from 'fs'; import { assert } from 'chai'; describe('FlagDropDown', () => { + let renderedComponent; let flagComponent; let dropDownComponent; + let libphonenumberUtils; + let xhr; + let requests; - before('render element', () => { - const renderedComponent = ReactTestUtils.renderIntoDocument( - + beforeEach('render element', () => { + libphonenumberUtils = fs.readFileSync('./example/assets/libphonenumber.js', 'utf8'); + xhr = sinon.useFakeXMLHttpRequest(); + window.intlTelInputUtils = undefined; + requests = []; + xhr.onCreate = (x) => { + requests.push(x); + }; + + renderedComponent = ReactTestUtils.renderIntoDocument( + ); flagComponent = ReactTestUtils.findRenderedDOMComponentWithClass( @@ -27,10 +42,26 @@ describe('FlagDropDown', () => { ); }); + afterEach('unmount component', () => { + xhr.restore(); + }); + it('Rendered', () => { assert(ReactTestUtils.isDOMComponent(flagComponent) === true); }); + it('Load country via localStorage', () => { + window.localStorage.setItem('itiAutoCountry', 'jp'); + const parent = ReactTestUtils.renderIntoDocument( + + ); + assert(parent.state.countryCode === 'jp'); + window.localStorage.clear(); + }); + it('Set flag className by country', () => { assert(findDOMNode(flagComponent).querySelector('.iti-flag').className === 'iti-flag tw'); }); @@ -42,10 +73,289 @@ describe('FlagDropDown', () => { }); it('Simulate change to Japan flag in dropdown before & after', () => { + assert(renderedComponent.state.countryList.showDropdown === false); assert(findDOMNode(flagComponent).querySelector('.iti-flag').className === 'iti-flag tw'); ReactTestUtils.Simulate.click(findDOMNode(flagComponent)); const japanOption = findDOMNode(dropDownComponent).querySelector('[data-country-code="jp"]'); ReactTestUtils.Simulate.click(japanOption); assert(findDOMNode(flagComponent).querySelector('.iti-flag').className === 'iti-flag jp'); + assert(renderedComponent.state.countryList.showDropdown === false); + }); + + it('Set onlyCountries', () => { + const parent = ReactTestUtils.renderIntoDocument( + + ); + const result = [{ + name: 'South Korea (대한민국)', + iso2: 'kr', + dialCode: '82', + priority: 0, + areaCodes: null, + }, { + name: 'Taiwan (台灣)', + iso2: 'tw', + dialCode: '886', + priority: 0, + areaCodes: null, + }, { + name: 'United States', + iso2: 'us', + dialCode: '1', + priority: 0, + areaCodes: null, + }]; + + assert.deepEqual(parent.refs.flagDropDown.props.countries, result); + }); + + it('Set defaultCountry as "auto"', () => { + const lookup = (callback) => { + callback('jp'); + }; + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + assert(parent.state.countryCode === 'jp'); + }); + + it('Mouse over on country', () => { + ReactTestUtils.Simulate.click(findDOMNode(flagComponent)); + const options = findDOMNode(dropDownComponent).querySelectorAll( + '.country:not([class="preferred"])'); + const koreaOption = findDOMNode(dropDownComponent).querySelector('[data-country-code="kr"]'); + + let index = -1; + for (let i = 0, max = options.length; i < max; ++i) { + if (options[i] === koreaOption) { + index = i; + } + } + + ReactTestUtils.Simulate.mouseOver(koreaOption); + assert(renderedComponent.refs.flagDropDown.props.highlightedCountry === index); + }); + + it('Simulate change to flag in dropdown by up and down key', () => { + assert(findDOMNode(flagComponent).querySelector('.iti-flag').className === 'iti-flag tw'); + + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + assert(renderedComponent.state.countryList.showDropdown === true); + + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Tab', keyCode: 9, which: 9 }); + assert(renderedComponent.state.countryList.showDropdown === false); + + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + const pressUpEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 38, + key: 'Up', + which: 38, + }); + document.dispatchEvent(pressUpEvent); + assert(renderedComponent.state.countryList.highlightedCountry === 211); + + const pressEnterEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 13, + key: 'Enter', + which: 13, + }); + document.dispatchEvent(pressEnterEvent); + assert(renderedComponent.state.countryList.showDropdown === false); + assert(findDOMNode(flagComponent).querySelector('.iti-flag').className === 'iti-flag sy'); + }); + + it('Simulate close the dropdown menu by ESC key', () => { + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + assert(renderedComponent.state.countryList.showDropdown === true); + + const pressEscEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 27, + key: 'Esc', + which: 27, + }); + document.dispatchEvent(pressEscEvent); + assert(renderedComponent.state.countryList.showDropdown === false); + }); + + it('Simulate close the dropdown menu by clicking on document', () => { + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + assert(renderedComponent.state.countryList.showDropdown === true); + + const clickEvent = new window.MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true, + }); + document.querySelector('html').dispatchEvent(clickEvent); + assert(renderedComponent.state.countryList.showDropdown === false); + }); + + it('componentWillUnmount', () => { + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + assert(renderedComponent.state.countryList.showDropdown === true); + + renderedComponent.componentWillUnmount(); + + const clickEvent = new window.MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true, + }); + document.querySelector('html').dispatchEvent(clickEvent); + assert(renderedComponent.state.countryList.showDropdown === true); + }); + + it('Simulate search country name in dropdown menu', () => { + ReactTestUtils.Simulate.keyDown(findDOMNode(flagComponent), + { key: 'Enter', keyCode: 13, which: 13 }); + assert(renderedComponent.state.countryList.showDropdown === true); + + const pressJEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 74, + key: 'J', + which: 74, + }); + const pressAEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 65, + key: 'A', + which: 65, + }); + const pressPEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 80, + key: 'P', + which: 80, + }); + document.dispatchEvent(pressJEvent); + document.dispatchEvent(pressAEvent); + document.dispatchEvent(pressPEvent); + const pressEnterEvent = new window.KeyboardEvent('keydown', { + bubbles: true, + cancelable: true, + shiftKey: true, + keyCode: 13, + key: 'Enter', + which: 13, + }); + document.dispatchEvent(pressEnterEvent); + + assert(renderedComponent.state.countryList.showDropdown === false); + assert(renderedComponent.state.countryList.highlightedCountry === 108); + assert(renderedComponent.state.countryCode === 'jp'); + }); + + it('preprocessPlaceholder', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + let expected = ''; + const preprocessPlaceholder = (placeholder, iso2) => { + expected = `${placeholder},${iso2}`; + }; + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const parentFlagComponent = ReactTestUtils.findRenderedDOMComponentWithClass( + parent, + 'selected-flag' + ); + + const parentDropDownComponent = ReactTestUtils.findRenderedDOMComponentWithClass( + parent, + 'country-list' + ); + + assert(expected === '0912 345 678,tw'); + ReactTestUtils.Simulate.click(findDOMNode(parentFlagComponent)); + const japanOption = findDOMNode( + parentDropDownComponent).querySelector('[data-country-code="jp"]'); + ReactTestUtils.Simulate.click(japanOption); + assert(expected === '090-1234-5678,jp'); + }); + + it('onSelectFlag', () => { + let expected = ''; + const onSelectFlag = (countryData) => { + expected = countryData; + }; + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const parentFlagComponent = ReactTestUtils.findRenderedDOMComponentWithClass( + parent, + 'selected-flag' + ); + + const parentDropDownComponent = ReactTestUtils.findRenderedDOMComponentWithClass( + parent, + 'country-list' + ); + + assert.deepEqual(expected, { + name: 'Taiwan (台灣)', + iso2: 'tw', + dialCode: '886', + priority: 0, + areaCodes: null, + }); + ReactTestUtils.Simulate.click(findDOMNode(parentFlagComponent)); + const japanOption = findDOMNode( + parentDropDownComponent).querySelector('[data-country-code="jp"]'); + ReactTestUtils.Simulate.click(japanOption); + assert.deepEqual(expected, { + name: 'Japan (日本)', + iso2: 'jp', + dialCode: '81', + priority: 0, + areaCodes: null, + }); }); }); diff --git a/tests/TelInput-test.js b/tests/TelInput-test.js index 716f6fe2a..fd7cfdd79 100644 --- a/tests/TelInput-test.js +++ b/tests/TelInput-test.js @@ -3,18 +3,33 @@ import { findDOMNode } from 'react-dom'; import ReactTestUtils from 'react-addons-test-utils'; import IntlTelInput from '../src/containers/IntlTelInputApp'; import TelInput from '../src/components/TelInput'; +import sinon from 'sinon'; +import fs from 'fs'; import { assert } from 'chai'; describe('TelInput', () => { + let renderedComponent; let inputComponent; + let libphonenumberUtils; + let xhr; + let requests; - before('render element', () => { - const renderedComponent = ReactTestUtils.renderIntoDocument( - + beforeEach('Render element', () => { + libphonenumberUtils = fs.readFileSync('./example/assets/libphonenumber.js', 'utf8'); + xhr = sinon.useFakeXMLHttpRequest(); + window.intlTelInputUtils = undefined; + requests = []; + xhr.onCreate = (x) => { + requests.push(x); + }; + + renderedComponent = ReactTestUtils.renderIntoDocument( + ); inputComponent = ReactTestUtils.findRenderedComponentWithType( @@ -23,21 +38,214 @@ describe('TelInput', () => { ); }); - it('set fieldName as "telephone"', () => { + afterEach('Unmount component', () => { + xhr.restore(); + }); + + it('Set fieldName as "telephone"', () => { assert(inputComponent.props.fieldName === 'telephone'); }); - it('set value as "0999 123 456"', () => { + it('onPhoneNumberChange without utilsScript', () => { + let expected = ''; + const onPhoneNumberChange = (isValid, newNumber, countryData, formatted) => { + expected = `${isValid},${newNumber},${countryData.iso2},${formatted}`; + }; + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const input = ReactTestUtils.findRenderedComponentWithType( + parent, + TelInput + ); + + ReactTestUtils.Simulate.change(findDOMNode(input), { target: { value: '+886911222333' } }); + assert(expected === 'false,+886911222333,tw,false'); + }); + + it('Set value as "0999 123 456"', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + assert(inputComponent.props.value === '0999 123 456'); }); - it('set className', () => { + it('Set className', () => { assert(findDOMNode(inputComponent).className === 'form-control phoneNumber'); }); - it('change value', () => { + it('Change value', () => { findDOMNode(inputComponent).value = '12345'; ReactTestUtils.Simulate.change(findDOMNode(inputComponent)); assert(inputComponent.props.value === '12345'); }); + + it('Preferred countries', () => { + const parent = ReactTestUtils.renderIntoDocument( + + ); + + assert(parent.state.countryCode === 'kr'); + }); + + it('Invalid default country', () => { + const parent = ReactTestUtils.renderIntoDocument( + + ); + + assert(parent.state.countryCode === 'af'); + }); + + it('Invalid key', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + ReactTestUtils.Simulate.keyPress(findDOMNode(inputComponent), { + key: 'a', + keyCode: 65, + which: 65, + }); + assert(findDOMNode(inputComponent).classList.contains('iti-invalid-key')); + }); + + it('handleKeyUp', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + const len = findDOMNode(inputComponent).value.length; + findDOMNode(inputComponent).focus(); + findDOMNode(inputComponent).setSelectionRange(len, len); + ReactTestUtils.Simulate.keyUp(findDOMNode(inputComponent), { + key: 'Backspace', + keyCode: 8, + which: 8, + }); + ReactTestUtils.Simulate.change(findDOMNode(inputComponent), { + target: { value: '0999 123 45' }, + }); + assert(findDOMNode(inputComponent).value === '0999 123 45'); + }); + + it('ensurePlus', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const input = ReactTestUtils.findRenderedComponentWithType( + parent, + TelInput + ); + + const len = findDOMNode(input).value.length; + findDOMNode(input).focus(); + findDOMNode(input).setSelectionRange(len, len); + const bspaceKey = { + key: 'Backspace', + keyCode: 8, + which: 8, + }; + ReactTestUtils.Simulate.keyUp(findDOMNode(input), bspaceKey); + ReactTestUtils.Simulate.keyUp(findDOMNode(input), bspaceKey); + ReactTestUtils.Simulate.keyUp(findDOMNode(input), bspaceKey); + ReactTestUtils.Simulate.change(findDOMNode(input), { + target: { value: '+886 999 111 222' }, + }); + assert(parent.state.telInput.value === '+886 999 111 222'); + }); + + it('Disabled nationalMode and input phone number', () => { + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const input = ReactTestUtils.findRenderedComponentWithType( + parent, + TelInput + ); + + ReactTestUtils.Simulate.change(findDOMNode(input), { target: { value: '+886901234567' } }); + assert(findDOMNode(input).value === '+886901234567'); + }); + + it('Change props value', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + renderedComponent.componentWillReceiveProps({ + value: '+886912345678', + }); + assert(findDOMNode(inputComponent).value === '0912 345 678'); + }); + + it('utils loaded', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + assert(typeof window.intlTelInputUtils === 'object'); + assert(typeof window.intlTelInputUtils.isValidNumber === 'function'); + }); + + it('onPhoneNumberChange', () => { + requests[0].respond(200, + { 'Content-Type': 'text/javascript' }, + libphonenumberUtils); + + let expected = ''; + const onPhoneNumberChange = (isValid, newNumber, countryData, formatted) => { + expected = `${isValid},${newNumber},${countryData.iso2},${formatted}`; + }; + + const parent = ReactTestUtils.renderIntoDocument( + + ); + + const input = ReactTestUtils.findRenderedComponentWithType( + parent, + TelInput + ); + + ReactTestUtils.Simulate.change(findDOMNode(input), { target: { value: '+886911222333' } }); + assert(expected === 'true,+886911222333,tw,+886911222333'); + }); }); diff --git a/tests/setup.js b/tests/setup.js index 51a45c469..d1caab8e5 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,6 +1,7 @@ import jsdom from 'jsdom'; import hook from 'css-modules-require-hook'; import sass from 'node-sass'; +import sinon from 'sinon'; // Define some html to be our basic document // JSDOM will consume this and act as if we were in a browser @@ -16,7 +17,7 @@ global.window = document.defaultView; // Allow for things like window.location global.navigator = window.navigator; -global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; +global.XMLHttpRequest = sinon.useFakeXMLHttpRequest(); hook({ generateScopedName: '[name]__[local]___[hash:base64:5]', diff --git a/tests/utils-test.js b/tests/utils-test.js new file mode 100644 index 000000000..605a352c0 --- /dev/null +++ b/tests/utils-test.js @@ -0,0 +1,160 @@ +import utils from '../src/components/utils'; +import jsdom from 'jsdom'; +import { assert } from 'chai'; + +describe('utils', () => { + it('arraysEqual', () => { + let a = [1, 2, 3]; + let b = a; + assert(utils.arraysEqual(a, b) === true); + + a = [1, 2, 3]; + b = null; + assert(utils.arraysEqual(a, b) === false); + + a = ['1', '2', '3']; + b = ['3', '1', '2']; + assert(utils.arraysEqual(a, b) === false); + }); + + it('shallowEquals', () => { + let a = [1, 2, 3]; + let b = a; + assert(utils.shallowEquals(a, b) === true); + + a = { + x: ['1', '2', '3'], + y: 'abc', + }; + b = { + x: ['1', '2', '3'], + y: 'abc', + }; + assert(utils.shallowEquals(a, b) === true); + + a = { + a: 1, + b: 2, + }; + b = Object.create(a); + b.c = 3; + assert(utils.shallowEquals(a, b) === false); + }); + + it('trim', () => { + assert(utils.trim(undefined) === ''); + + const str = ' Hello World '; + assert(utils.trim(str) === 'Hello World'); + }); + + it('isNumeric', () => { + const num = 1.2; + + assert(utils.isNumeric(num) === true); + }); + + it('retrieveLiIndex', () => { + const DEFAULT_HTML = ` +
    +
  • a
    • +
  • b
    • +
+ `; + const doc = jsdom.jsdom(DEFAULT_HTML); + const bListItem = doc.querySelector('.b'); + assert(utils.retrieveLiIndex(bListItem) === 1); + + const otherListItem = doc.querySelector('.z'); + assert(utils.retrieveLiIndex(otherListItem) === -1); + }); + + it('getNumeric', () => { + const str = 'Hello 1000 World'; + + assert(utils.getNumeric(str) === '1000'); + }); + + it('getClean', () => { + const str = '++886912345678'; + + assert(utils.getClean(str) === '+886912345678'); + }); + + it('startsWith', () => { + const str = 'Hello World'; + + assert(utils.startsWith(str, 'H') === true); + }); + + it('isWindow', () => { + assert(utils.isWindow(global.window) === true); + }); + + it('getWindow', () => { + assert(utils.getWindow(global.window) === global.window); + }); + + it('getCountryData', () => { + const result = { + name: 'Taiwan (台灣)', + iso2: 'tw', + dialCode: '886', + priority: 0, + areaCodes: null, + }; + assert.deepEqual(utils.getCountryData('tw'), result); + + assert(utils.getCountryData('zz', true) === null); + assert.deepEqual(utils.getCountryData('zz', false, (country) => `${country}!!`), {}); + }); + + it('hasClass', () => { + const DEFAULT_HTML = ` +
test
+ `; + const doc = jsdom.jsdom(DEFAULT_HTML); + const element = doc.querySelector('.abc'); + + assert(utils.hasClass(element, 'cde') === true); + }); + + it('addClass', () => { + const DEFAULT_HTML = ` +
test
+ `; + const doc = jsdom.jsdom(DEFAULT_HTML); + const element = doc.querySelector('.abc'); + utils.addClass(element, 'efg'); + + assert(element.classList.contains('efg') === true); + }); + + it('removeClass', () => { + const DEFAULT_HTML = ` +
test
+ `; + const doc = jsdom.jsdom(DEFAULT_HTML); + const element = doc.querySelector('.abc'); + utils.removeClass(element, 'abc'); + + assert(element.classList.contains('abc') === false); + }); + + it('getDigitsOnRight', () => { + const str = '0912 345 678'; + assert(utils.getDigitsOnRight(str, 5) === 6); + }); + + it('getCursorFromLeftChar', () => { + const str = '0912 345 678'; + assert(utils.getCursorFromLeftChar(str, 5, 4) === 4); + assert(utils.getCursorFromLeftChar('', 5, 4) === 0); + }); + + it('getCursorFromDigitsOnRight', () => { + const str = '0912 345 678'; + assert(utils.getCursorFromDigitsOnRight(str, 7) === 3); + assert(utils.getCursorFromDigitsOnRight(str, 20) === 0); + }); +});