intl-tel-input 18.5.2 → 19.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 (34) hide show
  1. package/README.md +42 -28
  2. package/build/css/demo.css +1 -1
  3. package/build/css/intlTelInput.css +28 -20
  4. package/build/js/data.js +1 -1
  5. package/build/js/data.min.js +1 -1
  6. package/build/js/intlTelInput-jquery.js +159 -154
  7. package/build/js/intlTelInput-jquery.min.js +3 -3
  8. package/build/js/intlTelInput.js +159 -154
  9. package/build/js/intlTelInput.min.js +3 -3
  10. package/composer.json +1 -1
  11. package/demo.html +5 -5
  12. package/grunt/replace.js +1 -7
  13. package/package.json +1 -1
  14. package/spec.html +6 -4
  15. package/src/css/demo.scss +1 -1
  16. package/src/css/intlTelInput.scss +41 -30
  17. package/src/js/intlTelInput.js +77 -128
  18. package/src/spec/helpers/helpers.js +23 -10
  19. package/src/spec/tests/core/countrychangeEvent.js +1 -1
  20. package/src/spec/tests/core/dropdownShortcuts.js +3 -2
  21. package/src/spec/tests/core/initialValues.js +2 -3
  22. package/src/spec/tests/methods/getSelectedCountryData.js +1 -1
  23. package/src/spec/tests/methods/isValidNumber.js +15 -32
  24. package/src/spec/tests/methods/isValidNumberPrecise.js +73 -0
  25. package/src/spec/tests/methods/setCountry.js +4 -4
  26. package/src/spec/tests/options/allowDropdown.js +3 -3
  27. package/src/spec/tests/options/autoInsertDialCode.js +1 -3
  28. package/src/spec/tests/options/autoPlaceholder.js +5 -5
  29. package/src/spec/tests/options/{customContainer.js → containerClass.js} +3 -3
  30. package/src/spec/tests/options/countrySearch.js +63 -0
  31. package/src/spec/tests/options/customPlaceholder.js +1 -1
  32. package/src/spec/tests/options/preferredCountries.js +3 -1
  33. package/src/spec/tests/options/{separateDialCode.js → showSelectedDialCode.js} +7 -7
  34. package/src/spec/tests/methods/isPossibleNumber.js +0 -56
@@ -1,5 +1,5 @@
1
1
  /*
2
- * International Telephone Input v18.5.2
2
+ * International Telephone Input v19.0.0
3
3
  * https://github.com/jackocnr/intl-tel-input.git
4
4
  * Licensed under the MIT license
5
5
  */
@@ -71,6 +71,52 @@
71
71
  }
72
72
  return obj;
73
73
  }
74
+ function _slicedToArray(arr, i) {
75
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
76
+ }
77
+ function _nonIterableRest() {
78
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
79
+ }
80
+ function _unsupportedIterableToArray(o, minLen) {
81
+ if (!o) return;
82
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
83
+ var n = Object.prototype.toString.call(o).slice(8, -1);
84
+ if (n === "Object" && o.constructor) n = o.constructor.name;
85
+ if (n === "Map" || n === "Set") return Array.from(o);
86
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
87
+ }
88
+ function _arrayLikeToArray(arr, len) {
89
+ if (len == null || len > arr.length) len = arr.length;
90
+ for (var i = 0, arr2 = new Array(len); i < len; i++) {
91
+ arr2[i] = arr[i];
92
+ }
93
+ return arr2;
94
+ }
95
+ function _iterableToArrayLimit(arr, i) {
96
+ var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
97
+ if (null != _i) {
98
+ var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1;
99
+ try {
100
+ if (_x = (_i = _i.call(arr)).next, 0 === i) {
101
+ if (Object(_i) !== _i) return;
102
+ _n = !1;
103
+ } else for (;!(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
104
+ }
105
+ } catch (err) {
106
+ _d = !0, _e = err;
107
+ } finally {
108
+ try {
109
+ if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
110
+ } finally {
111
+ if (_d) throw _e;
112
+ }
113
+ }
114
+ return _arr;
115
+ }
116
+ }
117
+ function _arrayWithHoles(arr) {
118
+ if (Array.isArray(arr)) return arr;
119
+ }
74
120
  function _classCallCheck(instance, Constructor) {
75
121
  if (!(instance instanceof Constructor)) {
76
122
  throw new TypeError("Cannot call a class as a function");
@@ -132,9 +178,9 @@
132
178
  // add a placeholder in the input with an example number for the selected country
133
179
  autoPlaceholder: "polite",
134
180
  // add a country search input at the top of the dropdown
135
- countrySearch: false,
181
+ countrySearch: true,
136
182
  // modify the parentClass
137
- customContainer: "",
183
+ containerClass: "",
138
184
  // modify the auto placeholder
139
185
  customPlaceholder: null,
140
186
  // append menu to specified element
@@ -142,29 +188,29 @@
142
188
  // don't display these countries
143
189
  excludeCountries: [],
144
190
  // fix the dropdown width to the input width (rather than being as wide as the longest country name)
145
- fixDropdownWidth: false,
191
+ fixDropdownWidth: true,
146
192
  // format the input value during initialisation and on setNumber
147
193
  formatOnDisplay: true,
148
194
  // geoIp lookup function
149
195
  geoIpLookup: null,
150
196
  // inject a hidden input with this name, and on submit, populate it with the result of getNumber
151
- hiddenInput: "",
197
+ hiddenInput: null,
198
+ // internationalise the plugin text e.g. search input placeholder, country names
199
+ i18n: {},
152
200
  // initial country
153
201
  initialCountry: "",
154
- // localized country names e.g. { 'de': 'Deutschland' }
155
- localizedCountries: null,
156
202
  // national vs international formatting for numbers e.g. placeholders and displaying existing numbers
157
203
  nationalMode: true,
158
204
  // display only these countries
159
205
  onlyCountries: [],
160
206
  // number type to use for placeholders
161
207
  placeholderNumberType: "MOBILE",
162
- // the countries at the top of the list. defaults to united states and united kingdom
163
- preferredCountries: [ "us", "gb" ],
164
- // display the country dial code next to the selected flag
165
- separateDialCode: false,
166
- // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
208
+ // the countries at the top of the list
209
+ preferredCountries: [],
210
+ // option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false
167
211
  showFlags: true,
212
+ // display the international dial code next to the selected flag
213
+ showSelectedDialCode: false,
168
214
  // use full screen popup instead of dropdown for country list
169
215
  useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? // we cannot just test screen size as some smartphones/website meta tags will report desktop
170
216
  // resolutions
@@ -175,43 +221,31 @@
175
221
  };
176
222
  // https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes#Non-geographic_area_codes
177
223
  var regionlessNanpNumbers = [ "800", "822", "833", "844", "855", "866", "877", "880", "881", "882", "883", "884", "885", "886", "887", "888", "889" ];
178
- // utility function to iterate over an object. can't use Object.entries or native forEach because
179
- // of IE11
180
- var forEachProp = function forEachProp(obj, callback) {
181
- var keys = Object.keys(obj);
182
- for (var i = 0; i < keys.length; i++) {
183
- callback(keys[i], obj[keys[i]]);
184
- }
185
- };
186
224
  // run a method on each instance of the plugin
187
225
  var forEachInstance = function forEachInstance(method) {
188
- forEachProp(window.intlTelInputGlobals.instances, function(key) {
189
- window.intlTelInputGlobals.instances[key][method]();
226
+ var instances = window.intlTelInputGlobals.instances;
227
+ Object.values(instances).forEach(function(instance) {
228
+ return instance[method]();
190
229
  });
191
230
  };
192
231
  // this is our plugin class that we will create an instance of
193
232
  // eslint-disable-next-line no-unused-vars
194
233
  var Iti = /*#__PURE__*/ function() {
195
- function Iti(input, options) {
196
- var _this = this;
234
+ function Iti(input) {
235
+ var customOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
197
236
  _classCallCheck(this, Iti);
198
237
  this.id = id++;
199
238
  this.telInput = input;
200
239
  this.activeItem = null;
201
240
  this.highlightedItem = null;
202
241
  // process specified options / defaults
203
- // alternative to Object.assign, which isn't supported by IE11
204
- var customOptions = options || {};
205
- this.options = {};
206
- forEachProp(defaults, function(key, value) {
207
- _this.options[key] = customOptions.hasOwnProperty(key) ? customOptions[key] : value;
208
- });
242
+ this.options = Object.assign({}, defaults, customOptions);
209
243
  this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
210
244
  }
211
245
  _createClass(Iti, [ {
212
246
  key: "_init",
213
247
  value: function _init() {
214
- var _this2 = this;
248
+ var _this = this;
215
249
  // if showing fullscreen popup, do not fix the width
216
250
  if (this.options.useFullscreenPopup) {
217
251
  this.options.fixDropdownWidth = false;
@@ -224,13 +258,13 @@
224
258
  if (this.options.nationalMode) {
225
259
  this.options.autoInsertDialCode = false;
226
260
  }
227
- // if separateDialCode enabled, do not insert dial codes
228
- if (this.options.separateDialCode) {
261
+ // if showSelectedDialCode enabled, do not insert dial codes
262
+ if (this.options.showSelectedDialCode) {
229
263
  this.options.autoInsertDialCode = false;
230
264
  }
231
265
  // force showFlags=true if there's a dropdown and we're not displaying the dial code,
232
266
  // as otherwise you just have a down arrow on it's own which doesn't make sense
233
- var forceShowFlags = this.options.allowDropdown && !this.options.separateDialCode;
267
+ var forceShowFlags = this.options.allowDropdown && !this.options.showSelectedDialCode;
234
268
  if (!this.options.showFlags && forceShowFlags) {
235
269
  this.options.showFlags = true;
236
270
  }
@@ -245,12 +279,12 @@
245
279
  // complete
246
280
  if (typeof Promise !== "undefined") {
247
281
  var autoCountryPromise = new Promise(function(resolve, reject) {
248
- _this2.resolveAutoCountryPromise = resolve;
249
- _this2.rejectAutoCountryPromise = reject;
282
+ _this.resolveAutoCountryPromise = resolve;
283
+ _this.rejectAutoCountryPromise = reject;
250
284
  });
251
285
  var utilsScriptPromise = new Promise(function(resolve, reject) {
252
- _this2.resolveUtilsScriptPromise = resolve;
253
- _this2.rejectUtilsScriptPromise = reject;
286
+ _this.resolveUtilsScriptPromise = resolve;
287
+ _this.rejectUtilsScriptPromise = reject;
254
288
  });
255
289
  this.promise = Promise.all([ autoCountryPromise, utilsScriptPromise ]);
256
290
  } else {
@@ -281,12 +315,10 @@
281
315
  this._processCountryCodes();
282
316
  // process the preferredCountries
283
317
  this._processPreferredCountries();
284
- // translate countries according to localizedCountries option
285
- if (this.options.localizedCountries) {
286
- this._translateCountriesByLocale();
287
- }
318
+ // translate country names according to i18n option
319
+ this._translateCountryNames();
288
320
  // sort countries by name
289
- if (this.options.onlyCountries.length || this.options.localizedCountries) {
321
+ if (this.options.onlyCountries.length || this.options.i18n) {
290
322
  this.countries.sort(this._countryNameSort);
291
323
  }
292
324
  }
@@ -331,12 +363,12 @@
331
363
  }
332
364
  }
333
365
  }, {
334
- key: "_translateCountriesByLocale",
335
- value: function _translateCountriesByLocale() {
366
+ key: "_translateCountryNames",
367
+ value: function _translateCountryNames() {
336
368
  for (var i = 0; i < this.countries.length; i++) {
337
369
  var iso = this.countries[i].iso2.toLowerCase();
338
- if (this.options.localizedCountries.hasOwnProperty(iso)) {
339
- this.countries[i].name = this.options.localizedCountries[iso];
370
+ if (this.options.i18n.hasOwnProperty(iso)) {
371
+ this.countries[i].name = this.options.i18n[iso];
340
372
  }
341
373
  }
342
374
  }
@@ -409,7 +441,8 @@
409
441
  value: function _createEl(name, attrs, container) {
410
442
  var el = document.createElement(name);
411
443
  if (attrs) {
412
- forEachProp(attrs, function(key, value) {
444
+ Object.entries(attrs).forEach(function(_ref) {
445
+ var _ref2 = _slicedToArray(_ref, 2), key = _ref2[0], value = _ref2[1];
413
446
  return el.setAttribute(key, value);
414
447
  });
415
448
  }
@@ -429,30 +462,30 @@
429
462
  if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
430
463
  this.telInput.setAttribute("autocomplete", "off");
431
464
  }
432
- var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer, fixDropdownWidth = _this$options.fixDropdownWidth, useFullscreenPopup = _this$options.useFullscreenPopup, countrySearch = _this$options.countrySearch;
465
+ var _this$options = this.options, allowDropdown = _this$options.allowDropdown, showSelectedDialCode = _this$options.showSelectedDialCode, showFlags = _this$options.showFlags, containerClass = _this$options.containerClass, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer, fixDropdownWidth = _this$options.fixDropdownWidth, useFullscreenPopup = _this$options.useFullscreenPopup, countrySearch = _this$options.countrySearch;
433
466
  // containers (mostly for positioning)
434
467
  var parentClass = "iti";
435
468
  if (allowDropdown) {
436
469
  parentClass += " iti--allow-dropdown";
437
470
  }
438
- if (separateDialCode) {
439
- parentClass += " iti--separate-dial-code";
471
+ if (showSelectedDialCode) {
472
+ parentClass += " iti--show-selected-dial-code";
440
473
  }
441
474
  if (showFlags) {
442
475
  parentClass += " iti--show-flags";
443
476
  }
444
- if (!fixDropdownWidth) {
445
- parentClass += " iti--flexible-dropdown-width";
477
+ if (containerClass) {
478
+ parentClass += " ".concat(containerClass);
446
479
  }
447
- if (customContainer) {
448
- parentClass += " ".concat(customContainer);
480
+ if (!useFullscreenPopup) {
481
+ parentClass += " iti--inline-dropdown";
449
482
  }
450
483
  var wrapper = this._createEl("div", {
451
484
  "class": parentClass
452
485
  });
453
486
  this.telInput.parentNode.insertBefore(wrapper, this.telInput);
454
- // only hide the flagsContainer if allowDropdown, showFlags and separateDialCode are all false
455
- var showFlagsContainer = allowDropdown || showFlags || separateDialCode;
487
+ // only hide the flagsContainer if allowDropdown, showFlags and showSelectedDialCode are all false
488
+ var showFlagsContainer = allowDropdown || showFlags || showSelectedDialCode;
456
489
  if (showFlagsContainer) {
457
490
  this.flagsContainer = this._createEl("div", {
458
491
  "class": "iti__flag-container"
@@ -470,7 +503,7 @@
470
503
  "aria-haspopup": "listbox",
471
504
  "aria-controls": "iti-".concat(this.id, "__country-listbox"),
472
505
  "aria-expanded": "false",
473
- "aria-label": "Telephone country code"
506
+ "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country"
474
507
  }), this.flagsContainer);
475
508
  }
476
509
  if (showFlags) {
@@ -481,7 +514,7 @@
481
514
  if (this.selectedFlag && this.telInput.disabled) {
482
515
  this.selectedFlag.setAttribute("aria-disabled", "true");
483
516
  }
484
- if (separateDialCode) {
517
+ if (showSelectedDialCode) {
485
518
  this.selectedDialCode = this._createEl("div", {
486
519
  "class": "iti__selected-dial-code"
487
520
  }, this.selectedFlag);
@@ -494,14 +527,15 @@
494
527
  this.dropdownArrow = this._createEl("div", {
495
528
  "class": "iti__arrow"
496
529
  }, this.selectedFlag);
530
+ var extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
497
531
  this.dropdownContent = this._createEl("div", {
498
- "class": "iti__dropdown-content iti__hide"
532
+ "class": "iti__dropdown-content iti__hide ".concat(extraClasses)
499
533
  });
500
534
  if (countrySearch) {
501
535
  this.searchInput = this._createEl("input", {
502
536
  type: "text",
503
537
  "class": "iti__search-input",
504
- placeholder: "Search"
538
+ placeholder: this.options.i18n.searchPlaceholder || "Search"
505
539
  }, this.dropdownContent);
506
540
  }
507
541
  // country list: preferred countries, then divider, then all countries
@@ -509,7 +543,7 @@
509
543
  "class": "iti__country-list",
510
544
  id: "iti-".concat(this.id, "__country-listbox"),
511
545
  role: "listbox",
512
- "aria-label": "List of countries"
546
+ "aria-label": this.options.i18n.countryListAriaLabel || "List of countries"
513
547
  }, this.dropdownContent);
514
548
  if (this.preferredCountries.length && !countrySearch) {
515
549
  this._appendListItems(this.preferredCountries, "iti__preferred", true);
@@ -524,6 +558,8 @@
524
558
  var dropdownClasses = "iti iti--container";
525
559
  if (useFullscreenPopup) {
526
560
  dropdownClasses += " iti--fullscreen-popup";
561
+ } else {
562
+ dropdownClasses += " iti--inline-dropdown";
527
563
  }
528
564
  if (countrySearch) {
529
565
  dropdownClasses += " iti--country-search";
@@ -537,16 +573,8 @@
537
573
  }
538
574
  }
539
575
  if (hiddenInput) {
540
- var hiddenInputName = hiddenInput;
541
- var name = this.telInput.getAttribute("name");
542
- if (name) {
543
- var i = name.lastIndexOf("[");
544
- // if input name contains square brackets, then give the hidden input the same name,
545
- // replacing the contents of the last set of brackets with the given hiddenInput name
546
- if (i !== -1) {
547
- hiddenInputName = "".concat(name.substr(0, i), "[").concat(hiddenInputName, "]");
548
- }
549
- }
576
+ var telInputName = this.telInput.getAttribute("name");
577
+ var hiddenInputName = hiddenInput(telInputName);
550
578
  this.hiddenInput = this._createEl("input", {
551
579
  type: "hidden",
552
580
  name: hiddenInputName
@@ -644,39 +672,30 @@
644
672
  }, {
645
673
  key: "_initHiddenInputListener",
646
674
  value: function _initHiddenInputListener() {
647
- var _this3 = this;
675
+ var _this2 = this;
648
676
  this._handleHiddenInputSubmit = function() {
649
- _this3.hiddenInput.value = _this3.getNumber();
677
+ _this2.hiddenInput.value = _this2.getNumber();
650
678
  };
651
679
  if (this.telInput.form) {
652
680
  this.telInput.form.addEventListener("submit", this._handleHiddenInputSubmit);
653
681
  }
654
682
  }
655
- }, {
656
- key: "_getClosestLabel",
657
- value: function _getClosestLabel() {
658
- var el = this.telInput;
659
- while (el && el.tagName !== "LABEL") {
660
- el = el.parentNode;
661
- }
662
- return el;
663
- }
664
683
  }, {
665
684
  key: "_initDropdownListeners",
666
685
  value: function _initDropdownListeners() {
667
- var _this4 = this;
686
+ var _this3 = this;
668
687
  // hack for input nested inside label (which is valid markup): clicking the selected-flag to
669
688
  // open the dropdown would then automatically trigger a 2nd click on the input which would
670
689
  // close it again
671
690
  this._handleLabelClick = function(e) {
672
691
  // if the dropdown is closed, then focus the input, else ignore the click
673
- if (_this4.dropdownContent.classList.contains("iti__hide")) {
674
- _this4.telInput.focus();
692
+ if (_this3.dropdownContent.classList.contains("iti__hide")) {
693
+ _this3.telInput.focus();
675
694
  } else {
676
695
  e.preventDefault();
677
696
  }
678
697
  };
679
- var label = this._getClosestLabel();
698
+ var label = this.telInput.closest("label");
680
699
  if (label) {
681
700
  label.addEventListener("click", this._handleLabelClick);
682
701
  }
@@ -685,24 +704,24 @@
685
704
  // only intercept this event if we're opening the dropdown
686
705
  // else let it bubble up to the top ("click-off-to-close" listener)
687
706
  // we cannot just stopPropagation as it may be needed to close another instance
688
- if (_this4.dropdownContent.classList.contains("iti__hide") && !_this4.telInput.disabled && !_this4.telInput.readOnly) {
689
- _this4._showDropdown();
707
+ if (_this3.dropdownContent.classList.contains("iti__hide") && !_this3.telInput.disabled && !_this3.telInput.readOnly) {
708
+ _this3._showDropdown();
690
709
  }
691
710
  };
692
711
  this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
693
712
  // open dropdown if selected flag is focused and they press up/down/space/enter
694
713
  this._handleFlagsContainerKeydown = function(e) {
695
- var isDropdownHidden = _this4.dropdownContent.classList.contains("iti__hide");
714
+ var isDropdownHidden = _this3.dropdownContent.classList.contains("iti__hide");
696
715
  if (isDropdownHidden && [ "ArrowUp", "ArrowDown", " ", "Enter" ].includes(e.key)) {
697
716
  // prevent form from being submitted if "ENTER" was pressed
698
717
  e.preventDefault();
699
718
  // prevent event from being handled again by document
700
719
  e.stopPropagation();
701
- _this4._showDropdown();
720
+ _this3._showDropdown();
702
721
  }
703
722
  // allow navigation from dropdown to input on TAB
704
723
  if (e.key === "Tab") {
705
- _this4._closeDropdown();
724
+ _this3._closeDropdown();
706
725
  }
707
726
  };
708
727
  this.flagsContainer.addEventListener("keydown", this._handleFlagsContainerKeydown);
@@ -710,7 +729,7 @@
710
729
  }, {
711
730
  key: "_initRequests",
712
731
  value: function _initRequests() {
713
- var _this5 = this;
732
+ var _this4 = this;
714
733
  // if the user has specified the path to the utils script, fetch it on window.load, else resolve
715
734
  if (this.options.utilsScript && !window.intlTelInputUtils) {
716
735
  // if the plugin is being initialised after the window.load event has already been fired
@@ -719,7 +738,7 @@
719
738
  } else {
720
739
  // wait until the load event so we don't block any other requests e.g. the flags image
721
740
  window.addEventListener("load", function() {
722
- window.intlTelInputGlobals.loadUtils(_this5.options.utilsScript);
741
+ window.intlTelInputGlobals.loadUtils(_this4.options.utilsScript);
723
742
  });
724
743
  }
725
744
  } else {
@@ -764,18 +783,18 @@
764
783
  }, {
765
784
  key: "_initKeyListeners",
766
785
  value: function _initKeyListeners() {
767
- var _this6 = this;
786
+ var _this5 = this;
768
787
  // update flag on keyup
769
788
  this._handleKeyupEvent = function() {
770
- if (_this6._updateFlagFromNumber(_this6.telInput.value)) {
771
- _this6._triggerCountryChange();
789
+ if (_this5._updateFlagFromNumber(_this5.telInput.value)) {
790
+ _this5._triggerCountryChange();
772
791
  }
773
792
  };
774
793
  this.telInput.addEventListener("keyup", this._handleKeyupEvent);
775
794
  // update flag on cut/paste events (now supported in all major browsers)
776
795
  this._handleClipboardEvent = function() {
777
796
  // hack because "paste" event is fired before input is updated
778
- setTimeout(_this6._handleKeyupEvent);
797
+ setTimeout(_this5._handleKeyupEvent);
779
798
  };
780
799
  this.telInput.addEventListener("cut", this._handleClipboardEvent);
781
800
  this.telInput.addEventListener("paste", this._handleClipboardEvent);
@@ -789,10 +808,10 @@
789
808
  }, {
790
809
  key: "_initBlurListeners",
791
810
  value: function _initBlurListeners() {
792
- var _this7 = this;
811
+ var _this6 = this;
793
812
  // on blur or form submit: if just a dial code then remove it
794
813
  this._handleSubmitOrBlurEvent = function() {
795
- _this7._removeEmptyDialCode();
814
+ _this6._removeEmptyDialCode();
796
815
  };
797
816
  if (this.telInput.form) {
798
817
  this.telInput.form.addEventListener("submit", this._handleSubmitOrBlurEvent);
@@ -818,10 +837,10 @@
818
837
  }, {
819
838
  key: "_trigger",
820
839
  value: function _trigger(name) {
821
- // have to use old school document.createEvent as IE11 doesn't support `new Event()` syntax
822
- var e = document.createEvent("Event");
823
- e.initEvent(name, true, true);
824
- // can bubble, and is cancellable
840
+ var e = new Event(name, {
841
+ bubbles: true,
842
+ cancelable: true
843
+ });
825
844
  this.telInput.dispatchEvent(e);
826
845
  }
827
846
  }, {
@@ -860,14 +879,14 @@
860
879
  }, {
861
880
  key: "_setDropdownPosition",
862
881
  value: function _setDropdownPosition() {
863
- var _this8 = this;
882
+ var _this7 = this;
864
883
  if (this.options.dropdownContainer) {
865
884
  this.options.dropdownContainer.appendChild(this.dropdown);
866
885
  }
867
886
  if (!this.options.useFullscreenPopup) {
868
887
  var pos = this.telInput.getBoundingClientRect();
869
888
  // windowTop from https://stackoverflow.com/a/14384091/217866
870
- var windowTop = window.pageYOffset || document.documentElement.scrollTop;
889
+ var windowTop = document.documentElement.scrollTop;
871
890
  var inputTop = pos.top + windowTop;
872
891
  var dropdownHeight = this.dropdownContent.offsetHeight;
873
892
  // dropdownFitsBelow = (dropdownBottom < windowBottom)
@@ -888,41 +907,31 @@
888
907
  this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px");
889
908
  // close menu on window scroll
890
909
  this._handleWindowScroll = function() {
891
- return _this8._closeDropdown();
910
+ return _this7._closeDropdown();
892
911
  };
893
912
  window.addEventListener("scroll", this._handleWindowScroll);
894
913
  }
895
914
  }
896
915
  }
897
- }, {
898
- key: "_getClosestListItem",
899
- value: function _getClosestListItem(target) {
900
- var el = target;
901
- while (el && el !== this.countryList && !el.classList.contains("iti__country")) {
902
- el = el.parentNode;
903
- }
904
- // if we reached the countryList element, then return null
905
- return el === this.countryList ? null : el;
906
- }
907
916
  }, {
908
917
  key: "_bindDropdownListeners",
909
918
  value: function _bindDropdownListeners() {
910
- var _this9 = this;
919
+ var _this8 = this;
911
920
  // when mouse over a list item, just highlight that one
912
921
  // we add the class "highlight", so if they hit "enter" we know which one to select
913
922
  this._handleMouseoverCountryList = function(e) {
914
923
  // handle event delegation, as we're listening for this event on the countryList
915
- var listItem = _this9._getClosestListItem(e.target);
924
+ var listItem = e.target.closest(".iti__country");
916
925
  if (listItem) {
917
- _this9._highlightListItem(listItem, false);
926
+ _this8._highlightListItem(listItem, false);
918
927
  }
919
928
  };
920
929
  this.countryList.addEventListener("mouseover", this._handleMouseoverCountryList);
921
930
  // listen for country selection
922
931
  this._handleClickCountryList = function(e) {
923
- var listItem = _this9._getClosestListItem(e.target);
932
+ var listItem = e.target.closest(".iti__country");
924
933
  if (listItem) {
925
- _this9._selectListItem(listItem);
934
+ _this8._selectListItem(listItem);
926
935
  }
927
936
  };
928
937
  this.countryList.addEventListener("click", this._handleClickCountryList);
@@ -932,7 +941,7 @@
932
941
  var isOpening = true;
933
942
  this._handleClickOffToClose = function() {
934
943
  if (!isOpening) {
935
- _this9._closeDropdown();
944
+ _this8._closeDropdown();
936
945
  }
937
946
  isOpening = false;
938
947
  };
@@ -951,23 +960,23 @@
951
960
  e.stopPropagation();
952
961
  // up and down to navigate
953
962
  if (e.key === "ArrowUp" || e.key === "ArrowDown") {
954
- _this9._handleUpDownKey(e.key);
963
+ _this8._handleUpDownKey(e.key);
955
964
  } else if (e.key === "Enter") {
956
- _this9._handleEnterKey();
965
+ _this8._handleEnterKey();
957
966
  } else if (e.key === "Escape") {
958
- _this9._closeDropdown();
967
+ _this8._closeDropdown();
959
968
  }
960
969
  }
961
970
  // alpha chars to perform search
962
971
  // regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
963
- if (!_this9.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
972
+ if (!_this8.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
964
973
  e.stopPropagation();
965
974
  // jump to countries that start with the query string
966
975
  if (queryTimer) {
967
976
  clearTimeout(queryTimer);
968
977
  }
969
978
  query += e.key.toLowerCase();
970
- _this9._searchForCountry(query);
979
+ _this8._searchForCountry(query);
971
980
  // if the timer hits 1 second, reset the query
972
981
  queryTimer = setTimeout(function() {
973
982
  query = "";
@@ -977,11 +986,11 @@
977
986
  document.addEventListener("keydown", this._handleKeydownOnDropdown);
978
987
  if (this.options.countrySearch) {
979
988
  var doFilter = function doFilter() {
980
- var inputQuery = _this9.searchInput.value.trim();
989
+ var inputQuery = _this8.searchInput.value.trim();
981
990
  if (inputQuery) {
982
- _this9._filterCountries(inputQuery.toLowerCase());
991
+ _this8._filterCountries(inputQuery.toLowerCase());
983
992
  } else {
984
- _this9._filterCountries(null, true);
993
+ _this8._filterCountries(null, true);
985
994
  }
986
995
  };
987
996
  var keyupTimer = null;
@@ -1012,7 +1021,7 @@
1012
1021
  var c = this.countries[i];
1013
1022
  var nameLower = c.name.toLowerCase();
1014
1023
  var fullDialCode = "+".concat(c.dialCode);
1015
- if (isReset || nameLower.includes(query) || fullDialCode.includes(query)) {
1024
+ if (isReset || nameLower.includes(query) || fullDialCode.includes(query) || c.iso2.includes(query)) {
1016
1025
  this.countryList.appendChild(c.node);
1017
1026
  // highlight the first item
1018
1027
  if (isFirst) {
@@ -1074,7 +1083,7 @@
1074
1083
  value: function _updateValFromNumber(fullNumber) {
1075
1084
  var number = fullNumber;
1076
1085
  if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
1077
- var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
1086
+ var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.showSelectedDialCode;
1078
1087
  var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
1079
1088
  var format = useNational ? NATIONAL : INTERNATIONAL;
1080
1089
  number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
@@ -1103,8 +1112,8 @@
1103
1112
  }
1104
1113
  number = "+".concat(number);
1105
1114
  }
1106
- // if separateDialCode enabled, then consider the selected dial code to be part of the number
1107
- if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") {
1115
+ // if showSelectedDialCode enabled, then consider the selected dial code to be part of the number
1116
+ if (this.options.showSelectedDialCode && selectedDialCode && number.charAt(0) !== "+") {
1108
1117
  number = "+".concat(selectedDialCode).concat(number);
1109
1118
  }
1110
1119
  // try and extract valid dial code from input
@@ -1188,7 +1197,7 @@
1188
1197
  }, {
1189
1198
  key: "_setFlag",
1190
1199
  value: function _setFlag(countryCode) {
1191
- var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, separateDialCode = _this$options3.separateDialCode, showFlags = _this$options3.showFlags;
1200
+ var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, showSelectedDialCode = _this$options3.showSelectedDialCode, showFlags = _this$options3.showFlags;
1192
1201
  var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
1193
1202
  // do this first as it will throw an error and stop if countryCode is invalid
1194
1203
  this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
@@ -1199,8 +1208,8 @@
1199
1208
  if (showFlags) {
1200
1209
  this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode));
1201
1210
  }
1202
- this._setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode);
1203
- if (separateDialCode) {
1211
+ this._setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode);
1212
+ if (showSelectedDialCode) {
1204
1213
  var dialCode = this.selectedCountryData.dialCode ? "+".concat(this.selectedCountryData.dialCode) : "";
1205
1214
  this.selectedDialCode.innerHTML = dialCode;
1206
1215
  // offsetWidth is zero if input is in a hidden container during initialisation
@@ -1234,12 +1243,12 @@
1234
1243
  }
1235
1244
  }, {
1236
1245
  key: "_setSelectedCountryFlagTitleAttribute",
1237
- value: function _setSelectedCountryFlagTitleAttribute(countryCode, separateDialCode) {
1246
+ value: function _setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode) {
1238
1247
  if (!this.selectedFlag) {
1239
1248
  return;
1240
1249
  }
1241
1250
  var title;
1242
- if (countryCode && !separateDialCode) {
1251
+ if (countryCode && !showSelectedDialCode) {
1243
1252
  title = "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode);
1244
1253
  } else if (countryCode) {
1245
1254
  // For screen reader output, we don't want to include the dial code in the reader output twice
@@ -1289,10 +1298,6 @@
1289
1298
  this._updateDialCode(listItem.getAttribute("data-dial-code"));
1290
1299
  // focus the input
1291
1300
  this.telInput.focus();
1292
- // put cursor at end - this fix is required for FF and IE11 (with auto inserting dial code),
1293
- // who try to put the cursor at the beginning the first time
1294
- var len = this.telInput.value.length;
1295
- this.telInput.setSelectionRange(len, len);
1296
1301
  if (flagChanged) {
1297
1302
  this._triggerCountryChange();
1298
1303
  }
@@ -1329,7 +1334,7 @@
1329
1334
  value: function _scrollTo(element, middle) {
1330
1335
  var container = this.dropdownContent;
1331
1336
  // windowTop from https://stackoverflow.com/a/14384091/217866
1332
- var windowTop = window.pageYOffset || document.documentElement.scrollTop;
1337
+ var windowTop = document.documentElement.scrollTop;
1333
1338
  var containerHeight = container.offsetHeight;
1334
1339
  var containerTop = container.getBoundingClientRect().top + windowTop;
1335
1340
  var containerBottom = containerTop + containerHeight;
@@ -1424,8 +1429,8 @@
1424
1429
  var dialCode = this.selectedCountryData.dialCode;
1425
1430
  var prefix;
1426
1431
  var numericVal = this._getNumeric(val);
1427
- if (this.options.separateDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
1428
- // when using separateDialCode, it is visible so is effectively part of the typed number
1432
+ if (this.options.showSelectedDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
1433
+ // when using showSelectedDialCode, it is visible so is effectively part of the typed number
1429
1434
  prefix = "+".concat(dialCode);
1430
1435
  } else {
1431
1436
  prefix = "";
@@ -1436,7 +1441,7 @@
1436
1441
  key: "_beforeSetNumber",
1437
1442
  value: function _beforeSetNumber(fullNumber) {
1438
1443
  var number = fullNumber;
1439
- if (this.options.separateDialCode) {
1444
+ if (this.options.showSelectedDialCode) {
1440
1445
  var dialCode = this._getDialCode(number);
1441
1446
  // if there is a valid dial code
1442
1447
  if (dialCode) {
@@ -1494,7 +1499,7 @@
1494
1499
  this.selectedFlag.removeEventListener("click", this._handleClickSelectedFlag);
1495
1500
  this.flagsContainer.removeEventListener("keydown", this._handleFlagsContainerKeydown);
1496
1501
  // label click hack
1497
- var label = this._getClosestLabel();
1502
+ var label = this.telInput.closest("label");
1498
1503
  if (label) {
1499
1504
  label.removeEventListener("click", this._handleLabelClick);
1500
1505
  }
@@ -1565,13 +1570,13 @@
1565
1570
  key: "isValidNumber",
1566
1571
  value: function isValidNumber() {
1567
1572
  var val = this._getFullNumber().trim();
1568
- return window.intlTelInputUtils ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2) : null;
1573
+ return window.intlTelInputUtils ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2) : null;
1569
1574
  }
1570
1575
  }, {
1571
- key: "isPossibleNumber",
1572
- value: function isPossibleNumber() {
1576
+ key: "isValidNumberPrecise",
1577
+ value: function isValidNumberPrecise() {
1573
1578
  var val = this._getFullNumber().trim();
1574
- return window.intlTelInputUtils ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2) : null;
1579
+ return window.intlTelInputUtils ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2) : null;
1575
1580
  }
1576
1581
  }, {
1577
1582
  key: "setCountry",
@@ -1654,7 +1659,7 @@
1654
1659
  // default options
1655
1660
  intlTelInputGlobals.defaults = defaults;
1656
1661
  // version
1657
- intlTelInputGlobals.version = "18.5.2";
1662
+ intlTelInputGlobals.version = "19.0.0";
1658
1663
  var pluginName = "intlTelInput";
1659
1664
  // A really lightweight plugin wrapper around the constructor,
1660
1665
  // preventing against multiple instantiations