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.
- 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 +159 -154
- package/build/js/intlTelInput-jquery.min.js +3 -3
- package/build/js/intlTelInput.js +159 -154
- 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 +77 -128
- 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
|
@@ -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
|
*/
|
|
@@ -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:
|
|
181
|
+
countrySearch: true,
|
|
136
182
|
// modify the parentClass
|
|
137
|
-
|
|
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:
|
|
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
|
|
163
|
-
preferredCountries: [
|
|
164
|
-
//
|
|
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
|
-
|
|
189
|
-
|
|
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
|
|
196
|
-
var
|
|
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
|
-
|
|
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
|
|
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
|
|
228
|
-
if (this.options.
|
|
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.
|
|
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
|
-
|
|
249
|
-
|
|
282
|
+
_this.resolveAutoCountryPromise = resolve;
|
|
283
|
+
_this.rejectAutoCountryPromise = reject;
|
|
250
284
|
});
|
|
251
285
|
var utilsScriptPromise = new Promise(function(resolve, reject) {
|
|
252
|
-
|
|
253
|
-
|
|
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
|
|
285
|
-
|
|
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.
|
|
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: "
|
|
335
|
-
value: function
|
|
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.
|
|
339
|
-
this.countries[i].name = this.options.
|
|
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
|
-
|
|
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,
|
|
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 (
|
|
439
|
-
parentClass += " iti--
|
|
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 (
|
|
445
|
-
parentClass += "
|
|
477
|
+
if (containerClass) {
|
|
478
|
+
parentClass += " ".concat(containerClass);
|
|
446
479
|
}
|
|
447
|
-
if (
|
|
448
|
-
parentClass += " "
|
|
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
|
|
455
|
-
var showFlagsContainer = allowDropdown || showFlags ||
|
|
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": "
|
|
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 (
|
|
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
|
|
541
|
-
var
|
|
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
|
|
675
|
+
var _this2 = this;
|
|
648
676
|
this._handleHiddenInputSubmit = function() {
|
|
649
|
-
|
|
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
|
|
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 (
|
|
674
|
-
|
|
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.
|
|
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 (
|
|
689
|
-
|
|
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 =
|
|
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
|
-
|
|
720
|
+
_this3._showDropdown();
|
|
702
721
|
}
|
|
703
722
|
// allow navigation from dropdown to input on TAB
|
|
704
723
|
if (e.key === "Tab") {
|
|
705
|
-
|
|
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
|
|
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(
|
|
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
|
|
786
|
+
var _this5 = this;
|
|
768
787
|
// update flag on keyup
|
|
769
788
|
this._handleKeyupEvent = function() {
|
|
770
|
-
if (
|
|
771
|
-
|
|
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(
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
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
|
|
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 =
|
|
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
|
|
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
|
|
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 =
|
|
924
|
+
var listItem = e.target.closest(".iti__country");
|
|
916
925
|
if (listItem) {
|
|
917
|
-
|
|
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 =
|
|
932
|
+
var listItem = e.target.closest(".iti__country");
|
|
924
933
|
if (listItem) {
|
|
925
|
-
|
|
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
|
-
|
|
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
|
-
|
|
963
|
+
_this8._handleUpDownKey(e.key);
|
|
955
964
|
} else if (e.key === "Enter") {
|
|
956
|
-
|
|
965
|
+
_this8._handleEnterKey();
|
|
957
966
|
} else if (e.key === "Escape") {
|
|
958
|
-
|
|
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 (!
|
|
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
|
-
|
|
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 =
|
|
989
|
+
var inputQuery = _this8.searchInput.value.trim();
|
|
981
990
|
if (inputQuery) {
|
|
982
|
-
|
|
991
|
+
_this8._filterCountries(inputQuery.toLowerCase());
|
|
983
992
|
} else {
|
|
984
|
-
|
|
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.
|
|
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
|
|
1107
|
-
if (this.options.
|
|
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,
|
|
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,
|
|
1203
|
-
if (
|
|
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,
|
|
1246
|
+
value: function _setSelectedCountryFlagTitleAttribute(countryCode, showSelectedDialCode) {
|
|
1238
1247
|
if (!this.selectedFlag) {
|
|
1239
1248
|
return;
|
|
1240
1249
|
}
|
|
1241
1250
|
var title;
|
|
1242
|
-
if (countryCode && !
|
|
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 =
|
|
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.
|
|
1428
|
-
// when using
|
|
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.
|
|
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.
|
|
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.
|
|
1573
|
+
return window.intlTelInputUtils ? intlTelInputUtils.isPossibleNumber(val, this.selectedCountryData.iso2) : null;
|
|
1569
1574
|
}
|
|
1570
1575
|
}, {
|
|
1571
|
-
key: "
|
|
1572
|
-
value: function
|
|
1576
|
+
key: "isValidNumberPrecise",
|
|
1577
|
+
value: function isValidNumberPrecise() {
|
|
1573
1578
|
var val = this._getFullNumber().trim();
|
|
1574
|
-
return window.intlTelInputUtils ? intlTelInputUtils.
|
|
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 = "
|
|
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
|