lite-phone-input 0.3.0 → 0.5.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 +30 -0
- package/dist/core/index.cjs +27 -2
- package/dist/core/index.cjs.map +1 -1
- package/dist/core/index.d.cts +3 -1
- package/dist/core/index.d.ts +3 -1
- package/dist/core/index.js +27 -2
- package/dist/core/index.js.map +1 -1
- package/dist/preact/index.cjs +54 -10
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.d.cts +1 -0
- package/dist/preact/index.d.ts +1 -0
- package/dist/preact/index.js +54 -10
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +54 -10
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +1 -0
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +54 -10
- package/dist/react/index.js.map +1 -1
- package/dist/vanilla/index.cjs +52 -10
- package/dist/vanilla/index.cjs.map +1 -1
- package/dist/vanilla/index.d.cts +3 -0
- package/dist/vanilla/index.d.ts +3 -0
- package/dist/vanilla/index.global.js +52 -10
- package/dist/vanilla/index.global.js.map +1 -1
- package/dist/vanilla/index.js +52 -10
- package/dist/vanilla/index.js.map +1 -1
- package/package.json +1 -1
package/dist/react/index.cjs
CHANGED
|
@@ -2834,7 +2834,27 @@ var phone_countries_default = [
|
|
|
2834
2834
|
// src/core/format.ts
|
|
2835
2835
|
var TRAILING_SEP = /[\s\-]+$/;
|
|
2836
2836
|
var FALLBACK_GROUP = /(.{4})(?=.)/g;
|
|
2837
|
-
var
|
|
2837
|
+
var NUMERAL_BASES = [
|
|
2838
|
+
1632,
|
|
2839
|
+
// Arabic-Indic ٠-٩
|
|
2840
|
+
1776,
|
|
2841
|
+
// Persian ۰-۹
|
|
2842
|
+
2406,
|
|
2843
|
+
// Devanagari ०-९
|
|
2844
|
+
2534,
|
|
2845
|
+
// Bengali ০-৯
|
|
2846
|
+
3664,
|
|
2847
|
+
// Thai ๐-๙
|
|
2848
|
+
3792,
|
|
2849
|
+
// Lao ໐-໙
|
|
2850
|
+
4160,
|
|
2851
|
+
// Myanmar ၀-၉
|
|
2852
|
+
6112,
|
|
2853
|
+
// Khmer ០-៩
|
|
2854
|
+
65296
|
|
2855
|
+
// Fullwidth 0-9
|
|
2856
|
+
];
|
|
2857
|
+
var NON_ASCII_DIGITS = /[\u0660-\u0669\u06F0-\u06F9\u0966-\u096F\u09E6-\u09EF\u0E50-\u0E59\u0ED0-\u0ED9\u1040-\u1049\u17E0-\u17E9\uFF10-\uFF19]/g;
|
|
2838
2858
|
function isRelevantChar(ch) {
|
|
2839
2859
|
const c = ch.charCodeAt(0);
|
|
2840
2860
|
return c >= 48 && c <= 57 || c === 43;
|
|
@@ -2884,9 +2904,18 @@ function extractDigits(value) {
|
|
|
2884
2904
|
function normalizeNumerals(value) {
|
|
2885
2905
|
return value.replace(NON_ASCII_DIGITS, (c) => {
|
|
2886
2906
|
const code = c.charCodeAt(0);
|
|
2887
|
-
|
|
2907
|
+
for (const base of NUMERAL_BASES) {
|
|
2908
|
+
if (code >= base && code <= base + 9) {
|
|
2909
|
+
return String(code - base);
|
|
2910
|
+
}
|
|
2911
|
+
}
|
|
2912
|
+
return c;
|
|
2888
2913
|
});
|
|
2889
2914
|
}
|
|
2915
|
+
function isNonAsciiDigit(ch) {
|
|
2916
|
+
const code = ch.charCodeAt(0);
|
|
2917
|
+
return NUMERAL_BASES.some((base) => code >= base && code <= base + 9);
|
|
2918
|
+
}
|
|
2890
2919
|
|
|
2891
2920
|
// src/core/countries.ts
|
|
2892
2921
|
function getFlag(code) {
|
|
@@ -3299,6 +3328,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3299
3328
|
constructor(el, options) {
|
|
3300
3329
|
this.nationalDigits = "";
|
|
3301
3330
|
this.displayInternational = false;
|
|
3331
|
+
this.userHasInteracted = false;
|
|
3302
3332
|
this.lastValidation = null;
|
|
3303
3333
|
this.dropdown = null;
|
|
3304
3334
|
this.dialCodeEl = null;
|
|
@@ -3316,6 +3346,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3316
3346
|
if (this.opts.initialValue) {
|
|
3317
3347
|
this.setValueInternal(this.opts.initialValue, true);
|
|
3318
3348
|
}
|
|
3349
|
+
this.invokeGeoIpLookup();
|
|
3319
3350
|
}
|
|
3320
3351
|
}
|
|
3321
3352
|
get isNationalInput() {
|
|
@@ -3353,8 +3384,9 @@ var PhoneInput = class _PhoneInput {
|
|
|
3353
3384
|
return validatePhone(this.nationalDigits, this.selectedCountry);
|
|
3354
3385
|
}
|
|
3355
3386
|
setOptions(opts) {
|
|
3387
|
+
const { geoIpLookup: _, ...rest } = opts;
|
|
3356
3388
|
const prev = { ...this.opts };
|
|
3357
|
-
Object.assign(this.opts,
|
|
3389
|
+
Object.assign(this.opts, rest);
|
|
3358
3390
|
if (opts.allowedCountries !== void 0 || opts.excludedCountries !== void 0) {
|
|
3359
3391
|
this.countries = this.filterCountries(getAllCountries());
|
|
3360
3392
|
if (!this.countries.find((c) => c.code === this.selectedCountry.code)) {
|
|
@@ -3396,6 +3428,16 @@ var PhoneInput = class _PhoneInput {
|
|
|
3396
3428
|
}
|
|
3397
3429
|
this.el.innerHTML = "";
|
|
3398
3430
|
}
|
|
3431
|
+
invokeGeoIpLookup() {
|
|
3432
|
+
const lookup = this.opts.geoIpLookup;
|
|
3433
|
+
if (!lookup) return;
|
|
3434
|
+
this.opts.geoIpLookup = void 0;
|
|
3435
|
+
const signal = this.ac.signal;
|
|
3436
|
+
lookup((countryCode) => {
|
|
3437
|
+
if (signal.aborted || this.userHasInteracted || !countryCode) return;
|
|
3438
|
+
this.setCountry(countryCode);
|
|
3439
|
+
});
|
|
3440
|
+
}
|
|
3399
3441
|
// --- DOM Construction ---
|
|
3400
3442
|
buildDOM() {
|
|
3401
3443
|
this.containerEl = document.createElement("div");
|
|
@@ -3495,6 +3537,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3495
3537
|
this.inputEl.addEventListener("paste", (e) => this.handlePaste(e), { signal });
|
|
3496
3538
|
}
|
|
3497
3539
|
handleInput(e) {
|
|
3540
|
+
this.userHasInteracted = true;
|
|
3498
3541
|
if (this.opts.strict !== false && e.data === "+" && this.isNationalInput) {
|
|
3499
3542
|
this.inputEl.value = this.inputEl.value.replace("+", "");
|
|
3500
3543
|
}
|
|
@@ -3510,7 +3553,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3510
3553
|
const formatted = this.formatNationalValue(digits);
|
|
3511
3554
|
const np = this.shouldPrependPrefix ? this.selectedCountry.nationalPrefix : "";
|
|
3512
3555
|
const display = !digits && np && extractDigits(raw).length > 0 ? np : digits && np ? np + formatted : formatted;
|
|
3513
|
-
const newCursor = this.getNationalCursor(
|
|
3556
|
+
const newCursor = this.getNationalCursor(raw, oldCursor, formatted);
|
|
3514
3557
|
this.inputEl.value = display;
|
|
3515
3558
|
this.inputEl.setSelectionRange(newCursor, newCursor);
|
|
3516
3559
|
} else {
|
|
@@ -3537,7 +3580,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3537
3580
|
} else {
|
|
3538
3581
|
formatted = this.formatNationalValue(national);
|
|
3539
3582
|
}
|
|
3540
|
-
const newCursor = getCursorPosition(
|
|
3583
|
+
const newCursor = getCursorPosition(raw, oldCursor, formatted);
|
|
3541
3584
|
this.inputEl.value = formatted;
|
|
3542
3585
|
this.inputEl.setSelectionRange(newCursor, newCursor);
|
|
3543
3586
|
}
|
|
@@ -3552,14 +3595,12 @@ var PhoneInput = class _PhoneInput {
|
|
|
3552
3595
|
if (!this.isNationalInput && e.key === "+" && this.inputEl.selectionStart === 0) {
|
|
3553
3596
|
return;
|
|
3554
3597
|
}
|
|
3555
|
-
if (e.key.length === 1 && !/\d/.test(e.key)) {
|
|
3556
|
-
|
|
3557
|
-
if (!(code >= 1632 && code <= 1641 || code >= 1776 && code <= 1785)) {
|
|
3558
|
-
e.preventDefault();
|
|
3559
|
-
}
|
|
3598
|
+
if (e.key.length === 1 && !/\d/.test(e.key) && !isNonAsciiDigit(e.key)) {
|
|
3599
|
+
e.preventDefault();
|
|
3560
3600
|
}
|
|
3561
3601
|
}
|
|
3562
3602
|
handlePaste(e) {
|
|
3603
|
+
this.userHasInteracted = true;
|
|
3563
3604
|
e.preventDefault();
|
|
3564
3605
|
const text = e.clipboardData?.getData("text") ?? "";
|
|
3565
3606
|
if (!text) return;
|
|
@@ -3598,6 +3639,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3598
3639
|
// --- Dropdown ---
|
|
3599
3640
|
openDropdown() {
|
|
3600
3641
|
if (this.dropdown) return;
|
|
3642
|
+
this.userHasInteracted = true;
|
|
3601
3643
|
this.dropdown = new Dropdown({
|
|
3602
3644
|
countries: this.countries,
|
|
3603
3645
|
preferredCountries: this.opts.preferredCountries ?? [],
|
|
@@ -3856,6 +3898,7 @@ var WIDGET_KEYS = /* @__PURE__ */ new Set([
|
|
|
3856
3898
|
"initialValue",
|
|
3857
3899
|
"containerClass",
|
|
3858
3900
|
"dropdownContainer",
|
|
3901
|
+
"geoIpLookup",
|
|
3859
3902
|
"onChange",
|
|
3860
3903
|
"onCountryChange",
|
|
3861
3904
|
"onValidationChange",
|
|
@@ -3913,6 +3956,7 @@ var PhoneInput2 = (0, import_react.forwardRef)(
|
|
|
3913
3956
|
hiddenInput: p.hiddenInput,
|
|
3914
3957
|
containerClass: p.containerClass,
|
|
3915
3958
|
dropdownContainer: p.dropdownContainer,
|
|
3959
|
+
geoIpLookup: p.geoIpLookup,
|
|
3916
3960
|
initialValue: p.initialValue,
|
|
3917
3961
|
inputAttributes,
|
|
3918
3962
|
// Callbacks read from ref so they always use the latest version
|