svelte-tel-input 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte-tel-input
 
+## 0.8.0
+
+### Minor Changes
+
+- feat: example improvements, extend functionality ([#70](https://github.com/gyurielf/svelte-tel-input/pull/70))
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -6,6 +6,8 @@
 
 Lightweight phone input standardization.
 
+---
+
 ## Installation
 
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
@@ -22,6 +24,12 @@ npm install --save svelte-tel-input
 
 [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
 
+## Features
+
+-   Automatically set the user's current country using an IP lookup. #TODO should be optional (IP (by default)|browserLang|off)
+
+---
+
 ## Changelog
 
 | Package                        | Changelog                 |

package/assets/allCountry.js

@@ -296,6 +296,8 @@ const allCountries = [
 ];
 export const normalizedCountries = allCountries.map((country) => {
     return {
+        id: country[1].toUpperCase(),
+        label: `${country[0]} +${country[2]}`,
         name: country[0],
         iso2: country[1].toUpperCase(),
         dialCode: country[2],

package/components/Input/TelInput.svelte

@@ -1,32 +1,41 @@
-<script>import { enteredTelInputStore } from '../../stores';
+<script>import { watcher } from '../../stores';
 import { PhoneNumberParseError } from '../../types';
+import { normalizePhoneInput } from '../../utils/helpers';
 import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
 export let defaultCountry = null;
-export let phoneInput = null;
+export let rawPhoneInput = null;
 export let parsedPhoneInput = null;
-export let error = null;
 export let disabled = false;
 export let id = null;
 export let name = null;
 const handleInput = (event) => {
     const inputVal = event.target.value;
-    phoneInput = inputVal;
-    $enteredTelInputStore = inputVal;
+    rawPhoneInput = inputVal;
+    handleParsePhoneNumber(defaultCountry, inputVal);
+};
+const handleParsePhoneNumber = (country, input) => {
     try {
-        parsedPhoneInput = parsePhoneNumberWithError(inputVal, defaultCountry || undefined);
-        error = null;
+        parsedPhoneInput = normalizePhoneInput(parsePhoneNumberWithError(input, country || undefined));
     }
     catch (err) {
         if (err instanceof ParseError) {
             // Not a phone number, non-existent country, etc.
-            parsedPhoneInput = null;
-            error = PhoneNumberParseError[err.message];
+            parsedPhoneInput = {
+                isValid: false,
+                error: PhoneNumberParseError[err.message]
+            };
         }
         else {
             throw err;
         }
     }
 };
+const watchFunction = () => {
+    if (rawPhoneInput !== null)
+        handleParsePhoneNumber(defaultCountry, rawPhoneInput);
+};
+const countryChangeWatch = watcher(null, watchFunction);
+$: $countryChangeWatch = defaultCountry;
 </script>
 
 <input {id} {name} class={$$props.class} {disabled} type="tel" on:input={handleInput} />

package/components/Input/TelInput.svelte.d.ts

@@ -1,13 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import { PhoneNumberParseError } from '../../types';
-import { type CountryCode, type PhoneNumber } from 'libphonenumber-js';
+import type { NormalizedPhoneNumber } from '../../types/interfaces/Phone.interface';
+import { type CountryCode } from 'libphonenumber-js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         defaultCountry?: CountryCode | null | undefined;
-        phoneInput?: string | null | undefined;
-        parsedPhoneInput?: PhoneNumber | null | undefined;
-        error?: PhoneNumberParseError | null | undefined;
+        rawPhoneInput?: string | null | undefined;
+        parsedPhoneInput?: NormalizedPhoneNumber | null | undefined;
         disabled?: boolean | undefined;
         id?: string | null | undefined;
         name?: string | null | undefined;

package/components/Select/Select.svelte

@@ -1,12 +1,23 @@
 <script>import { clickOutsideAction } from '../../utils/directives/clickOutsideAction';
+import { isSelected } from '../../utils/helpers';
+import { createEventDispatcher } from 'svelte';
 export let selectOptions = {
     searchInput: false,
-    flags: true
+    flags: false
 };
+export let disabled = false;
 export let items;
+export let selected = null;
 export let clickOutside = true;
 let isOpen = false;
-let enteredSearch;
+let closeOnClick = true;
+export let searchText = '';
+$: filteredItems =
+    searchText && searchText.length > 0
+        ? items
+            .filter((el) => el.label.toLowerCase().indexOf(searchText.toLowerCase()) >= 0)
+            .sort((a, b) => (a.label < b.label ? -1 : 1))
+        : items;
 const toggleSelect = (e) => {
     e?.preventDefault();
     isOpen = !isOpen;
@@ -14,6 +25,7 @@ const toggleSelect = (e) => {
 const closeSelect = (e) => {
     e?.preventDefault();
     isOpen = false;
+    searchText = '';
 };
 const handleClickOutside = (e) => {
     e?.preventDefault();
@@ -21,25 +33,70 @@ const handleClickOutside = (e) => {
         closeSelect(e);
     }
 };
+const selectClick = () => {
+    if (closeOnClick)
+        closeSelect();
+};
+const handleSelect = (val) => {
+    if (disabled)
+        return;
+    if (typeof selected === 'object' && typeof val === 'object' && selected?.id && val?.id) {
+        if (typeof selected === 'object' && typeof val === 'object' && selected.id !== val.id) {
+            selected = val;
+            onChange(val);
+            selectClick();
+        }
+        else {
+            dispatch('same', { option: val });
+            selectClick();
+        }
+    }
+    else if (((selected === undefined || selected === null) && typeof val === 'object') ||
+        (typeof selected === typeof val && selected !== val)) {
+        selected = val;
+        onChange(val);
+        selectClick();
+    }
+    else {
+        dispatch('same', { option: val });
+        selectClick();
+    }
+};
+const dispatch = createEventDispatcher();
+const onChange = (selectedType) => {
+    dispatch('change', { option: selectedType });
+};
 </script>
 
 <div class="select cursor-pointer" use:clickOutsideAction={handleClickOutside}>
-	<div on:click={() => toggleSelect()}>CHOOSE</div>
+	{#if selected && selected !== null}
+		<div on:click={() => toggleSelect()}>{selected.label}</div>
+	{:else}
+		<div on:click={() => toggleSelect()}>CHOOSE</div>
+	{/if}
+
 	{#if isOpen}
 		<ul class="border border-gray-900 max-h-40 w-fit overflow-y-scroll">
 			{#if !selectOptions.searchInput}
 				<input
 					type="text"
 					class="px-4 py-1 text-gray-900 focus:outline-none w-full"
-					bind:value={enteredSearch}
+					bind:value={searchText}
 				/>
 			{/if}
-			{#each items as item}
-				<li class="p-2 bg-gray-600 hover:bg-opacity-30">
-					<span class="mr-3">{item.name}</span> +{item.dialCode}
+			{#each filteredItems as item (item.id)}
+				<li
+					class="p-2  {isSelected(item, selected)
+						? 'bg-red-400'
+						: 'bg-gray-600 hover:bg-opacity-30'}"
+					on:click={() => {
+						handleSelect(item);
+					}}
+				>
+					<span class="mr-3">{item.label}</span>
 				</li>
 			{:else}
-				<div>List is on the way..</div>
+				<div>List of items is on the way..</div>
 			{/each}
 		</ul>
 	{/if}

package/components/Select/Select.svelte.d.ts

@@ -1,22 +1,27 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Country } from '../../types/interfaces/Country.interface';
-declare const __propDef: {
-    props: {
+import type { TelSelectObject, Country } from '../../types';
+declare class __sveltets_Render<T extends Country | TelSelectObject> {
+    props(): {
         selectOptions?: {
             searchInput: boolean;
             flags: boolean;
         } | undefined;
-        items: Country[];
+        disabled?: boolean | undefined;
+        items: T[];
+        selected?: T | null | undefined;
         clickOutside?: boolean | undefined;
+        searchText?: string | undefined;
     };
-    events: {
+    events(): {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-export declare type SelectProps = typeof __propDef.props;
-export declare type SelectEvents = typeof __propDef.events;
-export declare type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+    slots(): {};
+}
+export declare type SelectProps<T extends Country | TelSelectObject> = ReturnType<__sveltets_Render<T>['props']>;
+export declare type SelectEvents<T extends Country | TelSelectObject> = ReturnType<__sveltets_Render<T>['events']>;
+export declare type SelectSlots<T extends Country | TelSelectObject> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Select<T extends Country | TelSelectObject> extends SvelteComponentTyped<SelectProps<T>, SelectEvents<T>, SelectSlots<T>> {
 }
 export {};

package/components/Select/SelectListItem.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 const setSelected = (e) => {
+    e?.preventDefault();
     dispatch('selectedItem');
 };
 </script>

package/components/utils/ExamplePayload.svelte

@@ -0,0 +1,31 @@
+<script>import { jsonPrettyParser } from '../../utils/helpers';
+export let exampleData;
+$: exampleDataEntries = (exampleData && Object.entries(exampleData)) || [];
+</script>
+
+<div class="validation-table grid grid-cols-2 mt-5 border rounded-sm border-gray-100 p-3 font-mono">
+	<div class="grid grid-cols-2">
+		<div>
+			<h3 class="text-lg font-semibold">Key</h3>
+			{#each exampleDataEntries as [key, _]}
+				<div>{key}</div>
+			{/each}
+		</div>
+		<div>
+			<h3 class="text-lg font-semibold">Value</h3>
+			{#each exampleDataEntries as [_, value]}
+				<div>{value}</div>
+			{/each}
+		</div>
+	</div>
+	<div class="grid">
+		<h3 class="text-lg font-semibold">Payload</h3>
+		{#key exampleData}
+			<pre
+				lang="no-highlight"
+				class="whitespace-pre-wrap "
+				use:jsonPrettyParser={exampleData}
+			/>
+		{/key}
+	</div>
+</div>

package/components/utils/ExamplePayload.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NormalizedPhoneNumber } from '../../types/interfaces/Phone.interface';
+declare const __propDef: {
+    props: {
+        exampleData: NormalizedPhoneNumber;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ExamplePayloadProps = typeof __propDef.props;
+export declare type ExamplePayloadEvents = typeof __propDef.events;
+export declare type ExamplePayloadSlots = typeof __propDef.slots;
+export default class ExamplePayload extends SvelteComponentTyped<ExamplePayloadProps, ExamplePayloadEvents, ExamplePayloadSlots> {
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -21,32 +21,32 @@
     "node": ">= 16"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.9"
+    "libphonenumber-js": "^1.10.11"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
     "@babel/preset-env": "^7.18.9",
-    "@changesets/cli": "^2.24.0",
+    "@changesets/cli": "^2.24.1",
     "@changesets/get-github-info": "^0.5.1",
     "@changesets/types": "^5.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.38",
-    "@sveltejs/kit": "^1.0.0-next.388",
+    "@sveltejs/kit": "^1.0.0-next.398",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/svelte": "^3.1.3",
-    "@types/jest": "^28.1.4",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
-    "autoprefixer": "^10.4.7",
-    "babel-jest": "^28.1.2",
+    "@types/jest": "^28.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "autoprefixer": "^10.4.8",
+    "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "cssnano": "^5.1.12",
     "dotenv": "^16.0.1",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^26.7.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.2",
+    "jest": "^28.1.3",
     "jest-matchmedia-mock": "^1.1.0",
     "micromatch": "^4.0.5",
     "postcss": "^8.4.14",
@@ -59,10 +59,10 @@
     "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.3",
     "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.12",
-    "tailwindcss": "^3.1.6",
-    "ts-jest": "^28.0.5",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "svelte2tsx": "^0.5.13",
+    "tailwindcss": "^3.1.7",
+    "ts-jest": "^28.0.7",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
@@ -139,7 +139,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./assets/allCountry": "./assets/allCountry.js",
-    "./assets/countries_deprecated": "./assets/countries_deprecated.js",
+    "./assets/flags_responsive.png": "./assets/flags_responsive.png",
     "./assets": "./assets/index.js",
     "./assets/regions": "./assets/regions.js",
     "./assets/telTypes": "./assets/telTypes.js",
@@ -147,14 +147,10 @@
     "./components/Select/Select.svelte": "./components/Select/Select.svelte",
     "./components/Select/SelectListItem.svelte": "./components/Select/SelectListItem.svelte",
     "./components/Select/TelCountrySelect/TelCountrySelect.svelte": "./components/Select/TelCountrySelect/TelCountrySelect.svelte",
-    "./components/Select/TelRegionSelect/TelRegionSelect.svelte": "./components/Select/TelRegionSelect/TelRegionSelect.svelte",
-    "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte": "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte",
-    "./components/Select/TelTypeSelect/TelTypeSelect.svelte": "./components/Select/TelTypeSelect/TelTypeSelect.svelte",
-    "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte": "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte",
-    ".": "./index.js",
+    "./stores/exampleStore": "./stores/exampleStore.js",
     "./stores": "./stores/index.js",
+    "./styles/flags.css": "./styles/flags.css",
     "./types/DynamicSvelteComponent.type": "./types/DynamicSvelteComponent.type.js",
-    "./types/Select.type": "./types/Select.type.js",
     "./types/enums/PhoneNumberParseError.enum": "./types/enums/PhoneNumberParseError.enum.js",
     "./types/enums/PhoneType.enum": "./types/enums/PhoneType.enum.js",
     "./types/enums": "./types/enums/index.js",
@@ -167,7 +163,6 @@
     "./utils/directives/clickOutsideAction": "./utils/directives/clickOutsideAction.js",
     "./utils/helpers": "./utils/helpers.js",
     "./utils/simulator": "./utils/simulator.js",
-    "./utils/typeCheck": "./utils/typeCheck.js",
-    "./views/Usage.svelte": "./views/Usage.svelte"
+    "./utils/typeCheck": "./utils/typeCheck.js"
   }
 }

package/stores/exampleStore.d.ts

@@ -0,0 +1,2 @@
+import type { NormalizedPhoneNumber } from '../types/interfaces/Phone.interface';
+export declare const exampleDataStore: import("svelte/store").Writable<NormalizedPhoneNumber>;

package/stores/exampleStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const exampleDataStore = writable();

package/stores/index.d.ts

@@ -1,5 +1,4 @@
 import type { Writable } from 'svelte/store';
-import type { SelectType } from '../types';
 export declare const booleanStore: (initial: boolean) => {
     isOpen: Writable<boolean>;
     open: () => void;
@@ -11,7 +10,9 @@ export declare const statefulSwap: (initialState: boolean | null) => {
     transitionTo: (newState: boolean | null) => void;
     onOutro: () => void;
 };
+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?: ((value?: string | null | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    set: (value: string | null) => void;
+};
 export declare const selectedCountryStore: Writable<string>;
-export declare const selectedRegionStore: Writable<string>;
-export declare const selectedTelTypeStore: Writable<SelectType>;
 export declare const enteredTelInputStore: Writable<string>;

package/stores/index.js

@@ -29,9 +29,19 @@ export const statefulSwap = (initialState) => {
         onOutro
     };
 };
+export const watcher = (initialValue, watchFunction) => {
+    const { subscribe, update } = writable(initialValue);
+    return {
+        subscribe,
+        set: (value) => {
+            update((oldvalue) => {
+                watchFunction(oldvalue, value);
+                return value;
+            });
+        }
+    };
+};
 // SELECTS
 export const selectedCountryStore = writable();
-export const selectedRegionStore = writable();
-export const selectedTelTypeStore = writable();
 // INPUT
 export const enteredTelInputStore = writable();