svelte-tel-input 3.4.1 → 3.5.1

package/README.md

@@ -15,7 +15,7 @@
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
 
 ```bash
-npm install --save svelte-tel-input
+npm install svelte-tel-input
 ```
 
 ## Features

package/dist/components/input/TelInput.svelte

@@ -6,7 +6,6 @@ import {
   generatePlaceholder,
   telInputAction
 } from "../../utils/index.js";
-import { watcher } from "../../stores/index.js";
 const dispatch = createEventDispatcher();
 const defaultOptions = {
   autoPlaceholder: true,
@@ -25,10 +24,11 @@ export let readonly = null;
 export let required = null;
 export let size = null;
 export let value;
-export let country;
+export let country = void 0;
 export let detailedValue = null;
 export let valid = true;
 export let options = defaultOptions;
+export let el = void 0;
 let inputValue = value;
 let prevCountry = country;
 const combinedOptions = {
@@ -103,14 +103,13 @@ const handleParsePhoneNumber = (rawInput, currCountry = null) => {
   }
 };
 let countryWatchInitRun = true;
-const countryChangeWatchFunction = () => {
+const countryChangeWatchFunction = (current) => {
   if (!countryWatchInitRun) {
-    handleParsePhoneNumber(null, country);
+    handleParsePhoneNumber(null, current);
   }
   countryWatchInitRun = false;
 };
-const countryChangeWatch = watcher(null, countryChangeWatchFunction);
-$: $countryChangeWatch = country;
+$: countryChangeWatchFunction(country);
 $: getPlaceholder = combinedOptions.autoPlaceholder && country ? generatePlaceholder(country, {
   format: combinedOptions.format,
   spaces: combinedOptions.spaces
@@ -137,6 +136,8 @@ onMount(() => {
 </script>
 
 <input
+	{...$$restProps}
+	bind:this={el}
 	{autocomplete}
 	class={classes}
 	{disabled}

package/dist/components/input/TelInput.svelte.d.ts

@@ -2,20 +2,22 @@ import { SvelteComponentTyped } from "svelte";
 import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '../../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         autocomplete?: string | null;
-        /** You can set the classes of the input field*/ class?: string;
-        /** You can disable the component and set the disabled attribute of the input field */ disabled?: boolean;
-        /** You can set the id attribute of the input field */ id?: string;
-        /** You can set the name attribute of the input field */ name?: string | null;
-        /** It will overwrite the autoPlaceholder ! */ placeholder?: string | null;
-        /** You can set the readonly attribute of the input field */ readonly?: boolean | null;
-        /** Set the required attribute on the input element */ required?: boolean | null;
-        /** You can set the size attribute of the input field */ size?: number | null;
-        /** The core value of the input, this is the only one what you can store. It's an E164 phone number.*/ value: E164Number | null;
-        /** It's accept any Country Code Alpha-2 (ISO 3166) */ country: CountryCode | null;
-        /** Detailed parse of the E164 phone number */ detailedValue?: Partial<DetailedValue> | null;
-        /** Validity of the input based on the config settings.*/ valid?: boolean;
-        /** You can turn on and off certain features by this object */ options?: TelInputOptions;
+        class?: string;
+        disabled?: boolean;
+        id?: string;
+        name?: string | null;
+        placeholder?: string | null;
+        readonly?: boolean | null;
+        required?: boolean | null;
+        size?: number | null;
+        value: E164Number | null;
+        country?: CountryCode | null | undefined;
+        detailedValue?: Partial<DetailedValue> | null;
+        valid?: boolean;
+        options?: TelInputOptions;
+        el?: HTMLInputElement | undefined;
         updateValue?: (newValue: string | E164Number | null, newCountry?: CountryCode | null) => void;
     };
     events: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.4.1",
+  "version": "3.5.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"

package/dist/stores/index.d.ts

@@ -1,4 +0,0 @@
-export declare const watcher: (initialValue: string | null, watchFunction: (oldVal: string | null, newVal: string | null) => void) => {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined) => import("svelte/store").Unsubscriber;
-    set: (value: string | null) => void;
-};

package/dist/stores/index.js

@@ -1,14 +0,0 @@
-import { writable } from 'svelte/store';
-// Watch variable changes.
-export const watcher = (initialValue, watchFunction) => {
-    const { subscribe, update } = writable(initialValue);
-    return {
-        subscribe,
-        set: (value) => {
-            update((oldvalue) => {
-                watchFunction(oldvalue, value);
-                return value;
-            });
-        }
-    };
-};