@desource/phone-mask-svelte 1.1.1 → 1.2.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/CHANGELOG.md +27 -0
- package/dist/index.cjs +1 -1475
- package/dist/index.mjs +1 -1458
- package/dist/phone-mask-svelte.css +2 -382
- package/dist/types/index.d.ts +2 -2
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +7 -6
package/dist/index.mjs
CHANGED
|
@@ -1,1458 +1 @@
|
|
|
1
|
-
import "svelte/internal/disclose-version";
|
|
2
|
-
import * as $ from "svelte/internal/client";
|
|
3
|
-
import { onDestroy, tick, onMount } from "svelte";
|
|
4
|
-
const M = { AC: "+247 #####", AD: ["+376 ### ###", "+376 #### ####"], AE: ["+971 # ### ####", "+971 ## ### ####", "+971 ### ######", "+971 ### # #####"], AF: "+93 ## ### ####", AG: "+1 ###-###-####", AI: "+1 ###-###-####", AL: ["+355 ## ### ###", "+355 ## ### ####", "+355 ### ####", "+355 ### ###", "+355 ### #####"], AM: ["+374 ## ######", "+374 ### ## ###"], AO: "+244 ### ### ###", AR: ["+54 ## ####-####", "+54 # ## ####-####", "+54 ###-###-####"], AS: "+1 ###-###-####", AT: ["+43 # #########", "+43 ### ######"], AU: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###", "+61 ## ### ##"], AW: "+297 ### ####", AX: ["+358 ## #######", "+358 ### ######"], AZ: ["+994 ## ### ## ##", "+994 ### ## ## ##"], BA: ["+387 ## ###-###", "+387 ## ### ###"], BB: "+1 ###-###-####", BD: ["+880 #-#######", "+880 ####-######", "+880 ###-#######"], BE: ["+32 ## ## ## ##", "+32 ### ## ## ##", "+32 ### ## ###"], BF: "+226 ## ## ## ##", BG: ["+359 # ### ###", "+359 ## ### ###", "+359 ### ## ###"], BH: "+973 #### ####", BI: "+257 ## ## ## ##", BJ: ["+229 ## ## ## ## ##", "+229 ## ## ## ##"], BL: "+590 ### ## ## ##", BM: "+1 ###-###-####", BN: "+673 ### ####", BO: ["+591 # #######", "+591 ########", "+591 ### ## ####"], BQ: "+599 ### ####", BR: ["+55 ## ####-####", "+55 ## #####-####", "+55 ### ## ####", "+55 ####-####"], BS: "+1 ###-###-####", BT: ["+975 # ### ###", "+975 ## ## ## ##"], BW: ["+267 ### ####", "+267 ## ### ###", "+267 #### ### ###", "+267 ## #####"], BY: ["+375 ### ##-##-##", "+375 ## ###-##-##", "+375 ### ### ####"], BZ: ["+501 ###-####", "+501 #-###-####-###"], CA: "+1 ###-###-####", CC: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###"], CD: ["+243 ## #####", "+243 ### ### ###"], CF: "+236 ## ## ## ##", CG: ["+242 ## ### ####", "+242 # #### ####"], CH: ["+41 ## ### ## ##", "+41 ### ### ###"], CI: ["+225 ## ## # #####", "+225 ## ## ## ####"], CK: "+682 ## ###", CL: ["+56 ### ### ###", "+56 # #### ####", "+56 ### ### ####", "+56 ## ### ####"], CM: ["+237 # ## ## ## ##", "+237 ## ## ## ##"], CN: ["+86 ## #### ####", "+86 ### #### ####", "+86 ### ### ####", "+86 ########"], CO: ["+57 ### #######", "+57 # ### #######"], CR: ["+506 #### ####", "+506 ###-###-####"], CU: ["+53 # #######", "+53 ### #######"], CV: "+238 ### ## ##", CW: ["+599 # ### ####", "+599 ### ####"], CX: ["+61 # #### ####", "+61 ### ### ###", "+61 #### ### ###"], CY: "+357 ## ######", CZ: "+420 ### ### ###", DE: ["+49 ## ######", "+49 #### #######", "+49 ### ##########", "+49 ### # ######", "+49 ### # ####", "+49 ### #### ####", "+49 ########"], DJ: "+253 ## ## ## ##", DK: "+45 ## ## ## ##", DM: "+1 ###-###-####", DO: "+1 ###-###-####", DZ: ["+213 ## ## ## ##", "+213 ### ## ## ##", "+213 ## ### ## ##"], EC: ["+593 #-###-####", "+593 ## ### ####", "+593 #### ### ####"], EE: ["+372 ### ####", "+372 #### ####", "+372 ## ## ####"], EG: ["+20 # ########", "+20 ## ########", "+20 ### ### ####"], EH: ["+212 # ## ## ## ##", "+212 ##-#######"], ER: "+291 # ### ###", ES: ["+34 ### ## ## ##", "+34 ### ### ###"], ET: "+251 ## ### ####", FI: ["+358 ## #######", "+358 ### ######"], FJ: ["+679 ### ####", "+679 #### ### ####"], FK: "+500 #####", FM: "+691 ### ####", FO: "+298 ######", FR: ["+33 # ## ## ## ##", "+33 ### ## ## ##"], GA: "+241 ## ## ## ##", GB: ["+44 ### ### ####", "+44 #### ######", "+44 ## #### ####"], GD: "+1 ###-###-####", GE: ["+995 ## ### ## ##", "+995 ### ## ## ##", "+995 ### ### ###"], GF: "+594 ### ## ## ##", GG: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], GH: ["+233 ## ### ####", "+233 ### #####"], GI: ["+350 ### #####", "+350 ########"], GL: "+299 ## ## ##", GM: "+220 ### ####", GN: ["+224 ## ## ## ##", "+224 ### ## ## ##"], GP: "+590 ### ## ## ##", GQ: ["+240 ### ### ###", "+240 ### ######"], GR: ["+30 ## #### ####", "+30 ### ### ####"], GT: ["+502 #### ####", "+502 #### ### ####"], GU: "+1 ###-###-####", GW: ["+245 ### ### ###", "+245 ### ####"], GY: "+592 ### ####", HK: ["+852 #### ####", "+852 ### ### ###", "+852 ### ## ### ###"], HN: ["+504 ####-####", "+504 ###########"], HR: ["+385 # #### ###", "+385 ## ### ####", "+385 ### ### ###", "+385 ## ## ###", "+385 ## ### ###"], HT: "+509 ## ## ####", HU: ["+36 # ### ####", "+36 ## ### ####", "+36 ## ### ###"], ID: ["+62 ## #######", "+62 ###-###-###", "+62 ### #######", "+62 ### # ### ###", "+62 ### ### ####"], IE: ["+353 ## #####", "+353 ## ### ####", "+353 #### ### ###", "+353 ### ### ###"], IL: ["+972 #-###-####", "+972 ##-###-####", "+972 #-###-###-###"], IM: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], IN: ["+91 ##### #####", "+91 #### ## ####", "+91 #### ### ### ###", "+91 #### ### ####"], IO: "+246 ### ####", IQ: ["+964 # ### ####", "+964 ### ### ####"], IR: ["+98 ## #### ####", "+98 ### ### ####"], IS: "+354 ### ####", IT: ["+39 ## #### ####", "+39 ### ### ####", "+39 ### ### ###"], JE: ["+44 #### ######", "+44 ### ### ####", "+44 ## #### ####"], JM: "+1 ###-###-####", JO: ["+962 # ### ####", "+962 # #### ####", "+962 ### #####", "+962 ## #######"], JP: ["+81 #-####-####", "+81 ##-####-####", "+81 ###-###-###", "+81 ##-###-####"], KE: ["+254 ## #######", "+254 ### ######", "+254 ### ### ###"], KG: ["+996 ### ### ###", "+996 ### ### # ##"], KH: ["+855 ## ### ###", "+855 #### ### ###"], KI: ["+686 #####", "+686 ########"], KM: "+269 ### ## ##", KN: "+1 ###-###-####", KP: ["+850 # ### ####", "+850 ### ### ####"], KR: ["+82 #-###-####", "+82 ##-####-####", "+82 ##-###-####"], KW: ["+965 #### ####", "+965 ### #####", "+965 #### ###"], KY: "+1 ###-###-####", KZ: ["+7 ##### # ## ##", "+7 ### ### ####", "+7 ### ###-##-##"], LA: ["+856 ## ### ###", "+856 ## ## ### ###"], LB: ["+961 # ### ###", "+961 ## ### ###"], LC: "+1 ###-###-####", LI: ["+423 ### ## ##", "+423 ### ### ###"], LK: ["+94 ### ### ###", "+94 ## ### ####"], LR: ["+231 ## ### ###", "+231 ## ### ####"], LS: "+266 #### ####", LT: ["+370 ### #####", "+370 ### ## ###"], LU: ["+352 ## ## ## ##", "+352 ### ### ###", "+352 ### ## ###"], LV: "+371 ## ### ###", LY: "+218 ##-#######", MA: ["+212 # ## ## ## ##", "+212 ##-#######"], MC: ["+377 ## ## ## ##", "+377 # ## ## ## ##"], MD: ["+373 ## ### ###", "+373 ### ## ###", "+373 ### #####"], ME: "+382 ## ### ###", MF: "+590 ### ## ## ##", MG: "+261 ## ## ### ##", MH: "+692 ###-####", MK: ["+389 # ### ####", "+389 ## ### ###", "+389 ### # ## ##"], ML: "+223 ## ## ## ##", MM: ["+95 # ### ###", "+95 # ### ####", "+95 ### ### ####"], MN: "+976 #### ####", MO: ["+853 #### ####", "+853 #### ###"], MP: "+1 ###-###-####", MQ: "+596 ### ## ## ##", MR: "+222 ## ## ## ##", MS: "+1 ###-###-####", MT: "+356 #### ####", MU: ["+230 #### ####", "+230 ### ####"], MV: ["+960 ###-####", "+960 ### ### ####"], MW: ["+265 # ### ###", "+265 ### ## ## ##"], MX: "+52 ### ### ####", MY: ["+60 #-#### ####", "+60 ##-### ####", "+60 #-###-##-####", "+60 ###-### ####"], MZ: ["+258 ## ### ###", "+258 ## ### ####", "+258 ### ### ###"], NA: ["+264 ## ### ###", "+264 ## ### ####", "+264 ### ### ###"], NC: "+687 ##.##.##", NE: ["+227 ## ## ## ##", "+227 ## ### ###"], NF: ["+672 ## ####", "+672 # #####"], NG: ["+234 #### ## ####", "+234 ### ### ####", "+234 ### #### ####"], NI: "+505 #### ####", NL: ["+31 ## ### ####", "+31 # ########", "+31 ### ####", "+31 ## #######"], NO: ["+47 ## ## ## ##", "+47 ### ## ###"], NP: ["+977 #-#######", "+977 ###-#######", "+977 ###########"], NR: "+674 ### ####", NU: ["+683 ####", "+683 ### ####"], NZ: ["+64 # ### ####", "+64 ## ### ####", "+64 ### ### ###"], OM: ["+968 ## ######", "+968 #### ####", "+968 ### #####"], PA: ["+507 ###-####", "+507 ####-####"], PE: ["+51 # #######", "+51 ### ### ###", "+51 ### #####"], PF: ["+689 ## ## ## ##", "+689 ### ## ## ##"], PG: ["+675 ### ####", "+675 #### ####"], PH: ["+63 # #### ####", "+63 ### ### ####", "+63 #### # ### ####"], PK: ["+92 ## ########", "+92 ### #######", "+92 ### ### ##", "+92 #### #####"], PL: ["+48 ## ### ## ##", "+48 ### ### ###"], PM: ["+508 ## ## ##", "+508 ### ## ## ##"], PR: "+1 ###-###-####", PS: ["+970 # ### ####", "+970 ### ### ###", "+970 #### ### ###"], PT: ["+351 ## ### ####", "+351 ### ### ###"], PW: "+680 ### ####", PY: ["+595 ## ### ####", "+595 ### ######", "+595 #### ### ####"], QA: ["+974 #### ####", "+974 ### ####"], RE: "+262 ### ## ## ##", RO: ["+40 ## ### ####", "+40 ### ### ###"], RS: ["+381 ## ######", "+381 ## #######", "+381 ### #####"], RU: "+7 ### ###-##-##", RW: "+250 ### ### ###", SA: ["+966 ## ### ####", "+966 ### ### ####", "+966 #### #####"], SB: ["+677 #####", "+677 ## #####"], SC: ["+248 # ### ###", "+248 #######"], SD: "+249 ## ### ####", SE: ["+46 # ## ## ##", "+46 ## ### ## ##", "+46 ## ## ## ##", "+46 ### ## ## ###"], SG: ["+65 #### ####", "+65 #### ### ####"], SH: "+290 #####", SI: ["+386 # ### ## ##", "+386 ## ### ###", "+386 ## ######", "+386 ### #####"], SJ: ["+47 ## ## ## ##", "+47 ### ## ###"], SK: ["+421 #/### ### ##", "+421 ### ### ###", "+421 #######"], SL: "+232 ## ######", SM: ["+378 #### ######", "+378 ## ## ## ##"], SN: ["+221 ## ### ## ##", "+221 ### ## ## ##"], SO: ["+252 # ######", "+252 # #######"], SR: ["+597 ###-###", "+597 ###-####", "+597 ##-##-##"], SS: "+211 ### ### ###", ST: "+239 ### ####", SV: ["+503 #### ####", "+503 ### ####"], SX: "+1 ###-###-####", SY: ["+963 ## ### ####", "+963 ### ### ###"], SZ: ["+268 #### ####", "+268 ##### ####"], TA: "+290 ####", TC: "+1 ###-###-####", TD: "+235 ## ## ## ##", TG: "+228 ## ## ## ##", TH: ["+66 # ### ####", "+66 ## ### ####", "+66 #### ### ###"], TJ: ["+992 ### ## ####", "+992 ## ### ####"], TK: "+690 ####", TL: ["+670 ### ####", "+670 #### ####"], TM: ["+993 ## ##-##-##", "+993 ## ######"], TN: "+216 ## ### ###", TO: ["+676 ##-###", "+676 ### ####", "+676 #### ###"], TR: ["+90 ### ### ## ##", "+90 ### ### ####"], TT: "+1 ###-###-####", TV: ["+688 ## ###", "+688 ## ####"], TW: ["+886 # #### ####", "+886 ### ### ###", "+886 ## ### ####", "+886 ## #### ####"], TZ: ["+255 ## ### ####", "+255 ### ### ###", "+255 ### ## ####"], UA: ["+380 #### #####", "+380 ## ### ####", "+380 ### ### ###"], UG: ["+256 ## #######", "+256 ### ######"], US: "+1 ###-###-####", UY: ["+598 #### ####", "+598 ## ### ###", "+598 ### ####"], UZ: "+998 ## ### ## ##", VA: ["+39 ## #### ####", "+39 ### ### ####", "+39 ### ### ###"], VC: "+1 ###-###-####", VE: "+58 ###-#######", VG: "+1 ###-###-####", VI: "+1 ###-###-####", VN: ["+84 ### #### ###", "+84 ### ### ###", "+84 #### ######", "+84 ## ### ## ##"], VU: ["+678 #####", "+678 ### ####"], WF: ["+681 ## ## ##", "+681 ### ## ## ##"], WS: ["+685 #####", "+685 ## #####", "+685 ### ###"], XK: ["+383 ## ### ###", "+383 ### #####"], YE: ["+967 # ### ###", "+967 ### ### ###"], YT: "+262 ### ## ## ##", ZA: ["+27 ## ### ####", "+27 ### ### ###"], ZM: ["+260 ### ### ###", "+260 ## #######", "+260 #########"], ZW: ["+263 ## #####", "+263 ## ### ####", "+263 ### ####", "+263 #### ######"] };
|
|
5
|
-
const t$1 = /^[a-z]{2}$/i, countryCodeEmoji = (o2) => {
|
|
6
|
-
if (!t$1.test(o2)) {
|
|
7
|
-
const t2 = typeof o2;
|
|
8
|
-
throw new TypeError(`cc argument must be an ISO 3166-1 alpha-2 string, but got '${"string" === t2 ? o2 : t2}' instead.`);
|
|
9
|
-
}
|
|
10
|
-
const e2 = [...o2.toUpperCase()].map((t2) => (t2.codePointAt(0) ?? 0) + 127397);
|
|
11
|
-
return String.fromCodePoint(...e2);
|
|
12
|
-
};
|
|
13
|
-
const o$1 = "en", n$1 = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
|
|
14
|
-
const t2 = e2.toLowerCase(), s2 = n$1.get(t2);
|
|
15
|
-
if (s2) return s2;
|
|
16
|
-
const r = new Intl.DisplayNames([e2], { type: "region" });
|
|
17
|
-
if (n$1.size >= 10) {
|
|
18
|
-
for (const e3 of n$1.keys()) if (e3 !== o$1) {
|
|
19
|
-
n$1.delete(e3);
|
|
20
|
-
break;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return n$1.set(t2, r), r;
|
|
24
|
-
}, s$1 = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
|
|
25
|
-
function getCodeAndMask(e2) {
|
|
26
|
-
let t2 = "", o2 = "";
|
|
27
|
-
if (Array.isArray(e2)) {
|
|
28
|
-
const n2 = [];
|
|
29
|
-
for (const o3 of e2) {
|
|
30
|
-
const [e3, s2] = divideMask(o3);
|
|
31
|
-
t2 || (t2 = e3), n2.push(s2);
|
|
32
|
-
}
|
|
33
|
-
o2 = n2;
|
|
34
|
-
} else {
|
|
35
|
-
const [n2, s2] = divideMask(e2);
|
|
36
|
-
t2 = n2, o2 = s2;
|
|
37
|
-
}
|
|
38
|
-
return [t2, o2];
|
|
39
|
-
}
|
|
40
|
-
s$1.map(([e2, t2]) => ({ id: e2, mask: t2 }));
|
|
41
|
-
s$1.reduce((e2, [t2, o2]) => {
|
|
42
|
-
const [n2, s2] = getCodeAndMask(o2);
|
|
43
|
-
return e2[t2] = { code: n2, mask: s2 }, e2;
|
|
44
|
-
}, {});
|
|
45
|
-
s$1.map(([e2, t2]) => {
|
|
46
|
-
const [o2, n2] = getCodeAndMask(t2);
|
|
47
|
-
return { id: e2, code: o2, mask: n2 };
|
|
48
|
-
});
|
|
49
|
-
s$1.reduce((e2, [o2, n2]) => {
|
|
50
|
-
const [s2, r] = getCodeAndMask(n2);
|
|
51
|
-
return e2[o2] = { code: s2, mask: r, flag: countryCodeEmoji(o2) }, e2;
|
|
52
|
-
}, {});
|
|
53
|
-
s$1.map(([e2, o2]) => {
|
|
54
|
-
const [n2, s2] = getCodeAndMask(o2);
|
|
55
|
-
return { id: e2, code: n2, mask: s2, flag: countryCodeEmoji(e2) };
|
|
56
|
-
});
|
|
57
|
-
const MasksFullMap = (e2) => {
|
|
58
|
-
const o2 = getDisplayNames(e2);
|
|
59
|
-
return s$1.reduce((e3, [n2, s2]) => {
|
|
60
|
-
const [r, a] = getCodeAndMask(s2), d = o2.of(n2) ?? "";
|
|
61
|
-
return e3[n2] = { code: r, mask: a, name: d, flag: countryCodeEmoji(n2) }, e3;
|
|
62
|
-
}, {});
|
|
63
|
-
}, MasksFull = (e2) => {
|
|
64
|
-
const o2 = getDisplayNames(e2);
|
|
65
|
-
return s$1.map(([e3, n2]) => {
|
|
66
|
-
const [s2, r] = getCodeAndMask(n2);
|
|
67
|
-
return { id: e3, code: s2, mask: r, name: o2.of(e3) ?? "", flag: countryCodeEmoji(e3) };
|
|
68
|
-
});
|
|
69
|
-
}, f = MasksFullMap(o$1);
|
|
70
|
-
MasksFull(o$1);
|
|
71
|
-
const k = countryCodeEmoji;
|
|
72
|
-
function getNavigatorLang() {
|
|
73
|
-
return globalThis.navigator?.language || "en";
|
|
74
|
-
}
|
|
75
|
-
function detectCountryFromLocale() {
|
|
76
|
-
try {
|
|
77
|
-
const t2 = getNavigatorLang();
|
|
78
|
-
try {
|
|
79
|
-
const r2 = new Intl.Locale(t2);
|
|
80
|
-
if (r2.region) return r2.region.toUpperCase();
|
|
81
|
-
} catch {
|
|
82
|
-
}
|
|
83
|
-
const r = t2.split(/[-_]/);
|
|
84
|
-
if (r.length > 1) return r[1]?.toUpperCase() || null;
|
|
85
|
-
} catch {
|
|
86
|
-
}
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
function hasCountry(t2) {
|
|
90
|
-
const e2 = f;
|
|
91
|
-
return t2.toUpperCase() in e2;
|
|
92
|
-
}
|
|
93
|
-
function getCountry(r, e2) {
|
|
94
|
-
const n2 = MasksFullMap(e2), o2 = r.toUpperCase();
|
|
95
|
-
return o2 in n2 ? { id: o2, ...n2[o2] } : { id: "US", ...n2.US };
|
|
96
|
-
}
|
|
97
|
-
function parseCountryCode(t2, r) {
|
|
98
|
-
return t2 && hasCountry(t2) ? t2.toUpperCase() : r || "";
|
|
99
|
-
}
|
|
100
|
-
function toArray(t2) {
|
|
101
|
-
return Array.isArray(t2) ? t2 : [t2];
|
|
102
|
-
}
|
|
103
|
-
function countPlaceholders(t2) {
|
|
104
|
-
return (t2.match(/#/g) || []).length;
|
|
105
|
-
}
|
|
106
|
-
function removeCountryCodePrefix(t2) {
|
|
107
|
-
return t2.replace(/^\+\d+\s?/, "");
|
|
108
|
-
}
|
|
109
|
-
function pickMaskVariant(t2, r) {
|
|
110
|
-
if (!t2.length) return "";
|
|
111
|
-
if (1 === t2.length) return t2[0];
|
|
112
|
-
const e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = e2.filter((t3) => t3.count >= r).sort((t3, r2) => t3.count - r2.count);
|
|
113
|
-
if (n2.length > 0) return n2[0].mask;
|
|
114
|
-
const o2 = e2.sort((t3, r2) => r2.count - t3.count)[0];
|
|
115
|
-
return o2 ? o2.mask : t2[0];
|
|
116
|
-
}
|
|
117
|
-
function formatDigitsWithMap(t2, r) {
|
|
118
|
-
let e2 = "";
|
|
119
|
-
const n2 = [];
|
|
120
|
-
let o2 = 0;
|
|
121
|
-
const a = r.length, s2 = t2.length;
|
|
122
|
-
for (let c = 0; c < s2; c++) {
|
|
123
|
-
const s3 = t2[c];
|
|
124
|
-
if ("#" === s3) {
|
|
125
|
-
if (!(o2 < a)) break;
|
|
126
|
-
e2 += r[o2], n2.push(o2), o2++;
|
|
127
|
-
} else {
|
|
128
|
-
const r2 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
|
|
129
|
-
(e2.length > 0 || r2) && (e2 += s3, n2.push(-1));
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
return { display: e2, map: n2 };
|
|
133
|
-
}
|
|
134
|
-
function filterCountries(t2, r) {
|
|
135
|
-
const e2 = r.trim().toUpperCase();
|
|
136
|
-
if (!e2) return t2;
|
|
137
|
-
const n2 = e2.replace(/\D/g, ""), o2 = n2.length > 0;
|
|
138
|
-
return t2.map((t3) => {
|
|
139
|
-
const r2 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
|
|
140
|
-
let i = 0;
|
|
141
|
-
return r2.startsWith(e2) ? i = 1e3 : r2.includes(e2) && (i = 500), s2.startsWith(e2) ? i += 100 : s2.includes(e2) && (i += 50), a === e2 ? i += 200 : a.startsWith(e2) && (i += 150), o2 && c.startsWith(n2) ? i += 80 : o2 && c.includes(n2) && (i += 40), { country: t3, score: i };
|
|
142
|
-
}).filter((t3) => t3.score > 0).sort((t3, r2) => r2.score === t3.score ? t3.country.name.localeCompare(r2.country.name) : r2.score - t3.score).map((t3) => t3.country);
|
|
143
|
-
}
|
|
144
|
-
const e$1 = [" ", "-", "(", ")"], t = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], n = /[^\d\s\-()]/;
|
|
145
|
-
function removeDigitsRange(e2, t2, n2) {
|
|
146
|
-
return { newDigits: e2.slice(0, t2) + e2.slice(n2), caretDigitIndex: t2 };
|
|
147
|
-
}
|
|
148
|
-
function removeSelectedDigits(e2, t2, n2, i) {
|
|
149
|
-
if (n2 === i) return;
|
|
150
|
-
const r = t2.getDigitRange(e2, n2, i);
|
|
151
|
-
if (!r) return;
|
|
152
|
-
const [s2, g] = r;
|
|
153
|
-
return removeDigitsRange(e2, s2, g);
|
|
154
|
-
}
|
|
155
|
-
function extractDigits(e2, t2) {
|
|
156
|
-
const n2 = e2.replace(/\D/g, "");
|
|
157
|
-
return t2 ? n2.slice(0, t2) : n2;
|
|
158
|
-
}
|
|
159
|
-
function getSelection(e2) {
|
|
160
|
-
return e2 ? [e2.selectionStart ?? 0, e2.selectionEnd ?? 0] : [0, 0];
|
|
161
|
-
}
|
|
162
|
-
function setCaret(e2, t2) {
|
|
163
|
-
if (e2) try {
|
|
164
|
-
e2.setSelectionRange(t2, t2);
|
|
165
|
-
} catch {
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
function processBeforeInput(e2) {
|
|
169
|
-
if (!e2.target) return;
|
|
170
|
-
const t2 = e2.target, i = e2.data;
|
|
171
|
-
"insertText" === e2.inputType && i && (n.test(i) || " " === i && t2.value.endsWith(" ")) && e2.preventDefault();
|
|
172
|
-
}
|
|
173
|
-
function processInput(e2, t2) {
|
|
174
|
-
if (!e2.target) return;
|
|
175
|
-
const n2 = e2.target, { formatter: i } = t2, r = i.getMaxDigits(), s2 = extractDigits(n2.value, r);
|
|
176
|
-
return { newDigits: s2, caretDigitIndex: s2.length };
|
|
177
|
-
}
|
|
178
|
-
function processKeydown(n2, i) {
|
|
179
|
-
if (!n2.target) return;
|
|
180
|
-
const r = n2.target, { digits: s2, formatter: g } = i;
|
|
181
|
-
if ((function shouldIgnoreKeydown(e2) {
|
|
182
|
-
return e2.ctrlKey || e2.metaKey || e2.altKey || t.includes(e2.key);
|
|
183
|
-
})(n2)) return;
|
|
184
|
-
const [o2, c] = getSelection(r), a = r.value;
|
|
185
|
-
return "Backspace" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removePreviousDigit(t2, n3, i2, r2) {
|
|
186
|
-
if (r2 <= 0) return;
|
|
187
|
-
let s3 = r2 - 1;
|
|
188
|
-
for (; s3 >= 0 && e$1.includes(i2[s3]); ) s3--;
|
|
189
|
-
if (s3 < 0) return;
|
|
190
|
-
const g2 = n3.getDigitRange(t2, s3, s3 + 1);
|
|
191
|
-
if (!g2) return;
|
|
192
|
-
const [o3] = g2;
|
|
193
|
-
return removeDigitsRange(t2, o3, o3 + 1);
|
|
194
|
-
})(s2, g, a, o2)) : "Delete" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removeNextDigit(e2, t2, n3, i2) {
|
|
195
|
-
if (i2 >= n3.length) return;
|
|
196
|
-
const r2 = t2.getDigitRange(e2, i2, n3.length);
|
|
197
|
-
if (!r2) return;
|
|
198
|
-
const [s3] = r2;
|
|
199
|
-
return removeDigitsRange(e2, s3, s3 + 1);
|
|
200
|
-
})(s2, g, a, o2)) : void (/^\d$/.test(n2.key) ? s2.length >= g.getMaxDigits() && n2.preventDefault() : 1 === n2.key.length && n2.preventDefault());
|
|
201
|
-
}
|
|
202
|
-
function processPaste(e2, t2) {
|
|
203
|
-
if (!e2.target) return;
|
|
204
|
-
e2.preventDefault();
|
|
205
|
-
const n2 = e2.target, { digits: i, formatter: r } = t2, s2 = e2.clipboardData?.getData("text") || "", g = r.getMaxDigits(), o2 = extractDigits(s2, g);
|
|
206
|
-
if (0 === o2.length) return;
|
|
207
|
-
const [c, a] = getSelection(n2);
|
|
208
|
-
if (c !== a) {
|
|
209
|
-
const e3 = r.getDigitRange(i, c, a);
|
|
210
|
-
if (e3) {
|
|
211
|
-
const [t3, n3] = e3;
|
|
212
|
-
return { newDigits: extractDigits(i.slice(0, t3) + o2 + i.slice(n3), g), caretDigitIndex: t3 + o2.length };
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
const u = r.getDigitRange(i, 0, c), l = u ? u[1] : 0;
|
|
216
|
-
return { newDigits: extractDigits(i.slice(0, l) + o2 + i.slice(l), g), caretDigitIndex: l + o2.length };
|
|
217
|
-
}
|
|
218
|
-
function createPhoneFormatter(o2) {
|
|
219
|
-
const i = toArray(o2.mask), l = i.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), s2 = Math.max(...l), getMask = (t2) => {
|
|
220
|
-
const n2 = pickMaskVariant(i, t2);
|
|
221
|
-
return removeCountryCodePrefix(n2);
|
|
222
|
-
};
|
|
223
|
-
return { formatDisplay: (t2) => {
|
|
224
|
-
const e2 = getMask(t2.length);
|
|
225
|
-
return formatDigitsWithMap(e2, t2).display;
|
|
226
|
-
}, getMaxDigits: () => s2, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
|
|
227
|
-
const e2 = Math.max(0, t2);
|
|
228
|
-
if (0 === e2) return 0;
|
|
229
|
-
const r = getMask(e2), { display: a } = formatDigitsWithMap(r, "0".repeat(e2));
|
|
230
|
-
return a.length;
|
|
231
|
-
}, getDigitRange: (t2, e2, r) => {
|
|
232
|
-
const a = getMask(t2.length), { map: o3 } = formatDigitsWithMap(a, t2);
|
|
233
|
-
let i2 = 1 / 0, l2 = -1 / 0;
|
|
234
|
-
for (let t3 = e2; t3 < r && t3 < o3.length; t3++) {
|
|
235
|
-
const e3 = o3[t3];
|
|
236
|
-
void 0 !== e3 && e3 >= 0 && (i2 = Math.min(i2, e3), l2 = Math.max(l2, e3));
|
|
237
|
-
}
|
|
238
|
-
return i2 === 1 / 0 ? null : [i2, l2 + 1];
|
|
239
|
-
}, isComplete: (t2) => l.includes(t2.length) };
|
|
240
|
-
}
|
|
241
|
-
const o = "https://ipapi.co/json/", e = 1500, p = "@desource/phone-mask:geo", s = 864e5;
|
|
242
|
-
async function detectCountryFromGeoIP(t2 = o, r = e) {
|
|
243
|
-
const n2 = new AbortController(), c = setTimeout(() => n2.abort(), r);
|
|
244
|
-
try {
|
|
245
|
-
const o2 = await fetch(t2, { signal: n2.signal, headers: { Accept: "application/json" } });
|
|
246
|
-
if (clearTimeout(c), !o2.ok) return null;
|
|
247
|
-
const e2 = await o2.json();
|
|
248
|
-
return (e2.country || e2.country_code || e2.countryCode || e2.country_code2 || "").toString().toUpperCase() || null;
|
|
249
|
-
} catch {
|
|
250
|
-
return clearTimeout(c), null;
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
async function detectByGeoIp() {
|
|
254
|
-
try {
|
|
255
|
-
const o3 = localStorage.getItem(p);
|
|
256
|
-
if (o3) {
|
|
257
|
-
const e3 = JSON.parse(o3), c = Date.now() - e3.ts > s, a = parseCountryCode(e3.country_code);
|
|
258
|
-
if (a && !c) return a;
|
|
259
|
-
localStorage.removeItem(p);
|
|
260
|
-
}
|
|
261
|
-
} catch {
|
|
262
|
-
}
|
|
263
|
-
const o2 = await detectCountryFromGeoIP(), e2 = parseCountryCode(o2);
|
|
264
|
-
if (e2) {
|
|
265
|
-
try {
|
|
266
|
-
const t2 = JSON.stringify({ country_code: e2, ts: Date.now() });
|
|
267
|
-
localStorage.setItem(p, t2);
|
|
268
|
-
} catch {
|
|
269
|
-
}
|
|
270
|
-
return e2;
|
|
271
|
-
}
|
|
272
|
-
return null;
|
|
273
|
-
}
|
|
274
|
-
function useCountry({
|
|
275
|
-
country: countryOption,
|
|
276
|
-
locale: localeOption,
|
|
277
|
-
detect,
|
|
278
|
-
onCountryChange
|
|
279
|
-
} = {}) {
|
|
280
|
-
let countryCode = $.state($.proxy(parseCountryCode(countryOption?.(), "US")));
|
|
281
|
-
const locale = $.derived(() => localeOption?.() || getNavigatorLang());
|
|
282
|
-
const country = $.derived(() => getCountry($.get(countryCode), $.get(locale)));
|
|
283
|
-
const setCountry = (code) => {
|
|
284
|
-
const parsed = parseCountryCode(code);
|
|
285
|
-
if (parsed) {
|
|
286
|
-
$.set(countryCode, parsed, true);
|
|
287
|
-
return true;
|
|
288
|
-
}
|
|
289
|
-
return false;
|
|
290
|
-
};
|
|
291
|
-
const detectCountry = async () => {
|
|
292
|
-
const geoCountry = await detectByGeoIp();
|
|
293
|
-
if (setCountry(geoCountry)) return;
|
|
294
|
-
const localeCountry = detectCountryFromLocale();
|
|
295
|
-
setCountry(localeCountry);
|
|
296
|
-
};
|
|
297
|
-
$.user_effect(() => {
|
|
298
|
-
const newCountry = countryOption?.();
|
|
299
|
-
if (newCountry && newCountry !== $.get(countryCode)) {
|
|
300
|
-
setCountry(newCountry);
|
|
301
|
-
}
|
|
302
|
-
});
|
|
303
|
-
$.user_effect(() => {
|
|
304
|
-
if (detect?.() && !countryOption?.()) {
|
|
305
|
-
detectCountry();
|
|
306
|
-
}
|
|
307
|
-
});
|
|
308
|
-
$.user_effect(() => {
|
|
309
|
-
onCountryChange?.($.get(country));
|
|
310
|
-
});
|
|
311
|
-
return {
|
|
312
|
-
get country() {
|
|
313
|
-
return $.get(country);
|
|
314
|
-
},
|
|
315
|
-
get locale() {
|
|
316
|
-
return $.get(locale);
|
|
317
|
-
},
|
|
318
|
-
setCountry
|
|
319
|
-
};
|
|
320
|
-
}
|
|
321
|
-
function useFormatter({ country, value, onChange, onPhoneChange, onValidationChange }) {
|
|
322
|
-
const formatter = $.derived(() => createPhoneFormatter(country()));
|
|
323
|
-
const maxDigits = $.derived(() => $.get(formatter).getMaxDigits());
|
|
324
|
-
const digits = $.derived(() => extractDigits(value(), $.get(maxDigits)));
|
|
325
|
-
const displayPlaceholder = $.derived(() => $.get(formatter).getPlaceholder());
|
|
326
|
-
const displayValue = $.derived(() => $.get(formatter).formatDisplay($.get(digits)));
|
|
327
|
-
const full = $.derived(() => $.get(digits) ? `${country().code}${$.get(digits)}` : "");
|
|
328
|
-
const fullFormatted = $.derived(() => $.get(displayValue) ? `${country().code} ${$.get(displayValue)}` : "");
|
|
329
|
-
const isComplete = $.derived(() => $.get(formatter).isComplete($.get(digits)));
|
|
330
|
-
const isEmpty = $.derived(() => $.get(digits).length === 0);
|
|
331
|
-
const shouldShowWarn = $.derived(() => !$.get(isEmpty) && !$.get(isComplete));
|
|
332
|
-
const phoneData = $.derived(() => ({
|
|
333
|
-
full: $.get(full),
|
|
334
|
-
fullFormatted: $.get(fullFormatted),
|
|
335
|
-
digits: $.get(digits)
|
|
336
|
-
}));
|
|
337
|
-
$.user_pre_effect(() => {
|
|
338
|
-
const raw = value();
|
|
339
|
-
const clamped = $.get(digits);
|
|
340
|
-
if (raw !== clamped) {
|
|
341
|
-
onChange(clamped);
|
|
342
|
-
}
|
|
343
|
-
});
|
|
344
|
-
$.user_effect(() => {
|
|
345
|
-
onPhoneChange?.($.get(phoneData));
|
|
346
|
-
});
|
|
347
|
-
$.user_effect(() => {
|
|
348
|
-
onValidationChange?.($.get(isComplete));
|
|
349
|
-
});
|
|
350
|
-
return {
|
|
351
|
-
get digits() {
|
|
352
|
-
return $.get(digits);
|
|
353
|
-
},
|
|
354
|
-
get formatter() {
|
|
355
|
-
return $.get(formatter);
|
|
356
|
-
},
|
|
357
|
-
get displayPlaceholder() {
|
|
358
|
-
return $.get(displayPlaceholder);
|
|
359
|
-
},
|
|
360
|
-
get displayValue() {
|
|
361
|
-
return $.get(displayValue);
|
|
362
|
-
},
|
|
363
|
-
get full() {
|
|
364
|
-
return $.get(full);
|
|
365
|
-
},
|
|
366
|
-
get fullFormatted() {
|
|
367
|
-
return $.get(fullFormatted);
|
|
368
|
-
},
|
|
369
|
-
get isComplete() {
|
|
370
|
-
return $.get(isComplete);
|
|
371
|
-
},
|
|
372
|
-
get isEmpty() {
|
|
373
|
-
return $.get(isEmpty);
|
|
374
|
-
},
|
|
375
|
-
get shouldShowWarn() {
|
|
376
|
-
return $.get(shouldShowWarn);
|
|
377
|
-
}
|
|
378
|
-
};
|
|
379
|
-
}
|
|
380
|
-
function useTimer() {
|
|
381
|
-
let timerRef = null;
|
|
382
|
-
const clear = () => {
|
|
383
|
-
if (timerRef) {
|
|
384
|
-
clearTimeout(timerRef);
|
|
385
|
-
timerRef = null;
|
|
386
|
-
}
|
|
387
|
-
};
|
|
388
|
-
const set = (callback, delay) => {
|
|
389
|
-
clear();
|
|
390
|
-
timerRef = setTimeout(callback, delay);
|
|
391
|
-
};
|
|
392
|
-
onDestroy(clear);
|
|
393
|
-
return { set, clear };
|
|
394
|
-
}
|
|
395
|
-
function useValidationHint() {
|
|
396
|
-
let showValidationHint = $.state(false);
|
|
397
|
-
const validationTimer = useTimer();
|
|
398
|
-
const clearValidationHint = (hideHint = true) => {
|
|
399
|
-
if (hideHint) $.set(showValidationHint, false);
|
|
400
|
-
validationTimer.clear();
|
|
401
|
-
};
|
|
402
|
-
const scheduleValidationHint = (delay) => {
|
|
403
|
-
$.set(showValidationHint, false);
|
|
404
|
-
validationTimer.set(
|
|
405
|
-
() => {
|
|
406
|
-
$.set(showValidationHint, true);
|
|
407
|
-
},
|
|
408
|
-
delay
|
|
409
|
-
);
|
|
410
|
-
};
|
|
411
|
-
return {
|
|
412
|
-
get showValidationHint() {
|
|
413
|
-
return $.get(showValidationHint);
|
|
414
|
-
},
|
|
415
|
-
clearValidationHint,
|
|
416
|
-
scheduleValidationHint
|
|
417
|
-
};
|
|
418
|
-
}
|
|
419
|
-
const HINT_DELAY_INPUT = 500;
|
|
420
|
-
const HINT_DELAY_ACTION = 300;
|
|
421
|
-
function useInputHandlers(options) {
|
|
422
|
-
const {
|
|
423
|
-
formatter,
|
|
424
|
-
digits,
|
|
425
|
-
inactive,
|
|
426
|
-
onChange,
|
|
427
|
-
scheduleValidationHint
|
|
428
|
-
} = options;
|
|
429
|
-
const scheduleCaretUpdate = (el, digitIndex) => {
|
|
430
|
-
tick().then(() => {
|
|
431
|
-
if (!el) return;
|
|
432
|
-
const pos = formatter().getCaretPosition(digitIndex);
|
|
433
|
-
setCaret(el, pos);
|
|
434
|
-
});
|
|
435
|
-
};
|
|
436
|
-
const handleBeforeInput = (e2) => {
|
|
437
|
-
processBeforeInput(e2);
|
|
438
|
-
};
|
|
439
|
-
const handleInput = (e2) => {
|
|
440
|
-
if (inactive?.()) return;
|
|
441
|
-
const result = processInput(e2, { formatter: formatter() });
|
|
442
|
-
if (!result) return;
|
|
443
|
-
onChange?.(result.newDigits);
|
|
444
|
-
scheduleCaretUpdate(e2.target, result.caretDigitIndex);
|
|
445
|
-
scheduleValidationHint?.(HINT_DELAY_INPUT);
|
|
446
|
-
};
|
|
447
|
-
const handleKeydown = (e2) => {
|
|
448
|
-
if (inactive?.()) return;
|
|
449
|
-
const result = processKeydown(e2, { digits: digits(), formatter: formatter() });
|
|
450
|
-
if (!result) return;
|
|
451
|
-
onChange?.(result.newDigits);
|
|
452
|
-
scheduleCaretUpdate(e2.target, result.caretDigitIndex);
|
|
453
|
-
scheduleValidationHint?.(HINT_DELAY_ACTION);
|
|
454
|
-
};
|
|
455
|
-
const handlePaste = (e2) => {
|
|
456
|
-
if (inactive?.()) return;
|
|
457
|
-
const result = processPaste(e2, { digits: digits(), formatter: formatter() });
|
|
458
|
-
if (!result) return;
|
|
459
|
-
onChange?.(result.newDigits);
|
|
460
|
-
scheduleCaretUpdate(e2.target, result.caretDigitIndex);
|
|
461
|
-
scheduleValidationHint?.(HINT_DELAY_ACTION);
|
|
462
|
-
};
|
|
463
|
-
return { handleBeforeInput, handleInput, handleKeydown, handlePaste };
|
|
464
|
-
}
|
|
465
|
-
function useCountrySelector({
|
|
466
|
-
rootRef,
|
|
467
|
-
dropdownRef,
|
|
468
|
-
searchRef,
|
|
469
|
-
selectorRef,
|
|
470
|
-
locale,
|
|
471
|
-
countryOption,
|
|
472
|
-
inactive,
|
|
473
|
-
onSelectCountry,
|
|
474
|
-
onAfterSelect
|
|
475
|
-
}) {
|
|
476
|
-
let search = $.state("");
|
|
477
|
-
let dropdownOpen = $.state(false);
|
|
478
|
-
let isClosing = $.state(false);
|
|
479
|
-
let dropdownStyle = $.state($.proxy({}));
|
|
480
|
-
let focusedIndex = $.state(0);
|
|
481
|
-
const countries = $.derived(() => MasksFull(locale()));
|
|
482
|
-
const filteredCountries = $.derived(() => filterCountries($.get(countries), $.get(search)));
|
|
483
|
-
const hasDropdown = $.derived(() => !countryOption?.() && $.get(countries).length > 1);
|
|
484
|
-
const setFocusedIndex = (index) => {
|
|
485
|
-
$.set(focusedIndex, index, true);
|
|
486
|
-
};
|
|
487
|
-
const focusSearch = () => {
|
|
488
|
-
tick().then(() => searchRef()?.focus({ preventScroll: true }));
|
|
489
|
-
};
|
|
490
|
-
const closeDropdown = () => {
|
|
491
|
-
if (!$.get(dropdownOpen)) return;
|
|
492
|
-
$.set(isClosing, true);
|
|
493
|
-
};
|
|
494
|
-
const openDropdown = () => {
|
|
495
|
-
$.set(isClosing, false);
|
|
496
|
-
$.set(dropdownOpen, true);
|
|
497
|
-
setFocusedIndex(0);
|
|
498
|
-
focusSearch();
|
|
499
|
-
};
|
|
500
|
-
const handleDropdownAnimationEnd = () => {
|
|
501
|
-
if (!$.get(isClosing)) return;
|
|
502
|
-
$.set(dropdownOpen, false);
|
|
503
|
-
$.set(isClosing, false);
|
|
504
|
-
};
|
|
505
|
-
const toggleDropdown = () => {
|
|
506
|
-
if (inactive?.() || !$.get(hasDropdown)) return;
|
|
507
|
-
if ($.get(dropdownOpen)) {
|
|
508
|
-
closeDropdown();
|
|
509
|
-
} else {
|
|
510
|
-
openDropdown();
|
|
511
|
-
}
|
|
512
|
-
};
|
|
513
|
-
const selectCountry = (code) => {
|
|
514
|
-
onSelectCountry(code);
|
|
515
|
-
closeDropdown();
|
|
516
|
-
$.set(search, "");
|
|
517
|
-
setFocusedIndex(0);
|
|
518
|
-
onAfterSelect?.();
|
|
519
|
-
};
|
|
520
|
-
const handleSearchChange = (e2) => {
|
|
521
|
-
$.set(search, e2.target.value, true);
|
|
522
|
-
setFocusedIndex(0);
|
|
523
|
-
};
|
|
524
|
-
const onDocClick = (ev) => {
|
|
525
|
-
const target = ev.target;
|
|
526
|
-
const dropdownEl = dropdownRef();
|
|
527
|
-
const selectorEl = selectorRef();
|
|
528
|
-
if (!target) return;
|
|
529
|
-
if (dropdownEl?.contains(target)) return;
|
|
530
|
-
if (selectorEl?.contains(target)) return;
|
|
531
|
-
closeDropdown();
|
|
532
|
-
};
|
|
533
|
-
const positionDropdown = (e2) => {
|
|
534
|
-
if (e2?.type === "scroll" && e2.target && dropdownRef()?.contains(e2.target)) return;
|
|
535
|
-
const root2 = rootRef();
|
|
536
|
-
if (!root2) return;
|
|
537
|
-
const rect = root2.getBoundingClientRect();
|
|
538
|
-
$.set(
|
|
539
|
-
dropdownStyle,
|
|
540
|
-
{
|
|
541
|
-
top: `${rect.bottom + globalThis.scrollY + 8}px`,
|
|
542
|
-
left: `${rect.left + globalThis.scrollX}px`,
|
|
543
|
-
width: `${rect.width}px`
|
|
544
|
-
},
|
|
545
|
-
true
|
|
546
|
-
);
|
|
547
|
-
};
|
|
548
|
-
const scrollFocusedIntoView = () => {
|
|
549
|
-
tick().then(() => {
|
|
550
|
-
const list = dropdownRef()?.lastElementChild;
|
|
551
|
-
const option = list?.children[$.get(focusedIndex)];
|
|
552
|
-
if (!list || !option) return;
|
|
553
|
-
const listRect = list.getBoundingClientRect();
|
|
554
|
-
const optionRect = option.getBoundingClientRect();
|
|
555
|
-
let scrollAmount = 0;
|
|
556
|
-
if (optionRect.top < listRect.top) {
|
|
557
|
-
scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
|
|
558
|
-
} else if (optionRect.bottom > listRect.bottom) {
|
|
559
|
-
scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
|
|
560
|
-
} else {
|
|
561
|
-
return;
|
|
562
|
-
}
|
|
563
|
-
list.scrollTo({ top: scrollAmount, behavior: "smooth" });
|
|
564
|
-
});
|
|
565
|
-
};
|
|
566
|
-
const handleSearchKeydown = (e2) => {
|
|
567
|
-
if (e2.key === "ArrowDown") {
|
|
568
|
-
e2.preventDefault();
|
|
569
|
-
setFocusedIndex(Math.min($.get(focusedIndex) + 1, $.get(filteredCountries).length - 1));
|
|
570
|
-
scrollFocusedIntoView();
|
|
571
|
-
} else if (e2.key === "ArrowUp") {
|
|
572
|
-
e2.preventDefault();
|
|
573
|
-
setFocusedIndex(Math.max($.get(focusedIndex) - 1, 0));
|
|
574
|
-
scrollFocusedIntoView();
|
|
575
|
-
} else if (e2.key === "Enter" && $.get(filteredCountries)[$.get(focusedIndex)]) {
|
|
576
|
-
e2.preventDefault();
|
|
577
|
-
selectCountry($.get(filteredCountries)[$.get(focusedIndex)].id);
|
|
578
|
-
} else if (e2.key === "Escape") {
|
|
579
|
-
closeDropdown();
|
|
580
|
-
}
|
|
581
|
-
};
|
|
582
|
-
const removeListeners = () => {
|
|
583
|
-
globalThis.removeEventListener("resize", positionDropdown);
|
|
584
|
-
globalThis.removeEventListener("scroll", positionDropdown, true);
|
|
585
|
-
globalThis.removeEventListener("click", onDocClick, true);
|
|
586
|
-
};
|
|
587
|
-
$.user_effect(() => {
|
|
588
|
-
if (!$.get(hasDropdown) && $.get(dropdownOpen)) {
|
|
589
|
-
closeDropdown();
|
|
590
|
-
}
|
|
591
|
-
});
|
|
592
|
-
$.user_effect(() => {
|
|
593
|
-
if (!$.get(dropdownOpen)) {
|
|
594
|
-
removeListeners();
|
|
595
|
-
return;
|
|
596
|
-
}
|
|
597
|
-
positionDropdown();
|
|
598
|
-
globalThis.addEventListener("resize", positionDropdown);
|
|
599
|
-
globalThis.addEventListener("scroll", positionDropdown, true);
|
|
600
|
-
globalThis.addEventListener("click", onDocClick, true);
|
|
601
|
-
});
|
|
602
|
-
onDestroy(removeListeners);
|
|
603
|
-
return {
|
|
604
|
-
get dropdownOpen() {
|
|
605
|
-
return $.get(dropdownOpen);
|
|
606
|
-
},
|
|
607
|
-
get isClosing() {
|
|
608
|
-
return $.get(isClosing);
|
|
609
|
-
},
|
|
610
|
-
get search() {
|
|
611
|
-
return $.get(search);
|
|
612
|
-
},
|
|
613
|
-
get focusedIndex() {
|
|
614
|
-
return $.get(focusedIndex);
|
|
615
|
-
},
|
|
616
|
-
get dropdownStyle() {
|
|
617
|
-
return $.get(dropdownStyle);
|
|
618
|
-
},
|
|
619
|
-
get filteredCountries() {
|
|
620
|
-
return $.get(filteredCountries);
|
|
621
|
-
},
|
|
622
|
-
get hasDropdown() {
|
|
623
|
-
return $.get(hasDropdown);
|
|
624
|
-
},
|
|
625
|
-
openDropdown,
|
|
626
|
-
closeDropdown,
|
|
627
|
-
toggleDropdown,
|
|
628
|
-
selectCountry,
|
|
629
|
-
setFocusedIndex,
|
|
630
|
-
handleSearchChange,
|
|
631
|
-
handleSearchKeydown,
|
|
632
|
-
handleDropdownAnimationEnd
|
|
633
|
-
};
|
|
634
|
-
}
|
|
635
|
-
function useClipboard(delay = 1800) {
|
|
636
|
-
let copied = $.state(false);
|
|
637
|
-
let isCopying = $.state(false);
|
|
638
|
-
const copyTimer = useTimer();
|
|
639
|
-
const copy = async (text) => {
|
|
640
|
-
if ($.get(isCopying)) return false;
|
|
641
|
-
const trimmedText = text.trim();
|
|
642
|
-
if (!trimmedText) return false;
|
|
643
|
-
$.set(isCopying, true);
|
|
644
|
-
try {
|
|
645
|
-
await navigator.clipboard.writeText(trimmedText);
|
|
646
|
-
$.set(copied, true);
|
|
647
|
-
copyTimer.set(
|
|
648
|
-
() => {
|
|
649
|
-
$.set(copied, false);
|
|
650
|
-
},
|
|
651
|
-
delay
|
|
652
|
-
);
|
|
653
|
-
return true;
|
|
654
|
-
} catch (err) {
|
|
655
|
-
console.warn("Copy failed", err);
|
|
656
|
-
return false;
|
|
657
|
-
} finally {
|
|
658
|
-
$.set(isCopying, false);
|
|
659
|
-
}
|
|
660
|
-
};
|
|
661
|
-
return {
|
|
662
|
-
get copied() {
|
|
663
|
-
return $.get(copied);
|
|
664
|
-
},
|
|
665
|
-
get isCopying() {
|
|
666
|
-
return $.get(isCopying);
|
|
667
|
-
},
|
|
668
|
-
copy
|
|
669
|
-
};
|
|
670
|
-
}
|
|
671
|
-
const DELAY = 1800;
|
|
672
|
-
function useCopyAction({ liveRef, fullFormatted, onCopy }) {
|
|
673
|
-
const liveTimer = useTimer();
|
|
674
|
-
const clipboard = useClipboard(DELAY);
|
|
675
|
-
const copyAriaLabel = $.derived(() => clipboard.copied ? "Copied" : `Copy ${fullFormatted()}`);
|
|
676
|
-
const copyButtonTitle = $.derived(() => clipboard.copied ? "Copied" : "Copy phone number");
|
|
677
|
-
const announceToScreenReader = (message) => {
|
|
678
|
-
const el = liveRef?.();
|
|
679
|
-
if (!el) return;
|
|
680
|
-
el.textContent = message;
|
|
681
|
-
liveTimer.set(
|
|
682
|
-
() => {
|
|
683
|
-
const el2 = liveRef?.();
|
|
684
|
-
if (el2) el2.textContent = "";
|
|
685
|
-
},
|
|
686
|
-
DELAY
|
|
687
|
-
);
|
|
688
|
-
};
|
|
689
|
-
const onCopyClick = async () => {
|
|
690
|
-
const valueToCopy = fullFormatted().trim();
|
|
691
|
-
const success = await clipboard.copy(valueToCopy);
|
|
692
|
-
if (success) {
|
|
693
|
-
onCopy?.(valueToCopy);
|
|
694
|
-
announceToScreenReader("Phone number copied to clipboard");
|
|
695
|
-
}
|
|
696
|
-
};
|
|
697
|
-
return {
|
|
698
|
-
get copied() {
|
|
699
|
-
return clipboard.copied;
|
|
700
|
-
},
|
|
701
|
-
get copyAriaLabel() {
|
|
702
|
-
return $.get(copyAriaLabel);
|
|
703
|
-
},
|
|
704
|
-
get copyButtonTitle() {
|
|
705
|
-
return $.get(copyButtonTitle);
|
|
706
|
-
},
|
|
707
|
-
onCopyClick
|
|
708
|
-
};
|
|
709
|
-
}
|
|
710
|
-
function useTheme({ theme }) {
|
|
711
|
-
let systemDark = $.state(false);
|
|
712
|
-
const themeClass = $.derived(() => (() => {
|
|
713
|
-
const resolvedTheme = theme();
|
|
714
|
-
if (resolvedTheme === "auto") {
|
|
715
|
-
return $.get(systemDark) ? "theme-dark" : "theme-light";
|
|
716
|
-
}
|
|
717
|
-
return `theme-${resolvedTheme}`;
|
|
718
|
-
})());
|
|
719
|
-
$.user_effect(() => {
|
|
720
|
-
const mq = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
|
|
721
|
-
if (!mq) return;
|
|
722
|
-
$.set(systemDark, mq.matches, true);
|
|
723
|
-
const handler = (e2) => {
|
|
724
|
-
$.set(systemDark, e2.matches, true);
|
|
725
|
-
};
|
|
726
|
-
mq.addEventListener("change", handler);
|
|
727
|
-
return () => mq.removeEventListener("change", handler);
|
|
728
|
-
});
|
|
729
|
-
return {
|
|
730
|
-
get themeClass() {
|
|
731
|
-
return $.get(themeClass);
|
|
732
|
-
}
|
|
733
|
-
};
|
|
734
|
-
}
|
|
735
|
-
var root_3 = $.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
|
|
736
|
-
var root_7 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`);
|
|
737
|
-
var root_8 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`);
|
|
738
|
-
var root_5 = $.from_html(`<button type="button"><!></button>`);
|
|
739
|
-
var root_11 = $.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`);
|
|
740
|
-
var root_9 = $.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`);
|
|
741
|
-
var root_13 = $.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`);
|
|
742
|
-
var root_16 = $.from_html(`<li class="pi-empty"> </li>`);
|
|
743
|
-
var root_12 = $.from_html(`<div role="dialog" aria-modal="false" aria-label="Select country"><div class="pi-search-wrap"><input type="search" class="pi-search" aria-label="Search countries"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul></div>`);
|
|
744
|
-
var root = $.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`, 1);
|
|
745
|
-
function PhoneInput$1($$anchor, $$props) {
|
|
746
|
-
$.push($$props, true);
|
|
747
|
-
let value = $.prop($$props, "value", 15, ""), detect = $.prop($$props, "detect", 3, true), size = $.prop($$props, "size", 3, "normal"), theme = $.prop($$props, "theme", 3, "auto"), disabled = $.prop($$props, "disabled", 3, false), readonly = $.prop($$props, "readonly", 3, false), showCopy = $.prop($$props, "showCopy", 3, true), showClear = $.prop($$props, "showClear", 3, false), withValidity = $.prop($$props, "withValidity", 3, true), searchPlaceholder = $.prop($$props, "searchPlaceholder", 3, "Search country or code..."), noResultsText = $.prop($$props, "noResultsText", 3, "No countries found"), clearButtonLabel = $.prop($$props, "clearButtonLabel", 3, "Clear phone number"), dropdownClass = $.prop($$props, "dropdownClass", 3, ""), disableDefaultStyles = $.prop($$props, "disableDefaultStyles", 3, false), restProps = $.rest_props($$props, [
|
|
748
|
-
"$$slots",
|
|
749
|
-
"$$events",
|
|
750
|
-
"$$legacy",
|
|
751
|
-
"value",
|
|
752
|
-
"country",
|
|
753
|
-
"detect",
|
|
754
|
-
"locale",
|
|
755
|
-
"size",
|
|
756
|
-
"theme",
|
|
757
|
-
"disabled",
|
|
758
|
-
"readonly",
|
|
759
|
-
"showCopy",
|
|
760
|
-
"showClear",
|
|
761
|
-
"withValidity",
|
|
762
|
-
"searchPlaceholder",
|
|
763
|
-
"noResultsText",
|
|
764
|
-
"clearButtonLabel",
|
|
765
|
-
"dropdownClass",
|
|
766
|
-
"disableDefaultStyles",
|
|
767
|
-
"onchange",
|
|
768
|
-
"oncountrychange",
|
|
769
|
-
"onvalidationchange",
|
|
770
|
-
"onfocus",
|
|
771
|
-
"onblur",
|
|
772
|
-
"oncopy",
|
|
773
|
-
"onclear",
|
|
774
|
-
"flag",
|
|
775
|
-
"copysvg",
|
|
776
|
-
"clearsvg",
|
|
777
|
-
"actionsbefore",
|
|
778
|
-
"class"
|
|
779
|
-
]);
|
|
780
|
-
let rootEl = $.state(null);
|
|
781
|
-
let telEl = $.state(null);
|
|
782
|
-
let liveEl = $.state(null);
|
|
783
|
-
let dropdownEl = $.state(null);
|
|
784
|
-
let searchEl = $.state(null);
|
|
785
|
-
let selectorEl = $.state(null);
|
|
786
|
-
const countryData = useCountry({
|
|
787
|
-
country: () => $$props.country,
|
|
788
|
-
locale: () => $$props.locale,
|
|
789
|
-
detect: () => detect(),
|
|
790
|
-
onCountryChange: (...args) => $$props.oncountrychange?.(...args)
|
|
791
|
-
});
|
|
792
|
-
const formatterData = useFormatter({
|
|
793
|
-
country: () => countryData.country,
|
|
794
|
-
value: () => value(),
|
|
795
|
-
onChange: (v) => value(v),
|
|
796
|
-
onPhoneChange: (...args) => $$props.onchange?.(...args),
|
|
797
|
-
onValidationChange: (...args) => $$props.onvalidationchange?.(...args)
|
|
798
|
-
});
|
|
799
|
-
const validationHint = useValidationHint();
|
|
800
|
-
const inactive = $.derived(() => disabled() || readonly());
|
|
801
|
-
const incomplete = $.derived(() => validationHint.showValidationHint && formatterData.shouldShowWarn);
|
|
802
|
-
const showCopyButton = $.derived(() => showCopy() && !formatterData.isEmpty && !disabled());
|
|
803
|
-
const showClearButton = $.derived(() => showClear() && !formatterData.isEmpty && !$.get(inactive));
|
|
804
|
-
const copyData = useCopyAction({
|
|
805
|
-
liveRef: () => $.get(liveEl),
|
|
806
|
-
fullFormatted: () => formatterData.fullFormatted,
|
|
807
|
-
onCopy: (...args) => $$props.oncopy?.(...args)
|
|
808
|
-
});
|
|
809
|
-
const focusInput = () => tick().then(() => $.get(telEl)?.focus());
|
|
810
|
-
const selectorData = useCountrySelector({
|
|
811
|
-
rootRef: () => $.get(rootEl),
|
|
812
|
-
dropdownRef: () => $.get(dropdownEl),
|
|
813
|
-
searchRef: () => $.get(searchEl),
|
|
814
|
-
selectorRef: () => $.get(selectorEl),
|
|
815
|
-
locale: () => countryData.locale,
|
|
816
|
-
countryOption: () => $$props.country,
|
|
817
|
-
inactive: () => $.get(inactive),
|
|
818
|
-
onSelectCountry: countryData.setCountry,
|
|
819
|
-
onAfterSelect: focusInput
|
|
820
|
-
});
|
|
821
|
-
let dropdownId = $.state(
|
|
822
|
-
"0"
|
|
823
|
-
// Migrate to $props.id() once we stop supporting Svelte < 5.20.0
|
|
824
|
-
);
|
|
825
|
-
onMount(() => {
|
|
826
|
-
$.set(dropdownId, Math.random().toString(36).slice(2, 10), true);
|
|
827
|
-
});
|
|
828
|
-
const listboxId = $.derived(() => `pi-options-${$.get(dropdownId)}`);
|
|
829
|
-
const getOptionId = (idx) => `pi-option-${$.get(dropdownId)}-${idx}`;
|
|
830
|
-
const activeOptionId = $.derived(() => selectorData.dropdownOpen && selectorData.filteredCountries[selectorData.focusedIndex] ? getOptionId(selectorData.focusedIndex) : void 0);
|
|
831
|
-
const inputHandlers = useInputHandlers({
|
|
832
|
-
formatter: () => formatterData.formatter,
|
|
833
|
-
digits: () => formatterData.digits,
|
|
834
|
-
inactive: () => $.get(inactive),
|
|
835
|
-
onChange: (v) => value(v),
|
|
836
|
-
scheduleValidationHint: validationHint.scheduleValidationHint
|
|
837
|
-
});
|
|
838
|
-
const handleFocus = (e2) => {
|
|
839
|
-
validationHint.clearValidationHint(false);
|
|
840
|
-
selectorData.closeDropdown();
|
|
841
|
-
$$props.onfocus?.(e2);
|
|
842
|
-
};
|
|
843
|
-
const handleBlur = (e2) => $$props.onblur?.(e2);
|
|
844
|
-
function focus() {
|
|
845
|
-
focusInput();
|
|
846
|
-
}
|
|
847
|
-
function blur() {
|
|
848
|
-
$.get(telEl)?.blur();
|
|
849
|
-
}
|
|
850
|
-
function clear() {
|
|
851
|
-
value("");
|
|
852
|
-
validationHint.clearValidationHint();
|
|
853
|
-
$$props.onclear?.();
|
|
854
|
-
}
|
|
855
|
-
function selectCountry(code) {
|
|
856
|
-
countryData.setCountry(code);
|
|
857
|
-
}
|
|
858
|
-
function getFullNumber() {
|
|
859
|
-
return formatterData.full;
|
|
860
|
-
}
|
|
861
|
-
function getFullFormattedNumber() {
|
|
862
|
-
return formatterData.fullFormatted;
|
|
863
|
-
}
|
|
864
|
-
function getDigits() {
|
|
865
|
-
return formatterData.digits;
|
|
866
|
-
}
|
|
867
|
-
function isValid() {
|
|
868
|
-
return formatterData.isComplete;
|
|
869
|
-
}
|
|
870
|
-
function isComplete() {
|
|
871
|
-
return formatterData.isComplete;
|
|
872
|
-
}
|
|
873
|
-
const handleClearClick = () => {
|
|
874
|
-
clear();
|
|
875
|
-
focusInput();
|
|
876
|
-
};
|
|
877
|
-
const themeData = useTheme({ theme: () => theme() });
|
|
878
|
-
const rootClasses = $.derived(() => [
|
|
879
|
-
"phone-input",
|
|
880
|
-
`size-${size()}`,
|
|
881
|
-
themeData.themeClass,
|
|
882
|
-
disabled() && "is-disabled",
|
|
883
|
-
readonly() && "is-readonly",
|
|
884
|
-
disableDefaultStyles() && "is-unstyled",
|
|
885
|
-
withValidity() && $.get(incomplete) && "is-incomplete",
|
|
886
|
-
withValidity() && formatterData.isComplete && "is-complete",
|
|
887
|
-
$$props.class
|
|
888
|
-
].filter(Boolean).join(" "));
|
|
889
|
-
const actionsCount = $.derived(() => +$.get(showCopyButton) + +$.get(showClearButton) + ($$props.actionsbefore ? 1 : 0));
|
|
890
|
-
function portal(node) {
|
|
891
|
-
document.body.appendChild(node);
|
|
892
|
-
return { destroy: () => node.remove() };
|
|
893
|
-
}
|
|
894
|
-
var $$exports = {
|
|
895
|
-
focus,
|
|
896
|
-
blur,
|
|
897
|
-
clear,
|
|
898
|
-
selectCountry,
|
|
899
|
-
getFullNumber,
|
|
900
|
-
getFullFormattedNumber,
|
|
901
|
-
getDigits,
|
|
902
|
-
isValid,
|
|
903
|
-
isComplete
|
|
904
|
-
};
|
|
905
|
-
var fragment = root();
|
|
906
|
-
var div = $.first_child(fragment);
|
|
907
|
-
$.attribute_effect(div, () => ({
|
|
908
|
-
class: $.get(rootClasses),
|
|
909
|
-
...restProps,
|
|
910
|
-
role: "group",
|
|
911
|
-
"aria-label": "Phone input with country selector",
|
|
912
|
-
[$.STYLE]: { "--pi-actions-count": $.get(actionsCount) }
|
|
913
|
-
}));
|
|
914
|
-
var div_1 = $.child(div);
|
|
915
|
-
var button = $.child(div_1);
|
|
916
|
-
let classes;
|
|
917
|
-
var span = $.child(button);
|
|
918
|
-
var node_1 = $.child(span);
|
|
919
|
-
{
|
|
920
|
-
var consequent = ($$anchor2) => {
|
|
921
|
-
var fragment_1 = $.comment();
|
|
922
|
-
var node_2 = $.first_child(fragment_1);
|
|
923
|
-
$.snippet(node_2, () => $$props.flag, () => countryData.country);
|
|
924
|
-
$.append($$anchor2, fragment_1);
|
|
925
|
-
};
|
|
926
|
-
var alternate = ($$anchor2) => {
|
|
927
|
-
var text = $.text();
|
|
928
|
-
$.template_effect(() => $.set_text(text, countryData.country.flag));
|
|
929
|
-
$.append($$anchor2, text);
|
|
930
|
-
};
|
|
931
|
-
$.if(node_1, ($$render) => {
|
|
932
|
-
if ($$props.flag) $$render(consequent);
|
|
933
|
-
else $$render(alternate, -1);
|
|
934
|
-
});
|
|
935
|
-
}
|
|
936
|
-
$.reset(span);
|
|
937
|
-
var span_1 = $.sibling(span, 2);
|
|
938
|
-
var text_1 = $.child(span_1, true);
|
|
939
|
-
$.reset(span_1);
|
|
940
|
-
var node_3 = $.sibling(span_1, 2);
|
|
941
|
-
{
|
|
942
|
-
var consequent_1 = ($$anchor2) => {
|
|
943
|
-
var svg = root_3();
|
|
944
|
-
let classes_1;
|
|
945
|
-
$.template_effect(() => classes_1 = $.set_class(svg, 0, "pi-chevron", null, classes_1, { "is-open": selectorData.dropdownOpen }));
|
|
946
|
-
$.append($$anchor2, svg);
|
|
947
|
-
};
|
|
948
|
-
$.if(node_3, ($$render) => {
|
|
949
|
-
if (!$.get(inactive) && selectorData.hasDropdown) $$render(consequent_1);
|
|
950
|
-
});
|
|
951
|
-
}
|
|
952
|
-
$.reset(button);
|
|
953
|
-
$.reset(div_1);
|
|
954
|
-
$.bind_this(div_1, ($$value) => $.set(selectorEl, $$value), () => $.get(selectorEl));
|
|
955
|
-
var div_2 = $.sibling(div_1, 2);
|
|
956
|
-
var input = $.child(div_2);
|
|
957
|
-
$.remove_input_defaults(input);
|
|
958
|
-
$.bind_this(input, ($$value) => $.set(telEl, $$value), () => $.get(telEl));
|
|
959
|
-
var div_3 = $.sibling(input, 2);
|
|
960
|
-
var node_4 = $.child(div_3);
|
|
961
|
-
{
|
|
962
|
-
var consequent_2 = ($$anchor2) => {
|
|
963
|
-
var fragment_3 = $.comment();
|
|
964
|
-
var node_5 = $.first_child(fragment_3);
|
|
965
|
-
$.snippet(node_5, () => $$props.actionsbefore);
|
|
966
|
-
$.append($$anchor2, fragment_3);
|
|
967
|
-
};
|
|
968
|
-
$.if(node_4, ($$render) => {
|
|
969
|
-
if ($$props.actionsbefore) $$render(consequent_2);
|
|
970
|
-
});
|
|
971
|
-
}
|
|
972
|
-
var node_6 = $.sibling(node_4, 2);
|
|
973
|
-
{
|
|
974
|
-
var consequent_5 = ($$anchor2) => {
|
|
975
|
-
var button_1 = root_5();
|
|
976
|
-
let classes_2;
|
|
977
|
-
var node_7 = $.child(button_1);
|
|
978
|
-
{
|
|
979
|
-
var consequent_3 = ($$anchor3) => {
|
|
980
|
-
var fragment_4 = $.comment();
|
|
981
|
-
var node_8 = $.first_child(fragment_4);
|
|
982
|
-
$.snippet(node_8, () => $$props.copysvg, () => copyData.copied);
|
|
983
|
-
$.append($$anchor3, fragment_4);
|
|
984
|
-
};
|
|
985
|
-
var consequent_4 = ($$anchor3) => {
|
|
986
|
-
var svg_1 = root_7();
|
|
987
|
-
$.append($$anchor3, svg_1);
|
|
988
|
-
};
|
|
989
|
-
var alternate_1 = ($$anchor3) => {
|
|
990
|
-
var svg_2 = root_8();
|
|
991
|
-
$.append($$anchor3, svg_2);
|
|
992
|
-
};
|
|
993
|
-
$.if(node_7, ($$render) => {
|
|
994
|
-
if ($$props.copysvg) $$render(consequent_3);
|
|
995
|
-
else if (copyData.copied) $$render(consequent_4, 1);
|
|
996
|
-
else $$render(alternate_1, -1);
|
|
997
|
-
});
|
|
998
|
-
}
|
|
999
|
-
$.reset(button_1);
|
|
1000
|
-
$.template_effect(() => {
|
|
1001
|
-
classes_2 = $.set_class(button_1, 1, "pi-btn pi-btn-copy", null, classes_2, { "is-copied": copyData.copied });
|
|
1002
|
-
$.set_attribute(button_1, "aria-label", copyData.copyAriaLabel);
|
|
1003
|
-
$.set_attribute(button_1, "title", copyData.copyButtonTitle);
|
|
1004
|
-
});
|
|
1005
|
-
$.delegated("click", button_1, function(...$$args) {
|
|
1006
|
-
copyData.onCopyClick?.apply(this, $$args);
|
|
1007
|
-
});
|
|
1008
|
-
$.append($$anchor2, button_1);
|
|
1009
|
-
};
|
|
1010
|
-
$.if(node_6, ($$render) => {
|
|
1011
|
-
if ($.get(showCopyButton)) $$render(consequent_5);
|
|
1012
|
-
});
|
|
1013
|
-
}
|
|
1014
|
-
var node_9 = $.sibling(node_6, 2);
|
|
1015
|
-
{
|
|
1016
|
-
var consequent_7 = ($$anchor2) => {
|
|
1017
|
-
var button_2 = root_9();
|
|
1018
|
-
var node_10 = $.child(button_2);
|
|
1019
|
-
{
|
|
1020
|
-
var consequent_6 = ($$anchor3) => {
|
|
1021
|
-
var fragment_5 = $.comment();
|
|
1022
|
-
var node_11 = $.first_child(fragment_5);
|
|
1023
|
-
$.snippet(node_11, () => $$props.clearsvg);
|
|
1024
|
-
$.append($$anchor3, fragment_5);
|
|
1025
|
-
};
|
|
1026
|
-
var alternate_2 = ($$anchor3) => {
|
|
1027
|
-
var svg_3 = root_11();
|
|
1028
|
-
$.append($$anchor3, svg_3);
|
|
1029
|
-
};
|
|
1030
|
-
$.if(node_10, ($$render) => {
|
|
1031
|
-
if ($$props.clearsvg) $$render(consequent_6);
|
|
1032
|
-
else $$render(alternate_2, -1);
|
|
1033
|
-
});
|
|
1034
|
-
}
|
|
1035
|
-
$.reset(button_2);
|
|
1036
|
-
$.template_effect(() => {
|
|
1037
|
-
$.set_attribute(button_2, "aria-label", clearButtonLabel());
|
|
1038
|
-
$.set_attribute(button_2, "title", clearButtonLabel());
|
|
1039
|
-
});
|
|
1040
|
-
$.delegated("click", button_2, handleClearClick);
|
|
1041
|
-
$.append($$anchor2, button_2);
|
|
1042
|
-
};
|
|
1043
|
-
$.if(node_9, ($$render) => {
|
|
1044
|
-
if ($.get(showClearButton)) $$render(consequent_7);
|
|
1045
|
-
});
|
|
1046
|
-
}
|
|
1047
|
-
$.reset(div_3);
|
|
1048
|
-
$.reset(div_2);
|
|
1049
|
-
$.reset(div);
|
|
1050
|
-
$.bind_this(div, ($$value) => $.set(rootEl, $$value), () => $.get(rootEl));
|
|
1051
|
-
var node_12 = $.sibling(div, 2);
|
|
1052
|
-
{
|
|
1053
|
-
var consequent_9 = ($$anchor2) => {
|
|
1054
|
-
var div_4 = root_12();
|
|
1055
|
-
let classes_3;
|
|
1056
|
-
let styles;
|
|
1057
|
-
var div_5 = $.child(div_4);
|
|
1058
|
-
var input_1 = $.child(div_5);
|
|
1059
|
-
$.remove_input_defaults(input_1);
|
|
1060
|
-
$.bind_this(input_1, ($$value) => $.set(searchEl, $$value), () => $.get(searchEl));
|
|
1061
|
-
$.reset(div_5);
|
|
1062
|
-
var ul = $.sibling(div_5, 2);
|
|
1063
|
-
$.each(
|
|
1064
|
-
ul,
|
|
1065
|
-
23,
|
|
1066
|
-
() => selectorData.filteredCountries,
|
|
1067
|
-
(c) => c.id,
|
|
1068
|
-
($$anchor3, c, idx) => {
|
|
1069
|
-
var li = root_13();
|
|
1070
|
-
let classes_4;
|
|
1071
|
-
var span_2 = $.child(li);
|
|
1072
|
-
var node_13 = $.child(span_2);
|
|
1073
|
-
{
|
|
1074
|
-
var consequent_8 = ($$anchor4) => {
|
|
1075
|
-
var fragment_6 = $.comment();
|
|
1076
|
-
var node_14 = $.first_child(fragment_6);
|
|
1077
|
-
$.snippet(node_14, () => $$props.flag, () => $.get(c));
|
|
1078
|
-
$.append($$anchor4, fragment_6);
|
|
1079
|
-
};
|
|
1080
|
-
var alternate_3 = ($$anchor4) => {
|
|
1081
|
-
var text_2 = $.text();
|
|
1082
|
-
$.template_effect(() => $.set_text(text_2, $.get(c).flag));
|
|
1083
|
-
$.append($$anchor4, text_2);
|
|
1084
|
-
};
|
|
1085
|
-
$.if(node_13, ($$render) => {
|
|
1086
|
-
if ($$props.flag) $$render(consequent_8);
|
|
1087
|
-
else $$render(alternate_3, -1);
|
|
1088
|
-
});
|
|
1089
|
-
}
|
|
1090
|
-
$.reset(span_2);
|
|
1091
|
-
var span_3 = $.sibling(span_2, 2);
|
|
1092
|
-
var text_3 = $.child(span_3, true);
|
|
1093
|
-
$.reset(span_3);
|
|
1094
|
-
var span_4 = $.sibling(span_3, 2);
|
|
1095
|
-
var text_4 = $.child(span_4, true);
|
|
1096
|
-
$.reset(span_4);
|
|
1097
|
-
$.reset(li);
|
|
1098
|
-
$.template_effect(
|
|
1099
|
-
($0) => {
|
|
1100
|
-
$.set_attribute(li, "id", $0);
|
|
1101
|
-
classes_4 = $.set_class(li, 1, "pi-option", null, classes_4, {
|
|
1102
|
-
"is-focused": $.get(idx) === selectorData.focusedIndex,
|
|
1103
|
-
"is-selected": $.get(c).id === countryData.country.id
|
|
1104
|
-
});
|
|
1105
|
-
$.set_attribute(li, "aria-selected", $.get(c).id === countryData.country.id);
|
|
1106
|
-
$.set_attribute(li, "title", $.get(c).name);
|
|
1107
|
-
$.set_attribute(span_2, "aria-label", `${$.get(c).name ?? ""} flag`);
|
|
1108
|
-
$.set_text(text_3, $.get(c).name);
|
|
1109
|
-
$.set_text(text_4, $.get(c).code);
|
|
1110
|
-
},
|
|
1111
|
-
[() => getOptionId($.get(idx))]
|
|
1112
|
-
);
|
|
1113
|
-
$.delegated("click", li, () => selectorData.selectCountry($.get(c).id));
|
|
1114
|
-
$.event("mouseenter", li, () => selectorData.setFocusedIndex($.get(idx)));
|
|
1115
|
-
$.append($$anchor3, li);
|
|
1116
|
-
},
|
|
1117
|
-
($$anchor3) => {
|
|
1118
|
-
var li_1 = root_16();
|
|
1119
|
-
var text_5 = $.child(li_1, true);
|
|
1120
|
-
$.reset(li_1);
|
|
1121
|
-
$.template_effect(() => $.set_text(text_5, noResultsText()));
|
|
1122
|
-
$.append($$anchor3, li_1);
|
|
1123
|
-
}
|
|
1124
|
-
);
|
|
1125
|
-
$.reset(ul);
|
|
1126
|
-
$.reset(div_4);
|
|
1127
|
-
$.action(div_4, ($$node) => portal?.($$node));
|
|
1128
|
-
$.bind_this(div_4, ($$value) => $.set(dropdownEl, $$value), () => $.get(dropdownEl));
|
|
1129
|
-
$.template_effect(() => {
|
|
1130
|
-
classes_3 = $.set_class(div_4, 1, `phone-dropdown ${dropdownClass() ?? ""} ${themeData.themeClass ?? ""}`, null, classes_3, { "is-closing": selectorData.isClosing });
|
|
1131
|
-
styles = $.set_style(div_4, "", styles, {
|
|
1132
|
-
position: "absolute",
|
|
1133
|
-
top: selectorData.dropdownStyle.top,
|
|
1134
|
-
left: selectorData.dropdownStyle.left,
|
|
1135
|
-
width: selectorData.dropdownStyle.width
|
|
1136
|
-
});
|
|
1137
|
-
$.set_attribute(input_1, "placeholder", searchPlaceholder());
|
|
1138
|
-
$.set_attribute(input_1, "aria-controls", $.get(listboxId));
|
|
1139
|
-
$.set_attribute(input_1, "aria-activedescendant", $.get(activeOptionId));
|
|
1140
|
-
$.set_value(input_1, selectorData.search);
|
|
1141
|
-
$.set_attribute(ul, "id", $.get(listboxId));
|
|
1142
|
-
});
|
|
1143
|
-
$.event("animationend", div_4, function(...$$args) {
|
|
1144
|
-
selectorData.handleDropdownAnimationEnd?.apply(this, $$args);
|
|
1145
|
-
});
|
|
1146
|
-
$.delegated("keydown", input_1, function(...$$args) {
|
|
1147
|
-
selectorData.handleSearchKeydown?.apply(this, $$args);
|
|
1148
|
-
});
|
|
1149
|
-
$.delegated("input", input_1, function(...$$args) {
|
|
1150
|
-
selectorData.handleSearchChange?.apply(this, $$args);
|
|
1151
|
-
});
|
|
1152
|
-
$.append($$anchor2, div_4);
|
|
1153
|
-
};
|
|
1154
|
-
$.if(node_12, ($$render) => {
|
|
1155
|
-
if (selectorData.dropdownOpen) $$render(consequent_9);
|
|
1156
|
-
});
|
|
1157
|
-
}
|
|
1158
|
-
var div_6 = $.sibling(node_12, 2);
|
|
1159
|
-
$.bind_this(div_6, ($$value) => $.set(liveEl, $$value), () => $.get(liveEl));
|
|
1160
|
-
$.template_effect(() => {
|
|
1161
|
-
classes = $.set_class(button, 1, "pi-selector-btn", null, classes, { "no-dropdown": !selectorData.hasDropdown || readonly() });
|
|
1162
|
-
button.disabled = disabled();
|
|
1163
|
-
$.set_attribute(button, "tabindex", $.get(inactive) || !selectorData.hasDropdown ? -1 : void 0);
|
|
1164
|
-
$.set_attribute(button, "aria-label", `Selected country: ${countryData.country.name ?? ""}`);
|
|
1165
|
-
$.set_attribute(button, "aria-expanded", selectorData.dropdownOpen);
|
|
1166
|
-
$.set_attribute(button, "aria-haspopup", selectorData.hasDropdown ? "listbox" : void 0);
|
|
1167
|
-
$.set_attribute(span, "aria-label", `${countryData.country.name ?? ""} flag`);
|
|
1168
|
-
$.set_text(text_1, countryData.country.code);
|
|
1169
|
-
$.set_attribute(input, "placeholder", formatterData.displayPlaceholder);
|
|
1170
|
-
$.set_value(input, formatterData.displayValue);
|
|
1171
|
-
input.disabled = disabled();
|
|
1172
|
-
input.readOnly = readonly();
|
|
1173
|
-
$.set_attribute(input, "aria-invalid", $.get(incomplete));
|
|
1174
|
-
});
|
|
1175
|
-
$.delegated("click", button, function(...$$args) {
|
|
1176
|
-
selectorData.toggleDropdown?.apply(this, $$args);
|
|
1177
|
-
});
|
|
1178
|
-
$.delegated("beforeinput", input, function(...$$args) {
|
|
1179
|
-
inputHandlers.handleBeforeInput?.apply(this, $$args);
|
|
1180
|
-
});
|
|
1181
|
-
$.delegated("input", input, function(...$$args) {
|
|
1182
|
-
inputHandlers.handleInput?.apply(this, $$args);
|
|
1183
|
-
});
|
|
1184
|
-
$.delegated("keydown", input, function(...$$args) {
|
|
1185
|
-
inputHandlers.handleKeydown?.apply(this, $$args);
|
|
1186
|
-
});
|
|
1187
|
-
$.event("paste", input, function(...$$args) {
|
|
1188
|
-
inputHandlers.handlePaste?.apply(this, $$args);
|
|
1189
|
-
});
|
|
1190
|
-
$.event("focus", input, handleFocus);
|
|
1191
|
-
$.event("blur", input, handleBlur);
|
|
1192
|
-
$.append($$anchor, fragment);
|
|
1193
|
-
return $.pop($$exports);
|
|
1194
|
-
}
|
|
1195
|
-
$.delegate(["click", "beforeinput", "input", "keydown"]);
|
|
1196
|
-
function usePhoneMask(options) {
|
|
1197
|
-
let inputRef = $.state(null);
|
|
1198
|
-
const countryData = useCountry({
|
|
1199
|
-
country: options.country,
|
|
1200
|
-
locale: options.locale,
|
|
1201
|
-
detect: options.detect,
|
|
1202
|
-
onCountryChange: options.onCountryChange
|
|
1203
|
-
});
|
|
1204
|
-
const formatterData = useFormatter({
|
|
1205
|
-
country: () => countryData.country,
|
|
1206
|
-
value: options.value,
|
|
1207
|
-
onChange: options.onChange,
|
|
1208
|
-
onPhoneChange: options.onPhoneChange
|
|
1209
|
-
});
|
|
1210
|
-
const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
|
|
1211
|
-
formatter: () => formatterData.formatter,
|
|
1212
|
-
digits: () => formatterData.digits,
|
|
1213
|
-
onChange: options.onChange
|
|
1214
|
-
});
|
|
1215
|
-
$.user_effect(() => {
|
|
1216
|
-
const el = $.get(inputRef);
|
|
1217
|
-
if (!el) return;
|
|
1218
|
-
el.setAttribute("type", "tel");
|
|
1219
|
-
el.setAttribute("inputmode", "tel");
|
|
1220
|
-
el.addEventListener("beforeinput", handleBeforeInput);
|
|
1221
|
-
el.addEventListener("input", handleInput);
|
|
1222
|
-
el.addEventListener("keydown", handleKeydown);
|
|
1223
|
-
el.addEventListener("paste", handlePaste);
|
|
1224
|
-
return () => {
|
|
1225
|
-
el.removeEventListener("beforeinput", handleBeforeInput);
|
|
1226
|
-
el.removeEventListener("input", handleInput);
|
|
1227
|
-
el.removeEventListener("keydown", handleKeydown);
|
|
1228
|
-
el.removeEventListener("paste", handlePaste);
|
|
1229
|
-
};
|
|
1230
|
-
});
|
|
1231
|
-
$.user_effect(() => {
|
|
1232
|
-
const el = $.get(inputRef);
|
|
1233
|
-
if (!el) return;
|
|
1234
|
-
el.value = formatterData.displayValue;
|
|
1235
|
-
el.setAttribute("placeholder", formatterData.displayPlaceholder);
|
|
1236
|
-
});
|
|
1237
|
-
const clear = () => {
|
|
1238
|
-
options.onChange("");
|
|
1239
|
-
};
|
|
1240
|
-
return {
|
|
1241
|
-
get inputRef() {
|
|
1242
|
-
return $.get(inputRef);
|
|
1243
|
-
},
|
|
1244
|
-
set inputRef(el) {
|
|
1245
|
-
$.set(inputRef, el, true);
|
|
1246
|
-
},
|
|
1247
|
-
get digits() {
|
|
1248
|
-
return formatterData.digits;
|
|
1249
|
-
},
|
|
1250
|
-
get formatter() {
|
|
1251
|
-
return formatterData.formatter;
|
|
1252
|
-
},
|
|
1253
|
-
get full() {
|
|
1254
|
-
return formatterData.full;
|
|
1255
|
-
},
|
|
1256
|
-
get fullFormatted() {
|
|
1257
|
-
return formatterData.fullFormatted;
|
|
1258
|
-
},
|
|
1259
|
-
get isComplete() {
|
|
1260
|
-
return formatterData.isComplete;
|
|
1261
|
-
},
|
|
1262
|
-
get isEmpty() {
|
|
1263
|
-
return formatterData.isEmpty;
|
|
1264
|
-
},
|
|
1265
|
-
get shouldShowWarn() {
|
|
1266
|
-
return formatterData.shouldShowWarn;
|
|
1267
|
-
},
|
|
1268
|
-
get country() {
|
|
1269
|
-
return countryData.country;
|
|
1270
|
-
},
|
|
1271
|
-
get locale() {
|
|
1272
|
-
return countryData.locale;
|
|
1273
|
-
},
|
|
1274
|
-
setCountry: countryData.setCountry,
|
|
1275
|
-
clear
|
|
1276
|
-
};
|
|
1277
|
-
}
|
|
1278
|
-
function parseParams$1(params) {
|
|
1279
|
-
if (typeof params === "string") return { country: params };
|
|
1280
|
-
if (params && typeof params === "object") return params;
|
|
1281
|
-
return {};
|
|
1282
|
-
}
|
|
1283
|
-
function phoneMaskAttachment(params) {
|
|
1284
|
-
return (el) => {
|
|
1285
|
-
if (el.tagName !== "INPUT") {
|
|
1286
|
-
console.warn("[phoneMaskAttachment] Attachment can only be used on input elements");
|
|
1287
|
-
return;
|
|
1288
|
-
}
|
|
1289
|
-
const options = parseParams$1(params);
|
|
1290
|
-
const stopRoot = $.effect_root(() => {
|
|
1291
|
-
let digits = $.state($.proxy(el.value || ""));
|
|
1292
|
-
const mask = usePhoneMask({
|
|
1293
|
-
country: () => options.country,
|
|
1294
|
-
locale: () => options.locale,
|
|
1295
|
-
detect: () => options.detect,
|
|
1296
|
-
value: () => $.get(digits),
|
|
1297
|
-
onChange: (newDigits) => {
|
|
1298
|
-
$.set(digits, newDigits, true);
|
|
1299
|
-
},
|
|
1300
|
-
onPhoneChange: options.onChange,
|
|
1301
|
-
onCountryChange: options.onCountryChange
|
|
1302
|
-
});
|
|
1303
|
-
mask.inputRef = el;
|
|
1304
|
-
el.__phoneMaskState = {
|
|
1305
|
-
get country() {
|
|
1306
|
-
return mask.country;
|
|
1307
|
-
},
|
|
1308
|
-
get formatter() {
|
|
1309
|
-
return mask.formatter;
|
|
1310
|
-
},
|
|
1311
|
-
get digits() {
|
|
1312
|
-
return mask.digits;
|
|
1313
|
-
},
|
|
1314
|
-
get locale() {
|
|
1315
|
-
return mask.locale;
|
|
1316
|
-
},
|
|
1317
|
-
options,
|
|
1318
|
-
setCountry: (code) => mask.setCountry(code)
|
|
1319
|
-
};
|
|
1320
|
-
});
|
|
1321
|
-
return () => {
|
|
1322
|
-
stopRoot();
|
|
1323
|
-
delete el.__phoneMaskState;
|
|
1324
|
-
};
|
|
1325
|
-
};
|
|
1326
|
-
}
|
|
1327
|
-
function parseParams(params) {
|
|
1328
|
-
if (typeof params === "string") return { country: params };
|
|
1329
|
-
if (params && typeof params === "object") return params;
|
|
1330
|
-
return {};
|
|
1331
|
-
}
|
|
1332
|
-
function updateDigits(el, state, digits) {
|
|
1333
|
-
state.digits = digits;
|
|
1334
|
-
el.value = state.formatter.formatDisplay(state.digits);
|
|
1335
|
-
if (state.options.onChange) {
|
|
1336
|
-
const fullNumberFormatted = el.value ? `${state.country.code} ${el.value}` : "";
|
|
1337
|
-
const fullNumber = state.digits ? `${state.country.code}${state.digits}` : "";
|
|
1338
|
-
state.options.onChange({
|
|
1339
|
-
full: fullNumber,
|
|
1340
|
-
fullFormatted: fullNumberFormatted,
|
|
1341
|
-
digits: state.digits
|
|
1342
|
-
});
|
|
1343
|
-
}
|
|
1344
|
-
}
|
|
1345
|
-
function checkDigitsUpdate(el, state) {
|
|
1346
|
-
const maxDigits = state.formatter.getMaxDigits();
|
|
1347
|
-
const digits = extractDigits(el.value, maxDigits);
|
|
1348
|
-
const displayValue = state.formatter.formatDisplay(digits);
|
|
1349
|
-
if (digits !== state.digits || el.value !== displayValue) {
|
|
1350
|
-
updateDigits(el, state, digits);
|
|
1351
|
-
}
|
|
1352
|
-
}
|
|
1353
|
-
function checkCountryUpdate(state) {
|
|
1354
|
-
const oldCountry = state.country.id;
|
|
1355
|
-
const newCountry = parseCountryCode(state.options.country);
|
|
1356
|
-
if (newCountry && newCountry !== oldCountry) {
|
|
1357
|
-
state.setCountry(newCountry);
|
|
1358
|
-
}
|
|
1359
|
-
}
|
|
1360
|
-
function createHandler(el, state, handler) {
|
|
1361
|
-
return (e2) => {
|
|
1362
|
-
const result = handler(e2, state);
|
|
1363
|
-
if (!result) return;
|
|
1364
|
-
updateDigits(el, state, result.newDigits);
|
|
1365
|
-
Promise.resolve().then(() => {
|
|
1366
|
-
const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
|
|
1367
|
-
setCaret(el, pos);
|
|
1368
|
-
});
|
|
1369
|
-
};
|
|
1370
|
-
}
|
|
1371
|
-
async function detectInitialCountry(options) {
|
|
1372
|
-
const countryOption = parseCountryCode(options.country);
|
|
1373
|
-
if (countryOption) return countryOption;
|
|
1374
|
-
if (options.detect) {
|
|
1375
|
-
const geoCountry = parseCountryCode(await detectByGeoIp());
|
|
1376
|
-
if (geoCountry) return geoCountry;
|
|
1377
|
-
const localeCountry = parseCountryCode(detectCountryFromLocale());
|
|
1378
|
-
if (localeCountry) return localeCountry;
|
|
1379
|
-
}
|
|
1380
|
-
return "US";
|
|
1381
|
-
}
|
|
1382
|
-
function phoneMaskAction(el, params) {
|
|
1383
|
-
if (el.tagName !== "INPUT") {
|
|
1384
|
-
console.warn("[phoneMaskAction] Action can only be used on input elements");
|
|
1385
|
-
return {
|
|
1386
|
-
update() {
|
|
1387
|
-
},
|
|
1388
|
-
destroy() {
|
|
1389
|
-
}
|
|
1390
|
-
};
|
|
1391
|
-
}
|
|
1392
|
-
el.setAttribute("type", "tel");
|
|
1393
|
-
el.setAttribute("inputmode", "tel");
|
|
1394
|
-
el.setAttribute("placeholder", "");
|
|
1395
|
-
const options = parseParams(params);
|
|
1396
|
-
const locale = options.locale || getNavigatorLang();
|
|
1397
|
-
const country = getCountry(parseCountryCode(options.country, "US"), locale);
|
|
1398
|
-
const state = {
|
|
1399
|
-
country,
|
|
1400
|
-
formatter: createPhoneFormatter(country),
|
|
1401
|
-
digits: "",
|
|
1402
|
-
locale,
|
|
1403
|
-
options,
|
|
1404
|
-
setCountry(code) {
|
|
1405
|
-
const parsed = parseCountryCode(code);
|
|
1406
|
-
if (!parsed) return false;
|
|
1407
|
-
const newCountry = getCountry(parsed, this.locale);
|
|
1408
|
-
this.country = newCountry;
|
|
1409
|
-
this.options.onCountryChange?.(newCountry);
|
|
1410
|
-
this.formatter = createPhoneFormatter(newCountry);
|
|
1411
|
-
el.placeholder = this.formatter.getPlaceholder();
|
|
1412
|
-
checkDigitsUpdate(el, this);
|
|
1413
|
-
return true;
|
|
1414
|
-
}
|
|
1415
|
-
};
|
|
1416
|
-
el.__phoneMaskState = state;
|
|
1417
|
-
const inputHandler = createHandler(el, state, processInput);
|
|
1418
|
-
const keydownHandler = createHandler(el, state, processKeydown);
|
|
1419
|
-
const pasteHandler = createHandler(el, state, processPaste);
|
|
1420
|
-
el.addEventListener("beforeinput", processBeforeInput);
|
|
1421
|
-
el.addEventListener("input", inputHandler);
|
|
1422
|
-
el.addEventListener("keydown", keydownHandler);
|
|
1423
|
-
el.addEventListener("paste", pasteHandler);
|
|
1424
|
-
detectInitialCountry(options).then((countryCode) => {
|
|
1425
|
-
if (el.__phoneMaskState !== state) return;
|
|
1426
|
-
state.setCountry(countryCode);
|
|
1427
|
-
});
|
|
1428
|
-
return {
|
|
1429
|
-
update(newParams) {
|
|
1430
|
-
state.options = parseParams(newParams);
|
|
1431
|
-
checkCountryUpdate(state);
|
|
1432
|
-
checkDigitsUpdate(el, state);
|
|
1433
|
-
},
|
|
1434
|
-
destroy() {
|
|
1435
|
-
el.removeEventListener("beforeinput", processBeforeInput);
|
|
1436
|
-
el.removeEventListener("input", inputHandler);
|
|
1437
|
-
el.removeEventListener("keydown", keydownHandler);
|
|
1438
|
-
el.removeEventListener("paste", pasteHandler);
|
|
1439
|
-
delete el.__phoneMaskState;
|
|
1440
|
-
}
|
|
1441
|
-
};
|
|
1442
|
-
}
|
|
1443
|
-
const PhoneInput = PhoneInput$1;
|
|
1444
|
-
const PMaskHelpers = {
|
|
1445
|
-
getFlagEmoji: k,
|
|
1446
|
-
countPlaceholders,
|
|
1447
|
-
formatDigitsWithMap,
|
|
1448
|
-
pickMaskVariant,
|
|
1449
|
-
removeCountryCodePrefix,
|
|
1450
|
-
toArray
|
|
1451
|
-
};
|
|
1452
|
-
export {
|
|
1453
|
-
PMaskHelpers,
|
|
1454
|
-
PhoneInput,
|
|
1455
|
-
phoneMaskAction,
|
|
1456
|
-
phoneMaskAttachment,
|
|
1457
|
-
usePhoneMask
|
|
1458
|
-
};
|
|
1
|
+
import{MasksFull as e,countPlaceholders as t,createPhoneFormatter as n,detectByGeoIp as r,detectCountryFromLocale as i,extractDigits as a,filterCountries as o,formatDigitsWithMap as s,getCountry as c,getFlagEmoji as l,getNavigatorLang as u,parseCountryCode as d,pickMaskVariant as f,processBeforeInput as p,processInput as m,processKeydown as h,processPaste as g,removeCountryCodePrefix as _,setCaret as v}from"@desource/phone-mask";import"svelte/internal/disclose-version";import*as y from"svelte/internal/client";import{onDestroy as b,onMount as x,tick as S}from"svelte";function C({country:e,locale:t,detect:n,onCountryChange:a}={}){let o=y.state(y.proxy(d(e?.(),`US`))),s=y.derived(()=>t?.()||u()),l=y.derived(()=>c(y.get(o),y.get(s))),f=e=>{let t=d(e);return t?(y.set(o,t,!0),!0):!1},p=async()=>{f(await r())||f(i())};return y.user_effect(()=>{let t=e?.();t&&t!==y.get(o)&&f(t)}),y.user_effect(()=>{n?.()&&!e?.()&&p()}),y.user_effect(()=>{a?.(y.get(l))}),{get country(){return y.get(l)},get locale(){return y.get(s)},setCountry:f}}function w({country:e,value:t,onChange:r,onPhoneChange:i,onValidationChange:o}){let s=y.derived(()=>n(e())),c=y.derived(()=>y.get(s).getMaxDigits()),l=y.derived(()=>a(t(),y.get(c))),u=y.derived(()=>y.get(s).getPlaceholder()),d=y.derived(()=>y.get(s).formatDisplay(y.get(l))),f=y.derived(()=>y.get(l)?`${e().code}${y.get(l)}`:``),p=y.derived(()=>y.get(d)?`${e().code} ${y.get(d)}`:``),m=y.derived(()=>y.get(s).isComplete(y.get(l))),h=y.derived(()=>y.get(l).length===0),g=y.derived(()=>!y.get(h)&&!y.get(m)),_=y.derived(()=>({full:y.get(f),fullFormatted:y.get(p),digits:y.get(l)}));return y.user_pre_effect(()=>{let e=t(),n=y.get(l);e!==n&&r(n)}),y.user_effect(()=>{i?.(y.get(_))}),y.user_effect(()=>{o?.(y.get(m))}),{get digits(){return y.get(l)},get formatter(){return y.get(s)},get displayPlaceholder(){return y.get(u)},get displayValue(){return y.get(d)},get full(){return y.get(f)},get fullFormatted(){return y.get(p)},get isComplete(){return y.get(m)},get isEmpty(){return y.get(h)},get shouldShowWarn(){return y.get(g)}}}function T(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return b(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function E(){let e=y.state(!1),t=T();return{get showValidationHint(){return y.get(e)},clearValidationHint:(n=!0)=>{n&&y.set(e,!1),t.clear()},scheduleValidationHint:n=>{y.set(e,!1),t.set(()=>{y.set(e,!0)},n)}}}var D=500,O=300;function k(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{S().then(()=>{e&&v(e,t().getCaretPosition(n))})};return{handleBeforeInput:e=>{p(e)},handleInput:e=>{if(r?.())return;let n=m(e,{formatter:t()});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(D))},handleKeydown:e=>{if(r?.())return;let s=h(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(O))},handlePaste:e=>{if(r?.())return;let s=g(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(O))}}}function A({rootRef:t,dropdownRef:n,searchRef:r,selectorRef:i,locale:a,countryOption:s,inactive:c,onSelectCountry:l,onAfterSelect:u}){let d=y.state(``),f=y.state(!1),p=y.state(!1),m=y.state(y.proxy({})),h=y.state(0),g=y.derived(()=>e(a())),_=y.derived(()=>o(y.get(g),y.get(d))),v=y.derived(()=>!s?.()&&y.get(g).length>1),x=e=>{y.set(h,e,!0)},C=()=>{S().then(()=>r()?.focus({preventScroll:!0}))},w=()=>{y.get(f)&&y.set(p,!0)},T=()=>{y.set(p,!1),y.set(f,!0),x(0),C()},E=()=>{y.get(p)&&(y.set(f,!1),y.set(p,!1))},D=()=>{c?.()||!y.get(v)||(y.get(f)?w():T())},O=e=>{l(e),w(),y.set(d,``),x(0),u?.()},k=e=>{y.set(d,e.target.value,!0),x(0)},A=e=>{let t=e.target,r=n(),a=i();t&&(r?.contains(t)||a?.contains(t)||w())},j=e=>{if(e?.type===`scroll`&&e.target&&n()?.contains(e.target))return;let r=t();if(!r)return;let i=r.getBoundingClientRect();y.set(m,{top:`${i.bottom+globalThis.scrollY+8}px`,left:`${i.left+globalThis.scrollX}px`,width:`${i.width}px`},!0)},M=()=>{S().then(()=>{let e=n()?.lastElementChild,t=e?.children[y.get(h)];if(!e||!t)return;let r=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=0;if(i.top<r.top)a=e.scrollTop-(r.top-i.top);else if(i.bottom>r.bottom)a=e.scrollTop+(i.bottom-r.bottom);else return;e.scrollTo({top:a,behavior:`smooth`})})},N=e=>{e.key===`ArrowDown`?(e.preventDefault(),x(Math.min(y.get(h)+1,y.get(_).length-1)),M()):e.key===`ArrowUp`?(e.preventDefault(),x(Math.max(y.get(h)-1,0)),M()):e.key===`Enter`&&y.get(_)[y.get(h)]?(e.preventDefault(),O(y.get(_)[y.get(h)].id)):e.key===`Escape`&&w()},P=()=>{globalThis.removeEventListener(`resize`,j),globalThis.removeEventListener(`scroll`,j,!0),globalThis.removeEventListener(`click`,A,!0)};return y.user_effect(()=>{!y.get(v)&&y.get(f)&&w()}),y.user_effect(()=>{if(!y.get(f)){P();return}j(),globalThis.addEventListener(`resize`,j),globalThis.addEventListener(`scroll`,j,!0),globalThis.addEventListener(`click`,A,!0)}),b(P),{get dropdownOpen(){return y.get(f)},get isClosing(){return y.get(p)},get search(){return y.get(d)},get focusedIndex(){return y.get(h)},get dropdownStyle(){return y.get(m)},get filteredCountries(){return y.get(_)},get hasDropdown(){return y.get(v)},openDropdown:T,closeDropdown:w,toggleDropdown:D,selectCountry:O,setFocusedIndex:x,handleSearchChange:k,handleSearchKeydown:N,handleDropdownAnimationEnd:E}}function j(e=1800){let t=y.state(!1),n=y.state(!1),r=T();return{get copied(){return y.get(t)},get isCopying(){return y.get(n)},copy:async i=>{if(y.get(n))return!1;let a=i.trim();if(!a)return!1;y.set(n,!0);try{return await navigator.clipboard.writeText(a),y.set(t,!0),r.set(()=>{y.set(t,!1)},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{y.set(n,!1)}}}}var M=1800;function N({liveRef:e,fullFormatted:t,onCopy:n}){let r=T(),i=j(M),a=y.derived(()=>i.copied?`Copied`:`Copy ${t()}`),o=y.derived(()=>i.copied?`Copied`:`Copy phone number`),s=t=>{let n=e?.();n&&(n.textContent=t,r.set(()=>{let t=e?.();t&&(t.textContent=``)},M))};return{get copied(){return i.copied},get copyAriaLabel(){return y.get(a)},get copyButtonTitle(){return y.get(o)},onCopyClick:async()=>{let e=t().trim();await i.copy(e)&&(n?.(e),s(`Phone number copied to clipboard`))}}}function P({theme:e}){let t=y.state(!1),n=y.derived(()=>(()=>{let n=e();return n===`auto`?y.get(t)?`theme-dark`:`theme-light`:`theme-${n}`})());return y.user_effect(()=>{let e=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null;if(!e)return;y.set(t,e.matches,!0);let n=e=>{y.set(t,e.matches,!0)};return e.addEventListener(`change`,n),()=>e.removeEventListener(`change`,n)}),{get themeClass(){return y.get(n)}}}var ee=y.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`),te=y.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`),ne=y.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`),re=y.from_html(`<button type="button"><!></button>`),ie=y.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`),ae=y.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`),oe=y.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`),se=y.from_html(`<li class="pi-empty"> </li>`),ce=y.from_html(`<div role="dialog" aria-modal="false" aria-label="Select country"><div class="pi-search-wrap"><input type="search" class="pi-search" aria-label="Search countries"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul></div>`),le=y.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`,1);function F(e,t){y.push(t,!0);let n=y.prop(t,`value`,15,``),r=y.prop(t,`detect`,3,!0),i=y.prop(t,`size`,3,`normal`),a=y.prop(t,`theme`,3,`auto`),o=y.prop(t,`disabled`,3,!1),s=y.prop(t,`readonly`,3,!1),c=y.prop(t,`showCopy`,3,!0),l=y.prop(t,`showClear`,3,!1),u=y.prop(t,`withValidity`,3,!0),d=y.prop(t,`searchPlaceholder`,3,`Search country or code...`),f=y.prop(t,`noResultsText`,3,`No countries found`),p=y.prop(t,`clearButtonLabel`,3,`Clear phone number`),m=y.prop(t,`dropdownClass`,3,``),h=y.prop(t,`disableDefaultStyles`,3,!1),g=y.rest_props(t,`$$slots.$$events.$$legacy.value.country.detect.locale.size.theme.disabled.readonly.showCopy.showClear.withValidity.searchPlaceholder.noResultsText.clearButtonLabel.dropdownClass.disableDefaultStyles.onchange.oncountrychange.onvalidationchange.onfocus.onblur.oncopy.onclear.flag.copysvg.clearsvg.actionsbefore.class`.split(`.`)),_=y.state(null),v=y.state(null),b=y.state(null),T=y.state(null),D=y.state(null),O=y.state(null),j=C({country:()=>t.country,locale:()=>t.locale,detect:()=>r(),onCountryChange:(...e)=>t.oncountrychange?.(...e)}),M=w({country:()=>j.country,value:()=>n(),onChange:e=>n(e),onPhoneChange:(...e)=>t.onchange?.(...e),onValidationChange:(...e)=>t.onvalidationchange?.(...e)}),F=E(),I=y.derived(()=>o()||s()),L=y.derived(()=>F.showValidationHint&&M.shouldShowWarn),R=y.derived(()=>c()&&!M.isEmpty&&!o()),z=y.derived(()=>l()&&!M.isEmpty&&!y.get(I)),B=N({liveRef:()=>y.get(b),fullFormatted:()=>M.fullFormatted,onCopy:(...e)=>t.oncopy?.(...e)}),V=()=>S().then(()=>y.get(v)?.focus()),H=A({rootRef:()=>y.get(_),dropdownRef:()=>y.get(T),searchRef:()=>y.get(D),selectorRef:()=>y.get(O),locale:()=>j.locale,countryOption:()=>t.country,inactive:()=>y.get(I),onSelectCountry:j.setCountry,onAfterSelect:V}),U=y.state(`0`);x(()=>{y.set(U,Math.random().toString(36).slice(2,10),!0)});let W=y.derived(()=>`pi-options-${y.get(U)}`),G=e=>`pi-option-${y.get(U)}-${e}`,ue=y.derived(()=>H.dropdownOpen&&H.filteredCountries[H.focusedIndex]?G(H.focusedIndex):void 0),K=k({formatter:()=>M.formatter,digits:()=>M.digits,inactive:()=>y.get(I),onChange:e=>n(e),scheduleValidationHint:F.scheduleValidationHint}),de=e=>{F.clearValidationHint(!1),H.closeDropdown(),t.onfocus?.(e)},fe=e=>t.onblur?.(e);function pe(){V()}function me(){y.get(v)?.blur()}function he(){n(``),F.clearValidationHint(),t.onclear?.()}function ge(e){j.setCountry(e)}function _e(){return M.full}function ve(){return M.fullFormatted}function ye(){return M.digits}function be(){return M.isComplete}function xe(){return M.isComplete}let Se=()=>{he(),V()},Ce=P({theme:()=>a()}),we=y.derived(()=>[`phone-input`,`size-${i()}`,Ce.themeClass,o()&&`is-disabled`,s()&&`is-readonly`,h()&&`is-unstyled`,u()&&y.get(L)&&`is-incomplete`,u()&&M.isComplete&&`is-complete`,t.class].filter(Boolean).join(` `)),Te=y.derived(()=>+y.get(R)+ +y.get(z)+(t.actionsbefore?1:0));function Ee(e){return document.body.appendChild(e),{destroy:()=>e.remove()}}var De={focus:pe,blur:me,clear:he,selectCountry:ge,getFullNumber:_e,getFullFormattedNumber:ve,getDigits:ye,isValid:be,isComplete:xe},Oe=le(),q=y.first_child(Oe);y.attribute_effect(q,()=>({class:y.get(we),...g,role:`group`,"aria-label":`Phone input with country selector`,[y.STYLE]:{"--pi-actions-count":y.get(Te)}}));var J=y.child(q),Y=y.child(J);let ke;var X=y.child(Y),Ae=y.child(X),je=e=>{var n=y.comment(),r=y.first_child(n);y.snippet(r,()=>t.flag,()=>j.country),y.append(e,n)},Me=e=>{var t=y.text();y.template_effect(()=>y.set_text(t,j.country.flag)),y.append(e,t)};y.if(Ae,e=>{t.flag?e(je):e(Me,-1)}),y.reset(X);var Z=y.sibling(X,2),Ne=y.child(Z,!0);y.reset(Z);var Pe=y.sibling(Z,2),Fe=e=>{var t=ee();let n;y.template_effect(()=>n=y.set_class(t,0,`pi-chevron`,null,n,{"is-open":H.dropdownOpen})),y.append(e,t)};y.if(Pe,e=>{!y.get(I)&&H.hasDropdown&&e(Fe)}),y.reset(Y),y.reset(J),y.bind_this(J,e=>y.set(O,e),()=>y.get(O));var Ie=y.sibling(J,2),Q=y.child(Ie);y.remove_input_defaults(Q),y.bind_this(Q,e=>y.set(v,e),()=>y.get(v));var Le=y.sibling(Q,2),Re=y.child(Le),ze=e=>{var n=y.comment(),r=y.first_child(n);y.snippet(r,()=>t.actionsbefore),y.append(e,n)};y.if(Re,e=>{t.actionsbefore&&e(ze)});var Be=y.sibling(Re,2),Ve=e=>{var n=re();let r;var i=y.child(n),a=e=>{var n=y.comment(),r=y.first_child(n);y.snippet(r,()=>t.copysvg,()=>B.copied),y.append(e,n)},o=e=>{var t=te();y.append(e,t)},s=e=>{var t=ne();y.append(e,t)};y.if(i,e=>{t.copysvg?e(a):B.copied?e(o,1):e(s,-1)}),y.reset(n),y.template_effect(()=>{r=y.set_class(n,1,`pi-btn pi-btn-copy`,null,r,{"is-copied":B.copied}),y.set_attribute(n,`aria-label`,B.copyAriaLabel),y.set_attribute(n,`title`,B.copyButtonTitle)}),y.delegated(`click`,n,function(...e){B.onCopyClick?.apply(this,e)}),y.append(e,n)};y.if(Be,e=>{y.get(R)&&e(Ve)});var He=y.sibling(Be,2),Ue=e=>{var n=ae(),r=y.child(n),i=e=>{var n=y.comment(),r=y.first_child(n);y.snippet(r,()=>t.clearsvg),y.append(e,n)},a=e=>{var t=ie();y.append(e,t)};y.if(r,e=>{t.clearsvg?e(i):e(a,-1)}),y.reset(n),y.template_effect(()=>{y.set_attribute(n,`aria-label`,p()),y.set_attribute(n,`title`,p())}),y.delegated(`click`,n,Se),y.append(e,n)};y.if(He,e=>{y.get(z)&&e(Ue)}),y.reset(Le),y.reset(Ie),y.reset(q),y.bind_this(q,e=>y.set(_,e),()=>y.get(_));var $=y.sibling(q,2),We=e=>{var n=ce();let r,i;var a=y.child(n),o=y.child(a);y.remove_input_defaults(o),y.bind_this(o,e=>y.set(D,e),()=>y.get(D)),y.reset(a);var s=y.sibling(a,2);y.each(s,23,()=>H.filteredCountries,e=>e.id,(e,n,r)=>{var i=oe();let a;var o=y.child(i),s=y.child(o),c=e=>{var r=y.comment(),i=y.first_child(r);y.snippet(i,()=>t.flag,()=>y.get(n)),y.append(e,r)},l=e=>{var t=y.text();y.template_effect(()=>y.set_text(t,y.get(n).flag)),y.append(e,t)};y.if(s,e=>{t.flag?e(c):e(l,-1)}),y.reset(o);var u=y.sibling(o,2),d=y.child(u,!0);y.reset(u);var f=y.sibling(u,2),p=y.child(f,!0);y.reset(f),y.reset(i),y.template_effect(e=>{y.set_attribute(i,`id`,e),a=y.set_class(i,1,`pi-option`,null,a,{"is-focused":y.get(r)===H.focusedIndex,"is-selected":y.get(n).id===j.country.id}),y.set_attribute(i,`aria-selected`,y.get(n).id===j.country.id),y.set_attribute(i,`title`,y.get(n).name),y.set_attribute(o,`aria-label`,`${y.get(n).name??``} flag`),y.set_text(d,y.get(n).name),y.set_text(p,y.get(n).code)},[()=>G(y.get(r))]),y.delegated(`click`,i,()=>H.selectCountry(y.get(n).id)),y.event(`mouseenter`,i,()=>H.setFocusedIndex(y.get(r))),y.append(e,i)},e=>{var t=se(),n=y.child(t,!0);y.reset(t),y.template_effect(()=>y.set_text(n,f())),y.append(e,t)}),y.reset(s),y.reset(n),y.action(n,e=>Ee?.(e)),y.bind_this(n,e=>y.set(T,e),()=>y.get(T)),y.template_effect(()=>{r=y.set_class(n,1,`phone-dropdown ${m()??``} ${Ce.themeClass??``}`,null,r,{"is-closing":H.isClosing}),i=y.set_style(n,``,i,{position:`absolute`,top:H.dropdownStyle.top,left:H.dropdownStyle.left,width:H.dropdownStyle.width}),y.set_attribute(o,`placeholder`,d()),y.set_attribute(o,`aria-controls`,y.get(W)),y.set_attribute(o,`aria-activedescendant`,y.get(ue)),y.set_value(o,H.search),y.set_attribute(s,`id`,y.get(W))}),y.event(`animationend`,n,function(...e){H.handleDropdownAnimationEnd?.apply(this,e)}),y.delegated(`keydown`,o,function(...e){H.handleSearchKeydown?.apply(this,e)}),y.delegated(`input`,o,function(...e){H.handleSearchChange?.apply(this,e)}),y.append(e,n)};y.if($,e=>{H.dropdownOpen&&e(We)});var Ge=y.sibling($,2);return y.bind_this(Ge,e=>y.set(b,e),()=>y.get(b)),y.template_effect(()=>{ke=y.set_class(Y,1,`pi-selector-btn`,null,ke,{"no-dropdown":!H.hasDropdown||s()}),Y.disabled=o(),y.set_attribute(Y,`tabindex`,y.get(I)||!H.hasDropdown?-1:void 0),y.set_attribute(Y,`aria-label`,`Selected country: ${j.country.name??``}`),y.set_attribute(Y,`aria-expanded`,H.dropdownOpen),y.set_attribute(Y,`aria-haspopup`,H.hasDropdown?`listbox`:void 0),y.set_attribute(X,`aria-label`,`${j.country.name??``} flag`),y.set_text(Ne,j.country.code),y.set_attribute(Q,`placeholder`,M.displayPlaceholder),y.set_value(Q,M.displayValue),Q.disabled=o(),Q.readOnly=s(),y.set_attribute(Q,`aria-invalid`,y.get(L))}),y.delegated(`click`,Y,function(...e){H.toggleDropdown?.apply(this,e)}),y.delegated(`beforeinput`,Q,function(...e){K.handleBeforeInput?.apply(this,e)}),y.delegated(`input`,Q,function(...e){K.handleInput?.apply(this,e)}),y.delegated(`keydown`,Q,function(...e){K.handleKeydown?.apply(this,e)}),y.event(`paste`,Q,function(...e){K.handlePaste?.apply(this,e)}),y.event(`focus`,Q,de),y.event(`blur`,Q,fe),y.append(e,Oe),y.pop(De)}y.delegate([`click`,`beforeinput`,`input`,`keydown`]);function I(e){let t=y.state(null),n=C({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),r=w({country:()=>n.country,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:i,handleInput:a,handleKeydown:o,handlePaste:s}=k({formatter:()=>r.formatter,digits:()=>r.digits,onChange:e.onChange});return y.user_effect(()=>{let e=y.get(t);if(e)return e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.addEventListener(`beforeinput`,i),e.addEventListener(`input`,a),e.addEventListener(`keydown`,o),e.addEventListener(`paste`,s),()=>{e.removeEventListener(`beforeinput`,i),e.removeEventListener(`input`,a),e.removeEventListener(`keydown`,o),e.removeEventListener(`paste`,s)}}),y.user_effect(()=>{let e=y.get(t);e&&(e.value=r.displayValue,e.setAttribute(`placeholder`,r.displayPlaceholder))}),{get inputRef(){return y.get(t)},set inputRef(e){y.set(t,e,!0)},get digits(){return r.digits},get formatter(){return r.formatter},get full(){return r.full},get fullFormatted(){return r.fullFormatted},get isComplete(){return r.isComplete},get isEmpty(){return r.isEmpty},get shouldShowWarn(){return r.shouldShowWarn},get country(){return n.country},get locale(){return n.locale},setCountry:n.setCountry,clear:()=>{e.onChange(``)}}}function L(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function R(e){return t=>{if(t.tagName!==`INPUT`){console.warn(`[phoneMaskAttachment] Attachment can only be used on input elements`);return}let n=L(e),r=y.effect_root(()=>{let e=y.state(y.proxy(t.value||``)),r=I({country:()=>n.country,locale:()=>n.locale,detect:()=>n.detect,value:()=>y.get(e),onChange:t=>{y.set(e,t,!0)},onPhoneChange:n.onChange,onCountryChange:n.onCountryChange});r.inputRef=t,t.__phoneMaskState={get country(){return r.country},get formatter(){return r.formatter},get digits(){return r.digits},get locale(){return r.locale},options:n,setCountry:e=>r.setCountry(e)}});return()=>{r(),delete t.__phoneMaskState}}}function z(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function B(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function V(e,t){let n=t.formatter.getMaxDigits(),r=a(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&B(e,t,r)}function H(e){let t=e.country.id,n=d(e.options.country);n&&n!==t&&e.setCountry(n)}function U(e,t,n){return r=>{let i=n(r,t);i&&(B(e,t,i.newDigits),Promise.resolve().then(()=>{v(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function W(e){let t=d(e.country);if(t)return t;if(e.detect){let e=d(await r());if(e)return e;let t=d(i());if(t)return t}return`US`}function G(e,t){if(e.tagName!==`INPUT`)return console.warn(`[phoneMaskAction] Action can only be used on input elements`),{update(){},destroy(){}};e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let r=z(t),i=r.locale||u(),a=c(d(r.country,`US`),i),o={country:a,formatter:n(a),digits:``,locale:i,options:r,setCountry(t){let r=d(t);if(!r)return!1;let i=c(r,this.locale);return this.country=i,this.options.onCountryChange?.(i),this.formatter=n(i),e.placeholder=this.formatter.getPlaceholder(),V(e,this),!0}};e.__phoneMaskState=o;let s=U(e,o,m),l=U(e,o,h),f=U(e,o,g);return e.addEventListener(`beforeinput`,p),e.addEventListener(`input`,s),e.addEventListener(`keydown`,l),e.addEventListener(`paste`,f),W(r).then(t=>{e.__phoneMaskState===o&&o.setCountry(t)}),{update(t){o.options=z(t),H(o),V(e,o)},destroy(){e.removeEventListener(`beforeinput`,p),e.removeEventListener(`input`,s),e.removeEventListener(`keydown`,l),e.removeEventListener(`paste`,f),delete e.__phoneMaskState}}}var ue=F,K={getFlagEmoji:l,countPlaceholders:t,formatDigitsWithMap:s,pickMaskVariant:f,removeCountryCodePrefix:_};export{K as PMaskHelpers,ue as PhoneInput,G as phoneMaskAction,R as phoneMaskAttachment,I as usePhoneMask};
|