intl-tel-input 18.0.2 → 18.1.0

package/examples/gen/is-valid-number.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Validation</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680992740399">
-    <link rel="stylesheet" href="../../build/css/demo.css?1680992740399">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
     
-      <link rel="stylesheet" href="../css/isValidNumber.css?1680992740399">
+      <link rel="stylesheet" href="../css/isValidNumber.css?1680993492797">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -41,7 +41,7 @@ var errorMap = [&quot;Invalid number&quot;, &quot;Invalid country code&quot;, &q
 
 // initialise plugin
 var iti = window.intlTelInput(input, {
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot;
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot;
 });
 
 var reset = function() {
@@ -80,7 +80,7 @@ input.addEventListener(&#39;keyup&#39;, reset);
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1680992740399"></script>
-    <script src="./js/isValidNumber.js?1680992740399"></script>
+    <script src="../../build/js/intlTelInput.js?1680993492797"></script>
+    <script src="./js/isValidNumber.js?1680993492797"></script>
   </body>
 </html>

package/examples/gen/js/countrySync.js

@@ -5,7 +5,7 @@ var countryData = window.intlTelInputGlobals.getCountryData(),
 
 // init plugin
 var iti = window.intlTelInput(input, {
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });
 
 // populate the country dropdown

package/examples/gen/js/defaultCountryIp.js

@@ -2,10 +2,10 @@ var input = document.querySelector("#phone");
 window.intlTelInput(input, {
   initialCountry: "auto",
   geoIpLookup: function(callback) {
-    fetch("http://ip-api.com/json")
+    fetch("https://ipapi.co/json")
       .then(function(res) { return res.json(); })
-      .then(function(data) { callback(data.countryCode); })
+      .then(function(data) { callback(data.country_code); })
       .catch(function() { callback("us"); });
   },
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });

package/examples/gen/js/displayNumber.js

@@ -1,4 +1,4 @@
 var input = document.querySelector("#phone");
 window.intlTelInput(input, {
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });

package/examples/gen/js/hiddenInput.js

@@ -1,5 +1,5 @@
 var input = document.querySelector("#phone");
 window.intlTelInput(input, {
   hiddenInput: "full_phone",
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });

package/examples/gen/js/initPromise.js

@@ -2,7 +2,7 @@ var input = document.querySelector("#phone");
 var statusElement = document.querySelector("#status");
 
 var iti = window.intlTelInput(input, {
-  utilsScript: "../../build/js/utils.js?1680992740399",
+  utilsScript: "../../build/js/utils.js?1680993492797",
 });
 iti.promise.then(function() {
   statusElement.innerHTML = "Initialised!";

package/examples/gen/js/isValidNumber.js

@@ -7,7 +7,7 @@ var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long
 
 // initialise plugin
 var iti = window.intlTelInput(input, {
-  utilsScript: "../../build/js/utils.js?1680992740399"
+  utilsScript: "../../build/js/utils.js?1680993492797"
 });
 
 var reset = function() {

package/examples/gen/js/modifyCountryData.js

@@ -7,5 +7,5 @@ for (var i = 0; i < countryData.length; i++) {
 }
 
 window.intlTelInput(input, {
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });

package/examples/gen/js/multipleInstances.js

@@ -4,10 +4,10 @@ var inputMobile = document.querySelector("#mobile");
 window.intlTelInput(inputHome, {
   initialCountry: 'gb',
   placeholderNumberType: 'FIXED_LINE',
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });
 window.intlTelInput(inputMobile, {
   initialCountry: 'gb',
   placeholderNumberType: 'MOBILE',
-  utilsScript: "../../build/js/utils.js?1680992740399"
+  utilsScript: "../../build/js/utils.js?1680993492797"
 });

package/examples/gen/js/nationalMode.js

@@ -3,7 +3,7 @@ var input = document.querySelector("#phone"),
 
 var iti = window.intlTelInput(input, {
   nationalMode: true,
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });
 
 var handleChange = function() {

package/examples/gen/js/onlyCountriesEurope.js

@@ -4,5 +4,5 @@ window.intlTelInput(input, {
   "ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
   "li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
   "ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
-  utilsScript: "../../build/js/utils.js?1680992740399" // just for formatting/placeholders etc
+  utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
 });

package/examples/gen/modify-country-data.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Modify country data</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680992740399">
-    <link rel="stylesheet" href="../../build/css/demo.css?1680992740399">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -36,7 +36,7 @@ for (var i = 0; i &lt; countryData.length; i++) {
 }
 
 window.intlTelInput(input, {
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot; // just for formatting/placeholders etc
 });
 </code></pre>
 
@@ -46,7 +46,7 @@ window.intlTelInput(input, {
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1680992740399"></script>
-    <script src="./js/modifyCountryData.js?1680992740399"></script>
+    <script src="../../build/js/intlTelInput.js?1680993492797"></script>
+    <script src="./js/modifyCountryData.js?1680993492797"></script>
   </body>
 </html>

package/examples/gen/multiple-instances.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Multiple Instances</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680992740399">
-    <link rel="stylesheet" href="../../build/css/demo.css?1680992740399">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -36,12 +36,12 @@ var inputMobile = document.querySelector(&quot;#mobile&quot;);
 window.intlTelInput(inputHome, {
   initialCountry: &#39;gb&#39;,
   placeholderNumberType: &#39;FIXED_LINE&#39;,
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot; // just for formatting/placeholders etc
 });
 window.intlTelInput(inputMobile, {
   initialCountry: &#39;gb&#39;,
   placeholderNumberType: &#39;MOBILE&#39;,
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot;
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot;
 });
 </code></pre>
 
@@ -54,7 +54,7 @@ Mobile: <input id="mobile" type="tel">
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1680992740399"></script>
-    <script src="./js/multipleInstances.js?1680992740399"></script>
+    <script src="../../build/js/intlTelInput.js?1680993492797"></script>
+    <script src="./js/multipleInstances.js?1680993492797"></script>
   </body>
 </html>

package/examples/gen/national-mode.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: National Mode</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680992740399">
-    <link rel="stylesheet" href="../../build/css/demo.css?1680992740399">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -34,7 +34,7 @@
 
 var iti = window.intlTelInput(input, {
   nationalMode: true,
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot; // just for formatting/placeholders etc
 });
 
 var handleChange = function() {
@@ -57,7 +57,7 @@ input.addEventListener(&#39;keyup&#39;, handleChange);
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1680992740399"></script>
-    <script src="./js/nationalMode.js?1680992740399"></script>
+    <script src="../../build/js/intlTelInput.js?1680993492797"></script>
+    <script src="./js/nationalMode.js?1680993492797"></script>
   </body>
 </html>

package/examples/gen/only-countries-europe.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Only countries option</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680992740399">
-    <link rel="stylesheet" href="../../build/css/demo.css?1680992740399">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -33,7 +33,7 @@ window.intlTelInput(input, {
   &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;,
   &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;,
   &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;],
-  utilsScript: &quot;../../build/js/utils.js?1680992740399&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680993492797&quot; // just for formatting/placeholders etc
 });
 </code></pre>
 
@@ -43,7 +43,7 @@ window.intlTelInput(input, {
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1680992740399"></script>
-    <script src="./js/onlyCountriesEurope.js?1680992740399"></script>
+    <script src="../../build/js/intlTelInput.js?1680993492797"></script>
+    <script src="./js/onlyCountriesEurope.js?1680993492797"></script>
   </body>
 </html>

package/examples/js/defaultCountryIp.js.ejs

@@ -2,9 +2,9 @@ var input = document.querySelector("#phone");
 window.intlTelInput(input, {
   initialCountry: "auto",
   geoIpLookup: function(callback) {
-    fetch("http://ip-api.com/json")
+    fetch("https://ipapi.co/json")
       .then(function(res) { return res.json(); })
-      .then(function(data) { callback(data.countryCode); })
+      .then(function(data) { callback(data.country_code); })
       .catch(function() { callback("us"); });
   },
   utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "18.0.2",
+  "version": "18.1.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/src/css/intlTelInput.scss

@@ -248,7 +248,7 @@ $mobilePopupMargin: 30px !default;
       // now that we have digits in this section, it needs this visual separation
       background-color: $hoverColor;
     }
-    .iti__selected-dial-code {
+    &.iti--show-flags .iti__selected-dial-code {
       margin-left: $arrowPadding;
     }
   }

package/src/js/intlTelInput.js

@@ -48,6 +48,8 @@ const defaults = {
   preferredCountries: ['us', 'gb'],
   // display the country dial code next to the selected flag
   separateDialCode: false,
+  // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
+  showFlags: true,
   // specify the path to the libphonenumber script to enable validation/formatting
   utilsScript: '',
 };
@@ -101,6 +103,13 @@ class Iti {
     // if separateDialCode enabled, do not insert dial codes
     if (this.options.separateDialCode) this.options.autoInsertDialCode = false;
 
+    // force showFlags=true if there's a dropdown and we're not displaying the dial code,
+    // as otherwise you just have a down arrow on it's own which doesn't make sense
+    const forceShowFlags = (this.options.allowDropdown && !this.options.separateDialCode);
+    if (!this.options.showFlags && forceShowFlags) {
+      this.options.showFlags = true;
+    }
+
     // we cannot just test screen size as some smartphones/website meta tags will report desktop
     // resolutions
     // Note: for some reason jasmine breaks if you put this in the main Plugin function with the
@@ -313,45 +322,62 @@ class Iti {
       this.telInput.setAttribute('autocomplete', 'off');
     }
 
+    const {
+      allowDropdown,
+      separateDialCode,
+      showFlags,
+      customContainer,
+      hiddenInput,
+      dropdownContainer,
+    } = this.options;
+
     // containers (mostly for positioning)
     let parentClass = 'iti';
-    if (this.options.allowDropdown) parentClass += ' iti--allow-dropdown';
-    if (this.options.separateDialCode) parentClass += ' iti--separate-dial-code';
-    if (this.options.customContainer) {
-      parentClass += ' ';
-      parentClass += this.options.customContainer;
+    if (allowDropdown) parentClass += ' iti--allow-dropdown';
+    if (separateDialCode) parentClass += ' iti--separate-dial-code';
+    if (showFlags) parentClass += ' iti--show-flags';
+    if (customContainer) {
+      parentClass += ` ${customContainer}`;
     }
 
     const wrapper = this._createEl('div', { class: parentClass });
     this.telInput.parentNode.insertBefore(wrapper, this.telInput);
-    this.flagsContainer = this._createEl('div', { class: 'iti__flag-container' }, wrapper);
+    // only hide the flagsContainer if allowDropdown, showFlags and separateDialCode are all false
+    const showFlagsContainer = (allowDropdown || showFlags || separateDialCode);
+    if (showFlagsContainer) {
+      this.flagsContainer = this._createEl('div', { class: 'iti__flag-container' }, wrapper);
+    }
     wrapper.appendChild(this.telInput);
 
     // selected flag (displayed to left of input)
     // using Aria tags for "Select-Only Combobox Example"
     // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-    this.selectedFlag = this._createEl('div', {
-      class: 'iti__selected-flag',
-      ...(this.options.allowDropdown && {
-        role: 'combobox',
-        'aria-haspopup': 'listbox',
-        'aria-controls': `iti-${this.id}__country-listbox`,
-        'aria-owns': `iti-${this.id}__country-listbox`,
-        'aria-expanded': 'false',
-        'aria-label': 'Telephone country code',
-      }),
-    }, this.flagsContainer);
-    this.selectedFlagInner = this._createEl('div', { class: 'iti__flag' }, this.selectedFlag);
-
-    if (this.telInput.disabled) {
+    if (showFlagsContainer) {
+      this.selectedFlag = this._createEl('div', {
+        class: 'iti__selected-flag',
+        ...(allowDropdown && {
+          role: 'combobox',
+          'aria-haspopup': 'listbox',
+          'aria-controls': `iti-${this.id}__country-listbox`,
+          'aria-owns': `iti-${this.id}__country-listbox`,
+          'aria-expanded': 'false',
+          'aria-label': 'Telephone country code',
+        }),
+      }, this.flagsContainer);
+    }
+    if (showFlags) {
+      this.selectedFlagInner = this._createEl('div', { class: 'iti__flag' }, this.selectedFlag);
+    }
+
+    if (this.selectedFlag && this.telInput.disabled) {
       this.selectedFlag.setAttribute('aria-disabled', 'true');
     }
 
-    if (this.options.separateDialCode) {
+    if (separateDialCode) {
       this.selectedDialCode = this._createEl('div', { class: 'iti__selected-dial-code' }, this.selectedFlag);
     }
 
-    if (this.options.allowDropdown) {
+    if (allowDropdown) {
       if (!this.telInput.disabled) {
         // make element focusable and tab navigable
         this.selectedFlag.setAttribute('tabindex', '0');
@@ -377,7 +403,7 @@ class Iti {
       this._appendListItems(this.countries, 'iti__standard');
 
       // create dropdownContainer markup
-      if (this.options.dropdownContainer) {
+      if (dropdownContainer) {
         this.dropdown = this._createEl('div', { class: 'iti iti--container' });
         this.dropdown.appendChild(this.countryList);
       } else {
@@ -385,8 +411,8 @@ class Iti {
       }
     }
 
-    if (this.options.hiddenInput) {
-      let hiddenInputName = this.options.hiddenInput;
+    if (hiddenInput) {
+      let hiddenInputName = hiddenInput;
       const name = this.telInput.getAttribute('name');
       if (name) {
         const i = name.lastIndexOf('[');
@@ -415,7 +441,9 @@ class Iti {
       // open the list item
       tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-${this.id}__item-${c.iso2}${idSuffix}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}' aria-selected='false'>`;
       // add the flag
-      tmp += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
+      if (this.options.showFlags) {
+        tmp += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
+      }
       // and the country name and dial code
       tmp += `<span class='iti__country-name'>${c.name}</span>`;
       tmp += `<span class='iti__dial-code'>+${c.dialCode}</span>`;
@@ -979,10 +1007,14 @@ class Iti {
       this.defaultCountry = this.selectedCountryData.iso2;
     }
 
-    this.selectedFlagInner.setAttribute('class', `iti__flag iti__${countryCode}`);
+    if (this.options.showFlags) {
+      this.selectedFlagInner.setAttribute('class', `iti__flag iti__${countryCode}`);
+    }
     // update the selected country's title attribute
-    const title = (countryCode) ? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}` : 'Unknown';
-    this.selectedFlag.setAttribute('title', title);
+    if (this.selectedFlag) {
+      const title = (countryCode) ? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}` : 'Unknown';
+      this.selectedFlag.setAttribute('title', title);
+    }
 
     if (this.options.separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : '';
@@ -1020,6 +1052,8 @@ class Iti {
 
   // when the input is in a hidden container during initialisation, we must inject some markup
   // into the end of the DOM to calculate the correct offsetWidth
+  // NOTE: this is only used when separateDialCode is enabled, so flagsContainer and selectedFlag
+  // will definitely exist
   _getHiddenSelectedFlagWidth() {
     // to get the right styling to apply, all we need is a shallow clone of the container,
     // and then to inject a deep clone of the selectedFlag element
@@ -1378,7 +1412,7 @@ class Iti {
   setCountry(originalCountryCode) {
     const countryCode = originalCountryCode.toLowerCase();
     // check if already selected
-    if (!this.selectedFlagInner.classList.contains(`iti__${countryCode}`)) {
+    if (this.selectedCountryData.iso2 !== countryCode) {
       this._setFlag(countryCode);
       this._updateDialCode(this.selectedCountryData.dialCode);
       this._triggerCountryChange();