@desource/phone-mask-svelte 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/LICENSE +21 -0
- package/README.md +529 -0
- package/dist/index.cjs +1301 -0
- package/dist/index.mjs +1284 -0
- package/dist/phone-mask-svelte.css +383 -0
- package/dist/types/composables/internal/useCopyAction.svelte.d.ts +13 -0
- package/dist/types/composables/internal/useCopyAction.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useCountry.svelte.d.ts +17 -0
- package/dist/types/composables/internal/useCountry.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useCountrySelector.svelte.d.ts +31 -0
- package/dist/types/composables/internal/useCountrySelector.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useFormatter.svelte.d.ts +29 -0
- package/dist/types/composables/internal/useFormatter.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useInputHandlers.svelte.d.ts +18 -0
- package/dist/types/composables/internal/useInputHandlers.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useTheme.svelte.d.ts +9 -0
- package/dist/types/composables/internal/useTheme.svelte.d.ts.map +1 -0
- package/dist/types/composables/internal/useValidationHint.svelte.d.ts +6 -0
- package/dist/types/composables/internal/useValidationHint.svelte.d.ts.map +1 -0
- package/dist/types/composables/usePhoneMask.svelte.d.ts +31 -0
- package/dist/types/composables/usePhoneMask.svelte.d.ts.map +1 -0
- package/dist/types/composables/utility/useClipboard.svelte.d.ts +6 -0
- package/dist/types/composables/utility/useClipboard.svelte.d.ts.map +1 -0
- package/dist/types/composables/utility/useTimer.svelte.d.ts +8 -0
- package/dist/types/composables/utility/useTimer.svelte.d.ts.map +1 -0
- package/dist/types/index.d.ts +17 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/types.d.ts +84 -0
- package/dist/types/types.d.ts.map +1 -0
- package/package.json +77 -0
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
.phone-input,
|
|
2
|
+
.phone-dropdown {
|
|
3
|
+
--pi-bg: #ffffff;
|
|
4
|
+
--pi-fg: #111827;
|
|
5
|
+
--pi-muted: #6b7280;
|
|
6
|
+
--pi-border: #e5e7eb;
|
|
7
|
+
--pi-border-hover: #d1d5db;
|
|
8
|
+
--pi-border-focus: #3b82f6;
|
|
9
|
+
--pi-radius: 8px;
|
|
10
|
+
--pi-padding: 12px;
|
|
11
|
+
--pi-font-size: 16px;
|
|
12
|
+
--pi-height: 44px;
|
|
13
|
+
--pi-actions-size: 32px;
|
|
14
|
+
--pi-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
15
|
+
--pi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
|
|
16
|
+
--pi-warning: #f59e0b;
|
|
17
|
+
--pi-warning-light: #fbbf24;
|
|
18
|
+
--pi-success: #10b981;
|
|
19
|
+
--pi-focus-ring: 3px solid rgb(59 130 246 / 0.15);
|
|
20
|
+
--pi-focus-ring-warning: 3px solid rgb(245 158 11 / 0.15);
|
|
21
|
+
--pi-focus-ring-success: 3px solid rgb(16 185 129 / 0.15);
|
|
22
|
+
--pi-disabled-bg: #f9fafb;
|
|
23
|
+
--pi-disabled-fg: #9ca3af;
|
|
24
|
+
}
|
|
25
|
+
.phone-input.theme-dark,
|
|
26
|
+
.phone-dropdown.theme-dark {
|
|
27
|
+
--pi-bg: #1f2937;
|
|
28
|
+
--pi-fg: #f9fafb;
|
|
29
|
+
--pi-muted: #9ca3af;
|
|
30
|
+
--pi-border: #374151;
|
|
31
|
+
--pi-border-hover: #4b5563;
|
|
32
|
+
--pi-border-focus: #60a5fa;
|
|
33
|
+
--pi-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
|
|
34
|
+
--pi-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 10px 10px -5px rgb(0 0 0 / 0.2);
|
|
35
|
+
--pi-warning: #fbbf24;
|
|
36
|
+
--pi-warning-light: #fcd34d;
|
|
37
|
+
--pi-focus-ring: 3px solid rgb(96 165 250 / 0.2);
|
|
38
|
+
--pi-focus-ring-warning: 3px solid rgb(251 191 24 / 0.2);
|
|
39
|
+
--pi-focus-ring-success: 3px solid rgb(16 185 129 / 0.2);
|
|
40
|
+
--pi-disabled-bg: #374151;
|
|
41
|
+
}
|
|
42
|
+
.phone-input *,
|
|
43
|
+
.phone-input *::before,
|
|
44
|
+
.phone-input *::after,
|
|
45
|
+
.phone-dropdown *,
|
|
46
|
+
.phone-dropdown *::before,
|
|
47
|
+
.phone-dropdown *::after {
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
}
|
|
50
|
+
.phone-input button,
|
|
51
|
+
.phone-input input,
|
|
52
|
+
.phone-dropdown button,
|
|
53
|
+
.phone-dropdown input {
|
|
54
|
+
margin: 0;
|
|
55
|
+
padding: 0;
|
|
56
|
+
border: none;
|
|
57
|
+
background: none;
|
|
58
|
+
font: inherit;
|
|
59
|
+
color: inherit;
|
|
60
|
+
}
|
|
61
|
+
.phone-input button,
|
|
62
|
+
.phone-dropdown button {
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
}
|
|
65
|
+
.phone-input button:disabled,
|
|
66
|
+
.phone-dropdown button:disabled {
|
|
67
|
+
cursor: not-allowed;
|
|
68
|
+
}
|
|
69
|
+
.phone-input input,
|
|
70
|
+
.phone-dropdown input {
|
|
71
|
+
outline: none;
|
|
72
|
+
}
|
|
73
|
+
.phone-input input::placeholder,
|
|
74
|
+
.phone-dropdown input::placeholder {
|
|
75
|
+
opacity: 0.5;
|
|
76
|
+
}
|
|
77
|
+
.phone-input input:disabled,
|
|
78
|
+
.phone-dropdown input:disabled {
|
|
79
|
+
cursor: not-allowed;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.phone-input,
|
|
83
|
+
.phone-dropdown {
|
|
84
|
+
font-size: var(--pi-font-size);
|
|
85
|
+
background: var(--pi-bg);
|
|
86
|
+
color: var(--pi-fg);
|
|
87
|
+
border-radius: var(--pi-radius);
|
|
88
|
+
border: 1px solid var(--pi-border);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.phone-input {
|
|
92
|
+
position: relative;
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: stretch;
|
|
95
|
+
width: 100%;
|
|
96
|
+
}
|
|
97
|
+
.phone-input:focus-within {
|
|
98
|
+
outline: var(--pi-focus-ring);
|
|
99
|
+
}
|
|
100
|
+
.phone-input.is-incomplete {
|
|
101
|
+
border-color: var(--pi-warning);
|
|
102
|
+
}
|
|
103
|
+
.phone-input.is-incomplete:focus-within {
|
|
104
|
+
outline: var(--pi-focus-ring-warning);
|
|
105
|
+
}
|
|
106
|
+
.phone-input.is-complete {
|
|
107
|
+
border-color: var(--pi-success);
|
|
108
|
+
}
|
|
109
|
+
.phone-input.is-complete:focus-within {
|
|
110
|
+
outline: var(--pi-focus-ring-success);
|
|
111
|
+
}
|
|
112
|
+
.phone-input.is-disabled {
|
|
113
|
+
background: var(--pi-disabled-bg);
|
|
114
|
+
color: var(--pi-disabled-fg);
|
|
115
|
+
}
|
|
116
|
+
.phone-input.is-readonly {
|
|
117
|
+
cursor: default;
|
|
118
|
+
}
|
|
119
|
+
.phone-input.size-compact {
|
|
120
|
+
--pi-font-size: 14px;
|
|
121
|
+
--pi-height: 36px;
|
|
122
|
+
--pi-padding: 10px;
|
|
123
|
+
--pi-actions-size: 24px;
|
|
124
|
+
}
|
|
125
|
+
.phone-input.size-large {
|
|
126
|
+
--pi-font-size: 18px;
|
|
127
|
+
--pi-height: 52px;
|
|
128
|
+
--pi-padding: 16px;
|
|
129
|
+
--pi-actions-size: 32px;
|
|
130
|
+
}
|
|
131
|
+
.phone-input.is-unstyled {
|
|
132
|
+
all: initial;
|
|
133
|
+
display: block;
|
|
134
|
+
}
|
|
135
|
+
.phone-input .pi-selector {
|
|
136
|
+
flex-shrink: 0;
|
|
137
|
+
}
|
|
138
|
+
.phone-input .pi-selector-btn {
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
gap: 6px;
|
|
142
|
+
padding-left: var(--pi-padding);
|
|
143
|
+
padding-right: 0;
|
|
144
|
+
min-height: var(--pi-height);
|
|
145
|
+
border: 1px solid transparent;
|
|
146
|
+
border-radius: var(--pi-radius) 0 0 var(--pi-radius);
|
|
147
|
+
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
148
|
+
}
|
|
149
|
+
.phone-input .pi-selector-btn.no-dropdown {
|
|
150
|
+
cursor: default;
|
|
151
|
+
}
|
|
152
|
+
.phone-input .pi-selector-btn:focus-visible {
|
|
153
|
+
border-color: var(--pi-border-focus);
|
|
154
|
+
outline: none;
|
|
155
|
+
}
|
|
156
|
+
.phone-input .pi-selector-btn:disabled > .pi-flag {
|
|
157
|
+
opacity: 0.5;
|
|
158
|
+
}
|
|
159
|
+
.phone-input .pi-flag {
|
|
160
|
+
font-size: 1.25em;
|
|
161
|
+
line-height: 1;
|
|
162
|
+
display: inline-flex;
|
|
163
|
+
}
|
|
164
|
+
.phone-input .pi-code {
|
|
165
|
+
color: var(--pi-fg);
|
|
166
|
+
}
|
|
167
|
+
.phone-input .pi-chevron {
|
|
168
|
+
margin-left: 2px;
|
|
169
|
+
color: var(--pi-muted);
|
|
170
|
+
transition: transform 200ms ease;
|
|
171
|
+
}
|
|
172
|
+
.phone-input .pi-chevron.is-open {
|
|
173
|
+
transform: rotate(180deg);
|
|
174
|
+
}
|
|
175
|
+
.phone-input .pi-input-wrap {
|
|
176
|
+
flex: 1;
|
|
177
|
+
position: relative;
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
}
|
|
181
|
+
.phone-input .pi-input {
|
|
182
|
+
flex: 1;
|
|
183
|
+
width: 100%;
|
|
184
|
+
padding-left: var(--pi-padding);
|
|
185
|
+
padding-right: calc((var(--pi-actions-size) + 2px) * var(--pi-actions-count) + var(--pi-padding));
|
|
186
|
+
min-height: var(--pi-height);
|
|
187
|
+
border-radius: 0 var(--pi-radius) var(--pi-radius) 0;
|
|
188
|
+
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
189
|
+
}
|
|
190
|
+
.phone-input .pi-input:hover:not(:disabled):not(:read-only) {
|
|
191
|
+
border-color: var(--pi-border-hover);
|
|
192
|
+
}
|
|
193
|
+
.phone-input .pi-input:focus {
|
|
194
|
+
border-color: var(--pi-border-focus);
|
|
195
|
+
position: relative;
|
|
196
|
+
}
|
|
197
|
+
.phone-input .pi-actions {
|
|
198
|
+
position: absolute;
|
|
199
|
+
right: 2px;
|
|
200
|
+
top: 50%;
|
|
201
|
+
transform: translateY(-50%);
|
|
202
|
+
display: inline-flex;
|
|
203
|
+
align-items: center;
|
|
204
|
+
gap: 2px;
|
|
205
|
+
}
|
|
206
|
+
.phone-input .pi-btn {
|
|
207
|
+
display: flex;
|
|
208
|
+
align-items: center;
|
|
209
|
+
justify-content: center;
|
|
210
|
+
width: var(--pi-actions-size);
|
|
211
|
+
height: var(--pi-actions-size);
|
|
212
|
+
background: transparent;
|
|
213
|
+
color: var(--pi-muted);
|
|
214
|
+
border: none;
|
|
215
|
+
border-radius: 9999px;
|
|
216
|
+
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
217
|
+
}
|
|
218
|
+
.phone-input .pi-btn:hover {
|
|
219
|
+
background: var(--pi-disabled-bg);
|
|
220
|
+
color: var(--pi-fg);
|
|
221
|
+
}
|
|
222
|
+
.phone-input .pi-btn:active:not(:disabled) {
|
|
223
|
+
transform: scale(0.95);
|
|
224
|
+
}
|
|
225
|
+
.phone-input .pi-btn:focus {
|
|
226
|
+
outline: 1px solid var(--pi-border-focus);
|
|
227
|
+
outline-offset: -1px;
|
|
228
|
+
}
|
|
229
|
+
.phone-input .pi-btn.is-copied {
|
|
230
|
+
color: var(--pi-success);
|
|
231
|
+
border-color: var(--pi-success);
|
|
232
|
+
}
|
|
233
|
+
.phone-input .pi-btn svg {
|
|
234
|
+
flex-shrink: 0;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.phone-dropdown {
|
|
238
|
+
position: absolute;
|
|
239
|
+
z-index: 9999;
|
|
240
|
+
max-width: 400px;
|
|
241
|
+
box-shadow: var(--pi-shadow-lg);
|
|
242
|
+
overflow: hidden;
|
|
243
|
+
animation: dropdown-enter 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
|
|
244
|
+
}
|
|
245
|
+
.phone-dropdown .pi-search-wrap {
|
|
246
|
+
padding: 8px;
|
|
247
|
+
border-bottom: 1px solid var(--pi-border);
|
|
248
|
+
}
|
|
249
|
+
.phone-dropdown .pi-search {
|
|
250
|
+
width: 100%;
|
|
251
|
+
padding: 8px 12px;
|
|
252
|
+
font-size: 0.875em;
|
|
253
|
+
border: 1px solid var(--pi-border);
|
|
254
|
+
border-radius: calc(var(--pi-radius) - 2px);
|
|
255
|
+
background: var(--pi-bg);
|
|
256
|
+
transition: border-color 150ms ease;
|
|
257
|
+
}
|
|
258
|
+
.phone-dropdown .pi-search:focus {
|
|
259
|
+
border-color: var(--pi-border-focus);
|
|
260
|
+
}
|
|
261
|
+
.phone-dropdown .pi-options {
|
|
262
|
+
max-height: 300px;
|
|
263
|
+
overflow-y: auto;
|
|
264
|
+
padding: 4px 0;
|
|
265
|
+
margin: 0;
|
|
266
|
+
list-style: none;
|
|
267
|
+
}
|
|
268
|
+
.phone-dropdown .pi-options::-webkit-scrollbar {
|
|
269
|
+
width: 8px;
|
|
270
|
+
}
|
|
271
|
+
.phone-dropdown .pi-options::-webkit-scrollbar-track {
|
|
272
|
+
background: transparent;
|
|
273
|
+
}
|
|
274
|
+
.phone-dropdown .pi-options::-webkit-scrollbar-thumb {
|
|
275
|
+
background: var(--pi-border);
|
|
276
|
+
border-radius: 4px;
|
|
277
|
+
}
|
|
278
|
+
.phone-dropdown .pi-options::-webkit-scrollbar-thumb:hover {
|
|
279
|
+
background: var(--pi-border-hover);
|
|
280
|
+
}
|
|
281
|
+
.phone-dropdown .pi-option {
|
|
282
|
+
display: flex;
|
|
283
|
+
align-items: center;
|
|
284
|
+
gap: 8px;
|
|
285
|
+
padding: 8px 12px;
|
|
286
|
+
cursor: pointer;
|
|
287
|
+
transition: background-color 100ms ease;
|
|
288
|
+
}
|
|
289
|
+
.phone-dropdown .pi-option:hover, .phone-dropdown .pi-option.is-focused {
|
|
290
|
+
background: var(--pi-disabled-bg);
|
|
291
|
+
}
|
|
292
|
+
.phone-dropdown .pi-option.is-selected {
|
|
293
|
+
background: var(--pi-border);
|
|
294
|
+
font-weight: 500;
|
|
295
|
+
}
|
|
296
|
+
.phone-dropdown .pi-opt-name {
|
|
297
|
+
flex: 1;
|
|
298
|
+
overflow: hidden;
|
|
299
|
+
text-overflow: ellipsis;
|
|
300
|
+
white-space: nowrap;
|
|
301
|
+
}
|
|
302
|
+
.phone-dropdown .pi-opt-code {
|
|
303
|
+
color: var(--pi-muted);
|
|
304
|
+
font-size: 0.875em;
|
|
305
|
+
}
|
|
306
|
+
.phone-dropdown .pi-empty {
|
|
307
|
+
padding: 12px;
|
|
308
|
+
text-align: center;
|
|
309
|
+
color: var(--pi-muted);
|
|
310
|
+
font-size: 0.875em;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
@keyframes dropdown-enter {
|
|
314
|
+
from {
|
|
315
|
+
opacity: 0;
|
|
316
|
+
transform: translateY(-8px);
|
|
317
|
+
}
|
|
318
|
+
to {
|
|
319
|
+
opacity: 1;
|
|
320
|
+
transform: translateY(0);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
@keyframes dropdown-leave {
|
|
324
|
+
from {
|
|
325
|
+
opacity: 1;
|
|
326
|
+
transform: translateY(0);
|
|
327
|
+
}
|
|
328
|
+
to {
|
|
329
|
+
opacity: 0;
|
|
330
|
+
transform: translateY(-8px);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
.phone-dropdown.is-closing {
|
|
334
|
+
animation: dropdown-leave 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
@keyframes fade-scale-in {
|
|
338
|
+
from {
|
|
339
|
+
opacity: 0;
|
|
340
|
+
transform: scale(0.8);
|
|
341
|
+
}
|
|
342
|
+
to {
|
|
343
|
+
opacity: 1;
|
|
344
|
+
transform: scale(1);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
.pi-actions .pi-btn {
|
|
348
|
+
animation: fade-scale-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.sr-only {
|
|
352
|
+
position: absolute;
|
|
353
|
+
width: 1px;
|
|
354
|
+
height: 1px;
|
|
355
|
+
padding: 0;
|
|
356
|
+
margin: -1px;
|
|
357
|
+
overflow: hidden;
|
|
358
|
+
clip: rect(0, 0, 0, 0);
|
|
359
|
+
white-space: nowrap;
|
|
360
|
+
border: 0;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
@media (max-width: 480px) {
|
|
364
|
+
.phone-input {
|
|
365
|
+
--pi-padding: 8px;
|
|
366
|
+
--pi-actions-size: 24px;
|
|
367
|
+
}
|
|
368
|
+
.size-compact {
|
|
369
|
+
--pi-actions-size: 20px;
|
|
370
|
+
}
|
|
371
|
+
.phone-dropdown {
|
|
372
|
+
left: 0;
|
|
373
|
+
right: 0;
|
|
374
|
+
max-width: none;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
@media (prefers-reduced-motion: reduce) {
|
|
378
|
+
* {
|
|
379
|
+
animation-duration: 0.01ms !important;
|
|
380
|
+
animation-iteration-count: 1 !important;
|
|
381
|
+
transition-duration: 0.01ms !important;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface UseCopyActionOptions {
|
|
2
|
+
fullFormatted: () => string;
|
|
3
|
+
liveRef?: () => HTMLElement | null;
|
|
4
|
+
onCopy?: (value: string) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare function useCopyAction({ liveRef, fullFormatted, onCopy }: UseCopyActionOptions): {
|
|
7
|
+
readonly copied: boolean;
|
|
8
|
+
readonly copyAriaLabel: string;
|
|
9
|
+
readonly copyButtonTitle: "Copied" | "Copy phone number";
|
|
10
|
+
onCopyClick: () => Promise<void>;
|
|
11
|
+
};
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=useCopyAction.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCopyAction.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCopyAction.svelte.ts"],"names":[],"mappings":"AAGA,UAAU,oBAAoB;IAC5B,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAID,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,oBAAoB;;;;;EAsCrF"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type MaskFull } from '@desource/phone-mask';
|
|
2
|
+
export interface UseCountryOptions {
|
|
3
|
+
/** Country ISO code (e.g., 'US', 'DE', 'GB') */
|
|
4
|
+
country?: () => string | undefined;
|
|
5
|
+
/** Locale for country names (default: navigator.language) */
|
|
6
|
+
locale?: () => string | undefined;
|
|
7
|
+
/** Auto-detect country from IP/locale (default: false) */
|
|
8
|
+
detect?: () => boolean | undefined;
|
|
9
|
+
/** Callback when country changes */
|
|
10
|
+
onCountryChange?: (country: MaskFull) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare function useCountry({ country: countryOption, locale: localeOption, detect, onCountryChange }?: UseCountryOptions): {
|
|
13
|
+
readonly country: MaskFull;
|
|
14
|
+
readonly locale: string;
|
|
15
|
+
setCountry: (code?: string | null) => boolean;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useCountry.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCountry.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountry.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAClC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IACnC,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,MAAM,EACN,eAAe,EAChB,GAAE,iBAAsB;;;wBAMI,MAAM,GAAG,IAAI,KAAG,OAAO;EA6CnD"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type CountryKey } from '@desource/phone-mask';
|
|
2
|
+
interface UseCountrySelectorOptions {
|
|
3
|
+
rootRef: () => HTMLDivElement | null;
|
|
4
|
+
dropdownRef: () => HTMLDivElement | null;
|
|
5
|
+
searchRef: () => HTMLInputElement | null;
|
|
6
|
+
selectorRef: () => HTMLDivElement | null;
|
|
7
|
+
locale: () => string;
|
|
8
|
+
onSelectCountry: (code: CountryKey) => void;
|
|
9
|
+
countryOption?: () => string | undefined;
|
|
10
|
+
inactive?: () => boolean | undefined;
|
|
11
|
+
onAfterSelect?: () => void;
|
|
12
|
+
}
|
|
13
|
+
export declare function useCountrySelector({ rootRef, dropdownRef, searchRef, selectorRef, locale, countryOption, inactive, onSelectCountry, onAfterSelect }: UseCountrySelectorOptions): {
|
|
14
|
+
readonly dropdownOpen: boolean;
|
|
15
|
+
readonly isClosing: boolean;
|
|
16
|
+
readonly search: string;
|
|
17
|
+
readonly focusedIndex: number;
|
|
18
|
+
readonly dropdownStyle: Record<string, string>;
|
|
19
|
+
readonly filteredCountries: import("@desource/phone-mask").MaskFull[];
|
|
20
|
+
readonly hasDropdown: boolean;
|
|
21
|
+
openDropdown: () => void;
|
|
22
|
+
closeDropdown: () => void;
|
|
23
|
+
toggleDropdown: () => void;
|
|
24
|
+
selectCountry: (code: CountryKey) => void;
|
|
25
|
+
setFocusedIndex: (index: number) => void;
|
|
26
|
+
handleSearchChange: (e: Event) => void;
|
|
27
|
+
handleSearchKeydown: (e: KeyboardEvent) => void;
|
|
28
|
+
handleDropdownAnimationEnd: () => void;
|
|
29
|
+
};
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=useCountrySelector.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCountrySelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountrySelector.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEnF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACzC,SAAS,EAAE,MAAM,gBAAgB,GAAG,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,OAAO,GAAG,SAAS,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,aAAa,EACb,QAAQ,EACR,eAAe,EACf,aAAa,EACd,EAAE,yBAAyB;;;;;;;;;;;0BA8CG,UAAU;6BAnCP,MAAM;4BA2CP,KAAK;6BAmDJ,aAAa;;EA2E9C"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type MaskFull, type FormatterHelpers } from '@desource/phone-mask';
|
|
2
|
+
import type { PhoneNumber } from '../../types';
|
|
3
|
+
export interface UseFormatterOptions {
|
|
4
|
+
/** Pre-resolved country data getter */
|
|
5
|
+
country: () => MaskFull;
|
|
6
|
+
/**
|
|
7
|
+
* Controlled value getter (digits only, without country code).
|
|
8
|
+
* The parent is responsible for managing state via onChange callback.
|
|
9
|
+
*/
|
|
10
|
+
value: () => string;
|
|
11
|
+
/** Callback when the digits value changes. */
|
|
12
|
+
onChange: (digits: string) => void;
|
|
13
|
+
/** Callback when the phone number changes. */
|
|
14
|
+
onPhoneChange?: (value: PhoneNumber) => void;
|
|
15
|
+
/** Callback when validation state (isComplete) changes */
|
|
16
|
+
onValidationChange?: (isComplete: boolean) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare function useFormatter({ country, value, onChange, onPhoneChange, onValidationChange }: UseFormatterOptions): {
|
|
19
|
+
readonly digits: string;
|
|
20
|
+
readonly formatter: FormatterHelpers;
|
|
21
|
+
readonly displayPlaceholder: string;
|
|
22
|
+
readonly displayValue: string;
|
|
23
|
+
readonly full: string;
|
|
24
|
+
readonly fullFormatted: string;
|
|
25
|
+
readonly isComplete: boolean;
|
|
26
|
+
readonly isEmpty: boolean;
|
|
27
|
+
readonly shouldShowWarn: boolean;
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=useFormatter.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormatter.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useFormatter.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,QAAQ,EAAE,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACjH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,OAAO,EAAE,MAAM,QAAQ,CAAC;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,MAAM,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAAE,mBAAmB;;;;;;;;;;EAiEhH"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type FormatterHelpers } from '@desource/phone-mask';
|
|
2
|
+
export interface UseInputHandlersOptions {
|
|
3
|
+
formatter: () => FormatterHelpers;
|
|
4
|
+
digits: () => string;
|
|
5
|
+
inactive?: () => boolean;
|
|
6
|
+
onChange?: (newDigits: string) => void;
|
|
7
|
+
scheduleValidationHint?: (delay: number) => void;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Svelte composable that provides event handlers for phone input masking.
|
|
11
|
+
*/
|
|
12
|
+
export declare function useInputHandlers(options: UseInputHandlersOptions): {
|
|
13
|
+
handleBeforeInput: (e: InputEvent) => void;
|
|
14
|
+
handleInput: (e: Event) => void;
|
|
15
|
+
handleKeydown: (e: KeyboardEvent) => void;
|
|
16
|
+
handlePaste: (e: ClipboardEvent) => void;
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=useInputHandlers.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInputHandlers.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useInputHandlers.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,gBAAgB,CAAC;IAClC,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAKD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB;2BAWjC,UAAU;qBAIhB,KAAK;uBAWH,aAAa;qBAWf,cAAc;EAiBvC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTheme.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useTheme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,KAAK,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe;;EAwBlD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useValidationHint.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useValidationHint.svelte.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB;;;oCAUQ,MAAM;EAc9C"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { UsePhoneMaskOptions } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Svelte composable for phone number masking.
|
|
4
|
+
* Provides low-level phone masking functionality for custom input implementations.
|
|
5
|
+
* Works in controlled mode — caller manages value state via onChange callback.
|
|
6
|
+
*
|
|
7
|
+
* ⚠️ **Do NOT destructure the returned object.**
|
|
8
|
+
* All properties are reactive getters. Destructuring breaks reactivity:
|
|
9
|
+
* ```ts
|
|
10
|
+
* // ✅ Correct:
|
|
11
|
+
* const phoneMask = usePhoneMask(options);
|
|
12
|
+
* phoneMask.digits; // reactive
|
|
13
|
+
*
|
|
14
|
+
* // ❌ Wrong — loses reactivity:
|
|
15
|
+
* const { digits } = usePhoneMask(options);
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function usePhoneMask(options: UsePhoneMaskOptions): {
|
|
19
|
+
inputRef: HTMLInputElement | null;
|
|
20
|
+
readonly digits: string;
|
|
21
|
+
readonly full: string;
|
|
22
|
+
readonly fullFormatted: string;
|
|
23
|
+
readonly isComplete: boolean;
|
|
24
|
+
readonly isEmpty: boolean;
|
|
25
|
+
readonly shouldShowWarn: boolean;
|
|
26
|
+
readonly country: import("@desource/phone-mask").MaskFull;
|
|
27
|
+
readonly locale: string;
|
|
28
|
+
setCountry: (code?: string | null) => boolean;
|
|
29
|
+
clear: () => void;
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=usePhoneMask.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePhoneMask.svelte.d.ts","sourceRoot":"","sources":["../../../src/composables/usePhoneMask.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB;cA2DpC,gBAAgB,GAAG,IAAI;;;;;;;;;;;EA8B3C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClipboard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/utility/useClipboard.svelte.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,KAAK,SAAQ;;;iBAKd,MAAM;EA6BjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/composables/utility/useTimer.svelte.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,QAAQ;oBAUC,MAAM,IAAI,SAAS,MAAM;;EASjD"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { countPlaceholders, formatDigitsWithMap, pickMaskVariant, removeCountryCodePrefix, toArray } from '@desource/phone-mask';
|
|
2
|
+
import type { Component } from 'svelte';
|
|
3
|
+
export { usePhoneMask } from './composables/usePhoneMask.svelte';
|
|
4
|
+
import type { PhoneNumber as PMaskPhoneNumber, Size as PhoneInputSize, Theme as PhoneInputTheme, PhoneInputProps, PhoneInputExposed } from './types';
|
|
5
|
+
export type { UsePhoneMaskOptions, UsePhoneMaskReturn, PhoneInputProps, PhoneInputExposed } from './types';
|
|
6
|
+
export declare const PhoneInput: Component<PhoneInputProps, PhoneInputExposed>;
|
|
7
|
+
export { type PMaskPhoneNumber, type PhoneInputSize, type PhoneInputTheme };
|
|
8
|
+
export type { CountryKey as PCountryKey, MaskBase as PMaskBase, MaskBaseMap as PMaskBaseMap, Mask as PMask, MaskMap as PMaskMap, MaskWithFlag as PMaskWithFlag, MaskWithFlagMap as PMaskWithFlagMap, MaskFull as PMaskFull, MaskFullMap as PMaskFullMap } from '@desource/phone-mask';
|
|
9
|
+
export declare const PMaskHelpers: {
|
|
10
|
+
getFlagEmoji: (cc: string) => string;
|
|
11
|
+
countPlaceholders: typeof countPlaceholders;
|
|
12
|
+
formatDigitsWithMap: typeof formatDigitsWithMap;
|
|
13
|
+
pickMaskVariant: typeof pickMaskVariant;
|
|
14
|
+
removeCountryCodePrefix: typeof removeCountryCodePrefix;
|
|
15
|
+
toArray: typeof toArray;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,OAAO,EACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,KAAK,EACV,WAAW,IAAI,gBAAgB,EAC/B,IAAI,IAAI,cAAc,EACtB,KAAK,IAAI,eAAe,EACxB,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE3G,eAAO,MAAM,UAAU,EAAqC,SAAS,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAE1G,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,CAAC;AAE5E,YAAY,EACV,UAAU,IAAI,WAAW,EACzB,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC3B,IAAI,IAAI,KAAK,EACb,OAAO,IAAI,QAAQ,EACnB,YAAY,IAAI,aAAa,EAC7B,eAAe,IAAI,gBAAgB,EACnC,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
|