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