Shadcn Phone Input Svelte

<script lang="ts">
	import CountrySelector from './country-selector.svelte';
	import { defaultOptions, type Props } from '.';
	import { cn } from '$lib/utils';
	import { TelInput, normalizedCountries } from 'svelte-tel-input';
	import 'svelte-tel-input/styles/flags.css';

	const countries = normalizedCountries;

	type $$Props = Props;

	let className: $$Props['class'] = undefined;
	export let defaultCountry: $$Props['defaultCountry'] = null;
	export let country: $$Props['country'] = defaultCountry;
	export let options: $$Props['options'] = defaultOptions;
	export let placeholder: $$Props['placeholder'] = undefined;
	export let readonly: $$Props['readonly'] = false;
	export let disabled: $$Props['disabled'] = false;
	export let value: $$Props['value'] = null;
	export let valid: $$Props['valid'] = false;
	export let detailedValue: $$Props['detailedValue'] = null;
	export let order: $$Props['order'] = undefined;
	export let name: $$Props['name'] = undefined;
	export { className as class };

	let el: HTMLInputElement;

	export const focus = () => {
		// sort of an after update kinda thing
		setTimeout(() => {
			el.focus();
		}, 0);
	};
</script>

<div class="flex place-items-center">
	<CountrySelector
		{order}
		{countries}
		bind:selected={country}
		on:select={focus}
	/>
	<TelInput
		{...$$restProps}
		{name}
		bind:country
		bind:detailedValue
		bind:value
		bind:valid
		bind:readonly
		bind:disabled
		bind:placeholder
		bind:el
		{options}
		required
		class={cn(
			'flex h-10 w-[212px] rounded-lg rounded-l-none border border-l-0 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
			className
		)}
	/>
</div>

<script lang="ts">
	import * as Popover from '$lib/components/ui/popover';
	import { Button } from '$lib/components/ui/button';
	import * as Command from '$lib/components/ui/command';
	import { ScrollArea } from '$lib/components/ui/scroll-area';
	import { Check, ChevronsUpDown } from 'lucide-svelte';
	import { cn } from '$lib/utils';
	import Flag from './flag.svelte';
	import { createEventDispatcher } from 'svelte';
	import type { Country, CountryCode } from 'svelte-tel-input/types';

	const dispatch = createEventDispatcher();

	/** List of countries */
	export let countries: Country[];
	export let disabled = false;
	export let selected: CountryCode | null = null;
	/** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
	export let order: (a: Country, b: Country) => number = (a, b) => {
		return a.name.localeCompare(b.name);
	};

	$: selectedCountry = countries.find((a) => a.iso2 == selected);

	let open = false;

	const selectCountry = (country: Country) => {
		selected = country.iso2;
		open = false;
		dispatch('select', selected);
	};
</script>

<Popover.Root bind:open>
	<Popover.Trigger asChild let:builder>
		<Button
			type="button"
			variant="outline"
			builders={[builder]}
			class={cn('flex gap-1 rounded-e-none rounded-s-lg px-3')}
			{disabled}
		>
			<Flag country={selectedCountry} />
			<ChevronsUpDown
				class={cn(
					'-mr-2 h-4 w-4 opacity-50',
					disabled ? 'hidden' : 'opacity-100'
				)}
			/>
		</Button>
	</Popover.Trigger>
	<Popover.Content class="w-[300px] p-0">
		<Command.Root>
			<Command.Input placeholder="Search country..." />
			<Command.List>
				<ScrollArea class="h-72">
					<Command.Empty>No country found.</Command.Empty>
					<Command.Group>
						{#each countries.sort(order) as country}
							<Command.Item
								class="gap-2"
								value={country.name}
								onSelect={() => selectCountry(country)}
							>
								<Flag {country} />
								<span class="flex-1 text-sm">{country.name}</span>
								<span class="text-sm text-foreground/50">
									+{country.dialCode}
								</span>
								<div class="w-4">
									{#if country.iso2 == selected}
										<Check class="size-4" />
									{/if}
								</div>
							</Command.Item>
						{/each}
					</Command.Group>
				</ScrollArea>
			</Command.List>
		</Command.Root>
	</Popover.Content>
</Popover.Root>

<script lang="ts">
	import type { Country } from 'svelte-tel-input/types';

	export let country: Country | null = null;
</script>

<span class="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20">
	{#if country}
		<span
			aria-label="{country.name} flag."
			class="flag flag-{country.iso2.toLowerCase()} mr-3 flex-shrink-0"
		/>
	{/if}
</span>

import Root from './phone-input.svelte';
import type {
	Country,
	CountryCode,
	DetailedValue,
	E164Number,
	TelInputOptions,
} from 'svelte-tel-input/types';

export type Props = {
	country?: CountryCode | null;
	defaultCountry?: CountryCode | null;
	el?: HTMLInputElement;
	name?: string;
	placeholder?: string;
	disabled?: boolean;
	readonly?: boolean;
	class?: string;
	value: E164Number | null;
	valid?: boolean;
	detailedValue?: Partial<DetailedValue> | null;
	options?: TelInputOptions;
	order?: ((a: Country, b: Country) => number) | undefined;
};

export const defaultOptions: TelInputOptions = {
	spaces: true,
	autoPlaceholder: false,
	format: 'international',
};

export default Root;