intl-tel-input 19.5.2 → 19.5.4

package/src/js/intlTelInput.js

@@ -200,8 +200,8 @@ class Iti {
     // process onlyCountries or excludeCountries array if present
     this._processAllCountries();
 
-    // process the countryCodes map
-    this._processCountryCodes();
+    // generate this.dialCodes and this.dialCodeToIso2Map
+    this._processDialCodes();
 
     // process the preferredCountries
     this._processPreferredCountries();
@@ -215,24 +215,24 @@ class Iti {
     }
   }
 
-  // add a country code to this.countryCodes
-  _addCountryCode(iso2, countryCode, priority) {
-    if (countryCode.length > this.countryCodeMaxLen) {
-      this.countryCodeMaxLen = countryCode.length;
+  // add a dial code to this.dialCodeToIso2Map
+  _addToDialCodeMap(iso2, dialCode, priority) {
+    if (dialCode.length > this.dialCodeMaxLen) {
+      this.dialCodeMaxLen = dialCode.length;
     }
-    if (!this.countryCodes.hasOwnProperty(countryCode)) {
-      this.countryCodes[countryCode] = [];
+    if (!this.dialCodeToIso2Map.hasOwnProperty(dialCode)) {
+      this.dialCodeToIso2Map[dialCode] = [];
     }
-    // bail if we already have this country for this countryCode
-    for (let i = 0; i < this.countryCodes[countryCode].length; i++) {
-      if (this.countryCodes[countryCode][i] === iso2) {
+    // bail if we already have this country for this dialCode
+    for (let i = 0; i < this.dialCodeToIso2Map[dialCode].length; i++) {
+      if (this.dialCodeToIso2Map[dialCode][i] === iso2) {
         return;
       }
     }
     // check for undefined as 0 is falsy
     const index =
-      priority !== undefined ? priority : this.countryCodes[countryCode].length;
-    this.countryCodes[countryCode][index] = iso2;
+      priority !== undefined ? priority : this.dialCodeToIso2Map[dialCode].length;
+    this.dialCodeToIso2Map[dialCode][index] = iso2;
   }
 
   // process onlyCountries or excludeCountries array if present
@@ -277,13 +277,24 @@ class Iti {
     return 0;
   }
 
-  // process the countryCodes map
-  _processCountryCodes() {
-    this.countryCodeMaxLen = 0;
-    // here we store just dial codes
+  // generate this.dialCodes and this.dialCodeToIso2Map
+  _processDialCodes() {
+    // here we store just dial codes, where the key is the dial code, and the value is true
+    // e.g. { 1: true, 7: true, 20: true, ... }
     this.dialCodes = {};
-    // here we store "country codes" (both dial codes and their area codes)
-    this.countryCodes = {};
+    this.dialCodeMaxLen = 0;
+
+    // here we map dialCodes (inc both dialCode and dialCode+areaCode) to iso2 codes
+    /* e.g.
+     * {
+     *   1: [ 'us', 'ca', ... ],    # all NANP countries
+     *   12: [ 'us', 'ca', ... ],   # subset of NANP countries
+     *   120: [ 'us', 'ca' ],       # just US and Canada
+     *   1204: [ 'ca' ],            # only Canada
+     *   ...
+     *  }
+     */
+    this.dialCodeToIso2Map = {};
 
     // first: add dial codes
     for (let i = 0; i < this.countries.length; i++) {
@@ -291,7 +302,7 @@ class Iti {
       if (!this.dialCodes[c.dialCode]) {
         this.dialCodes[c.dialCode] = true;
       }
-      this._addCountryCode(c.iso2, c.dialCode, c.priority);
+      this._addToDialCodeMap(c.iso2, c.dialCode, c.priority);
     }
 
     // next: add area codes
@@ -302,7 +313,7 @@ class Iti {
       const c = this.countries[i];
       // area codes
       if (c.areaCodes) {
-        const rootCountryCode = this.countryCodes[c.dialCode][0];
+        const rootIso2Code = this.dialCodeToIso2Map[c.dialCode][0];
         // for each area code
         for (let j = 0; j < c.areaCodes.length; j++) {
           const areaCode = c.areaCodes[j];
@@ -310,11 +321,11 @@ class Iti {
           for (let k = 1; k < areaCode.length; k++) {
             const partialDialCode = c.dialCode + areaCode.substr(0, k);
             // start with the root country, as that also matches this dial code
-            this._addCountryCode(rootCountryCode, partialDialCode);
-            this._addCountryCode(c.iso2, partialDialCode);
+            this._addToDialCodeMap(rootIso2Code, partialDialCode);
+            this._addToDialCodeMap(c.iso2, partialDialCode);
           }
           // add the full area code
-          this._addCountryCode(c.iso2, c.dialCode + areaCode);
+          this._addToDialCodeMap(c.iso2, c.dialCode + areaCode);
         }
       }
     }
@@ -325,8 +336,8 @@ class Iti {
   _processPreferredCountries() {
     this.preferredCountries = [];
     for (let i = 0; i < this.options.preferredCountries.length; i++) {
-      const countryCode = this.options.preferredCountries[i].toLowerCase();
-      const countryData = this._getCountryData(countryCode, true);
+      const iso2 = this.options.preferredCountries[i].toLowerCase();
+      const countryData = this._getCountryData(iso2, true);
       if (countryData) {
         this.preferredCountries.push(countryData);
       }
@@ -425,7 +436,7 @@ class Iti {
     if (showFlags) {
       this.selectedFlagInner = this._createEl(
         "div",
-        { class: "iti__flag iti__globe" },
+        { class: "iti__flag" },
         this.selectedFlag
       );
     }
@@ -540,7 +551,7 @@ class Iti {
         name: hiddenInputPhoneName
       });
 
-      // Create hidden input for the selected country code
+      // Create hidden input for the selected country iso2 code
       this.hiddenInputCountry = this._createEl("input", {
         type: "hidden",
         name: hiddenInputCountryName
@@ -620,14 +631,15 @@ class Iti {
         if (dialCode && isRegionlessNanp) {
           // has intl dial code, is regionless nanp, and no initialCountry, so default to US
           this._setFlag("us");
-        } else if (defaultToFirstCountry) {
+        } else if (defaultToFirstCountry && !val) {
           // no dial code and no initialCountry, so default to first in list
           this.defaultCountry = this.preferredCountries.length
             ? this.preferredCountries[0].iso2
             : this.countries[0].iso2;
-          if (!val) {
-            this._setFlag(this.defaultCountry);
-          }
+          this._setFlag(this.defaultCountry);
+        } else {
+          // display the empty state (globe icon)
+          this._setFlag();
         }
       }
 
@@ -771,11 +783,11 @@ class Iti {
 
       if (typeof this.options.geoIpLookup === "function") {
         this.options.geoIpLookup(
-          (countryCode = "") => {
-            const lowerCountryCode = countryCode.toLowerCase();
-            const isValidCountryCode = lowerCountryCode && this._getCountryData(lowerCountryCode, true);
-            if (isValidCountryCode) {
-              window.intlTelInputGlobals.autoCountry = lowerCountryCode;
+          (iso2 = "") => {
+            const iso2Lower = iso2.toLowerCase();
+            const isValidIso2 = iso2Lower && this._getCountryData(iso2Lower, true);
+            if (isValidIso2) {
+              window.intlTelInputGlobals.autoCountry = iso2Lower;
               // tell all instances the auto country is ready
               // TODO: this should just be the current instances
               // UPDATE: use setTimeout in case their geoIpLookup function calls this callback straight
@@ -1259,15 +1271,15 @@ class Iti {
     // try and extract valid dial code from input
     const dialCode = this._getDialCode(number, true);
     const numeric = this._getNumeric(number);
-    let countryCode = null;
+    let iso2 = null;
     if (dialCode) {
-      const countryCodes = this.countryCodes[this._getNumeric(dialCode)];
+      const iso2Codes = this.dialCodeToIso2Map[this._getNumeric(dialCode)];
       // check if the right country is already selected. this should be false if the number is
       // longer than the matched dial code because in this case we need to make sure that if
       // there are multiple country matches, that the first one is selected (note: we could
       // just check that here, but it requires the same loop that we already have later)
       const alreadySelected =
-        countryCodes.indexOf(this.selectedCountryData.iso2) !== -1 &&
+        iso2Codes.indexOf(this.selectedCountryData.iso2) !== -1 &&
         numeric.length <= dialCode.length - 1;
       const isRegionlessNanpNumber =
         selectedDialCode === "1" && this._isRegionlessNanp(numeric);
@@ -1277,11 +1289,11 @@ class Iti {
       // AND
       // B) the right country is not already selected
       if (!isRegionlessNanpNumber && !alreadySelected) {
-        // if using onlyCountries option, countryCodes[0] may be empty, so we must find the first
+        // if using onlyCountries option, iso2Codes[0] may be empty, so we must find the first
         // non-empty index
-        for (let j = 0; j < countryCodes.length; j++) {
-          if (countryCodes[j]) {
-            countryCode = countryCodes[j];
+        for (let j = 0; j < iso2Codes.length; j++) {
+          if (iso2Codes[j]) {
+            iso2 = iso2Codes[j];
             break;
           }
         }
@@ -1290,14 +1302,14 @@ class Iti {
       // invalid dial code, so empty
       // Note: use getNumeric here because the number has not been formatted yet, so could contain
       // bad chars
-      countryCode = "";
+      iso2 = "";
     } else if ((!number || number === "+") && !this.selectedCountryData.iso2) {
       // if no selected flag, and user either clears the input, or just types a plus, then show default
-      countryCode = this.defaultCountry;
+      iso2 = this.defaultCountry;
     }
 
-    if (countryCode !== null) {
-      return this._setFlag(countryCode);
+    if (iso2 !== null) {
+      return this._setFlag(iso2);
     }
     return false;
   }
@@ -1331,32 +1343,32 @@ class Iti {
     }
   }
 
-  // find the country data for the given country code
+  // find the country data for the given iso2 code
   // the ignoreOnlyCountriesOption is only used during init() while parsing the onlyCountries array
-  _getCountryData(countryCode, allowFail) {
+  _getCountryData(iso2, allowFail) {
     for (let i = 0; i < this.countries.length; i++) {
-      if (this.countries[i].iso2 === countryCode) {
+      if (this.countries[i].iso2 === iso2) {
         return this.countries[i];
       }
     }
     if (allowFail) {
       return null;
     }
-    throw new Error(`No country data for '${countryCode}'`);
+    throw new Error(`No country data for '${iso2}'`);
   }
 
   // select the given flag, update the placeholder, title, and the active list item
   // Note: called from _setInitialState, _updateFlagFromNumber, _selectListItem, setCountry
-  _setFlag(countryCode) {
+  _setFlag(iso2) {
     const { allowDropdown, showSelectedDialCode, showFlags, countrySearch } = this.options;
 
     const prevCountry = this.selectedCountryData.iso2
       ? this.selectedCountryData
       : {};
 
-    // do this first as it will throw an error and stop if countryCode is invalid
-    this.selectedCountryData = countryCode
-      ? this._getCountryData(countryCode, false)
+    // do this first as it will throw an error and stop if iso2 is invalid
+    this.selectedCountryData = iso2
+      ? this._getCountryData(iso2, false)
       : {};
     // update the defaultCountry - we only need the iso2 from now on, so just store that
     if (this.selectedCountryData.iso2) {
@@ -1364,14 +1376,14 @@ class Iti {
     }
 
     if (showFlags) {
-      const flagClass = countryCode ? `iti__${countryCode}` : 'iti__globe';
+      const flagClass = iso2 ? `iti__${iso2}` : 'iti__globe';
       this.selectedFlagInner.setAttribute(
         "class",
         `iti__flag ${flagClass}`
       );
     }
 
-    this._setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode);
+    this._setSelectedCountryFlagTitleAttribute(iso2, showSelectedDialCode);
 
     if (showSelectedDialCode) {
       const dialCode = this.selectedCountryData.dialCode
@@ -1400,14 +1412,14 @@ class Iti {
         prevItem.classList.remove("iti__active");
         prevItem.setAttribute("aria-selected", "false");
       }
-      if (countryCode) {
+      if (iso2) {
         // check if there is a preferred item first, else fall back to standard
         const nextItem =
           this.countryList.querySelector(
-            `#iti-${this.id}__item-${countryCode}-preferred`
+            `#iti-${this.id}__item-${iso2}-preferred`
           ) ||
           this.countryList.querySelector(
-            `#iti-${this.id}__item-${countryCode}`
+            `#iti-${this.id}__item-${iso2}`
           );
         nextItem.setAttribute("aria-selected", "true");
         nextItem.classList.add("iti__active");
@@ -1416,18 +1428,18 @@ class Iti {
     }
 
     // return if the flag has changed or not
-    return prevCountry.iso2 !== countryCode;
+    return prevCountry.iso2 !== iso2;
   }
 
-  _setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode) {
+  _setSelectedCountryFlagTitleAttribute(iso2, showSelectedDialCode) {
     if (!this.selectedFlag) {
       return;
     }
 
     let title;
-    if (countryCode && !showSelectedDialCode) {
+    if (iso2 && !showSelectedDialCode) {
       title = `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`;
-    } else if (countryCode) {
+    } else if (iso2) {
       // For screen reader output, we don't want to include the dial code in the reader output twice
       // so just use the selected country name here:
       title = this.selectedCountryData.name;
@@ -1619,7 +1631,7 @@ class Iti {
           numericChars += c;
           // if current numericChars make a valid dial code
           if (includeAreaCode) {
-            if (this.countryCodes[numericChars]) {
+            if (this.dialCodeToIso2Map[numericChars]) {
               // store the actual raw string (useful for matching later)
               dialCode = number.substr(0, i + 1);
             }
@@ -1631,7 +1643,7 @@ class Iti {
             }
           }
           // stop searching as soon as we can - in this case when we hit max len
-          if (numericChars.length === this.countryCodeMaxLen) {
+          if (numericChars.length === this.dialCodeMaxLen) {
             break;
           }
         }
@@ -1864,11 +1876,11 @@ class Iti {
   }
 
   // update the selected flag, and update the input val accordingly
-  setCountry(originalCountryCode) {
-    const countryCode = originalCountryCode.toLowerCase();
+  setCountry(iso2) {
+    const iso2Lower = iso2.toLowerCase();
     // check if already selected
-    if (this.selectedCountryData.iso2 !== countryCode) {
-      this._setFlag(countryCode);
+    if (this.selectedCountryData.iso2 !== iso2Lower) {
+      this._setFlag(iso2Lower);
       this._updateDialCode(this.selectedCountryData.dialCode);
       this._triggerCountryChange();
     }

package/src/spec/helpers/helpers.js

@@ -105,10 +105,10 @@ var getFlagsContainerElement = function(i) {
   return i.parent().find(".iti__flag-container");
 };
 
-var selectFlag = function(countryCode, i) {
+var selectFlag = function(iso2, i) {
   i = i || input;
   getSelectedFlagContainer(i)[0].click();
-  getListElement(i).find("li[data-country-code='" + countryCode + "']")[0].click();
+  getListElement(i).find("li[data-country-code='" + iso2 + "']")[0].click();
 };
 
 var openCountryDropDown = function() {

package/src/spec/tests/core/multipleInstances.js

@@ -4,12 +4,12 @@ describe("multiple instances: init plugin (with nationalMode=false) to test mult
 
   var input2,
     iti2,
-    afghanistanCountryCode = "af",
-    albaniaCountryCode = "al",
-    chinaCountryCode = "cn",
+    afghanistanIso2Code = "af",
+    albaniaIso2Code = "al",
+    chinaIso2Code = "cn",
     chinaDialCode = "+86",
-    koreaCountryCode = 'kr',
-    russiaCountryCode = 'ru';
+    koreaIso2Code = 'kr',
+    russiaIso2Code = 'ru';
 
   beforeEach(function() {
     intlSetup();
@@ -17,11 +17,11 @@ describe("multiple instances: init plugin (with nationalMode=false) to test mult
     input2 = $("<input>").wrap("div");
 
     iti = window.intlTelInput(input[0], {
-      onlyCountries: [afghanistanCountryCode, chinaCountryCode],
+      onlyCountries: [afghanistanIso2Code, chinaIso2Code],
       nationalMode: false,
     });
     iti2 = window.intlTelInput(input2[0], {
-      onlyCountries: [albaniaCountryCode, chinaCountryCode, koreaCountryCode, russiaCountryCode],
+      onlyCountries: [albaniaIso2Code, chinaIso2Code, koreaIso2Code, russiaIso2Code],
       nationalMode: false,
     });
     $("body").append(getParentElement(input)).append(getParentElement(input2));
@@ -40,21 +40,21 @@ describe("multiple instances: init plugin (with nationalMode=false) to test mult
   });
 
   it("instances have different default countries selected", function() {
-    expect(getSelectedFlagElement()).toHaveClass(`iti__${afghanistanCountryCode}`);
-    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaCountryCode}`);
+    expect(getSelectedFlagElement()).toHaveClass(`iti__${afghanistanIso2Code}`);
+    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaIso2Code}`);
   });
 
   it("selecting an item from the first input dropdown only updates the flag on that input", function() {
-    selectFlag(chinaCountryCode);
-    expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaCountryCode}`);
-    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaCountryCode}`);
+    selectFlag(chinaIso2Code);
+    expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaIso2Code}`);
+    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaIso2Code}`);
   });
 
   it("updating the number on the first input only updates the flag on that input", function() {
     input.val(chinaDialCode + " 123456");
     triggerKeyOnInput(" ");
-    expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaCountryCode}`);
-    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaCountryCode}`);
+    expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaIso2Code}`);
+    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaIso2Code}`);
   });
 
 

package/src/spec/tests/core/usingDropdown.js

@@ -52,14 +52,14 @@ describe("using dropdown: init plugin on normal input with nationalMode=false, a
 
     describe("selecting a new country item", function() {
 
-      var countryCode = "ca";
+      var iso2Code = "ca";
 
       beforeEach(function() {
-        getListElement().find("li[data-country-code='" + countryCode + "']")[0].click();
+        getListElement().find("li[data-country-code='" + iso2Code + "']")[0].click();
       });
 
       it("updates the selected flag", function() {
-        expect(getSelectedFlagElement()).toHaveClass(`iti__${countryCode}`);
+        expect(getSelectedFlagElement()).toHaveClass(`iti__${iso2Code}`);
       });
 
       it("updates the dial code", function() {
@@ -69,7 +69,7 @@ describe("using dropdown: init plugin on normal input with nationalMode=false, a
       // this was a bug
       it("adding a space doesnt reset to the default country for that dial code", function() {
         triggerKeyOnInput(" ");
-        expect(getSelectedFlagElement()).toHaveClass(`iti__${countryCode}`);
+        expect(getSelectedFlagElement()).toHaveClass(`iti__${iso2Code}`);
       });
 
     });

package/src/spec/tests/methods/getValidationError.js

@@ -22,7 +22,7 @@ describe("getValidationError:", function() {
     expect(iti.getValidationError()).toEqual(intlTelInputUtils.validationError.TOO_LONG);
   });
 
-  it("returns the right error for a number with an invalid country code", function() {
+  it("returns the right error for a number with an invalid iso2 code", function() {
     iti.setNumber("+969");
     expect(iti.getValidationError()).toEqual(intlTelInputUtils.validationError.INVALID_COUNTRY_CODE);
   });

package/src/spec/tests/methods/setCountry.js

@@ -2,13 +2,13 @@
 
 describe("setCountry: init plugin and calling public method setCountry()", function() {
 
-  var countryCode = "gb";
+  var iso2 = "gb";
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").wrap("div");
     iti = window.intlTelInput(input[0]);
-    iti.setCountry(countryCode);
+    iti.setCountry(iso2);
   });
 
   afterEach(function() {
@@ -16,7 +16,7 @@ describe("setCountry: init plugin and calling public method setCountry()", funct
   });
 
   it("updates the selected flag", function() {
-    expect(getSelectedFlagElement()).toHaveClass(`iti__${countryCode}`);
+    expect(getSelectedFlagElement()).toHaveClass(`iti__${iso2}`);
   });
 
   it("does not insert the dial code", function() {
@@ -30,7 +30,7 @@ describe("setCountry: init plugin and calling public method setCountry()", funct
           showFlags: true,
           showSelectedDialCode: false,
         });
-        iti.setCountry(countryCode);
+        iti.setCountry(iso2);
       });
 
       it("has the country name and dial code in the flag's title", function() {
@@ -44,27 +44,12 @@ describe("setCountry: init plugin and calling public method setCountry()", funct
           showFlags: true,
           showSelectedDialCode: true,
         });
-        iti.setCountry(countryCode);
+        iti.setCountry(iso2);
       });
 
       it("has the country name but not the dial code in the flag's title", function() {
         expect(getSelectedFlagContainer().attr("title")).toEqual("United Kingdom");
       });
     });
-
-
-    // setCountry errors out when country code is undefined, so we can likely remove this scenario and make country code a required param
-    describe("when countryCode is falsey", function() {
-      // beforeEach(function() {
-      //   iti = window.intlTelInput(input[0], {
-      //     showFlags: true,
-      //   });
-      //   iti.setCountry();
-      // });
-
-      it("sets the flag's title as Unknown", function() {
-        // expect(getSelectedFlagContainer().attr("title")).toEqual("Unknown");
-      });
-    })
   });
 });

package/src/spec/tests/options/onlyCountries.js

@@ -17,18 +17,18 @@ describe("onlyCountries option:", function() {
 
   describe("init plugin with onlyCountries set to japan, china and korea", function() {
 
-    var chinaCountryCode = "cn";
+    var chinaIso2Code = "cn";
 
     beforeEach(function() {
       // China and Japan (note that none of the default preferredCountries are included here, so wont be in the list)
-      onlyCountries = ['jp', chinaCountryCode, 'kr'];
+      onlyCountries = ['jp', chinaIso2Code, 'kr'];
       iti = window.intlTelInput(input[0], {
         onlyCountries: onlyCountries,
       });
     });
 
     it("defaults to the first onlyCountries alphabetically", function() {
-      expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaCountryCode}`);
+      expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaIso2Code}`);
     });
 
     it("has the right number of list items", function() {