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/preact/index.cjs
CHANGED
|
@@ -2836,7 +2836,27 @@ var phone_countries_default = [
|
|
|
2836
2836
|
// src/core/format.ts
|
|
2837
2837
|
var TRAILING_SEP = /[\s\-]+$/;
|
|
2838
2838
|
var FALLBACK_GROUP = /(.{4})(?=.)/g;
|
|
2839
|
-
var
|
|
2839
|
+
var NUMERAL_BASES = [
|
|
2840
|
+
1632,
|
|
2841
|
+
// Arabic-Indic ٠-٩
|
|
2842
|
+
1776,
|
|
2843
|
+
// Persian ۰-۹
|
|
2844
|
+
2406,
|
|
2845
|
+
// Devanagari ०-९
|
|
2846
|
+
2534,
|
|
2847
|
+
// Bengali ০-৯
|
|
2848
|
+
3664,
|
|
2849
|
+
// Thai ๐-๙
|
|
2850
|
+
3792,
|
|
2851
|
+
// Lao ໐-໙
|
|
2852
|
+
4160,
|
|
2853
|
+
// Myanmar ၀-၉
|
|
2854
|
+
6112,
|
|
2855
|
+
// Khmer ០-៩
|
|
2856
|
+
65296
|
|
2857
|
+
// Fullwidth 0-9
|
|
2858
|
+
];
|
|
2859
|
+
var NON_ASCII_DIGITS = /[\u0660-\u0669\u06F0-\u06F9\u0966-\u096F\u09E6-\u09EF\u0E50-\u0E59\u0ED0-\u0ED9\u1040-\u1049\u17E0-\u17E9\uFF10-\uFF19]/g;
|
|
2840
2860
|
function isRelevantChar(ch) {
|
|
2841
2861
|
const c = ch.charCodeAt(0);
|
|
2842
2862
|
return c >= 48 && c <= 57 || c === 43;
|
|
@@ -2886,9 +2906,18 @@ function extractDigits(value) {
|
|
|
2886
2906
|
function normalizeNumerals(value) {
|
|
2887
2907
|
return value.replace(NON_ASCII_DIGITS, (c) => {
|
|
2888
2908
|
const code = c.charCodeAt(0);
|
|
2889
|
-
|
|
2909
|
+
for (const base of NUMERAL_BASES) {
|
|
2910
|
+
if (code >= base && code <= base + 9) {
|
|
2911
|
+
return String(code - base);
|
|
2912
|
+
}
|
|
2913
|
+
}
|
|
2914
|
+
return c;
|
|
2890
2915
|
});
|
|
2891
2916
|
}
|
|
2917
|
+
function isNonAsciiDigit(ch) {
|
|
2918
|
+
const code = ch.charCodeAt(0);
|
|
2919
|
+
return NUMERAL_BASES.some((base) => code >= base && code <= base + 9);
|
|
2920
|
+
}
|
|
2892
2921
|
|
|
2893
2922
|
// src/core/countries.ts
|
|
2894
2923
|
function getFlag(code) {
|
|
@@ -3301,6 +3330,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3301
3330
|
constructor(el, options) {
|
|
3302
3331
|
this.nationalDigits = "";
|
|
3303
3332
|
this.displayInternational = false;
|
|
3333
|
+
this.userHasInteracted = false;
|
|
3304
3334
|
this.lastValidation = null;
|
|
3305
3335
|
this.dropdown = null;
|
|
3306
3336
|
this.dialCodeEl = null;
|
|
@@ -3318,6 +3348,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3318
3348
|
if (this.opts.initialValue) {
|
|
3319
3349
|
this.setValueInternal(this.opts.initialValue, true);
|
|
3320
3350
|
}
|
|
3351
|
+
this.invokeGeoIpLookup();
|
|
3321
3352
|
}
|
|
3322
3353
|
}
|
|
3323
3354
|
get isNationalInput() {
|
|
@@ -3355,8 +3386,9 @@ var PhoneInput = class _PhoneInput {
|
|
|
3355
3386
|
return validatePhone(this.nationalDigits, this.selectedCountry);
|
|
3356
3387
|
}
|
|
3357
3388
|
setOptions(opts) {
|
|
3389
|
+
const { geoIpLookup: _, ...rest } = opts;
|
|
3358
3390
|
const prev = { ...this.opts };
|
|
3359
|
-
Object.assign(this.opts,
|
|
3391
|
+
Object.assign(this.opts, rest);
|
|
3360
3392
|
if (opts.allowedCountries !== void 0 || opts.excludedCountries !== void 0) {
|
|
3361
3393
|
this.countries = this.filterCountries(getAllCountries());
|
|
3362
3394
|
if (!this.countries.find((c) => c.code === this.selectedCountry.code)) {
|
|
@@ -3398,6 +3430,16 @@ var PhoneInput = class _PhoneInput {
|
|
|
3398
3430
|
}
|
|
3399
3431
|
this.el.innerHTML = "";
|
|
3400
3432
|
}
|
|
3433
|
+
invokeGeoIpLookup() {
|
|
3434
|
+
const lookup = this.opts.geoIpLookup;
|
|
3435
|
+
if (!lookup) return;
|
|
3436
|
+
this.opts.geoIpLookup = void 0;
|
|
3437
|
+
const signal = this.ac.signal;
|
|
3438
|
+
lookup((countryCode) => {
|
|
3439
|
+
if (signal.aborted || this.userHasInteracted || !countryCode) return;
|
|
3440
|
+
this.setCountry(countryCode);
|
|
3441
|
+
});
|
|
3442
|
+
}
|
|
3401
3443
|
// --- DOM Construction ---
|
|
3402
3444
|
buildDOM() {
|
|
3403
3445
|
this.containerEl = document.createElement("div");
|
|
@@ -3497,6 +3539,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3497
3539
|
this.inputEl.addEventListener("paste", (e) => this.handlePaste(e), { signal });
|
|
3498
3540
|
}
|
|
3499
3541
|
handleInput(e) {
|
|
3542
|
+
this.userHasInteracted = true;
|
|
3500
3543
|
if (this.opts.strict !== false && e.data === "+" && this.isNationalInput) {
|
|
3501
3544
|
this.inputEl.value = this.inputEl.value.replace("+", "");
|
|
3502
3545
|
}
|
|
@@ -3512,7 +3555,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3512
3555
|
const formatted = this.formatNationalValue(digits);
|
|
3513
3556
|
const np = this.shouldPrependPrefix ? this.selectedCountry.nationalPrefix : "";
|
|
3514
3557
|
const display = !digits && np && extractDigits(raw).length > 0 ? np : digits && np ? np + formatted : formatted;
|
|
3515
|
-
const newCursor = this.getNationalCursor(
|
|
3558
|
+
const newCursor = this.getNationalCursor(raw, oldCursor, formatted);
|
|
3516
3559
|
this.inputEl.value = display;
|
|
3517
3560
|
this.inputEl.setSelectionRange(newCursor, newCursor);
|
|
3518
3561
|
} else {
|
|
@@ -3539,7 +3582,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3539
3582
|
} else {
|
|
3540
3583
|
formatted = this.formatNationalValue(national);
|
|
3541
3584
|
}
|
|
3542
|
-
const newCursor = getCursorPosition(
|
|
3585
|
+
const newCursor = getCursorPosition(raw, oldCursor, formatted);
|
|
3543
3586
|
this.inputEl.value = formatted;
|
|
3544
3587
|
this.inputEl.setSelectionRange(newCursor, newCursor);
|
|
3545
3588
|
}
|
|
@@ -3554,14 +3597,12 @@ var PhoneInput = class _PhoneInput {
|
|
|
3554
3597
|
if (!this.isNationalInput && e.key === "+" && this.inputEl.selectionStart === 0) {
|
|
3555
3598
|
return;
|
|
3556
3599
|
}
|
|
3557
|
-
if (e.key.length === 1 && !/\d/.test(e.key)) {
|
|
3558
|
-
|
|
3559
|
-
if (!(code >= 1632 && code <= 1641 || code >= 1776 && code <= 1785)) {
|
|
3560
|
-
e.preventDefault();
|
|
3561
|
-
}
|
|
3600
|
+
if (e.key.length === 1 && !/\d/.test(e.key) && !isNonAsciiDigit(e.key)) {
|
|
3601
|
+
e.preventDefault();
|
|
3562
3602
|
}
|
|
3563
3603
|
}
|
|
3564
3604
|
handlePaste(e) {
|
|
3605
|
+
this.userHasInteracted = true;
|
|
3565
3606
|
e.preventDefault();
|
|
3566
3607
|
const text = e.clipboardData?.getData("text") ?? "";
|
|
3567
3608
|
if (!text) return;
|
|
@@ -3600,6 +3641,7 @@ var PhoneInput = class _PhoneInput {
|
|
|
3600
3641
|
// --- Dropdown ---
|
|
3601
3642
|
openDropdown() {
|
|
3602
3643
|
if (this.dropdown) return;
|
|
3644
|
+
this.userHasInteracted = true;
|
|
3603
3645
|
this.dropdown = new Dropdown({
|
|
3604
3646
|
countries: this.countries,
|
|
3605
3647
|
preferredCountries: this.opts.preferredCountries ?? [],
|
|
@@ -3857,6 +3899,7 @@ var WIDGET_KEYS = /* @__PURE__ */ new Set([
|
|
|
3857
3899
|
"initialValue",
|
|
3858
3900
|
"containerClass",
|
|
3859
3901
|
"dropdownContainer",
|
|
3902
|
+
"geoIpLookup",
|
|
3860
3903
|
"onChange",
|
|
3861
3904
|
"onCountryChange",
|
|
3862
3905
|
"onValidationChange",
|
|
@@ -3914,6 +3957,7 @@ var PhoneInput2 = (0, import_compat.forwardRef)(
|
|
|
3914
3957
|
hiddenInput: p.hiddenInput,
|
|
3915
3958
|
containerClass: p.containerClass,
|
|
3916
3959
|
dropdownContainer: p.dropdownContainer,
|
|
3960
|
+
geoIpLookup: p.geoIpLookup,
|
|
3917
3961
|
initialValue: p.initialValue,
|
|
3918
3962
|
inputAttributes,
|
|
3919
3963
|
onChange: (e164, country, validation) => propsRef.current.onChange?.(e164, country, validation),
|