Phone Input

1<script lang="ts">
2	import { usePhonePicker } from '@kevwpl/svelte-o-phone';
3	import * as ButtonGroup from '$lib/components/ui/button-group/index.js';
4	import * as Select from '$lib/components/ui/select/index.js';
5	import { Input } from '$lib/components/ui/input/index.js';
6 
7	let {
8		class: className,
9		placeholder = 'Phone number',
10 
11		value = $bindable(''),
12		country = $bindable('US'),
13		initialValue = '',
14		allowedCountries = null,
15		sorting = 'alphabetic',
16		customOrder = null,
17		autoDetectCountry = true,
18		detectInitialCountry = false,
19		detectionPriority = ['language', 'ip'],
20		onchange,
21		...rest
22	}: {
23		class?: string;
24		placeholder?: string;
25		value?: string;
26		country?: string | null;
27		initialValue?: string;
28		allowedCountries?: string[] | null;
29		sorting?: 'alphabetic' | 'numeric' | 'custom';
30		customOrder?: string[] | null;
31		autoDetectCountry?: boolean;
32		detectInitialCountry?: boolean;
33		detectionPriority?: ('language' | 'ip')[];
34		onchange?: (data: any) => void;
35		[key: string]: any;
36	} = $props();
37 
38	const picker = usePhonePicker({
39		initialValue: initialValue || value,
40		initialCountry: country || 'US',
41		allowedCountries,
42		sorting,
43		customOrder,
44		autoDetectCountry,
45		detectInitialCountry,
46		detectionPriority,
47		onchange: (data) => {
48			value = data.value;
49			country = data.country;
50			if (onchange) onchange(data);
51		}
52	});
53 
54	$effect(() => {
55		if (inputElement) {
56			picker.bindInput(inputElement);
57			console.log('BOUND');
58		}
59	});
60 
61	let inputElement: HTMLInputElement | null = $state(null);
62</script>
63 
64<ButtonGroup.Root>
65	<Select.Root open={picker.dropdownOpen} bind:value={picker.selectedCountryCode} type="single">
66		<Select.Trigger onclick={() => picker.toggleDropdown()}>
67			<span>{picker.selectedCountry.flag}</span>
68			<span>{picker.selectedCountry.dialCode}</span>
69		</Select.Trigger>
70		<Select.Content>
71			{#each picker.countryList as c}
72				<Select.Item
73					value={c.code}
74					class="flex gap-2 items-center p-2 cursor-pointer"
75					onclick={() => picker.selectCountry(c)}
76				>
77					<span class="flag">{c.flag}</span>
78					<span class="name">{c.name}</span>
79					<span class="code">{c.dialCode}</span>
80				</Select.Item>
81			{/each}
82		</Select.Content>
83	</Select.Root>
84	<Input
85		bind:ref={picker.ref}
86		type="tel"
87		{placeholder}
88		value={picker.input}
89		oninput={picker.handleInput}
90		aria-label="Phone number input"
91	/>
92</ButtonGroup.Root>