intl-tel-input 25.12.6 → 25.13.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 +5 -5
- package/angular/README.md +1 -1
- package/angular/build/IntlTelInput.js +105 -47
- package/angular/build/IntlTelInputWithUtils.js +105 -47
- package/angular/build/types/intl-tel-input.d.ts +6 -0
- package/build/js/data.js +1 -1
- package/build/js/data.min.js +1 -1
- package/build/js/intlTelInput.d.ts +6 -0
- package/build/js/intlTelInput.js +107 -52
- package/build/js/intlTelInput.min.js +4 -4
- package/build/js/intlTelInputWithUtils.js +107 -52
- package/build/js/intlTelInputWithUtils.min.js +6 -6
- package/package.json +1 -1
- package/react/README.md +1 -1
- package/react/build/IntlTelInput.cjs +106 -51
- package/react/build/IntlTelInput.d.ts +6 -0
- package/react/build/IntlTelInput.js +106 -51
- package/react/build/IntlTelInputWithUtils.cjs +106 -51
- package/react/build/IntlTelInputWithUtils.js +106 -51
- package/vue/README.md +1 -1
- package/vue/build/IntlTelInput.mjs +325 -285
- package/vue/build/IntlTelInputWithUtils.mjs +570 -530
|
@@ -2926,6 +2926,45 @@ var Iti = class _Iti {
|
|
|
2926
2926
|
static _getIsAndroid() {
|
|
2927
2927
|
return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
2928
2928
|
}
|
|
2929
|
+
_updateNumeralSet(str) {
|
|
2930
|
+
if (/[\u0660-\u0669]/.test(str)) {
|
|
2931
|
+
this.userNumeralSet = "arabic-indic";
|
|
2932
|
+
} else if (/[\u06F0-\u06F9]/.test(str)) {
|
|
2933
|
+
this.userNumeralSet = "persian";
|
|
2934
|
+
} else {
|
|
2935
|
+
this.userNumeralSet = "ascii";
|
|
2936
|
+
}
|
|
2937
|
+
}
|
|
2938
|
+
_mapAsciiToUserNumerals(str) {
|
|
2939
|
+
if (!this.userNumeralSet) {
|
|
2940
|
+
this._updateNumeralSet(this.ui.telInput.value);
|
|
2941
|
+
}
|
|
2942
|
+
if (this.userNumeralSet === "ascii") {
|
|
2943
|
+
return str;
|
|
2944
|
+
}
|
|
2945
|
+
const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
|
|
2946
|
+
return str.replace(/[0-9]/g, (d) => String.fromCharCode(base + Number(d)));
|
|
2947
|
+
}
|
|
2948
|
+
// Normalize Eastern Arabic (U+0660-0669) and Persian/Extended Arabic-Indic (U+06F0-06F9) numerals to ASCII 0-9
|
|
2949
|
+
_normaliseNumerals(str) {
|
|
2950
|
+
if (!str) {
|
|
2951
|
+
return "";
|
|
2952
|
+
}
|
|
2953
|
+
this._updateNumeralSet(str);
|
|
2954
|
+
if (this.userNumeralSet === "ascii") {
|
|
2955
|
+
return str;
|
|
2956
|
+
}
|
|
2957
|
+
const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
|
|
2958
|
+
const regex = this.userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
|
|
2959
|
+
return str.replace(regex, (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base)));
|
|
2960
|
+
}
|
|
2961
|
+
_getTelInputValue() {
|
|
2962
|
+
const inputValue = this.ui.telInput.value.trim();
|
|
2963
|
+
return this._normaliseNumerals(inputValue);
|
|
2964
|
+
}
|
|
2965
|
+
_setTelInputValue(asciiValue) {
|
|
2966
|
+
this.ui.telInput.value = this._mapAsciiToUserNumerals(asciiValue);
|
|
2967
|
+
}
|
|
2929
2968
|
_createInitPromises() {
|
|
2930
2969
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
2931
2970
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2960,8 +2999,9 @@ var Iti = class _Iti {
|
|
|
2960
2999
|
//* 1. Extracting a dial code from the given number
|
|
2961
3000
|
//* 2. Using explicit initialCountry
|
|
2962
3001
|
_setInitialState(overrideAutoCountry = false) {
|
|
2963
|
-
const
|
|
2964
|
-
const
|
|
3002
|
+
const attributeValueRaw = this.ui.telInput.getAttribute("value");
|
|
3003
|
+
const attributeValue = this._normaliseNumerals(attributeValueRaw);
|
|
3004
|
+
const inputValue = this._getTelInputValue();
|
|
2965
3005
|
const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
|
|
2966
3006
|
const val = useAttribute ? attributeValue : inputValue;
|
|
2967
3007
|
const dialCode = this._getDialCode(val);
|
|
@@ -3132,35 +3172,34 @@ var Iti = class _Iti {
|
|
|
3132
3172
|
countrySearch
|
|
3133
3173
|
} = this.options;
|
|
3134
3174
|
let userOverrideFormatting = false;
|
|
3135
|
-
if (REGEX.ALPHA_UNICODE.test(this.
|
|
3175
|
+
if (REGEX.ALPHA_UNICODE.test(this._getTelInputValue())) {
|
|
3136
3176
|
userOverrideFormatting = true;
|
|
3137
3177
|
}
|
|
3138
3178
|
const handleInputEvent = (e) => {
|
|
3179
|
+
const inputValue = this._getTelInputValue();
|
|
3139
3180
|
if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
|
|
3140
3181
|
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
3141
|
-
const valueBeforeCaret =
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
);
|
|
3145
|
-
const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
|
|
3146
|
-
this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
|
|
3182
|
+
const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
|
|
3183
|
+
const valueAfterCaret = inputValue.substring(currentCaretPos);
|
|
3184
|
+
this._setTelInputValue(valueBeforeCaret + valueAfterCaret);
|
|
3147
3185
|
this._openDropdownWithPlus();
|
|
3148
3186
|
return;
|
|
3149
3187
|
}
|
|
3150
|
-
if (this._updateCountryFromNumber(
|
|
3188
|
+
if (this._updateCountryFromNumber(inputValue)) {
|
|
3151
3189
|
this._triggerCountryChange();
|
|
3152
3190
|
}
|
|
3153
3191
|
const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
|
|
3154
|
-
const isPaste = e?.inputType === INPUT_TYPES.PASTE &&
|
|
3192
|
+
const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
|
|
3155
3193
|
if (isFormattingChar || isPaste && !strictMode) {
|
|
3156
3194
|
userOverrideFormatting = true;
|
|
3157
|
-
} else if (!REGEX.NON_PLUS_NUMERIC.test(
|
|
3195
|
+
} else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
|
|
3158
3196
|
userOverrideFormatting = false;
|
|
3159
3197
|
}
|
|
3160
3198
|
const isSetNumber = e?.detail && e.detail["isSetNumber"];
|
|
3161
|
-
|
|
3199
|
+
const isAscii = this.userNumeralSet === "ascii";
|
|
3200
|
+
if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
|
|
3162
3201
|
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
3163
|
-
const valueBeforeCaret =
|
|
3202
|
+
const valueBeforeCaret = inputValue.substring(
|
|
3164
3203
|
0,
|
|
3165
3204
|
currentCaretPos
|
|
3166
3205
|
);
|
|
@@ -3172,7 +3211,7 @@ var Iti = class _Iti {
|
|
|
3172
3211
|
const fullNumber = this._getFullNumber();
|
|
3173
3212
|
const formattedValue = formatNumberAsYouType(
|
|
3174
3213
|
fullNumber,
|
|
3175
|
-
|
|
3214
|
+
inputValue,
|
|
3176
3215
|
intlTelInput.utils,
|
|
3177
3216
|
this.selectedCountryData,
|
|
3178
3217
|
this.options.separateDialCode
|
|
@@ -3183,7 +3222,7 @@ var Iti = class _Iti {
|
|
|
3183
3222
|
currentCaretPos,
|
|
3184
3223
|
isDeleteForwards
|
|
3185
3224
|
);
|
|
3186
|
-
this.
|
|
3225
|
+
this._setTelInputValue(formattedValue);
|
|
3187
3226
|
this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
|
|
3188
3227
|
}
|
|
3189
3228
|
};
|
|
@@ -3206,12 +3245,18 @@ var Iti = class _Iti {
|
|
|
3206
3245
|
return;
|
|
3207
3246
|
}
|
|
3208
3247
|
if (strictMode) {
|
|
3209
|
-
const
|
|
3210
|
-
const alreadyHasPlus =
|
|
3248
|
+
const inputValue = this._getTelInputValue();
|
|
3249
|
+
const alreadyHasPlus = inputValue.startsWith("+");
|
|
3211
3250
|
const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
|
|
3212
|
-
const
|
|
3251
|
+
const normalisedKey = this._normaliseNumerals(e.key);
|
|
3252
|
+
const isNumeric = /^[0-9]$/.test(normalisedKey);
|
|
3213
3253
|
const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
|
|
3214
|
-
const
|
|
3254
|
+
const input = this.ui.telInput;
|
|
3255
|
+
const selStart = input.selectionStart;
|
|
3256
|
+
const selEnd = input.selectionEnd;
|
|
3257
|
+
const before = inputValue.slice(0, selStart);
|
|
3258
|
+
const after = inputValue.slice(selEnd);
|
|
3259
|
+
const newValue = before + e.key + after;
|
|
3215
3260
|
const newFullNumber = this._getFullNumber(newValue);
|
|
3216
3261
|
const coreNumber = intlTelInput.utils.getCoreNumber(
|
|
3217
3262
|
newFullNumber,
|
|
@@ -3238,34 +3283,38 @@ var Iti = class _Iti {
|
|
|
3238
3283
|
const input = this.ui.telInput;
|
|
3239
3284
|
const selStart = input.selectionStart;
|
|
3240
3285
|
const selEnd = input.selectionEnd;
|
|
3241
|
-
const
|
|
3242
|
-
const
|
|
3286
|
+
const inputValue = this._getTelInputValue();
|
|
3287
|
+
const before = inputValue.slice(0, selStart);
|
|
3288
|
+
const after = inputValue.slice(selEnd);
|
|
3243
3289
|
const iso2 = this.selectedCountryData.iso2;
|
|
3244
|
-
const
|
|
3290
|
+
const pastedRaw = e.clipboardData.getData("text");
|
|
3291
|
+
const pasted = this._normaliseNumerals(pastedRaw);
|
|
3245
3292
|
const initialCharSelected = selStart === 0 && selEnd > 0;
|
|
3246
|
-
const allowLeadingPlus = !
|
|
3293
|
+
const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
|
|
3247
3294
|
const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
|
|
3248
3295
|
const hasLeadingPlus = allowedChars.startsWith("+");
|
|
3249
3296
|
const numerics = allowedChars.replace(/\+/g, "");
|
|
3250
3297
|
const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
|
|
3251
3298
|
let newVal = before + sanitised + after;
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
}
|
|
3260
|
-
if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
|
|
3261
|
-
if (input.selectionEnd === input.value.length) {
|
|
3262
|
-
const trimLength = coreNumber.length - this.maxCoreNumberLength;
|
|
3263
|
-
newVal = newVal.slice(0, newVal.length - trimLength);
|
|
3264
|
-
} else {
|
|
3299
|
+
if (newVal.length > 5) {
|
|
3300
|
+
let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
|
|
3301
|
+
while (coreNumber.length === 0 && newVal.length > 0) {
|
|
3302
|
+
newVal = newVal.slice(0, -1);
|
|
3303
|
+
coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
|
|
3304
|
+
}
|
|
3305
|
+
if (!coreNumber) {
|
|
3265
3306
|
return;
|
|
3266
3307
|
}
|
|
3308
|
+
if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
|
|
3309
|
+
if (input.selectionEnd === inputValue.length) {
|
|
3310
|
+
const trimLength = coreNumber.length - this.maxCoreNumberLength;
|
|
3311
|
+
newVal = newVal.slice(0, newVal.length - trimLength);
|
|
3312
|
+
} else {
|
|
3313
|
+
return;
|
|
3314
|
+
}
|
|
3315
|
+
}
|
|
3267
3316
|
}
|
|
3268
|
-
|
|
3317
|
+
this._setTelInputValue(newVal);
|
|
3269
3318
|
const caretPos = selStart + sanitised.length;
|
|
3270
3319
|
input.setSelectionRange(caretPos, caretPos);
|
|
3271
3320
|
input.dispatchEvent(new InputEvent("input", { bubbles: true }));
|
|
@@ -3517,7 +3566,7 @@ var Iti = class _Iti {
|
|
|
3517
3566
|
);
|
|
3518
3567
|
}
|
|
3519
3568
|
number = this._beforeSetNumber(number);
|
|
3520
|
-
this.
|
|
3569
|
+
this._setTelInputValue(number);
|
|
3521
3570
|
}
|
|
3522
3571
|
//* Check if need to select a new country based on the given number
|
|
3523
3572
|
//* Note: called from _setInitialState, keyup handler, setNumber.
|
|
@@ -3691,7 +3740,8 @@ var Iti = class _Iti {
|
|
|
3691
3740
|
const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
|
|
3692
3741
|
this._updateDialCode(dialCode);
|
|
3693
3742
|
if (this.options.formatOnDisplay) {
|
|
3694
|
-
this.
|
|
3743
|
+
const inputValue = this._getTelInputValue();
|
|
3744
|
+
this._updateValFromNumber(inputValue);
|
|
3695
3745
|
}
|
|
3696
3746
|
this.ui.telInput.focus();
|
|
3697
3747
|
if (countryChanged) {
|
|
@@ -3722,7 +3772,7 @@ var Iti = class _Iti {
|
|
|
3722
3772
|
//* Replace any existing dial code with the new one
|
|
3723
3773
|
//* Note: called from _selectListItem and setCountry
|
|
3724
3774
|
_updateDialCode(newDialCodeBare) {
|
|
3725
|
-
const inputVal = this.
|
|
3775
|
+
const inputVal = this._getTelInputValue();
|
|
3726
3776
|
const newDialCode = `+${newDialCodeBare}`;
|
|
3727
3777
|
let newNumber;
|
|
3728
3778
|
if (inputVal.startsWith("+")) {
|
|
@@ -3732,7 +3782,7 @@ var Iti = class _Iti {
|
|
|
3732
3782
|
} else {
|
|
3733
3783
|
newNumber = newDialCode;
|
|
3734
3784
|
}
|
|
3735
|
-
this.
|
|
3785
|
+
this._setTelInputValue(newNumber);
|
|
3736
3786
|
}
|
|
3737
3787
|
}
|
|
3738
3788
|
//* Try and extract a valid international dial code from a full telephone number.
|
|
@@ -3769,7 +3819,7 @@ var Iti = class _Iti {
|
|
|
3769
3819
|
}
|
|
3770
3820
|
//* Get the input val, adding the dial code if separateDialCode is enabled.
|
|
3771
3821
|
_getFullNumber(overrideVal) {
|
|
3772
|
-
const val = overrideVal
|
|
3822
|
+
const val = overrideVal ? this._normaliseNumerals(overrideVal) : this._getTelInputValue();
|
|
3773
3823
|
const { dialCode } = this.selectedCountryData;
|
|
3774
3824
|
let prefix;
|
|
3775
3825
|
const numericVal = getNumeric(val);
|
|
@@ -3812,8 +3862,9 @@ var Iti = class _Iti {
|
|
|
3812
3862
|
//* This is called when the utils request completes.
|
|
3813
3863
|
handleUtils() {
|
|
3814
3864
|
if (intlTelInput.utils) {
|
|
3815
|
-
|
|
3816
|
-
|
|
3865
|
+
const inputValue = this._getTelInputValue();
|
|
3866
|
+
if (inputValue) {
|
|
3867
|
+
this._updateValFromNumber(inputValue);
|
|
3817
3868
|
}
|
|
3818
3869
|
if (this.selectedCountryData.iso2) {
|
|
3819
3870
|
this._updatePlaceholder();
|
|
@@ -3856,11 +3907,13 @@ var Iti = class _Iti {
|
|
|
3856
3907
|
getNumber(format) {
|
|
3857
3908
|
if (intlTelInput.utils) {
|
|
3858
3909
|
const { iso2 } = this.selectedCountryData;
|
|
3859
|
-
|
|
3860
|
-
|
|
3910
|
+
const fullNumber = this._getFullNumber();
|
|
3911
|
+
const formattedNumber = intlTelInput.utils.formatNumber(
|
|
3912
|
+
fullNumber,
|
|
3861
3913
|
iso2,
|
|
3862
3914
|
format
|
|
3863
3915
|
);
|
|
3916
|
+
return this._mapAsciiToUserNumerals(formattedNumber);
|
|
3864
3917
|
}
|
|
3865
3918
|
return "";
|
|
3866
3919
|
}
|
|
@@ -3948,15 +4001,17 @@ var Iti = class _Iti {
|
|
|
3948
4001
|
this._setCountry(iso2Lower);
|
|
3949
4002
|
this._updateDialCode(this.selectedCountryData.dialCode);
|
|
3950
4003
|
if (this.options.formatOnDisplay) {
|
|
3951
|
-
this.
|
|
4004
|
+
const inputValue = this._getTelInputValue();
|
|
4005
|
+
this._updateValFromNumber(inputValue);
|
|
3952
4006
|
}
|
|
3953
4007
|
this._triggerCountryChange();
|
|
3954
4008
|
}
|
|
3955
4009
|
}
|
|
3956
4010
|
//* Set the input value and update the country.
|
|
3957
4011
|
setNumber(number) {
|
|
3958
|
-
const
|
|
3959
|
-
this.
|
|
4012
|
+
const normalisedNumber = this._normaliseNumerals(number);
|
|
4013
|
+
const countryChanged = this._updateCountryFromNumber(normalisedNumber);
|
|
4014
|
+
this._updateValFromNumber(normalisedNumber);
|
|
3960
4015
|
if (countryChanged) {
|
|
3961
4016
|
this._triggerCountryChange();
|
|
3962
4017
|
}
|
|
@@ -4041,7 +4096,7 @@ var intlTelInput = Object.assign(
|
|
|
4041
4096
|
attachUtils,
|
|
4042
4097
|
startedLoadingUtilsScript: false,
|
|
4043
4098
|
startedLoadingAutoCountry: false,
|
|
4044
|
-
version: "25.
|
|
4099
|
+
version: "25.13.0"
|
|
4045
4100
|
}
|
|
4046
4101
|
);
|
|
4047
4102
|
var intl_tel_input_default = intlTelInput;
|
|
@@ -2890,6 +2890,45 @@ var Iti = class _Iti {
|
|
|
2890
2890
|
static _getIsAndroid() {
|
|
2891
2891
|
return typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
|
|
2892
2892
|
}
|
|
2893
|
+
_updateNumeralSet(str) {
|
|
2894
|
+
if (/[\u0660-\u0669]/.test(str)) {
|
|
2895
|
+
this.userNumeralSet = "arabic-indic";
|
|
2896
|
+
} else if (/[\u06F0-\u06F9]/.test(str)) {
|
|
2897
|
+
this.userNumeralSet = "persian";
|
|
2898
|
+
} else {
|
|
2899
|
+
this.userNumeralSet = "ascii";
|
|
2900
|
+
}
|
|
2901
|
+
}
|
|
2902
|
+
_mapAsciiToUserNumerals(str) {
|
|
2903
|
+
if (!this.userNumeralSet) {
|
|
2904
|
+
this._updateNumeralSet(this.ui.telInput.value);
|
|
2905
|
+
}
|
|
2906
|
+
if (this.userNumeralSet === "ascii") {
|
|
2907
|
+
return str;
|
|
2908
|
+
}
|
|
2909
|
+
const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
|
|
2910
|
+
return str.replace(/[0-9]/g, (d) => String.fromCharCode(base + Number(d)));
|
|
2911
|
+
}
|
|
2912
|
+
// Normalize Eastern Arabic (U+0660-0669) and Persian/Extended Arabic-Indic (U+06F0-06F9) numerals to ASCII 0-9
|
|
2913
|
+
_normaliseNumerals(str) {
|
|
2914
|
+
if (!str) {
|
|
2915
|
+
return "";
|
|
2916
|
+
}
|
|
2917
|
+
this._updateNumeralSet(str);
|
|
2918
|
+
if (this.userNumeralSet === "ascii") {
|
|
2919
|
+
return str;
|
|
2920
|
+
}
|
|
2921
|
+
const base = this.userNumeralSet === "arabic-indic" ? 1632 : 1776;
|
|
2922
|
+
const regex = this.userNumeralSet === "arabic-indic" ? /[\u0660-\u0669]/g : /[\u06F0-\u06F9]/g;
|
|
2923
|
+
return str.replace(regex, (ch) => String.fromCharCode(48 + (ch.charCodeAt(0) - base)));
|
|
2924
|
+
}
|
|
2925
|
+
_getTelInputValue() {
|
|
2926
|
+
const inputValue = this.ui.telInput.value.trim();
|
|
2927
|
+
return this._normaliseNumerals(inputValue);
|
|
2928
|
+
}
|
|
2929
|
+
_setTelInputValue(asciiValue) {
|
|
2930
|
+
this.ui.telInput.value = this._mapAsciiToUserNumerals(asciiValue);
|
|
2931
|
+
}
|
|
2893
2932
|
_createInitPromises() {
|
|
2894
2933
|
const autoCountryPromise = new Promise((resolve, reject) => {
|
|
2895
2934
|
this.resolveAutoCountryPromise = resolve;
|
|
@@ -2924,8 +2963,9 @@ var Iti = class _Iti {
|
|
|
2924
2963
|
//* 1. Extracting a dial code from the given number
|
|
2925
2964
|
//* 2. Using explicit initialCountry
|
|
2926
2965
|
_setInitialState(overrideAutoCountry = false) {
|
|
2927
|
-
const
|
|
2928
|
-
const
|
|
2966
|
+
const attributeValueRaw = this.ui.telInput.getAttribute("value");
|
|
2967
|
+
const attributeValue = this._normaliseNumerals(attributeValueRaw);
|
|
2968
|
+
const inputValue = this._getTelInputValue();
|
|
2929
2969
|
const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
|
|
2930
2970
|
const val = useAttribute ? attributeValue : inputValue;
|
|
2931
2971
|
const dialCode = this._getDialCode(val);
|
|
@@ -3096,35 +3136,34 @@ var Iti = class _Iti {
|
|
|
3096
3136
|
countrySearch
|
|
3097
3137
|
} = this.options;
|
|
3098
3138
|
let userOverrideFormatting = false;
|
|
3099
|
-
if (REGEX.ALPHA_UNICODE.test(this.
|
|
3139
|
+
if (REGEX.ALPHA_UNICODE.test(this._getTelInputValue())) {
|
|
3100
3140
|
userOverrideFormatting = true;
|
|
3101
3141
|
}
|
|
3102
3142
|
const handleInputEvent = (e) => {
|
|
3143
|
+
const inputValue = this._getTelInputValue();
|
|
3103
3144
|
if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown && countrySearch) {
|
|
3104
3145
|
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
3105
|
-
const valueBeforeCaret =
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
);
|
|
3109
|
-
const valueAfterCaret = this.ui.telInput.value.substring(currentCaretPos);
|
|
3110
|
-
this.ui.telInput.value = valueBeforeCaret + valueAfterCaret;
|
|
3146
|
+
const valueBeforeCaret = inputValue.substring(0, currentCaretPos - 1);
|
|
3147
|
+
const valueAfterCaret = inputValue.substring(currentCaretPos);
|
|
3148
|
+
this._setTelInputValue(valueBeforeCaret + valueAfterCaret);
|
|
3111
3149
|
this._openDropdownWithPlus();
|
|
3112
3150
|
return;
|
|
3113
3151
|
}
|
|
3114
|
-
if (this._updateCountryFromNumber(
|
|
3152
|
+
if (this._updateCountryFromNumber(inputValue)) {
|
|
3115
3153
|
this._triggerCountryChange();
|
|
3116
3154
|
}
|
|
3117
3155
|
const isFormattingChar = e?.data && REGEX.NON_PLUS_NUMERIC.test(e.data);
|
|
3118
|
-
const isPaste = e?.inputType === INPUT_TYPES.PASTE &&
|
|
3156
|
+
const isPaste = e?.inputType === INPUT_TYPES.PASTE && inputValue;
|
|
3119
3157
|
if (isFormattingChar || isPaste && !strictMode) {
|
|
3120
3158
|
userOverrideFormatting = true;
|
|
3121
|
-
} else if (!REGEX.NON_PLUS_NUMERIC.test(
|
|
3159
|
+
} else if (!REGEX.NON_PLUS_NUMERIC.test(inputValue)) {
|
|
3122
3160
|
userOverrideFormatting = false;
|
|
3123
3161
|
}
|
|
3124
3162
|
const isSetNumber = e?.detail && e.detail["isSetNumber"];
|
|
3125
|
-
|
|
3163
|
+
const isAscii = this.userNumeralSet === "ascii";
|
|
3164
|
+
if (formatAsYouType && !userOverrideFormatting && !isSetNumber && isAscii) {
|
|
3126
3165
|
const currentCaretPos = this.ui.telInput.selectionStart || 0;
|
|
3127
|
-
const valueBeforeCaret =
|
|
3166
|
+
const valueBeforeCaret = inputValue.substring(
|
|
3128
3167
|
0,
|
|
3129
3168
|
currentCaretPos
|
|
3130
3169
|
);
|
|
@@ -3136,7 +3175,7 @@ var Iti = class _Iti {
|
|
|
3136
3175
|
const fullNumber = this._getFullNumber();
|
|
3137
3176
|
const formattedValue = formatNumberAsYouType(
|
|
3138
3177
|
fullNumber,
|
|
3139
|
-
|
|
3178
|
+
inputValue,
|
|
3140
3179
|
intlTelInput.utils,
|
|
3141
3180
|
this.selectedCountryData,
|
|
3142
3181
|
this.options.separateDialCode
|
|
@@ -3147,7 +3186,7 @@ var Iti = class _Iti {
|
|
|
3147
3186
|
currentCaretPos,
|
|
3148
3187
|
isDeleteForwards
|
|
3149
3188
|
);
|
|
3150
|
-
this.
|
|
3189
|
+
this._setTelInputValue(formattedValue);
|
|
3151
3190
|
this.ui.telInput.setSelectionRange(newCaretPos, newCaretPos);
|
|
3152
3191
|
}
|
|
3153
3192
|
};
|
|
@@ -3170,12 +3209,18 @@ var Iti = class _Iti {
|
|
|
3170
3209
|
return;
|
|
3171
3210
|
}
|
|
3172
3211
|
if (strictMode) {
|
|
3173
|
-
const
|
|
3174
|
-
const alreadyHasPlus =
|
|
3212
|
+
const inputValue = this._getTelInputValue();
|
|
3213
|
+
const alreadyHasPlus = inputValue.startsWith("+");
|
|
3175
3214
|
const isInitialPlus = !alreadyHasPlus && this.ui.telInput.selectionStart === 0 && e.key === "+";
|
|
3176
|
-
const
|
|
3215
|
+
const normalisedKey = this._normaliseNumerals(e.key);
|
|
3216
|
+
const isNumeric = /^[0-9]$/.test(normalisedKey);
|
|
3177
3217
|
const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
|
|
3178
|
-
const
|
|
3218
|
+
const input = this.ui.telInput;
|
|
3219
|
+
const selStart = input.selectionStart;
|
|
3220
|
+
const selEnd = input.selectionEnd;
|
|
3221
|
+
const before = inputValue.slice(0, selStart);
|
|
3222
|
+
const after = inputValue.slice(selEnd);
|
|
3223
|
+
const newValue = before + e.key + after;
|
|
3179
3224
|
const newFullNumber = this._getFullNumber(newValue);
|
|
3180
3225
|
const coreNumber = intlTelInput.utils.getCoreNumber(
|
|
3181
3226
|
newFullNumber,
|
|
@@ -3202,34 +3247,38 @@ var Iti = class _Iti {
|
|
|
3202
3247
|
const input = this.ui.telInput;
|
|
3203
3248
|
const selStart = input.selectionStart;
|
|
3204
3249
|
const selEnd = input.selectionEnd;
|
|
3205
|
-
const
|
|
3206
|
-
const
|
|
3250
|
+
const inputValue = this._getTelInputValue();
|
|
3251
|
+
const before = inputValue.slice(0, selStart);
|
|
3252
|
+
const after = inputValue.slice(selEnd);
|
|
3207
3253
|
const iso2 = this.selectedCountryData.iso2;
|
|
3208
|
-
const
|
|
3254
|
+
const pastedRaw = e.clipboardData.getData("text");
|
|
3255
|
+
const pasted = this._normaliseNumerals(pastedRaw);
|
|
3209
3256
|
const initialCharSelected = selStart === 0 && selEnd > 0;
|
|
3210
|
-
const allowLeadingPlus = !
|
|
3257
|
+
const allowLeadingPlus = !inputValue.startsWith("+") || initialCharSelected;
|
|
3211
3258
|
const allowedChars = pasted.replace(REGEX.NON_PLUS_NUMERIC_GLOBAL, "");
|
|
3212
3259
|
const hasLeadingPlus = allowedChars.startsWith("+");
|
|
3213
3260
|
const numerics = allowedChars.replace(/\+/g, "");
|
|
3214
3261
|
const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
|
|
3215
3262
|
let newVal = before + sanitised + after;
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
}
|
|
3224
|
-
if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
|
|
3225
|
-
if (input.selectionEnd === input.value.length) {
|
|
3226
|
-
const trimLength = coreNumber.length - this.maxCoreNumberLength;
|
|
3227
|
-
newVal = newVal.slice(0, newVal.length - trimLength);
|
|
3228
|
-
} else {
|
|
3263
|
+
if (newVal.length > 5) {
|
|
3264
|
+
let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
|
|
3265
|
+
while (coreNumber.length === 0 && newVal.length > 0) {
|
|
3266
|
+
newVal = newVal.slice(0, -1);
|
|
3267
|
+
coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
|
|
3268
|
+
}
|
|
3269
|
+
if (!coreNumber) {
|
|
3229
3270
|
return;
|
|
3230
3271
|
}
|
|
3272
|
+
if (this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength) {
|
|
3273
|
+
if (input.selectionEnd === inputValue.length) {
|
|
3274
|
+
const trimLength = coreNumber.length - this.maxCoreNumberLength;
|
|
3275
|
+
newVal = newVal.slice(0, newVal.length - trimLength);
|
|
3276
|
+
} else {
|
|
3277
|
+
return;
|
|
3278
|
+
}
|
|
3279
|
+
}
|
|
3231
3280
|
}
|
|
3232
|
-
|
|
3281
|
+
this._setTelInputValue(newVal);
|
|
3233
3282
|
const caretPos = selStart + sanitised.length;
|
|
3234
3283
|
input.setSelectionRange(caretPos, caretPos);
|
|
3235
3284
|
input.dispatchEvent(new InputEvent("input", { bubbles: true }));
|
|
@@ -3481,7 +3530,7 @@ var Iti = class _Iti {
|
|
|
3481
3530
|
);
|
|
3482
3531
|
}
|
|
3483
3532
|
number = this._beforeSetNumber(number);
|
|
3484
|
-
this.
|
|
3533
|
+
this._setTelInputValue(number);
|
|
3485
3534
|
}
|
|
3486
3535
|
//* Check if need to select a new country based on the given number
|
|
3487
3536
|
//* Note: called from _setInitialState, keyup handler, setNumber.
|
|
@@ -3655,7 +3704,8 @@ var Iti = class _Iti {
|
|
|
3655
3704
|
const dialCode = listItem.dataset[DATA_KEYS.DIAL_CODE];
|
|
3656
3705
|
this._updateDialCode(dialCode);
|
|
3657
3706
|
if (this.options.formatOnDisplay) {
|
|
3658
|
-
this.
|
|
3707
|
+
const inputValue = this._getTelInputValue();
|
|
3708
|
+
this._updateValFromNumber(inputValue);
|
|
3659
3709
|
}
|
|
3660
3710
|
this.ui.telInput.focus();
|
|
3661
3711
|
if (countryChanged) {
|
|
@@ -3686,7 +3736,7 @@ var Iti = class _Iti {
|
|
|
3686
3736
|
//* Replace any existing dial code with the new one
|
|
3687
3737
|
//* Note: called from _selectListItem and setCountry
|
|
3688
3738
|
_updateDialCode(newDialCodeBare) {
|
|
3689
|
-
const inputVal = this.
|
|
3739
|
+
const inputVal = this._getTelInputValue();
|
|
3690
3740
|
const newDialCode = `+${newDialCodeBare}`;
|
|
3691
3741
|
let newNumber;
|
|
3692
3742
|
if (inputVal.startsWith("+")) {
|
|
@@ -3696,7 +3746,7 @@ var Iti = class _Iti {
|
|
|
3696
3746
|
} else {
|
|
3697
3747
|
newNumber = newDialCode;
|
|
3698
3748
|
}
|
|
3699
|
-
this.
|
|
3749
|
+
this._setTelInputValue(newNumber);
|
|
3700
3750
|
}
|
|
3701
3751
|
}
|
|
3702
3752
|
//* Try and extract a valid international dial code from a full telephone number.
|
|
@@ -3733,7 +3783,7 @@ var Iti = class _Iti {
|
|
|
3733
3783
|
}
|
|
3734
3784
|
//* Get the input val, adding the dial code if separateDialCode is enabled.
|
|
3735
3785
|
_getFullNumber(overrideVal) {
|
|
3736
|
-
const val = overrideVal
|
|
3786
|
+
const val = overrideVal ? this._normaliseNumerals(overrideVal) : this._getTelInputValue();
|
|
3737
3787
|
const { dialCode } = this.selectedCountryData;
|
|
3738
3788
|
let prefix;
|
|
3739
3789
|
const numericVal = getNumeric(val);
|
|
@@ -3776,8 +3826,9 @@ var Iti = class _Iti {
|
|
|
3776
3826
|
//* This is called when the utils request completes.
|
|
3777
3827
|
handleUtils() {
|
|
3778
3828
|
if (intlTelInput.utils) {
|
|
3779
|
-
|
|
3780
|
-
|
|
3829
|
+
const inputValue = this._getTelInputValue();
|
|
3830
|
+
if (inputValue) {
|
|
3831
|
+
this._updateValFromNumber(inputValue);
|
|
3781
3832
|
}
|
|
3782
3833
|
if (this.selectedCountryData.iso2) {
|
|
3783
3834
|
this._updatePlaceholder();
|
|
@@ -3820,11 +3871,13 @@ var Iti = class _Iti {
|
|
|
3820
3871
|
getNumber(format) {
|
|
3821
3872
|
if (intlTelInput.utils) {
|
|
3822
3873
|
const { iso2 } = this.selectedCountryData;
|
|
3823
|
-
|
|
3824
|
-
|
|
3874
|
+
const fullNumber = this._getFullNumber();
|
|
3875
|
+
const formattedNumber = intlTelInput.utils.formatNumber(
|
|
3876
|
+
fullNumber,
|
|
3825
3877
|
iso2,
|
|
3826
3878
|
format
|
|
3827
3879
|
);
|
|
3880
|
+
return this._mapAsciiToUserNumerals(formattedNumber);
|
|
3828
3881
|
}
|
|
3829
3882
|
return "";
|
|
3830
3883
|
}
|
|
@@ -3912,15 +3965,17 @@ var Iti = class _Iti {
|
|
|
3912
3965
|
this._setCountry(iso2Lower);
|
|
3913
3966
|
this._updateDialCode(this.selectedCountryData.dialCode);
|
|
3914
3967
|
if (this.options.formatOnDisplay) {
|
|
3915
|
-
this.
|
|
3968
|
+
const inputValue = this._getTelInputValue();
|
|
3969
|
+
this._updateValFromNumber(inputValue);
|
|
3916
3970
|
}
|
|
3917
3971
|
this._triggerCountryChange();
|
|
3918
3972
|
}
|
|
3919
3973
|
}
|
|
3920
3974
|
//* Set the input value and update the country.
|
|
3921
3975
|
setNumber(number) {
|
|
3922
|
-
const
|
|
3923
|
-
this.
|
|
3976
|
+
const normalisedNumber = this._normaliseNumerals(number);
|
|
3977
|
+
const countryChanged = this._updateCountryFromNumber(normalisedNumber);
|
|
3978
|
+
this._updateValFromNumber(normalisedNumber);
|
|
3924
3979
|
if (countryChanged) {
|
|
3925
3980
|
this._triggerCountryChange();
|
|
3926
3981
|
}
|
|
@@ -4005,7 +4060,7 @@ var intlTelInput = Object.assign(
|
|
|
4005
4060
|
attachUtils,
|
|
4006
4061
|
startedLoadingUtilsScript: false,
|
|
4007
4062
|
startedLoadingAutoCountry: false,
|
|
4008
|
-
version: "25.
|
|
4063
|
+
version: "25.13.0"
|
|
4009
4064
|
}
|
|
4010
4065
|
);
|
|
4011
4066
|
var intl_tel_input_default = intlTelInput;
|
package/vue/README.md
CHANGED
|
@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
|
|
|
34
34
|
"vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.
|
|
37
|
+
A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.0/build/js/utils.js"`.
|
|
38
38
|
|
|
39
39
|
## Props
|
|
40
40
|
Here's a list of all of the current props you can pass to the IntlTelInput Vue component.
|