intl-tel-input 18.0.3 → 18.1.1

package/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb",
+  "extends": ["airbnb", "prettier"],
   "parser": "babel-eslint",
   "env": {
     "browser": true,
@@ -8,13 +8,7 @@
     "arrow-parens": "off",
     "camelcase": "off",
     "class-methods-use-this": "off",
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never",
-      "imports": "always-multiline",
-      "objects": "always-multiline",
-    }],
+    "curly": ["error", "all"],
     "no-cond-assign": ["error", "except-parens"],
     "no-lonely-if": "off",
     "no-multi-assign": "off",

package/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+    "editor.formatOnPaste": false, // required 
+    "editor.formatOnType": false, // required
+    "editor.formatOnSaveMode": "file", // required to format on save
+    "files.autoSave": "onFocusChange", // optional but recommended
+    "vs-code-prettier-eslint.prettierLast": "false" // set as "true" to run 'prettier' last not first
+}

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v18.1.1 (2023-04-13)
+- Simplify nationalMode option. Previously, when nationalMode was set to false, the plugin was needlessly creating a worse UX for users who typed a valid national number in 2 situations: (1) it wouldn't update the flag between NANP countries if you typed a different area code (in national format), and (2) isValidNumber would return false for a valid national number.
+
 ## v18.0.0 (2023-04-07)
 - Remove autoHideDialCode option in favour of new autoInsertDialCode option
 - Allow nationalMode to be used with separateDialCode

package/Gruntfile.js

@@ -16,8 +16,6 @@ module.exports = function(grunt) {
   // just javascript (babel must go before we add the wrapper, to keep it's generated methods inside, so not globals)
   grunt.registerTask('js', ['eslint', 'template:jsAddVersion', 'babel', 'concat', 'uglify', 'replace']);
 
-  // build examples
-  grunt.registerTask('examples', ['template']);
   // Travis CI
   grunt.registerTask('travis', ['jasmine']);
   // bump version number in 3 files, rebuild js to update headers, then commit, tag and push

package/README.md

@@ -3,7 +3,7 @@ A JavaScript plugin for entering and validating international telephone numbers.
 
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla.png" alt="Screenshot" width="424px" style="max-width: 100%" />
   
-If you like it, please consider making a donation, which you can do from [the demo page](http://intl-tel-input.com).
+If you like it, please consider making a donation, which you can do from [the demo page](https://intl-tel-input.com).
 
 ## Sponsored by
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/twilio.png" height="100" />
@@ -27,7 +27,7 @@ Use <a href="https://www.twilio.com/blog/international-telephone-input-twilio?ut
 
 
 ## Demo and Examples
-You can view a live demo and some examples of how to use the various options here: http://intl-tel-input.com, or try it for yourself using the included demo.html.
+You can view [a live demo](https://intl-tel-input.com) and see some examples of how to use the various options, or try it for yourself using the included demo.html.
 
 
 ## Features
@@ -39,6 +39,7 @@ You can view a live demo and some examples of how to use the various options her
 * Full validation, including specific error types
 * Retina flag icons
 * Lots of initialisation options for customisation, as well as public methods for interaction
+* Accessibility provided via ARIA tags based on [W3's Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)
 
 
 ## Browser Compatibility
@@ -46,12 +47,12 @@ You can view a live demo and some examples of how to use the various options her
 | :----: | :--: | :----: | :--: | :------------: | :-----------: | :----: |
 |    ✓   |   ✓  |    ✓   |  11  |       ✓        |       ✓       |    ✓   |
 
-Note: In v12.0.0 we dropped support for IE9 and IE10, because they are no longer supported by any version of Windows - see https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/
+_Note: In v12.0.0 we dropped support for IE9 and IE10, because they are [no longer supported](https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/) by any version of Windows._
 
 ## Getting Started (Using a bundler e.g. Webpack)
 1. Install with npm: `npm install intl-tel-input --save` or yarn: `yarn add intl-tel-input`
 
-2. Import CSS: `import 'intl-tel-input/build/css/intlTelInput.css';`
+2. Import the CSS: `import 'intl-tel-input/build/css/intlTelInput.css';`
 
 3. Override the path to flags.png in your CSS
   ```css
@@ -62,7 +63,7 @@ Note: In v12.0.0 we dropped support for IE9 and IE10, because they are no longer
   }
   ```
 
-4. Import JS and initialise plugin:
+4. Import the JS and initialise the plugin on your input element
   ```js
   import intlTelInput from 'intl-tel-input';
 
@@ -93,8 +94,6 @@ Note: In v12.0.0 we dropped support for IE9 and IE10, because they are no longer
 
 4. Add the plugin script and initialise it on your input element
   ```html
-  <input type="tel" id="phone">
-
   <script src="path/to/intlTelInput.js"></script>
   <script>
     var input = document.querySelector("#phone");
@@ -110,19 +109,18 @@ Note: In v12.0.0 we dropped support for IE9 and IE10, because they are no longer
 ## Recommended Usage
 We highly recommend you (lazy) load the included utils.js using the `utilsScript` option. Then the plugin is built to always deal with numbers in the full international format (e.g. "+17024181234") and convert them accordingly - even when `nationalMode` or `separateDialCode` is enabled. We recommend you get, store, and set numbers exclusively in this format for simplicity - then you don't have to deal with handling the country code separately, as full international numbers include the country code information.
 
-You can always get the full international number (including country code) using `getNumber`, then you only have to store that one string in your database (you don't have to store the country separately), and then the next time you initialise the plugin with that number it will automatically set the country and format it according to the options you specify (e.g. if you enable `nationalMode` it will automatically remove the international dial code for you).
+You can always get the full international number (including country code) using `getNumber`, then you only have to store that one string in your database (you don't have to store the country separately), and then the next time you initialise the plugin with that number it will automatically set the country and format it according to the options you specify (e.g. when using `nationalMode` it will automatically remove the international dial code for you).
+
+Finally, make sure you have `<meta charset="utf-8">` in the `<head>` section of your page, else you will get an error as the JS contains some special unicode characters.
 
 
 ## Initialisation Options
-When you initialise the plugin, the first argument is the input element, and the second is an object containing any initialisation options you want, which are detailed below. Note: any options that take country codes should be [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes  
+When you initialise the plugin, the first argument is the input element, and the second is an object containing any initialisation options you want, which are detailed below. Note: any options that take country codes should be [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes  
 
 **allowDropdown**  
 Type: `Boolean` Default: `true`  
 Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
 
-**~~autoFormat~~ [REMOVED]**  
-Automatically format the number as the user types. Unfortunately this had to be removed for the reasons listed here: [#346 Disable and remove autoFormat feature](https://github.com/jackocnr/intl-tel-input/issues/346).
-
 **autoInsertDialCode**  
 Type: `Boolean` Default: `false`  
 When enabled (requires `nationalMode` to be disabled), the international dial code will be automatically inserted into the input in 3 situations: (A) upon initialisation, and (B) when the user selects a country from the dropdown, and (C) upon calling `setCountry`. Additionally, the plugin will listen for blur/submit events, and if the input only contains a dial code, it will automatically be removed to avoid submitting just that.
@@ -163,7 +161,7 @@ Format the input value (according to the `nationalMode` option) during initialis
 Type: `Function` Default: `null`  
 When setting `initialCountry` to `"auto"`, you must use this option to specify a custom function that looks up the user's location, and then calls the success callback with the relevant country code. Also note that when instantiating the plugin, if the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is defined, one of those is returned under the `promise` instance property, so you can do something like `iti.promise.then(callback)` to know when initialisation requests like this have completed.
 
-Here is an example using the [ip-api.com](https://ip-api.com/docs/api:json) service:  
+Here is an example using the [ipapi](https://ipapi.co/api/?javascript#location-of-clients-ip) service:  
 ```js
 intlTelInput(input, {
   initialCountry: "auto",
@@ -183,7 +181,7 @@ Add a hidden input with the given name. Alternatively, if your input name contai
 
 **initialCountry**  
 Type: `String` Default: `""`  
-Set the initial country selection by specifying its country code. You can also set it to `"auto"`, which will lookup the user's country based on their IP address (requires the `geoIpLookup` option - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/default-country-ip.html)). Note that the `"auto"` option will not update the country selection if the input already contains a number.
+Set the initial country selection by specifying its country code. You can also set it to `"auto"`, which will lookup the user's country based on their IP address (requires the `geoIpLookup` option - [see example](https://intl-tel-input.com/examples/lookup-country.html)). Note that the `"auto"` option will not update the country selection if the input already contains a number.
 
 If you leave `initialCountry` blank, it will default to the first country in the list.
 
@@ -197,11 +195,11 @@ Allows to translate the countries by its given iso code e.g.:
 
 **nationalMode**  
 Type: `Boolean` Default: `true`  
-Allow users to enter national numbers (and not have to think about international dial codes). Formatting, validation and placeholders still work. Then you can use `getNumber` to extract a full international number - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/national-mode.html). This option now defaults to `true`, and it is recommended that you leave it that way as it provides a better experience for the user.
+Format numbers in the national format, rather than the international format. This applies to placeholder numbers, and when displaying user's existing numbers. Note that it's fine for user's to type their numbers in national format - as long as they have selected the right country, you can use `getNumber` to extract a full international number - [see example](https://intl-tel-input.com/examples/national-mode.html). It is recommended to leave this option enabled, to encourage users to enter their numbers in national format as this is usually more familiar to them and so it creates a better user experience.
 
 **onlyCountries**  
 Type: `Array` Default: `undefined`  
-In the dropdown, display only the countries you specify - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/only-countries-europe.html).
+In the dropdown, display only the countries you specify - [see example](https://intl-tel-input.com/examples/only-countries.html).
 
 **placeholderNumberType**  
 Type: `String` Default: `"MOBILE"`  
@@ -211,15 +209,16 @@ Specify [one of the keys](https://github.com/jackocnr/intl-tel-input/blob/master
 Type: `Array` Default: `["us", "gb"]`  
 Specify the countries to appear at the top of the list.
 
-**~~preventInvalidNumbers~~ [REMOVED]**  
-Prevent the user from entering invalid characters. Unfortunately this had to be removed for the reasons listed here: [#79 Limit Input Characters to Formatted String Length](https://github.com/jackocnr/intl-tel-input/issues/79#issuecomment-121799307).
-
 **separateDialCode**  
 Type: `Boolean` Default: `false`  
 Display the country dial code next to the selected flag.
 
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separateDialCode.png" width="257px" height="46px">
 
+**showFlags**  
+Type: `Boolean` Default: `true`  
+Set this to false to hide the flags e.g. for political reasons. Must be used in combination with `separateDialCode` option, or with setting `allowDropdown` to `false`. 
+
 **utilsScript**  
 Type: `String` Default: `""` Example: `"build/js/utils.js"`  
 Enable formatting/validation etc. by specifying the URL of the included utils.js script (or alternatively just point it to the file on [cdnjs.com](https://cdnjs.com/libraries/intl-tel-input)). The script is fetched only when the page has finished loading (on the window load event) to prevent blocking (the script is ~215KB). When instantiating the plugin, if the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is defined, one of those is returned under the `promise` instance property, so you can do something like `iti.promise.then(callback)` to know when initialisation requests like this have finished. See [Utilities Script](#utilities-script) for more information.
@@ -242,7 +241,7 @@ var extension = iti.getExtension();
 Returns a string e.g. if the input value was `"(702) 555-5555 ext. 1234"`, this would return `"1234"`
 
 **getNumber**  
-Get the current number in the given format (defaults to [E.164 standard](http://en.wikipedia.org/wiki/E.164)). The different formats are available in the enum `intlTelInputUtils.numberFormat` - which you can see [here](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L109). Requires the `utilsScript` option. _Note that even if `nationalMode` is enabled, this can still return a full international number. Also note that this method expects a valid number, and so should only be used after validation._  
+Get the current number in the given format (defaults to [E.164 standard](https://en.wikipedia.org/wiki/E.164)). The different formats are available in the enum `intlTelInputUtils.numberFormat` - which you can see [here](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js#L109). Requires the `utilsScript` option. _Note that even if `nationalMode` is enabled, this can still return a full international number. Also note that this method expects a valid number, and so should only be used after validation._  
 ```js
 var number = iti.getNumber();
 // or
@@ -290,7 +289,7 @@ if (error === intlTelInputUtils.validationError.TOO_SHORT) {
 ```
 
 **isValidNumber**  
-Validate the current number - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/is-valid-number.html). Expects an internationally formatted number (unless `nationalMode` is enabled). If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option. Also see `getNumberType` if you want to make sure the user enters a certain type of number e.g. a mobile number.  
+Validate the current number - [see example](https://intl-tel-input.com/examples/validation.html). If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option. Also see `getNumberType` if you want to make sure the user enters a certain type of number e.g. a mobile number.  
 ```js
 var isValid = iti.isValidNumber();
 ```
@@ -303,7 +302,7 @@ iti.setCountry("gb");
 ```
 
 **setNumber**  
-Insert a number, and update the selected flag accordingly. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number according to the `nationalMode` option._  
+Insert a number, and update the selected flag accordingly. _Note that if `formatOnDisplay` is enabled, this will attempt to format the number to either national or international format according to the `nationalMode` option._  
 ```js
 iti.setNumber("+447733123456");
 ```
@@ -318,7 +317,7 @@ iti.setPlaceholderNumberType("FIXED_LINE");
 ## Static Methods
 
 **getCountryData**  
-Get all of the plugin's country data - either to re-use elsewhere e.g. to populate a country dropdown - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html), or to modify - [see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/modify-country-data.html). Note that any modifications must be done before initialising the plugin.  
+Get all of the plugin's country data - either to re-use elsewhere e.g. to populate a country dropdown - [see example](https://intl-tel-input.com/examples/country-sync.html), or to modify - [see example](https://intl-tel-input.com/examples/modify-country-data.html). Note that any modifications must be done before initialising the plugin.  
 ```js
 var countryData = window.intlTelInputGlobals.getCountryData();
 ```
@@ -345,10 +344,6 @@ An alternative to the `utilsScript` option, this method lets you manually load t
 window.intlTelInputGlobals.loadUtils("build/js/utils.js");
 ```
 
-**~~setCountryData~~ [REMOVED]**  
-Set the plugin's country data. This method was removed because it makes much more sense to just use `getCountryData` and then modify that ([see example](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/modify-country-data.html)) instead of having to generate the whole thing yourself - the country data has become increasingly complicated and for each country we now have five properties: the name, [iso2 country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), international dial code, priority (in case two countries have the same international dial code), and finally a list of area codes used in that country - see [data.js](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/data.js#L36) for more info.
-
-
 ## Events
 You can listen for the following events on the input.
 
@@ -359,7 +354,7 @@ input.addEventListener("countrychange", function() {
   // do something with iti.getSelectedCountryData()
 });
 ```
-See an example here: [Country sync](http://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/country-sync.html)  
+See an example here: [Country sync](https://intl-tel-input.com/examples/country-sync.html)  
 
 **open:countrydropdown**  
 This is triggered when the user opens the dropdown.  
@@ -414,7 +409,7 @@ The dropdown should automatically appear above/below the input depending on the
 In order to get the automatic country-specific placeholders, simply omit the placeholder attribute on the `<input>`.
 
 **Bootstrap input groups**  
-A couple of CSS fixes are required to get the plugin to play nice with Bootstrap [input groups](https://getbootstrap.com/docs/3.3/components/#input-groups). You can see a Codepen [here](http://codepen.io/jackocnr/pen/EyPXed).  
+A couple of CSS fixes are required to get the plugin to play nice with Bootstrap [input groups](https://getbootstrap.com/docs/3.3/components/#input-groups). You can see a Codepen [here](https://codepen.io/jackocnr/pen/EyPXed).  
 _Note: there is currently [a bug](https://bugs.webkit.org/show_bug.cgi?id=141822) in Mobile Safari which causes a crash when you click the dropdown arrow (a CSS triangle) inside an input group. The simplest workaround is to remove the CSS triangle with this line:_
 
 ```css
@@ -435,7 +430,6 @@ See the [contributing guide](https://github.com/jackocnr/intl-tel-input/blob/mas
 
 ## Links
 * List of [integrations with intl-tel-input](https://github.com/jackocnr/intl-tel-input/wiki/Integrations)
-* Android native port: [IntlPhoneInput](https://github.com/Rimoto/IntlPhoneInput)
 * Typescript type definitions are available in the [DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/intl-tel-input/index.d.ts) (more info [here](https://github.com/jackocnr/intl-tel-input/issues/433#issuecomment-228517623))
 
 <img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png" /><br />

package/build/css/intlTelInput.css

@@ -106,7 +106,7 @@
       background-color: transparent; }
   .iti--separate-dial-code .iti__selected-flag {
     background-color: rgba(0, 0, 0, 0.05); }
-  .iti--separate-dial-code .iti__selected-dial-code {
+  .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
     margin-left: 6px; }
   .iti--container {
     position: absolute;

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v18.0.3
+ * International Telephone Input v18.1.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */

package/build/js/data.min.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v18.0.3
+ * International Telephone Input v18.1.1
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */