intl-tel-input 18.5.3 → 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.
- package/README.md +42 -28
- package/build/css/demo.css +1 -1
- package/build/css/intlTelInput.css +28 -20
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput-jquery.js +158 -151
- package/build/js/intlTelInput-jquery.min.js +3 -3
- package/build/js/intlTelInput.js +158 -151
- package/build/js/intlTelInput.min.js +3 -3
- package/composer.json +1 -1
- package/demo.html +5 -5
- package/grunt/replace.js +1 -7
- package/package.json +1 -1
- package/spec.html +6 -4
- package/src/css/demo.scss +1 -1
- package/src/css/intlTelInput.scss +41 -30
- package/src/js/intlTelInput.js +76 -125
- package/src/spec/helpers/helpers.js +23 -10
- package/src/spec/tests/core/countrychangeEvent.js +1 -1
- package/src/spec/tests/core/dropdownShortcuts.js +3 -2
- package/src/spec/tests/core/initialValues.js +2 -3
- package/src/spec/tests/methods/getSelectedCountryData.js +1 -1
- package/src/spec/tests/methods/isValidNumber.js +15 -32
- package/src/spec/tests/methods/isValidNumberPrecise.js +73 -0
- package/src/spec/tests/methods/setCountry.js +4 -4
- package/src/spec/tests/options/allowDropdown.js +3 -3
- package/src/spec/tests/options/autoInsertDialCode.js +1 -3
- package/src/spec/tests/options/autoPlaceholder.js +5 -5
- package/src/spec/tests/options/{customContainer.js → containerClass.js} +3 -3
- package/src/spec/tests/options/countrySearch.js +63 -0
- package/src/spec/tests/options/customPlaceholder.js +1 -1
- package/src/spec/tests/options/preferredCountries.js +3 -1
- package/src/spec/tests/options/{separateDialCode.js → showSelectedDialCode.js} +7 -7
- package/src/spec/tests/methods/isPossibleNumber.js +0 -56
package/build/js/intlTelInput.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* International Telephone Input
|
|
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
|
*/
|
|
@@ -66,6 +66,52 @@
|
|
|
66
66
|
}
|
|
67
67
|
return obj;
|
|
68
68
|
}
|
|
69
|
+
function _slicedToArray(arr, i) {
|
|
70
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
71
|
+
}
|
|
72
|
+
function _nonIterableRest() {
|
|
73
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
74
|
+
}
|
|
75
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
76
|
+
if (!o) return;
|
|
77
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
78
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
79
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
80
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
81
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
82
|
+
}
|
|
83
|
+
function _arrayLikeToArray(arr, len) {
|
|
84
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
85
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) {
|
|
86
|
+
arr2[i] = arr[i];
|
|
87
|
+
}
|
|
88
|
+
return arr2;
|
|
89
|
+
}
|
|
90
|
+
function _iterableToArrayLimit(arr, i) {
|
|
91
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
92
|
+
if (null != _i) {
|
|
93
|
+
var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1;
|
|
94
|
+
try {
|
|
95
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) {
|
|
96
|
+
if (Object(_i) !== _i) return;
|
|
97
|
+
_n = !1;
|
|
98
|
+
} else for (;!(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
|
|
99
|
+
}
|
|
100
|
+
} catch (err) {
|
|
101
|
+
_d = !0, _e = err;
|
|
102
|
+
} finally {
|
|
103
|
+
try {
|
|
104
|
+
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
|
|
105
|
+
} finally {
|
|
106
|
+
if (_d) throw _e;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
return _arr;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
function _arrayWithHoles(arr) {
|
|
113
|
+
if (Array.isArray(arr)) return arr;
|
|
114
|
+
}
|
|
69
115
|
function _classCallCheck(instance, Constructor) {
|
|
70
116
|
if (!(instance instanceof Constructor)) {
|
|
71
117
|
throw new TypeError("Cannot call a class as a function");
|
|
@@ -127,9 +173,9 @@
|
|
|
127
173
|
// add a placeholder in the input with an example number for the selected country
|
|
128
174
|
autoPlaceholder: "polite",
|
|
129
175
|
// add a country search input at the top of the dropdown
|
|
130
|
-
countrySearch:
|
|
176
|
+
countrySearch: true,
|
|
131
177
|
// modify the parentClass
|
|
132
|
-
|
|
178
|
+
containerClass: "",
|
|
133
179
|
// modify the auto placeholder
|
|
134
180
|
customPlaceholder: null,
|
|
135
181
|
// append menu to specified element
|
|
@@ -137,29 +183,29 @@
|
|
|
137
183
|
// don't display these countries
|
|
138
184
|
excludeCountries: [],
|
|
139
185
|
// fix the dropdown width to the input width (rather than being as wide as the longest country name)
|
|
140
|
-
fixDropdownWidth:
|
|
186
|
+
fixDropdownWidth: true,
|
|
141
187
|
// format the input value during initialisation and on setNumber
|
|
142
188
|
formatOnDisplay: true,
|
|
143
189
|
// geoIp lookup function
|
|
144
190
|
geoIpLookup: null,
|
|
145
191
|
// inject a hidden input with this name, and on submit, populate it with the result of getNumber
|
|
146
|
-
hiddenInput:
|
|
192
|
+
hiddenInput: null,
|
|
193
|
+
// internationalise the plugin text e.g. search input placeholder, country names
|
|
194
|
+
i18n: {},
|
|
147
195
|
// initial country
|
|
148
196
|
initialCountry: "",
|
|
149
|
-
// localized country names e.g. { 'de': 'Deutschland' }
|
|
150
|
-
localizedCountries: null,
|
|
151
197
|
// national vs international formatting for numbers e.g. placeholders and displaying existing numbers
|
|
152
198
|
nationalMode: true,
|
|
153
199
|
// display only these countries
|
|
154
200
|
onlyCountries: [],
|
|
155
201
|
// number type to use for placeholders
|
|
156
202
|
placeholderNumberType: "MOBILE",
|
|
157
|
-
// the countries at the top of the list
|
|
158
|
-
preferredCountries: [
|
|
159
|
-
//
|
|
160
|
-
separateDialCode: false,
|
|
161
|
-
// option to hide the flags - must be used with separateDialCode, or allowDropdown=false
|
|
203
|
+
// the countries at the top of the list
|
|
204
|
+
preferredCountries: [],
|
|
205
|
+
// option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false
|
|
162
206
|
showFlags: true,
|
|
207
|
+
// display the international dial code next to the selected flag
|
|
208
|
+
showSelectedDialCode: false,
|
|
163
209
|
// use full screen popup instead of dropdown for country list
|
|
164
210
|
useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? // we cannot just test screen size as some smartphones/website meta tags will report desktop
|
|
165
211
|
// resolutions
|
|
@@ -170,43 +216,31 @@
|
|
|
170
216
|
};
|
|
171
217
|
// https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes#Non-geographic_area_codes
|
|
172
218
|
var regionlessNanpNumbers = [ "800", "822", "833", "844", "855", "866", "877", "880", "881", "882", "883", "884", "885", "886", "887", "888", "889" ];
|
|
173
|
-
// utility function to iterate over an object. can't use Object.entries or native forEach because
|
|
174
|
-
// of IE11
|
|
175
|
-
var forEachProp = function forEachProp(obj, callback) {
|
|
176
|
-
var keys = Object.keys(obj);
|
|
177
|
-
for (var i = 0; i < keys.length; i++) {
|
|
178
|
-
callback(keys[i], obj[keys[i]]);
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
219
|
// run a method on each instance of the plugin
|
|
182
220
|
var forEachInstance = function forEachInstance(method) {
|
|
183
|
-
|
|
184
|
-
|
|
221
|
+
var instances = window.intlTelInputGlobals.instances;
|
|
222
|
+
Object.values(instances).forEach(function(instance) {
|
|
223
|
+
return instance[method]();
|
|
185
224
|
});
|
|
186
225
|
};
|
|
187
226
|
// this is our plugin class that we will create an instance of
|
|
188
227
|
// eslint-disable-next-line no-unused-vars
|
|
189
228
|
var Iti = /*#__PURE__*/ function() {
|
|
190
|
-
function Iti(input
|
|
191
|
-
var
|
|
229
|
+
function Iti(input) {
|
|
230
|
+
var customOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
192
231
|
_classCallCheck(this, Iti);
|
|
193
232
|
this.id = id++;
|
|
194
233
|
this.telInput = input;
|
|
195
234
|
this.activeItem = null;
|
|
196
235
|
this.highlightedItem = null;
|
|
197
236
|
// process specified options / defaults
|
|
198
|
-
|
|
199
|
-
var customOptions = options || {};
|
|
200
|
-
this.options = {};
|
|
201
|
-
forEachProp(defaults, function(key, value) {
|
|
202
|
-
_this.options[key] = customOptions.hasOwnProperty(key) ? customOptions[key] : value;
|
|
203
|
-
});
|
|
237
|
+
this.options = Object.assign({}, defaults, customOptions);
|
|
204
238
|
this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
|
|
205
239
|
}
|
|
206
240
|
_createClass(Iti, [ {
|
|
207
241
|
key: "_init",
|
|
208
242
|
value: function _init() {
|
|
209
|
-
var
|
|
243
|
+
var _this = this;
|
|
210
244
|
// if showing fullscreen popup, do not fix the width
|
|
211
245
|
if (this.options.useFullscreenPopup) {
|
|
212
246
|
this.options.fixDropdownWidth = false;
|
|
@@ -219,13 +253,13 @@
|
|
|
219
253
|
if (this.options.nationalMode) {
|
|
220
254
|
this.options.autoInsertDialCode = false;
|
|
221
255
|
}
|
|
222
|
-
// if
|
|
223
|
-
if (this.options.
|
|
256
|
+
// if showSelectedDialCode enabled, do not insert dial codes
|
|
257
|
+
if (this.options.showSelectedDialCode) {
|
|
224
258
|
this.options.autoInsertDialCode = false;
|
|
225
259
|
}
|
|
226
260
|
// force showFlags=true if there's a dropdown and we're not displaying the dial code,
|
|
227
261
|
// as otherwise you just have a down arrow on it's own which doesn't make sense
|
|
228
|
-
var forceShowFlags = this.options.allowDropdown && !this.options.
|
|
262
|
+
var forceShowFlags = this.options.allowDropdown && !this.options.showSelectedDialCode;
|
|
229
263
|
if (!this.options.showFlags && forceShowFlags) {
|
|
230
264
|
this.options.showFlags = true;
|
|
231
265
|
}
|
|
@@ -240,12 +274,12 @@
|
|
|
240
274
|
// complete
|
|
241
275
|
if (typeof Promise !== "undefined") {
|
|
242
276
|
var autoCountryPromise = new Promise(function(resolve, reject) {
|
|
243
|
-
|
|
244
|
-
|
|
277
|
+
_this.resolveAutoCountryPromise = resolve;
|
|
278
|
+
_this.rejectAutoCountryPromise = reject;
|
|
245
279
|
});
|
|
246
280
|
var utilsScriptPromise = new Promise(function(resolve, reject) {
|
|
247
|
-
|
|
248
|
-
|
|
281
|
+
_this.resolveUtilsScriptPromise = resolve;
|
|
282
|
+
_this.rejectUtilsScriptPromise = reject;
|
|
249
283
|
});
|
|
250
284
|
this.promise = Promise.all([ autoCountryPromise, utilsScriptPromise ]);
|
|
251
285
|
} else {
|
|
@@ -276,12 +310,10 @@
|
|
|
276
310
|
this._processCountryCodes();
|
|
277
311
|
// process the preferredCountries
|
|
278
312
|
this._processPreferredCountries();
|
|
279
|
-
// translate
|
|
280
|
-
|
|
281
|
-
this._translateCountriesByLocale();
|
|
282
|
-
}
|
|
313
|
+
// translate country names according to i18n option
|
|
314
|
+
this._translateCountryNames();
|
|
283
315
|
// sort countries by name
|
|
284
|
-
if (this.options.onlyCountries.length || this.options.
|
|
316
|
+
if (this.options.onlyCountries.length || this.options.i18n) {
|
|
285
317
|
this.countries.sort(this._countryNameSort);
|
|
286
318
|
}
|
|
287
319
|
}
|
|
@@ -326,12 +358,12 @@
|
|
|
326
358
|
}
|
|
327
359
|
}
|
|
328
360
|
}, {
|
|
329
|
-
key: "
|
|
330
|
-
value: function
|
|
361
|
+
key: "_translateCountryNames",
|
|
362
|
+
value: function _translateCountryNames() {
|
|
331
363
|
for (var i = 0; i < this.countries.length; i++) {
|
|
332
364
|
var iso = this.countries[i].iso2.toLowerCase();
|
|
333
|
-
if (this.options.
|
|
334
|
-
this.countries[i].name = this.options.
|
|
365
|
+
if (this.options.i18n.hasOwnProperty(iso)) {
|
|
366
|
+
this.countries[i].name = this.options.i18n[iso];
|
|
335
367
|
}
|
|
336
368
|
}
|
|
337
369
|
}
|
|
@@ -404,7 +436,8 @@
|
|
|
404
436
|
value: function _createEl(name, attrs, container) {
|
|
405
437
|
var el = document.createElement(name);
|
|
406
438
|
if (attrs) {
|
|
407
|
-
|
|
439
|
+
Object.entries(attrs).forEach(function(_ref) {
|
|
440
|
+
var _ref2 = _slicedToArray(_ref, 2), key = _ref2[0], value = _ref2[1];
|
|
408
441
|
return el.setAttribute(key, value);
|
|
409
442
|
});
|
|
410
443
|
}
|
|
@@ -424,27 +457,30 @@
|
|
|
424
457
|
if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
|
|
425
458
|
this.telInput.setAttribute("autocomplete", "off");
|
|
426
459
|
}
|
|
427
|
-
var _this$options = this.options, allowDropdown = _this$options.allowDropdown,
|
|
460
|
+
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;
|
|
428
461
|
// containers (mostly for positioning)
|
|
429
462
|
var parentClass = "iti";
|
|
430
463
|
if (allowDropdown) {
|
|
431
464
|
parentClass += " iti--allow-dropdown";
|
|
432
465
|
}
|
|
433
|
-
if (
|
|
434
|
-
parentClass += " iti--
|
|
466
|
+
if (showSelectedDialCode) {
|
|
467
|
+
parentClass += " iti--show-selected-dial-code";
|
|
435
468
|
}
|
|
436
469
|
if (showFlags) {
|
|
437
470
|
parentClass += " iti--show-flags";
|
|
438
471
|
}
|
|
439
|
-
if (
|
|
440
|
-
parentClass += " ".concat(
|
|
472
|
+
if (containerClass) {
|
|
473
|
+
parentClass += " ".concat(containerClass);
|
|
474
|
+
}
|
|
475
|
+
if (!useFullscreenPopup) {
|
|
476
|
+
parentClass += " iti--inline-dropdown";
|
|
441
477
|
}
|
|
442
478
|
var wrapper = this._createEl("div", {
|
|
443
479
|
"class": parentClass
|
|
444
480
|
});
|
|
445
481
|
this.telInput.parentNode.insertBefore(wrapper, this.telInput);
|
|
446
|
-
// only hide the flagsContainer if allowDropdown, showFlags and
|
|
447
|
-
var showFlagsContainer = allowDropdown || showFlags ||
|
|
482
|
+
// only hide the flagsContainer if allowDropdown, showFlags and showSelectedDialCode are all false
|
|
483
|
+
var showFlagsContainer = allowDropdown || showFlags || showSelectedDialCode;
|
|
448
484
|
if (showFlagsContainer) {
|
|
449
485
|
this.flagsContainer = this._createEl("div", {
|
|
450
486
|
"class": "iti__flag-container"
|
|
@@ -462,7 +498,7 @@
|
|
|
462
498
|
"aria-haspopup": "listbox",
|
|
463
499
|
"aria-controls": "iti-".concat(this.id, "__country-listbox"),
|
|
464
500
|
"aria-expanded": "false",
|
|
465
|
-
"aria-label": "
|
|
501
|
+
"aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country"
|
|
466
502
|
}), this.flagsContainer);
|
|
467
503
|
}
|
|
468
504
|
if (showFlags) {
|
|
@@ -473,7 +509,7 @@
|
|
|
473
509
|
if (this.selectedFlag && this.telInput.disabled) {
|
|
474
510
|
this.selectedFlag.setAttribute("aria-disabled", "true");
|
|
475
511
|
}
|
|
476
|
-
if (
|
|
512
|
+
if (showSelectedDialCode) {
|
|
477
513
|
this.selectedDialCode = this._createEl("div", {
|
|
478
514
|
"class": "iti__selected-dial-code"
|
|
479
515
|
}, this.selectedFlag);
|
|
@@ -494,7 +530,7 @@
|
|
|
494
530
|
this.searchInput = this._createEl("input", {
|
|
495
531
|
type: "text",
|
|
496
532
|
"class": "iti__search-input",
|
|
497
|
-
placeholder: "Search"
|
|
533
|
+
placeholder: this.options.i18n.searchPlaceholder || "Search"
|
|
498
534
|
}, this.dropdownContent);
|
|
499
535
|
}
|
|
500
536
|
// country list: preferred countries, then divider, then all countries
|
|
@@ -502,7 +538,7 @@
|
|
|
502
538
|
"class": "iti__country-list",
|
|
503
539
|
id: "iti-".concat(this.id, "__country-listbox"),
|
|
504
540
|
role: "listbox",
|
|
505
|
-
"aria-label": "List of countries"
|
|
541
|
+
"aria-label": this.options.i18n.countryListAriaLabel || "List of countries"
|
|
506
542
|
}, this.dropdownContent);
|
|
507
543
|
if (this.preferredCountries.length && !countrySearch) {
|
|
508
544
|
this._appendListItems(this.preferredCountries, "iti__preferred", true);
|
|
@@ -517,6 +553,8 @@
|
|
|
517
553
|
var dropdownClasses = "iti iti--container";
|
|
518
554
|
if (useFullscreenPopup) {
|
|
519
555
|
dropdownClasses += " iti--fullscreen-popup";
|
|
556
|
+
} else {
|
|
557
|
+
dropdownClasses += " iti--inline-dropdown";
|
|
520
558
|
}
|
|
521
559
|
if (countrySearch) {
|
|
522
560
|
dropdownClasses += " iti--country-search";
|
|
@@ -530,16 +568,8 @@
|
|
|
530
568
|
}
|
|
531
569
|
}
|
|
532
570
|
if (hiddenInput) {
|
|
533
|
-
var
|
|
534
|
-
var
|
|
535
|
-
if (name) {
|
|
536
|
-
var i = name.lastIndexOf("[");
|
|
537
|
-
// if input name contains square brackets, then give the hidden input the same name,
|
|
538
|
-
// replacing the contents of the last set of brackets with the given hiddenInput name
|
|
539
|
-
if (i !== -1) {
|
|
540
|
-
hiddenInputName = "".concat(name.substr(0, i), "[").concat(hiddenInputName, "]");
|
|
541
|
-
}
|
|
542
|
-
}
|
|
571
|
+
var telInputName = this.telInput.getAttribute("name");
|
|
572
|
+
var hiddenInputName = hiddenInput(telInputName);
|
|
543
573
|
this.hiddenInput = this._createEl("input", {
|
|
544
574
|
type: "hidden",
|
|
545
575
|
name: hiddenInputName
|
|
@@ -637,39 +667,30 @@
|
|
|
637
667
|
}, {
|
|
638
668
|
key: "_initHiddenInputListener",
|
|
639
669
|
value: function _initHiddenInputListener() {
|
|
640
|
-
var
|
|
670
|
+
var _this2 = this;
|
|
641
671
|
this._handleHiddenInputSubmit = function() {
|
|
642
|
-
|
|
672
|
+
_this2.hiddenInput.value = _this2.getNumber();
|
|
643
673
|
};
|
|
644
674
|
if (this.telInput.form) {
|
|
645
675
|
this.telInput.form.addEventListener("submit", this._handleHiddenInputSubmit);
|
|
646
676
|
}
|
|
647
677
|
}
|
|
648
|
-
}, {
|
|
649
|
-
key: "_getClosestLabel",
|
|
650
|
-
value: function _getClosestLabel() {
|
|
651
|
-
var el = this.telInput;
|
|
652
|
-
while (el && el.tagName !== "LABEL") {
|
|
653
|
-
el = el.parentNode;
|
|
654
|
-
}
|
|
655
|
-
return el;
|
|
656
|
-
}
|
|
657
678
|
}, {
|
|
658
679
|
key: "_initDropdownListeners",
|
|
659
680
|
value: function _initDropdownListeners() {
|
|
660
|
-
var
|
|
681
|
+
var _this3 = this;
|
|
661
682
|
// hack for input nested inside label (which is valid markup): clicking the selected-flag to
|
|
662
683
|
// open the dropdown would then automatically trigger a 2nd click on the input which would
|
|
663
684
|
// close it again
|
|
664
685
|
this._handleLabelClick = function(e) {
|
|
665
686
|
// if the dropdown is closed, then focus the input, else ignore the click
|
|
666
|
-
if (
|
|
667
|
-
|
|
687
|
+
if (_this3.dropdownContent.classList.contains("iti__hide")) {
|
|
688
|
+
_this3.telInput.focus();
|
|
668
689
|
} else {
|
|
669
690
|
e.preventDefault();
|
|
670
691
|
}
|
|
671
692
|
};
|
|
672
|
-
var label = this.
|
|
693
|
+
var label = this.telInput.closest("label");
|
|
673
694
|
if (label) {
|
|
674
695
|
label.addEventListener("click", this._handleLabelClick);
|
|
675
696
|
}
|
|
@@ -678,24 +699,24 @@
|
|
|
678
699
|
// only intercept this event if we're opening the dropdown
|
|
679
700
|
// else let it bubble up to the top ("click-off-to-close" listener)
|
|
680
701
|
// we cannot just stopPropagation as it may be needed to close another instance
|
|
681
|
-
if (
|
|
682
|
-
|
|
702
|
+
if (_this3.dropdownContent.classList.contains("iti__hide") && !_this3.telInput.disabled && !_this3.telInput.readOnly) {
|
|
703
|
+
_this3._showDropdown();
|
|
683
704
|
}
|
|
684
705
|
};
|
|
685
706
|
this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
|
|
686
707
|
// open dropdown if selected flag is focused and they press up/down/space/enter
|
|
687
708
|
this._handleFlagsContainerKeydown = function(e) {
|
|
688
|
-
var isDropdownHidden =
|
|
709
|
+
var isDropdownHidden = _this3.dropdownContent.classList.contains("iti__hide");
|
|
689
710
|
if (isDropdownHidden && [ "ArrowUp", "ArrowDown", " ", "Enter" ].includes(e.key)) {
|
|
690
711
|
// prevent form from being submitted if "ENTER" was pressed
|
|
691
712
|
e.preventDefault();
|
|
692
713
|
// prevent event from being handled again by document
|
|
693
714
|
e.stopPropagation();
|
|
694
|
-
|
|
715
|
+
_this3._showDropdown();
|
|
695
716
|
}
|
|
696
717
|
// allow navigation from dropdown to input on TAB
|
|
697
718
|
if (e.key === "Tab") {
|
|
698
|
-
|
|
719
|
+
_this3._closeDropdown();
|
|
699
720
|
}
|
|
700
721
|
};
|
|
701
722
|
this.flagsContainer.addEventListener("keydown", this._handleFlagsContainerKeydown);
|
|
@@ -703,7 +724,7 @@
|
|
|
703
724
|
}, {
|
|
704
725
|
key: "_initRequests",
|
|
705
726
|
value: function _initRequests() {
|
|
706
|
-
var
|
|
727
|
+
var _this4 = this;
|
|
707
728
|
// if the user has specified the path to the utils script, fetch it on window.load, else resolve
|
|
708
729
|
if (this.options.utilsScript && !window.intlTelInputUtils) {
|
|
709
730
|
// if the plugin is being initialised after the window.load event has already been fired
|
|
@@ -712,7 +733,7 @@
|
|
|
712
733
|
} else {
|
|
713
734
|
// wait until the load event so we don't block any other requests e.g. the flags image
|
|
714
735
|
window.addEventListener("load", function() {
|
|
715
|
-
window.intlTelInputGlobals.loadUtils(
|
|
736
|
+
window.intlTelInputGlobals.loadUtils(_this4.options.utilsScript);
|
|
716
737
|
});
|
|
717
738
|
}
|
|
718
739
|
} else {
|
|
@@ -757,18 +778,18 @@
|
|
|
757
778
|
}, {
|
|
758
779
|
key: "_initKeyListeners",
|
|
759
780
|
value: function _initKeyListeners() {
|
|
760
|
-
var
|
|
781
|
+
var _this5 = this;
|
|
761
782
|
// update flag on keyup
|
|
762
783
|
this._handleKeyupEvent = function() {
|
|
763
|
-
if (
|
|
764
|
-
|
|
784
|
+
if (_this5._updateFlagFromNumber(_this5.telInput.value)) {
|
|
785
|
+
_this5._triggerCountryChange();
|
|
765
786
|
}
|
|
766
787
|
};
|
|
767
788
|
this.telInput.addEventListener("keyup", this._handleKeyupEvent);
|
|
768
789
|
// update flag on cut/paste events (now supported in all major browsers)
|
|
769
790
|
this._handleClipboardEvent = function() {
|
|
770
791
|
// hack because "paste" event is fired before input is updated
|
|
771
|
-
setTimeout(
|
|
792
|
+
setTimeout(_this5._handleKeyupEvent);
|
|
772
793
|
};
|
|
773
794
|
this.telInput.addEventListener("cut", this._handleClipboardEvent);
|
|
774
795
|
this.telInput.addEventListener("paste", this._handleClipboardEvent);
|
|
@@ -782,10 +803,10 @@
|
|
|
782
803
|
}, {
|
|
783
804
|
key: "_initBlurListeners",
|
|
784
805
|
value: function _initBlurListeners() {
|
|
785
|
-
var
|
|
806
|
+
var _this6 = this;
|
|
786
807
|
// on blur or form submit: if just a dial code then remove it
|
|
787
808
|
this._handleSubmitOrBlurEvent = function() {
|
|
788
|
-
|
|
809
|
+
_this6._removeEmptyDialCode();
|
|
789
810
|
};
|
|
790
811
|
if (this.telInput.form) {
|
|
791
812
|
this.telInput.form.addEventListener("submit", this._handleSubmitOrBlurEvent);
|
|
@@ -811,10 +832,10 @@
|
|
|
811
832
|
}, {
|
|
812
833
|
key: "_trigger",
|
|
813
834
|
value: function _trigger(name) {
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
835
|
+
var e = new Event(name, {
|
|
836
|
+
bubbles: true,
|
|
837
|
+
cancelable: true
|
|
838
|
+
});
|
|
818
839
|
this.telInput.dispatchEvent(e);
|
|
819
840
|
}
|
|
820
841
|
}, {
|
|
@@ -853,14 +874,14 @@
|
|
|
853
874
|
}, {
|
|
854
875
|
key: "_setDropdownPosition",
|
|
855
876
|
value: function _setDropdownPosition() {
|
|
856
|
-
var
|
|
877
|
+
var _this7 = this;
|
|
857
878
|
if (this.options.dropdownContainer) {
|
|
858
879
|
this.options.dropdownContainer.appendChild(this.dropdown);
|
|
859
880
|
}
|
|
860
881
|
if (!this.options.useFullscreenPopup) {
|
|
861
882
|
var pos = this.telInput.getBoundingClientRect();
|
|
862
883
|
// windowTop from https://stackoverflow.com/a/14384091/217866
|
|
863
|
-
var windowTop =
|
|
884
|
+
var windowTop = document.documentElement.scrollTop;
|
|
864
885
|
var inputTop = pos.top + windowTop;
|
|
865
886
|
var dropdownHeight = this.dropdownContent.offsetHeight;
|
|
866
887
|
// dropdownFitsBelow = (dropdownBottom < windowBottom)
|
|
@@ -881,41 +902,31 @@
|
|
|
881
902
|
this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px");
|
|
882
903
|
// close menu on window scroll
|
|
883
904
|
this._handleWindowScroll = function() {
|
|
884
|
-
return
|
|
905
|
+
return _this7._closeDropdown();
|
|
885
906
|
};
|
|
886
907
|
window.addEventListener("scroll", this._handleWindowScroll);
|
|
887
908
|
}
|
|
888
909
|
}
|
|
889
910
|
}
|
|
890
|
-
}, {
|
|
891
|
-
key: "_getClosestListItem",
|
|
892
|
-
value: function _getClosestListItem(target) {
|
|
893
|
-
var el = target;
|
|
894
|
-
while (el && el !== this.countryList && !el.classList.contains("iti__country")) {
|
|
895
|
-
el = el.parentNode;
|
|
896
|
-
}
|
|
897
|
-
// if we reached the countryList element, then return null
|
|
898
|
-
return el === this.countryList ? null : el;
|
|
899
|
-
}
|
|
900
911
|
}, {
|
|
901
912
|
key: "_bindDropdownListeners",
|
|
902
913
|
value: function _bindDropdownListeners() {
|
|
903
|
-
var
|
|
914
|
+
var _this8 = this;
|
|
904
915
|
// when mouse over a list item, just highlight that one
|
|
905
916
|
// we add the class "highlight", so if they hit "enter" we know which one to select
|
|
906
917
|
this._handleMouseoverCountryList = function(e) {
|
|
907
918
|
// handle event delegation, as we're listening for this event on the countryList
|
|
908
|
-
var listItem =
|
|
919
|
+
var listItem = e.target.closest(".iti__country");
|
|
909
920
|
if (listItem) {
|
|
910
|
-
|
|
921
|
+
_this8._highlightListItem(listItem, false);
|
|
911
922
|
}
|
|
912
923
|
};
|
|
913
924
|
this.countryList.addEventListener("mouseover", this._handleMouseoverCountryList);
|
|
914
925
|
// listen for country selection
|
|
915
926
|
this._handleClickCountryList = function(e) {
|
|
916
|
-
var listItem =
|
|
927
|
+
var listItem = e.target.closest(".iti__country");
|
|
917
928
|
if (listItem) {
|
|
918
|
-
|
|
929
|
+
_this8._selectListItem(listItem);
|
|
919
930
|
}
|
|
920
931
|
};
|
|
921
932
|
this.countryList.addEventListener("click", this._handleClickCountryList);
|
|
@@ -925,7 +936,7 @@
|
|
|
925
936
|
var isOpening = true;
|
|
926
937
|
this._handleClickOffToClose = function() {
|
|
927
938
|
if (!isOpening) {
|
|
928
|
-
|
|
939
|
+
_this8._closeDropdown();
|
|
929
940
|
}
|
|
930
941
|
isOpening = false;
|
|
931
942
|
};
|
|
@@ -944,23 +955,23 @@
|
|
|
944
955
|
e.stopPropagation();
|
|
945
956
|
// up and down to navigate
|
|
946
957
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
947
|
-
|
|
958
|
+
_this8._handleUpDownKey(e.key);
|
|
948
959
|
} else if (e.key === "Enter") {
|
|
949
|
-
|
|
960
|
+
_this8._handleEnterKey();
|
|
950
961
|
} else if (e.key === "Escape") {
|
|
951
|
-
|
|
962
|
+
_this8._closeDropdown();
|
|
952
963
|
}
|
|
953
964
|
}
|
|
954
965
|
// alpha chars to perform search
|
|
955
966
|
// regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
|
|
956
|
-
if (!
|
|
967
|
+
if (!_this8.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
|
|
957
968
|
e.stopPropagation();
|
|
958
969
|
// jump to countries that start with the query string
|
|
959
970
|
if (queryTimer) {
|
|
960
971
|
clearTimeout(queryTimer);
|
|
961
972
|
}
|
|
962
973
|
query += e.key.toLowerCase();
|
|
963
|
-
|
|
974
|
+
_this8._searchForCountry(query);
|
|
964
975
|
// if the timer hits 1 second, reset the query
|
|
965
976
|
queryTimer = setTimeout(function() {
|
|
966
977
|
query = "";
|
|
@@ -970,11 +981,11 @@
|
|
|
970
981
|
document.addEventListener("keydown", this._handleKeydownOnDropdown);
|
|
971
982
|
if (this.options.countrySearch) {
|
|
972
983
|
var doFilter = function doFilter() {
|
|
973
|
-
var inputQuery =
|
|
984
|
+
var inputQuery = _this8.searchInput.value.trim();
|
|
974
985
|
if (inputQuery) {
|
|
975
|
-
|
|
986
|
+
_this8._filterCountries(inputQuery.toLowerCase());
|
|
976
987
|
} else {
|
|
977
|
-
|
|
988
|
+
_this8._filterCountries(null, true);
|
|
978
989
|
}
|
|
979
990
|
};
|
|
980
991
|
var keyupTimer = null;
|
|
@@ -1005,7 +1016,7 @@
|
|
|
1005
1016
|
var c = this.countries[i];
|
|
1006
1017
|
var nameLower = c.name.toLowerCase();
|
|
1007
1018
|
var fullDialCode = "+".concat(c.dialCode);
|
|
1008
|
-
if (isReset || nameLower.includes(query) || fullDialCode.includes(query)) {
|
|
1019
|
+
if (isReset || nameLower.includes(query) || fullDialCode.includes(query) || c.iso2.includes(query)) {
|
|
1009
1020
|
this.countryList.appendChild(c.node);
|
|
1010
1021
|
// highlight the first item
|
|
1011
1022
|
if (isFirst) {
|
|
@@ -1067,7 +1078,7 @@
|
|
|
1067
1078
|
value: function _updateValFromNumber(fullNumber) {
|
|
1068
1079
|
var number = fullNumber;
|
|
1069
1080
|
if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
|
|
1070
|
-
var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.
|
|
1081
|
+
var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.showSelectedDialCode;
|
|
1071
1082
|
var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
|
|
1072
1083
|
var format = useNational ? NATIONAL : INTERNATIONAL;
|
|
1073
1084
|
number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
|
|
@@ -1096,8 +1107,8 @@
|
|
|
1096
1107
|
}
|
|
1097
1108
|
number = "+".concat(number);
|
|
1098
1109
|
}
|
|
1099
|
-
// if
|
|
1100
|
-
if (this.options.
|
|
1110
|
+
// if showSelectedDialCode enabled, then consider the selected dial code to be part of the number
|
|
1111
|
+
if (this.options.showSelectedDialCode && selectedDialCode && number.charAt(0) !== "+") {
|
|
1101
1112
|
number = "+".concat(selectedDialCode).concat(number);
|
|
1102
1113
|
}
|
|
1103
1114
|
// try and extract valid dial code from input
|
|
@@ -1181,7 +1192,7 @@
|
|
|
1181
1192
|
}, {
|
|
1182
1193
|
key: "_setFlag",
|
|
1183
1194
|
value: function _setFlag(countryCode) {
|
|
1184
|
-
var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown,
|
|
1195
|
+
var _this$options3 = this.options, allowDropdown = _this$options3.allowDropdown, showSelectedDialCode = _this$options3.showSelectedDialCode, showFlags = _this$options3.showFlags;
|
|
1185
1196
|
var prevCountry = this.selectedCountryData.iso2 ? this.selectedCountryData : {};
|
|
1186
1197
|
// do this first as it will throw an error and stop if countryCode is invalid
|
|
1187
1198
|
this.selectedCountryData = countryCode ? this._getCountryData(countryCode, false, false) : {};
|
|
@@ -1192,8 +1203,8 @@
|
|
|
1192
1203
|
if (showFlags) {
|
|
1193
1204
|
this.selectedFlagInner.setAttribute("class", "iti__flag iti__".concat(countryCode));
|
|
1194
1205
|
}
|
|
1195
|
-
this._setSelectedCountryFlagTitleAttribute(countryCode,
|
|
1196
|
-
if (
|
|
1206
|
+
this._setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode);
|
|
1207
|
+
if (showSelectedDialCode) {
|
|
1197
1208
|
var dialCode = this.selectedCountryData.dialCode ? "+".concat(this.selectedCountryData.dialCode) : "";
|
|
1198
1209
|
this.selectedDialCode.innerHTML = dialCode;
|
|
1199
1210
|
// offsetWidth is zero if input is in a hidden container during initialisation
|
|
@@ -1227,12 +1238,12 @@
|
|
|
1227
1238
|
}
|
|
1228
1239
|
}, {
|
|
1229
1240
|
key: "_setSelectedCountryFlagTitleAttribute",
|
|
1230
|
-
value: function _setSelectedCountryFlagTitleAttribute(countryCode,
|
|
1241
|
+
value: function _setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode) {
|
|
1231
1242
|
if (!this.selectedFlag) {
|
|
1232
1243
|
return;
|
|
1233
1244
|
}
|
|
1234
1245
|
var title;
|
|
1235
|
-
if (countryCode && !
|
|
1246
|
+
if (countryCode && !showSelectedDialCode) {
|
|
1236
1247
|
title = "".concat(this.selectedCountryData.name, ": +").concat(this.selectedCountryData.dialCode);
|
|
1237
1248
|
} else if (countryCode) {
|
|
1238
1249
|
// For screen reader output, we don't want to include the dial code in the reader output twice
|
|
@@ -1282,10 +1293,6 @@
|
|
|
1282
1293
|
this._updateDialCode(listItem.getAttribute("data-dial-code"));
|
|
1283
1294
|
// focus the input
|
|
1284
1295
|
this.telInput.focus();
|
|
1285
|
-
// put cursor at end - this fix is required for FF and IE11 (with auto inserting dial code),
|
|
1286
|
-
// who try to put the cursor at the beginning the first time
|
|
1287
|
-
var len = this.telInput.value.length;
|
|
1288
|
-
this.telInput.setSelectionRange(len, len);
|
|
1289
1296
|
if (flagChanged) {
|
|
1290
1297
|
this._triggerCountryChange();
|
|
1291
1298
|
}
|
|
@@ -1322,7 +1329,7 @@
|
|
|
1322
1329
|
value: function _scrollTo(element, middle) {
|
|
1323
1330
|
var container = this.dropdownContent;
|
|
1324
1331
|
// windowTop from https://stackoverflow.com/a/14384091/217866
|
|
1325
|
-
var windowTop =
|
|
1332
|
+
var windowTop = document.documentElement.scrollTop;
|
|
1326
1333
|
var containerHeight = container.offsetHeight;
|
|
1327
1334
|
var containerTop = container.getBoundingClientRect().top + windowTop;
|
|
1328
1335
|
var containerBottom = containerTop + containerHeight;
|
|
@@ -1417,8 +1424,8 @@
|
|
|
1417
1424
|
var dialCode = this.selectedCountryData.dialCode;
|
|
1418
1425
|
var prefix;
|
|
1419
1426
|
var numericVal = this._getNumeric(val);
|
|
1420
|
-
if (this.options.
|
|
1421
|
-
// when using
|
|
1427
|
+
if (this.options.showSelectedDialCode && val.charAt(0) !== "+" && dialCode && numericVal) {
|
|
1428
|
+
// when using showSelectedDialCode, it is visible so is effectively part of the typed number
|
|
1422
1429
|
prefix = "+".concat(dialCode);
|
|
1423
1430
|
} else {
|
|
1424
1431
|
prefix = "";
|
|
@@ -1429,7 +1436,7 @@
|
|
|
1429
1436
|
key: "_beforeSetNumber",
|
|
1430
1437
|
value: function _beforeSetNumber(fullNumber) {
|
|
1431
1438
|
var number = fullNumber;
|
|
1432
|
-
if (this.options.
|
|
1439
|
+
if (this.options.showSelectedDialCode) {
|
|
1433
1440
|
var dialCode = this._getDialCode(number);
|
|
1434
1441
|
// if there is a valid dial code
|
|
1435
1442
|
if (dialCode) {
|
|
@@ -1487,7 +1494,7 @@
|
|
|
1487
1494
|
this.selectedFlag.removeEventListener("click", this._handleClickSelectedFlag);
|
|
1488
1495
|
this.flagsContainer.removeEventListener("keydown", this._handleFlagsContainerKeydown);
|
|
1489
1496
|
// label click hack
|
|
1490
|
-
var label = this.
|
|
1497
|
+
var label = this.telInput.closest("label");
|
|
1491
1498
|
if (label) {
|
|
1492
1499
|
label.removeEventListener("click", this._handleLabelClick);
|
|
1493
1500
|
}
|
|
@@ -1558,13 +1565,13 @@
|
|
|
1558
1565
|
key: "isValidNumber",
|
|
1559
1566
|
value: function isValidNumber() {
|
|
1560
1567
|
var val = this._getFullNumber().trim();
|
|
1561
|
-
return window.intlTelInputUtils ? intlTelInputUtils.
|
|
1568
|
+
return window.intlTelInputUtils ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2) : null;
|
|
1562
1569
|
}
|
|
1563
1570
|
}, {
|
|
1564
|
-
key: "
|
|
1565
|
-
value: function
|
|
1571
|
+
key: "isValidNumberPrecise",
|
|
1572
|
+
value: function isValidNumberPrecise() {
|
|
1566
1573
|
var val = this._getFullNumber().trim();
|
|
1567
|
-
return window.intlTelInputUtils ? intlTelInputUtils.
|
|
1574
|
+
return window.intlTelInputUtils ? intlTelInputUtils.isValidNumber(val, this.selectedCountryData.iso2) : null;
|
|
1568
1575
|
}
|
|
1569
1576
|
}, {
|
|
1570
1577
|
key: "setCountry",
|
|
@@ -1647,7 +1654,7 @@
|
|
|
1647
1654
|
// default options
|
|
1648
1655
|
intlTelInputGlobals.defaults = defaults;
|
|
1649
1656
|
// version
|
|
1650
|
-
intlTelInputGlobals.version = "
|
|
1657
|
+
intlTelInputGlobals.version = "19.0.0";
|
|
1651
1658
|
// convenience wrapper
|
|
1652
1659
|
return function(input, options) {
|
|
1653
1660
|
var iti = new Iti(input, options);
|