Merge pull request #228 from ieedan/more-ergonomic-country-binding

fix: Allow `undefined` as an option for country for cases when it is not provided

Author: gyurielf

.changeset/two-pigs-sing.md

@@ -0,0 +1,5 @@
+---
+'svelte-tel-input': patch
+---
+
+fix: Allow for `undefined` as a value for country making the input easier to consume in reusable components.

packages/svelte-tel-input/src/lib/components/input/TelInput.svelte

@@ -7,7 +7,6 @@
 		generatePlaceholder,
 		telInputAction
 	} from '$lib/utils/index.js';
-	import { watcher } from '$lib/stores/index.js';
 	import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '$lib/types';
 
 	const dispatch = createEventDispatcher<{
@@ -47,7 +46,7 @@
 	/** The core value of the input, this is the only one what you can store. It's an E164 phone number.*/
 	export let value: E164Number | null;
 	/** It's accept any Country Code Alpha-2 (ISO 3166) */
-	export let country: CountryCode | null;
+	export let country: CountryCode | null | undefined = undefined;
 	/** Detailed parse of the E164 phone number */
 	export let detailedValue: Partial<DetailedValue> | null = null;
 	/** Validity of the input based on the config settings.*/
@@ -150,14 +149,14 @@
 
 	// Watch user's country change.
 	let countryWatchInitRun = true;
-	const countryChangeWatchFunction = () => {
+	const countryChangeWatchFunction = (current: CountryCode | null | undefined) => {
 		if (!countryWatchInitRun) {
-			handleParsePhoneNumber(null, country);
+			handleParsePhoneNumber(null, current);
 		}
 		countryWatchInitRun = false;
 	};
-	const countryChangeWatch = watcher(null, countryChangeWatchFunction);
-	$: $countryChangeWatch = country;
+
+	$: countryChangeWatchFunction(country);
 
 	// Generate placeholder based on the autoPlaceholder option
 	$: getPlaceholder =