intl-tel-input 18.5.3 → 19.0.0

package/README.md

@@ -119,7 +119,7 @@ _Note: We have now dropped support for all versions of Internet Explorer because
   ```
 
 ## 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.
+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 `showSelectedDialCode` 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. when using `nationalMode` it will automatically display the number in national format, removing the international dial code).
 
@@ -141,14 +141,14 @@ When enabled (requires `nationalMode` to be disabled), the international dial co
 Type: `String` Default: `"polite"`  
 Set the input's placeholder to an example number for the selected country, and update it if the country changes. You can specify the number type using the `placeholderNumberType` option. By default it is set to `"polite"`, which means it will only set the placeholder if the input doesn't already have one. You can also set it to `"aggressive"`, which will replace any existing placeholder, or `"off"`. Requires the `utilsScript` option.
 
+**containerClass**  
+Type: `String` Default: `""`  
+Additional classes to add to the (injected) wrapper `<div>`.
+
 **countrySearch**  
 Type: `Boolean` Default: `false`  
 Add a search input to the top of the dropdown, so users can filter the displayed countries.
 
-**customContainer**  
-Type: `String` Default: `""`  
-Additional classes to add to the parent div.
-
 **customPlaceholder**  
 Type: `Function` Default: `null`  
 Change the placeholder generated by autoPlaceholder. Must return a string.
@@ -191,27 +191,30 @@ intlTelInput(input, {
       .then(function(data) { callback(data.country_code); })
       .catch(function() { callback("us"); });
   }
-})
+});
 ```
 _Note that the callback must still be called in the event of an error, hence the use of `catch()` in this example. Tip: store the result in a cookie to avoid repeat lookups!_
 
 **hiddenInput**  
-Type: `String` Default: `""`  
-Add a hidden input with the given name. Alternatively, if your input name contains square brackets (e.g. `name="phone_number[main]"`) then it will give the hidden input the same name, replacing the contents of the brackets with the given name (e.g. if you init the plugin with `hiddenInput: "full"`, then in this case the hidden input would have `name="phone_number[full]"`). On submit, it will automatically populate the hidden input with the full international number (using `getNumber`). This is a quick way for people using non-Ajax forms to get the full international number, even when `nationalMode` is enabled. Avoid this option when using Ajax forms and instead just call `getNumber` to get the full international number to send in the request. _Note: requires the input to be inside a form element, as this feature works by listening for the submit event on the closest form element. Also note that since this uses `getNumber` internally, firstly it requires the `utilsScript` option, and secondly it expects a valid number and so will only work correctly if you have used `isValidNumber` to validate the number before allowing the form submit to go through._
-
-**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](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.
+Type: `Function` Default: `null`  
+Creates a hidden input which gets populated with the full international number on submit. You must provide a function (which receives the main telephone input name as an argument, in case that's useful) and it must return the name to use for the hidden input. This is a quick way for people using non-Ajax forms to get the full international number, even when `nationalMode` is enabled. Avoid this option when using Ajax forms and instead just call `getNumber` to get the full international number to send in the request. _Note: requires the input to be inside a `<form>` element, as this feature works by listening for the `submit` event on the closest form element. Also note that since this uses `getNumber` internally, firstly it requires the `utilsScript` option, and secondly it expects a valid number and so will only work correctly if you have used `isValidNumber` to validate the number before allowing the form submit to go through._
 
-If you leave `initialCountry` blank, it will default to the first country in the list.
+```js
+intlTelInput(input, {
+  hiddenInput: function(telInputName) {
+    return "phone_full"
+  }
+});
+```
 
-**localizedCountries**  
+**i18n**  
 Type: `Object` Default: `{}`  
-Allow localisation of country names. For each country, the key should be the iso2 country code, and the value should be the localised country name. [See example](https://intl-tel-input.com/examples/localise-countries.html).
+Allow localisation/customisation of country names and other plugin text. To localise a country name, the key should be the iso2 country code, and the value should be the localised country name. [See example](https://intl-tel-input.com/examples/localise-countries.html).
 
 ```js
-// Country names in German
-{
+intlTelInput(input, {
+  i18n: {
+    // Country names
     fr: "Frankreich",
     de: "Deutschland",
     es: "Spanien",
@@ -220,9 +223,20 @@ Allow localisation of country names. For each country, the key should be the iso
     nl: "Niederlande",
     at: "Österreich",
     dk: "Dänemark",
+    // Other plugin text
+    selectedCountryAriaLabel: 'Ausgewähltes Land',
+    countryListAriaLabel: 'Liste der Länder',
+    searchPlaceholder: 'Suchen',
   }
+});
 ```
 
+**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](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.
+
 **nationalMode**  
 Type: `Boolean` Default: `true`  
 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.
@@ -239,16 +253,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.
 
-**separateDialCode**  
+**showFlags**  
+Type: `Boolean` Default: `true`  
+Set this to false to hide the flags e.g. for political reasons. Must be used in combination with `showSelectedDialCode` option, or with setting `allowDropdown` to `false`. 
+
+**showSelectedDialCode**  
 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`. 
-
 **useFullscreenPopup**  
 Type: `Boolean` Default: `true on mobile devices, false otherwise`  
 Control when the country list appears as a fullscreen popup vs a dropdown. By default, it will appear as a fullscreen popup on mobile devices (based on user-agent and screen width), and as a dropdown on larger devices/screens.
@@ -322,17 +336,17 @@ if (error === intlTelInputUtils.validationError.TOO_SHORT) {
 }
 ```
 
-**isPossibleNumber**  
-Check if the current number is possible - [see example](https://intl-tel-input.com/examples/validation-practical.html). This is a simple form of validation that only checks the length of the number but should be sufficient for most use cases. See `isValidNumber` for more accurate validation, but the advantage of `isPossibleNumber` is that it is much more future-proof as while countries around the world regularly update their number rules, they very rarely change their number lengths. If it returns false, you can use `getValidationError` to get more information. Requires the `utilsScript` option.  
+**isValidNumber**  
+Check if the current number is valid based on its length - [see example](https://intl-tel-input.com/examples/validation-practical.html), which should be sufficient for most use cases. See `isValidNumberPrecise` for more precise validation, but the advantage of `isValidNumber` is that it is much more future-proof as while countries around the world regularly update their number rules, they very rarely change their number lengths. If it returns false, you can use `getValidationError` to get more information. Requires the `utilsScript` option.  
 ```js
-const isPossible = iti.isPossibleNumber();
+const isPossible = iti.isValidNumber();
 ```
 Returns: `true`/`false`
 
-**isValidNumber**  
-Check if the current number is valid - [see example](https://intl-tel-input.com/examples/validation.html). This is a precise form of validation, with specific matching rules for each area code etc. Note that these rules change each month for various countries around the world, so you need to be careful to keep the plugin up-to-date else you will start rejecting valid numbers. For a simpler and more future-proof form of validation, see `isPossibleNumber` above. If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option.  
+**isValidNumberPrecise**  
+Check if the current number is valid using precise matching rules for each country/area code etc - [see example](https://intl-tel-input.com/examples/validation.html). Note that these rules change each month for various countries around the world, so you need to be careful to keep the plugin up-to-date else you will start rejecting valid numbers. For a simpler and more future-proof form of validation, see `isValidNumber` above. If validation fails, you can use `getValidationError` to get more information. Requires the `utilsScript` option.  
 ```js
-const isValid = iti.isValidNumber();
+const isValid = iti.isValidNumberPrecise();
 ```
 Returns: `true`/`false`
 

package/build/css/demo.css

@@ -41,7 +41,7 @@ button[disabled] {
 input,
 select {
   border: 1px solid #ccc;
-  width: 250px;
+  width: 220px;
 }
 
 ::placeholder,

package/build/css/intlTelInput.css

@@ -53,28 +53,36 @@
   border-bottom: 4px solid #555;
 }
 .iti__dropdown-content {
+  border-radius: 3px;
+  background-color: white;
+}
+.iti--inline-dropdown .iti__dropdown-content {
   position: absolute;
   z-index: 2;
+  margin-top: 3px;
   margin-left: -1px;
-  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
-  background-color: white;
   border: 1px solid #ccc;
-  max-height: 200px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
 }
 .iti__dropdown-content--dropup {
   bottom: 100%;
-  margin-bottom: -1px;
+  margin-bottom: 3px;
 }
 .iti__search-input {
   width: 100%;
   border-width: 0;
+  border-radius: 3px;
+}
+.iti__search-input + .iti__country-list {
+  border-top: 1px solid #ccc;
 }
 .iti__country-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  max-height: 185px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 .iti--flexible-dropdown-width .iti__country-list {
   white-space: nowrap;
@@ -96,7 +104,7 @@
 .iti__country {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  padding: 8px 8px;
   outline: none;
 }
 .iti__dial-code {
@@ -106,35 +114,35 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 .iti__flag-box, .iti__country-name {
-  margin-right: 6px;
+  margin-right: 8px;
 }
 [dir=rtl] .iti__flag-box, [dir=rtl] .iti__country-name {
   margin-right: 0;
-  margin-left: 6px;
+  margin-left: 8px;
 }
 .iti--allow-dropdown input.iti__tel-input,
 .iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
-.iti--separate-dial-code input.iti__tel-input[type=text],
-.iti--separate-dial-code input.iti__tel-input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--show-selected-dial-code input.iti__tel-input,
+.iti--show-selected-dial-code input.iti__tel-input[type=text],
+.iti--show-selected-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
 [dir=rtl] .iti--allow-dropdown input.iti__tel-input,
 [dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
-[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,
+[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
 }
-.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
+.iti--allow-dropdown .iti__flag-container, .iti--show-selected-dial-code .iti__flag-container {
   right: auto;
   left: 0;
 }
-[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--separate-dial-code .iti__flag-container {
+[dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--show-selected-dial-code .iti__flag-container {
   right: 0;
   left: auto;
 }
@@ -152,13 +160,13 @@
 .iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
-.iti--separate-dial-code .iti__selected-flag {
+.iti--show-selected-dial-code .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
   margin-left: 6px;
 }
-[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
+[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
   margin-left: 0;
   margin-right: 6px;
 }

package/build/js/data.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v18.5.3
+ * International Telephone Input v19.0.0
  * 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.5.3
+ * International Telephone Input v19.0.0
  * https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */