intl-tel-input 17.0.20 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/CHANGELOG.md +19 -15
  2. package/README.md +14 -14
  3. package/build/css/intlTelInput.css +16 -5
  4. package/build/css/intlTelInput.min.css +1 -1
  5. package/build/js/data.js +2 -2
  6. package/build/js/data.min.js +2 -2
  7. package/build/js/intlTelInput-jquery.js +97 -49
  8. package/build/js/intlTelInput-jquery.min.js +3 -3
  9. package/build/js/intlTelInput.js +97 -49
  10. package/build/js/intlTelInput.min.js +3 -3
  11. package/build/js/utils.js +198 -198
  12. package/composer.json +1 -1
  13. package/demo.html +6 -6
  14. package/demo_rtl.html +47 -0
  15. package/examples/gen/country-sync.html +6 -6
  16. package/examples/gen/default-country-ip.html +5 -5
  17. package/examples/gen/display-number.html +5 -5
  18. package/examples/gen/hidden-input.html +5 -5
  19. package/examples/gen/init-promise.html +5 -5
  20. package/examples/gen/is-valid-number.html +6 -6
  21. package/examples/gen/js/countrySync.js +1 -1
  22. package/examples/gen/js/defaultCountryIp.js +1 -1
  23. package/examples/gen/js/displayNumber.js +1 -1
  24. package/examples/gen/js/hiddenInput.js +1 -1
  25. package/examples/gen/js/initPromise.js +1 -1
  26. package/examples/gen/js/isValidNumber.js +1 -1
  27. package/examples/gen/js/modifyCountryData.js +1 -1
  28. package/examples/gen/js/multipleInstances.js +2 -2
  29. package/examples/gen/js/nationalMode.js +1 -1
  30. package/examples/gen/js/onlyCountriesEurope.js +1 -1
  31. package/examples/gen/modify-country-data.html +5 -5
  32. package/examples/gen/multiple-instances.html +6 -6
  33. package/examples/gen/national-mode.html +5 -5
  34. package/examples/gen/only-countries-europe.html +5 -5
  35. package/package.json +1 -1
  36. package/spec.html +1 -1
  37. package/src/css/intlTelInput.scss +23 -6
  38. package/src/js/data.js +1 -1
  39. package/src/js/intlTelInput.js +53 -50
  40. package/src/spec/tests/core/dropdownShortcuts.js +3 -2
  41. package/src/spec/tests/core/multipleInstances.js +8 -7
  42. package/src/spec/tests/core/usingDropdown.js +30 -10
  43. package/src/spec/tests/methods/destroy.js +2 -2
  44. package/src/spec/tests/options/allowDropdown.js +8 -0
  45. package/src/spec/tests/options/{autoHideDialCode.js → autoInsertDialCode.js} +18 -28
  46. package/src/spec/tests/options/separateDialCode.js +42 -2
package/composer.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jackocnr/intl-tel-input",
3
- "version": "17.0.20",
3
+ "version": "18.0.0",
4
4
  "description": "A JavaScript plugin for entering and validating international telephone numbers",
5
5
  "keywords": [
6
6
  "international",
package/demo.html CHANGED
@@ -20,16 +20,16 @@
20
20
  var input = document.querySelector("#phone");
21
21
  window.intlTelInput(input, {
22
22
  // allowDropdown: false,
23
- // autoHideDialCode: false,
23
+ // autoInsertDialCode: true,
24
24
  // autoPlaceholder: "off",
25
25
  // dropdownContainer: document.body,
26
26
  // excludeCountries: ["us"],
27
27
  // formatOnDisplay: false,
28
- // geoIpLookup: function(callback) {
29
- // $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
30
- // var countryCode = (resp && resp.country) ? resp.country : "";
31
- // callback(countryCode);
32
- // });
28
+ // geoIpLookup: callback => {
29
+ // fetch("http://ip-api.com/json")
30
+ // .then(res => res.json())
31
+ // .then(data => callback(data.countryCode))
32
+ // .catch(() => callback("us"));
33
33
  // },
34
34
  // hiddenInput: "full_number",
35
35
  // initialCountry: "auto",
package/demo_rtl.html ADDED
@@ -0,0 +1,47 @@
1
+ <!DOCTYPE html>
2
+ <html dir="rtl">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>International Telephone Input</title>
7
+ <link rel="stylesheet" href="build/css/intlTelInput.css">
8
+ <link rel="stylesheet" href="build/css/demo.css">
9
+ </head>
10
+
11
+ <body>
12
+ <h1>International Telephone Input</h1>
13
+ <form>
14
+ <input id="phone" name="phone" type="tel">
15
+ <button type="submit">Submit</button>
16
+ </form>
17
+
18
+ <script src="build/js/intlTelInput.js"></script>
19
+ <script>
20
+ var input = document.querySelector("#phone");
21
+ window.intlTelInput(input, {
22
+ // allowDropdown: false,
23
+ // autoInsertDialCode: false,
24
+ // autoPlaceholder: "off",
25
+ // dropdownContainer: document.body,
26
+ // excludeCountries: ["us"],
27
+ // formatOnDisplay: false,
28
+ // geoIpLookup: function(callback) {
29
+ // $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
30
+ // var countryCode = (resp && resp.country) ? resp.country : "";
31
+ // callback(countryCode);
32
+ // });
33
+ // },
34
+ // hiddenInput: "full_number",
35
+ // initialCountry: "auto",
36
+ // localizedCountries: { 'de': 'Deutschland' },
37
+ // nationalMode: false,
38
+ // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
39
+ // placeholderNumberType: "MOBILE",
40
+ // preferredCountries: ['cn', 'jp'],
41
+ // separateDialCode: true,
42
+ utilsScript: "build/js/utils.js",
43
+ });
44
+ </script>
45
+ </body>
46
+
47
+ </html>
package/examples/gen/country-sync.html CHANGED
@@ -4,10 +4,10 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Country sync</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
- <link rel="stylesheet" href="../css/countrySync.css?1638200991544">
10
+ <link rel="stylesheet" href="../css/countrySync.css?1680898893466">
11
11
 
12
12
 
13
13
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -48,7 +48,7 @@ var countryData = window.intlTelInputGlobals.getCountryData(),
48
48
 
49
49
  // init plugin
50
50
  var iti = window.intlTelInput(input, {
51
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
51
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
52
52
  });
53
53
 
54
54
  // populate the country dropdown
@@ -92,7 +92,7 @@ addressDropdown.addEventListener(&#39;change&#39;, function() {
92
92
  </div>
93
93
 
94
94
  <script src="../js/prism.js"></script>
95
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
96
- <script src="./js/countrySync.js?1638200991544"></script>
95
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
96
+ <script src="./js/countrySync.js?1680898893466"></script>
97
97
  </body>
98
98
  </html>
package/examples/gen/default-country-ip.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Lookup user's country</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -38,7 +38,7 @@ window.intlTelInput(input, {
38
38
  callback(countryCode);
39
39
  });
40
40
  },
41
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
41
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
42
42
  });
43
43
  </code></pre>
44
44
 
@@ -50,7 +50,7 @@ window.intlTelInput(input, {
50
50
  </div>
51
51
 
52
52
  <script src="../js/prism.js"></script>
53
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
54
- <script src="./js/defaultCountryIp.js?1638200991544"></script>
53
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
54
+ <script src="./js/defaultCountryIp.js?1680898893466"></script>
55
55
  </body>
56
56
  </html>
package/examples/gen/display-number.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Display an existing number</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -30,7 +30,7 @@
30
30
  <h2>Code</h2>
31
31
  <pre><code class="language-javascript">var input = document.querySelector(&quot;#phone&quot;);
32
32
  window.intlTelInput(input, {
33
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
33
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
34
34
  });
35
35
  </code></pre>
36
36
 
@@ -41,7 +41,7 @@ window.intlTelInput(input, {
41
41
  </div>
42
42
 
43
43
  <script src="../js/prism.js"></script>
44
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
45
- <script src="./js/displayNumber.js?1638200991544"></script>
44
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
45
+ <script src="./js/displayNumber.js?1680898893466"></script>
46
46
  </body>
47
47
  </html>
package/examples/gen/hidden-input.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Submitting the full international number using a hidden input</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -34,7 +34,7 @@
34
34
  <pre><code class="language-javascript">var input = document.querySelector(&quot;#phone&quot;);
35
35
  window.intlTelInput(input, {
36
36
  hiddenInput: &quot;full_phone&quot;,
37
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
37
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
38
38
  });
39
39
  </code></pre>
40
40
 
@@ -48,7 +48,7 @@ window.intlTelInput(input, {
48
48
  </div>
49
49
 
50
50
  <script src="../js/prism.js"></script>
51
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
52
- <script src="./js/hiddenInput.js?1638200991544"></script>
51
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
52
+ <script src="./js/hiddenInput.js?1680898893466"></script>
53
53
  </body>
54
54
  </html>
package/examples/gen/init-promise.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Using the promise returned from initialisation</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -39,7 +39,7 @@
39
39
  var statusElement = document.querySelector(&quot;#status&quot;);
40
40
 
41
41
  var iti = window.intlTelInput(input, {
42
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot;,
42
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot;,
43
43
  });
44
44
  iti.promise.then(function() {
45
45
  statusElement.innerHTML = &quot;Initialised!&quot;;
@@ -60,7 +60,7 @@ iti.promise.then(function() {
60
60
  </div>
61
61
 
62
62
  <script src="../js/prism.js"></script>
63
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
64
- <script src="./js/initPromise.js?1638200991544"></script>
63
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
64
+ <script src="./js/initPromise.js?1680898893466"></script>
65
65
  </body>
66
66
  </html>
package/examples/gen/is-valid-number.html CHANGED
@@ -4,10 +4,10 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Validation</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
- <link rel="stylesheet" href="../css/isValidNumber.css?1638200991544">
10
+ <link rel="stylesheet" href="../css/isValidNumber.css?1680898893466">
11
11
 
12
12
 
13
13
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -41,7 +41,7 @@ var errorMap = [&quot;Invalid number&quot;, &quot;Invalid country code&quot;, &q
41
41
 
42
42
  // initialise plugin
43
43
  var iti = window.intlTelInput(input, {
44
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot;
44
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot;
45
45
  });
46
46
 
47
47
  var reset = function() {
@@ -80,7 +80,7 @@ input.addEventListener(&#39;keyup&#39;, reset);
80
80
  </div>
81
81
 
82
82
  <script src="../js/prism.js"></script>
83
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
84
- <script src="./js/isValidNumber.js?1638200991544"></script>
83
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
84
+ <script src="./js/isValidNumber.js?1680898893466"></script>
85
85
  </body>
86
86
  </html>
package/examples/gen/js/countrySync.js CHANGED
@@ -5,7 +5,7 @@ var countryData = window.intlTelInputGlobals.getCountryData(),
5
5
 
6
6
  // init plugin
7
7
  var iti = window.intlTelInput(input, {
8
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
8
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
9
9
  });
10
10
 
11
11
  // populate the country dropdown
package/examples/gen/js/defaultCountryIp.js CHANGED
@@ -7,5 +7,5 @@ window.intlTelInput(input, {
7
7
  callback(countryCode);
8
8
  });
9
9
  },
10
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
10
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
11
11
  });
package/examples/gen/js/displayNumber.js CHANGED
@@ -1,4 +1,4 @@
1
1
  var input = document.querySelector("#phone");
2
2
  window.intlTelInput(input, {
3
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
3
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
4
4
  });
package/examples/gen/js/hiddenInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  var input = document.querySelector("#phone");
2
2
  window.intlTelInput(input, {
3
3
  hiddenInput: "full_phone",
4
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
4
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
5
5
  });
package/examples/gen/js/initPromise.js CHANGED
@@ -2,7 +2,7 @@ var input = document.querySelector("#phone");
2
2
  var statusElement = document.querySelector("#status");
3
3
 
4
4
  var iti = window.intlTelInput(input, {
5
- utilsScript: "../../build/js/utils.js?1638200991544",
5
+ utilsScript: "../../build/js/utils.js?1680898893466",
6
6
  });
7
7
  iti.promise.then(function() {
8
8
  statusElement.innerHTML = "Initialised!";
package/examples/gen/js/isValidNumber.js CHANGED
@@ -7,7 +7,7 @@ var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long
7
7
 
8
8
  // initialise plugin
9
9
  var iti = window.intlTelInput(input, {
10
- utilsScript: "../../build/js/utils.js?1638200991544"
10
+ utilsScript: "../../build/js/utils.js?1680898893466"
11
11
  });
12
12
 
13
13
  var reset = function() {
package/examples/gen/js/modifyCountryData.js CHANGED
@@ -7,5 +7,5 @@ for (var i = 0; i < countryData.length; i++) {
7
7
  }
8
8
 
9
9
  window.intlTelInput(input, {
10
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
10
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
11
11
  });
package/examples/gen/js/multipleInstances.js CHANGED
@@ -4,10 +4,10 @@ var inputMobile = document.querySelector("#mobile");
4
4
  window.intlTelInput(inputHome, {
5
5
  initialCountry: 'gb',
6
6
  placeholderNumberType: 'FIXED_LINE',
7
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
7
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
8
8
  });
9
9
  window.intlTelInput(inputMobile, {
10
10
  initialCountry: 'gb',
11
11
  placeholderNumberType: 'MOBILE',
12
- utilsScript: "../../build/js/utils.js?1638200991544"
12
+ utilsScript: "../../build/js/utils.js?1680898893466"
13
13
  });
package/examples/gen/js/nationalMode.js CHANGED
@@ -3,7 +3,7 @@ var input = document.querySelector("#phone"),
3
3
 
4
4
  var iti = window.intlTelInput(input, {
5
5
  nationalMode: true,
6
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
6
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
7
7
  });
8
8
 
9
9
  var handleChange = function() {
package/examples/gen/js/onlyCountriesEurope.js CHANGED
@@ -4,5 +4,5 @@ window.intlTelInput(input, {
4
4
  "ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
5
5
  "li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
6
6
  "ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
7
- utilsScript: "../../build/js/utils.js?1638200991544" // just for formatting/placeholders etc
7
+ utilsScript: "../../build/js/utils.js?1680898893466" // just for formatting/placeholders etc
8
8
  });
package/examples/gen/modify-country-data.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Modify country data</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -36,7 +36,7 @@ for (var i = 0; i &lt; countryData.length; i++) {
36
36
  }
37
37
 
38
38
  window.intlTelInput(input, {
39
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
39
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
40
40
  });
41
41
  </code></pre>
42
42
 
@@ -46,7 +46,7 @@ window.intlTelInput(input, {
46
46
  </div>
47
47
 
48
48
  <script src="../js/prism.js"></script>
49
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
50
- <script src="./js/modifyCountryData.js?1638200991544"></script>
49
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
50
+ <script src="./js/modifyCountryData.js?1680898893466"></script>
51
51
  </body>
52
52
  </html>
package/examples/gen/multiple-instances.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: Multiple Instances</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -36,12 +36,12 @@ var inputMobile = document.querySelector(&quot;#mobile&quot;);
36
36
  window.intlTelInput(inputHome, {
37
37
  initialCountry: &#39;gb&#39;,
38
38
  placeholderNumberType: &#39;FIXED_LINE&#39;,
39
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
39
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
40
40
  });
41
41
  window.intlTelInput(inputMobile, {
42
42
  initialCountry: &#39;gb&#39;,
43
43
  placeholderNumberType: &#39;MOBILE&#39;,
44
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot;
44
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot;
45
45
  });
46
46
  </code></pre>
47
47
 
@@ -54,7 +54,7 @@ Mobile: <input id="mobile" type="tel">
54
54
  </div>
55
55
 
56
56
  <script src="../js/prism.js"></script>
57
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
58
- <script src="./js/multipleInstances.js?1638200991544"></script>
57
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
58
+ <script src="./js/multipleInstances.js?1680898893466"></script>
59
59
  </body>
60
60
  </html>
package/examples/gen/national-mode.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: National Mode</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -34,7 +34,7 @@
34
34
 
35
35
  var iti = window.intlTelInput(input, {
36
36
  nationalMode: true,
37
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
37
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
38
38
  });
39
39
 
40
40
  var handleChange = function() {
@@ -57,7 +57,7 @@ input.addEventListener(&#39;keyup&#39;, handleChange);
57
57
  </div>
58
58
 
59
59
  <script src="../js/prism.js"></script>
60
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
61
- <script src="./js/nationalMode.js?1638200991544"></script>
60
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
61
+ <script src="./js/nationalMode.js?1680898893466"></script>
62
62
  </body>
63
63
  </html>
package/examples/gen/only-countries-europe.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <title>Example: European countries</title>
6
6
  <link rel="stylesheet" href="../css/prism.css">
7
- <link rel="stylesheet" href="../../build/css/intlTelInput.css?1638200991544">
8
- <link rel="stylesheet" href="../../build/css/demo.css?1638200991544">
7
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
8
+ <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
9
9
 
10
10
 
11
11
  <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -33,7 +33,7 @@ window.intlTelInput(input, {
33
33
  &quot;ee&quot;, &quot;fo&quot;, &quot;fi&quot;, &quot;fr&quot;, &quot;de&quot;, &quot;gi&quot;, &quot;gr&quot;, &quot;va&quot;, &quot;hu&quot;, &quot;is&quot;, &quot;ie&quot;, &quot;it&quot;, &quot;lv&quot;,
34
34
  &quot;li&quot;, &quot;lt&quot;, &quot;lu&quot;, &quot;mk&quot;, &quot;mt&quot;, &quot;md&quot;, &quot;mc&quot;, &quot;me&quot;, &quot;nl&quot;, &quot;no&quot;, &quot;pl&quot;, &quot;pt&quot;, &quot;ro&quot;,
35
35
  &quot;ru&quot;, &quot;sm&quot;, &quot;rs&quot;, &quot;sk&quot;, &quot;si&quot;, &quot;es&quot;, &quot;se&quot;, &quot;ch&quot;, &quot;ua&quot;, &quot;gb&quot;],
36
- utilsScript: &quot;../../build/js/utils.js?1638200991544&quot; // just for formatting/placeholders etc
36
+ utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
37
37
  });
38
38
  </code></pre>
39
39
 
@@ -43,7 +43,7 @@ window.intlTelInput(input, {
43
43
  </div>
44
44
 
45
45
  <script src="../js/prism.js"></script>
46
- <script src="../../build/js/intlTelInput.js?1638200991544"></script>
47
- <script src="./js/onlyCountriesEurope.js?1638200991544"></script>
46
+ <script src="../../build/js/intlTelInput.js?1680898893466"></script>
47
+ <script src="./js/onlyCountriesEurope.js?1680898893466"></script>
48
48
  </body>
49
49
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intl-tel-input",
3
- "version": "17.0.20",
3
+ "version": "18.0.0",
4
4
  "description": "A JavaScript plugin for entering and validating international telephone numbers",
5
5
  "keywords": [
6
6
  "international",
package/spec.html CHANGED
@@ -70,7 +70,7 @@
70
70
 
71
71
  <script src="src/spec/tests/options/allowDropdown.js"></script>
72
72
 
73
- <script src="src/spec/tests/options/autoHideDialCode.js"></script>
73
+ <script src="src/spec/tests/options/autoInsertDialCode.js"></script>
74
74
 
75
75
  <script src="src/spec/tests/options/autoPlaceholder.js"></script>
76
76
 
package/src/css/intlTelInput.scss CHANGED
@@ -44,7 +44,6 @@ $mobilePopupMargin: 30px !default;
44
44
  // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
45
45
  * {
46
46
  box-sizing: border-box;
47
- -moz-box-sizing: border-box;
48
47
  }
49
48
 
50
49
  &__hide {
@@ -111,6 +110,11 @@ $mobilePopupMargin: 30px !default;
111
110
  border-right: $triangleBorder solid transparent;
112
111
  border-top: $arrowHeight solid $arrowColor;
113
112
 
113
+ [dir=rtl] & {
114
+ margin-right: $arrowPadding;
115
+ margin-left: 0;
116
+ }
117
+
114
118
  &--up {
115
119
  border-top: none;
116
120
  border-bottom: $arrowHeight solid $arrowColor;
@@ -125,8 +129,6 @@ $mobilePopupMargin: 30px !default;
125
129
 
126
130
  // override default list styles
127
131
  list-style: none;
128
- // in case any container has text-align:center
129
- text-align: left;
130
132
 
131
133
  // place menu above the input element
132
134
  &--dropup {
@@ -175,6 +177,8 @@ $mobilePopupMargin: 30px !default;
175
177
  // each country item in dropdown (we must have separate class to differentiate from dividers)
176
178
  &__country {
177
179
  // Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines
180
+ display: flex;
181
+ align-items: center;
178
182
  padding: 5px 10px;
179
183
  outline: none;
180
184
  }
@@ -188,11 +192,13 @@ $mobilePopupMargin: 30px !default;
188
192
  }
189
193
 
190
194
  // spacing between country flag, name and dial code
191
- &__flag-box, &__country-name, &__dial-code {
192
- vertical-align: middle;
193
- }
194
195
  &__flag-box, &__country-name {
195
196
  margin-right: 6px;
197
+
198
+ [dir=rtl] & {
199
+ margin-right: 0;
200
+ margin-left: 6px;
201
+ }
196
202
  }
197
203
 
198
204
  // these settings are independent of each other, but both move selected flag to left of input
@@ -201,10 +207,21 @@ $mobilePopupMargin: 30px !default;
201
207
  padding-right: $inputPadding;
202
208
  padding-left: $selectedFlagArrowWidth + $inputPadding;
203
209
  margin-left: 0;
210
+
211
+ [dir=rtl] & {
212
+ padding-right: $selectedFlagArrowWidth + $inputPadding;
213
+ padding-left: $inputPadding;
214
+ margin-right: 0;
215
+ }
204
216
  }
205
217
  .iti__flag-container {
206
218
  right: auto;
207
219
  left: 0;
220
+
221
+ [dir=rtl] & {
222
+ right: 0;
223
+ left: auto;
224
+ }
208
225
  }
209
226
  }
210
227
 
package/src/js/data.js CHANGED
@@ -220,7 +220,7 @@ var allCountries = [
220
220
  "ca",
221
221
  "1",
222
222
  1,
223
- ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
223
+ ["204", "226", "236", "249", "250", "289", "306", "343", "365", "367", "368", "387", "403", "416", "418", "431", "437", "438", "450", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
224
224
  ],
225
225
  [
226
226
  "Cape Verde (Kabu Verdi)",