svelte-tel-input 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,157 +1,169 @@
 # svelte-tel-input
 
+## 0.12.0
+
+### Minor Changes
+
+-   feat: Update exports to make the package as simple to use as possible. ([#85](https://github.com/gyurielf/svelte-tel-input/pull/85))
+
+## 0.11.1
+
+### Patch Changes
+
+-   Update readme and prepare to 1.0 ([#79](https://github.com/gyurielf/svelte-tel-input/pull/79))
+
 ## 0.11.0
 
 ### Minor Changes
 
-- feat: dark mode, example page enhancemet ([#76](https://github.com/gyurielf/svelte-tel-input/pull/76))
+-   feat: dark mode, example page enhancemet ([#76](https://github.com/gyurielf/svelte-tel-input/pull/76))
 
 ## 0.10.0
 
 ### Minor Changes
 
-- refactor: components and views ([#74](https://github.com/gyurielf/svelte-tel-input/pull/74))
+-   refactor: components and views ([#74](https://github.com/gyurielf/svelte-tel-input/pull/74))
 
 ## 0.9.0
 
 ### Minor Changes
 
-- feat: masking/formatting and parsing extends ([#72](https://github.com/gyurielf/svelte-tel-input/pull/72))
+-   feat: masking/formatting and parsing extends ([#72](https://github.com/gyurielf/svelte-tel-input/pull/72))
 
 ## 0.8.0
 
 ### Minor Changes
 
-- feat: example improvements, extend functionality ([#70](https://github.com/gyurielf/svelte-tel-input/pull/70))
+-   feat: example improvements, extend functionality ([#70](https://github.com/gyurielf/svelte-tel-input/pull/70))
 
 ## 0.7.0
 
 ### Minor Changes
 
-- feat: example page payload feature, parsing improvements" ([#68](https://github.com/gyurielf/svelte-tel-input/pull/68))
+-   feat: example page payload feature, parsing improvements" ([#68](https://github.com/gyurielf/svelte-tel-input/pull/68))
 
 ## 0.6.5
 
 ### Patch Changes
 
-- fix: add changeset ([#61](https://github.com/gyurielf/svelte-tel-input/pull/61))
+-   fix: add changeset ([#61](https://github.com/gyurielf/svelte-tel-input/pull/61))
 
 ## 0.6.4
 
 ### Patch Changes
 
-- chore: update to vite 3 ([#58](https://github.com/gyurielf/svelte-tel-input/pull/58))
+-   chore: update to vite 3 ([#58](https://github.com/gyurielf/svelte-tel-input/pull/58))
 
 ## 0.6.3
 
 ### Patch Changes
 
-- update dependencies ([#56](https://github.com/gyurielf/svelte-tel-input/pull/56))
+-   update dependencies ([#56](https://github.com/gyurielf/svelte-tel-input/pull/56))
 
 ## 0.6.2
 
 ### Patch Changes
 
-- Update readme & update packages ([#54](https://github.com/gyurielf/svelte-tel-input/pull/54))
+-   Update readme & update packages ([#54](https://github.com/gyurielf/svelte-tel-input/pull/54))
 
 ## 0.6.1
 
 ### Patch Changes
 
-- Readme update ([#52](https://github.com/gyurielf/svelte-tel-input/pull/52))
+-   Readme update ([#52](https://github.com/gyurielf/svelte-tel-input/pull/52))
 
 ## 0.6.0
 
 ### Minor Changes
 
-- feat: example page preparations & extend functionality (part 1) ([#50](https://github.com/gyurielf/svelte-tel-input/pull/50))
+-   feat: example page preparations & extend functionality (part 1) ([#50](https://github.com/gyurielf/svelte-tel-input/pull/50))
 
 ## 0.5.1
 
 ### Patch Changes
 
-- chore: update packages and resolve breaking changes ([#46](https://github.com/gyurielf/svelte-tel-input/pull/46))
+-   chore: update packages and resolve breaking changes ([#46](https://github.com/gyurielf/svelte-tel-input/pull/46))
 
 ## 0.5.0
 
 ### Minor Changes
 
-- feat: prepare github pages deployment ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+-   feat: prepare github pages deployment ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
 
-* feat: implement selects and input ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+*   feat: implement selects and input ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
 
-- feat: basic stores created ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+-   feat: basic stores created ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
 
 ## 0.4.2
 
 ### Patch Changes
 
-- fix: fix readme ([#41](https://github.com/gyurielf/svelte-tel-input/pull/41))
+-   fix: fix readme ([#41](https://github.com/gyurielf/svelte-tel-input/pull/41))
 
 ## 0.4.1
 
 ### Patch Changes
 
-- fix: readme fix ([#39](https://github.com/gyurielf/svelte-tel-input/pull/39))
+-   fix: readme fix ([#39](https://github.com/gyurielf/svelte-tel-input/pull/39))
 
 ## 0.4.0
 
 ### Minor Changes
 
-- fix: rework ci
+-   fix: rework ci
 
 ### Patch Changes
 
-- fix: minor ci fix ([#34](https://github.com/gyurielf/svelte-tel-input/pull/34))
+-   fix: minor ci fix ([#34](https://github.com/gyurielf/svelte-tel-input/pull/34))
 
-* fix: fix ci again ([#35](https://github.com/gyurielf/svelte-tel-input/pull/35))
+*   fix: fix ci again ([#35](https://github.com/gyurielf/svelte-tel-input/pull/35))
 
-- fix: last ci fix for today ([#36](https://github.com/gyurielf/svelte-tel-input/pull/36))
+-   fix: last ci fix for today ([#36](https://github.com/gyurielf/svelte-tel-input/pull/36))
 
-* fix: ci fixxx ([#33](https://github.com/gyurielf/svelte-tel-input/pull/33))
+*   fix: ci fixxx ([#33](https://github.com/gyurielf/svelte-tel-input/pull/33))
 
-- something 1 ([#37](https://github.com/gyurielf/svelte-tel-input/pull/37))
+-   something 1 ([#37](https://github.com/gyurielf/svelte-tel-input/pull/37))
 
-* fix: ci extend 321 ([#32](https://github.com/gyurielf/svelte-tel-input/pull/32))
+*   fix: ci extend 321 ([#32](https://github.com/gyurielf/svelte-tel-input/pull/32))
 
 ## 0.3.2
 
 ### Patch Changes
 
-- feat: add MIT license ([#29](https://github.com/gyurielf/svelte-tel-input/pull/29))
+-   feat: add MIT license ([#29](https://github.com/gyurielf/svelte-tel-input/pull/29))
 
-* fix: fix readme deps ([#29](https://github.com/gyurielf/svelte-tel-input/pull/29))
+*   fix: fix readme deps ([#29](https://github.com/gyurielf/svelte-tel-input/pull/29))
 
 ## 0.3.1
 
 ### Patch Changes
 
-- fix: lets check with different folder structure ([#25](https://github.com/gyurielf/svelte-tel-input/pull/25))
+-   fix: lets check with different folder structure ([#25](https://github.com/gyurielf/svelte-tel-input/pull/25))
 
 ## 0.3.0
 
 ### Minor Changes
 
-- fix: ci modifications ([#22](https://github.com/gyurielf/svelte-tel-input/pull/22))
+-   fix: ci modifications ([#22](https://github.com/gyurielf/svelte-tel-input/pull/22))
 
 ## 0.2.0
 
 ### Minor Changes
 
-- remove unused packages, cleanup, fix ci ([#19](https://github.com/gyurielf/svelte-tel-input/pull/19))
+-   remove unused packages, cleanup, fix ci ([#19](https://github.com/gyurielf/svelte-tel-input/pull/19))
 
-* fix: another CI fix ([#20](https://github.com/gyurielf/svelte-tel-input/pull/20))
+*   fix: another CI fix ([#20](https://github.com/gyurielf/svelte-tel-input/pull/20))
 
 ## 0.1.0
 
 ### Minor Changes
 
-- test_1
+-   test_1
 
 ### Patch Changes
 
-- szo
+-   szo
 
-* test 2
+*   test 2
 
-- test3
+-   test3

package/README.md

@@ -1,37 +1,89 @@
-# Svelte Tel Input
+<a name="readme-top"></a>
 
-## Under development!
+[![npm version](https://badge.fury.io/js/svelte-tel-input.svg)](https://badge.fury.io/js/svelte-tel-input)
 
-<ins>Do not use it before 1.0, it won't works properly!</ins>
+# Svelte Tel Input
 
-Lightweight phone input standardization.
+> Lightweight svelte tel/phone input standardizer.
 
----
+The package is in `BETA` stage, expect bugs.
 
 ## Installation
 
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
 
-```sh
-yarn add svelte-tel-input
-```
-
-```
+```bash
 npm install --save svelte-tel-input
 ```
 
-## Dependencies
+## Usage
 
-[libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
+### Basic
+
+```html
+<script lang="ts">
+	import { TelInput } from 'svelte-tel-input';
+	import type { NormalizedTelNumber, CountryCode } from 'svelte-tel-input/types';
+
+	// Any Country Code Alpha-2 (ISO 3166)
+	let country: CountryCode = 'US';
+
+	let parsedTelInput: NormalizedTelNumber | null = null;
+</script>
+
+<TelInput {country} bind:parsedTelInput class="any class passed down" />
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Features
 
--   Automatically set the user's current country using an IP lookup. #TODO should be optional (IP (by default)|browserLang|off)
+-   Parse and validate phone number.
+-   Standardize parsed phone numbers. You can store one exact format, no matter how users type their phone numbers.
+-   Mask typed inputs (country specificly), to make it more readable.
+-   Automatically set the user's current country using an IP lookup.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
----
+## Dependencies
+
+[libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Changelog
 
 | Package                        | Changelog                 |
 | ------------------------------ | ------------------------- |
 | [@gyurielf/svelte-tel-input]() | [Changelog](CHANGELOG.md) |
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Roadmap
+
+-   [x] Add Changelog
+-   [x] Add CI/CD
+-   [x] Integrate libphonenumber
+-   [x] Implement parser
+-   [x] Add basics docs and examples
+-   [ ] Add advanced examples
+-   [ ] Improve A11Y
+-   [ ] Default country sould be optional. ( ip | browserLang |off )
+-   [ ] Simlify code and types
+-   [ ] Multi-language Support
+
+See the [open issues](https://github.com/gyurielf/svelte-tel-input/issues) for a list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Support
+
+<a href="https://www.buymeacoffee.com/gyurielf" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## License
+
+Distributed under the MIT License. See `LICENSE.md` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

package/components/Input/AdvancedTelInput.svelte

@@ -0,0 +1,187 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { normalizedCountries } from '../../assets';
+import { clickOutsideAction } from '../../utils/directives/clickOutsideAction';
+import TelInput from './TelInput.svelte';
+import { isSelected } from '../../utils/helpers';
+export let searchText = '';
+export let selected = {
+    id: 'HU',
+    label: 'Hungary (Magyarország) +36',
+    name: 'Hungary (Magyarország)',
+    iso2: 'HU',
+    dialCode: '36',
+    priority: 0,
+    areaCodes: null
+};
+export let clickOutside = true;
+export let closeOnClick = true;
+export let disabled = false;
+export let parsedTelInput = {
+    countryCode: 'HU',
+    isValid: true,
+    phoneNumber: '+36301234567',
+    countryCallingCode: '36',
+    formattedNumber: '+36 30 123 4567',
+    nationalNumber: '301234567',
+    formatInternational: '+36 30 123 4567',
+    formatOriginal: '30 123 4567',
+    formatNational: '06 30 123 4567',
+    uri: 'tel:+36301234567',
+    e164: '+36301234567'
+};
+let isOpen = false;
+$: isValid = parsedTelInput?.isValid ?? false;
+const toggleDropDown = (e) => {
+    e.preventDefault();
+    isOpen = !isOpen;
+};
+const closeDropdown = (e) => {
+    e?.preventDefault();
+    isOpen = false;
+    searchText = '';
+};
+const selectClick = () => {
+    if (closeOnClick)
+        closeDropdown();
+};
+const closeOnClickOutside = () => {
+    if (clickOutside) {
+        closeDropdown();
+    }
+};
+$: filteredItems =
+    searchText && searchText.length > 0
+        ? normalizedCountries
+            .filter((el) => el.label.toLowerCase().indexOf(searchText.toLowerCase()) >= 0)
+            .sort((a, b) => (a.label < b.label ? -1 : 1))
+        : normalizedCountries;
+const handleSelect = (val, e) => {
+    if (disabled)
+        return;
+    e?.preventDefault();
+    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 = (selectedCountry) => {
+    dispatch('change', { option: selectedCountry });
+};
+</script>
+
+<div
+	class="flex rounded-lg {isValid
+		? ``
+		: ` ring-pink-500 dark:ring-pink-500 ring-1 focus-within:ring-offset-1 focus-within:ring-offset-pink-500/50 focus-within:ring-2`}"
+	use:clickOutsideAction={closeOnClickOutside}
+>
+	<button
+		id="states-button"
+		data-dropdown-toggle="dropdown-states"
+		class="flex-shrink-0 overflow-hidden z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white dark:border-gray-600"
+		type="button"
+		on:click={toggleDropDown}
+	>
+		{#if selected && selected !== null}
+			<div class="inline-flex items-center text-left">
+				<span class="flag flag-{selected.iso2.toLowerCase()} flex-shrink-0 mr-3" />
+				<span class=" text-gray-500">+{selected.dialCode}</span>
+			</div>
+		{:else}
+			Please select
+		{/if}
+		<svg
+			aria-hidden="true"
+			class="ml-1 w-4 h-4"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</button>
+	{#if isOpen}
+		<div
+			id="dropdown-countries"
+			class="z-10 max-w-fit bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute translate-y-11 overflow-hidden"
+			data-popper-reference-hidden=""
+			data-popper-escaped=""
+			data-popper-placement="bottom"
+			aria-orientation="vertical"
+			aria-labelledby="country-button"
+			tabindex="-1"
+		>
+			<ul
+				class="text-sm text-gray-700 dark:text-gray-200 max-h-48 overflow-y-auto"
+				aria-labelledby="countries-button"
+				role="listbox"
+			>
+				{#if true}
+					<input
+						aria-autocomplete="list"
+						type="text"
+						class="px-4 py-2 text-gray-900 focus:outline-none w-full sticky top-0"
+						bind:value={searchText}
+					/>
+				{/if}
+				{#each filteredItems as country (country.id)}
+					{@const isActive = isSelected(country, selected)}
+					<li role="option" aria-selected={isActive}>
+						<button
+							type="button"
+							class="inline-flex py-2 px-4 w-full text-sm hover:bg-gray-100 dark:hover:bg-gray-600 
+                             active:bg-gray-800 dark:active:bg-gray-800 overflow-hidden
+                            {isActive
+								? 'bg-gray-600 dark:text-white'
+								: 'dark:hover:text-white dark:text-gray-400'}"
+							on:click={(e) => {
+								handleSelect(country, e);
+							}}
+						>
+							<div class="inline-flex items-center text-left">
+								<span
+									class="flag flag-{country.iso2.toLowerCase()} flex-shrink-0 mr-3"
+								/>
+								<span class="mr-2">{country.name}</span>
+								<span class=" text-gray-500">+{country.dialCode}</span>
+							</div>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+
+	<TelInput
+		id="tel-input"
+		country={selected?.iso2}
+		bind:parsedTelInput
+		class="border border-gray-300 border-l-gray-100 dark:border-l-gray-700 dark:border-gray-600 {isValid
+			? `bg-gray-50 dark:bg-gray-700 
+            dark:placeholder-gray-400 dark:text-white text-gray-900`
+			: `dark:bg-gray-700`} text-sm rounded-r-lg block w-full p-2.5 
+           focus:outline-none"
+	/>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NormalizedTelNumber, Country } from '../../types';
+declare const __propDef: {
+    props: {
+        searchText?: string | undefined;
+        selected?: Country | null | undefined;
+        clickOutside?: boolean | undefined;
+        closeOnClick?: boolean | undefined;
+        disabled?: boolean | undefined;
+        parsedTelInput?: NormalizedTelNumber | null | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AdvancedTelInputProps = typeof __propDef.props;
+export declare type AdvancedTelInputEvents = typeof __propDef.events;
+export declare type AdvancedTelInputSlots = typeof __propDef.slots;
+export default class AdvancedTelInput extends SvelteComponentTyped<AdvancedTelInputProps, AdvancedTelInputEvents, AdvancedTelInputSlots> {
+}
+export {};

package/components/Input/TelInput.svelte

@@ -1,33 +1,33 @@
 <script>import { watcher } from '../../stores';
 import { PhoneNumberParseError } from '../../types';
-import { isNumber, normalizePhoneInput } from '../../utils/helpers';
+import { normalizeTelInput } from '../../utils/helpers';
 import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
 import { onMount } from 'svelte';
-export let defaultCountry = null;
-export let rawPhoneInput = null;
-export let parsedPhoneInput = null;
+export let country = null;
+export let rawTelInput = null;
+export let parsedTelInput = null;
 export let disabled = false;
 export let id = null;
 export let name = null;
 onMount(() => {
-    if (parsedPhoneInput !== null) {
-        rawPhoneInput = parsedPhoneInput.nationalNumber;
-        handleParsePhoneNumber(defaultCountry, parsedPhoneInput.phoneNumber);
+    if (parsedTelInput !== null) {
+        rawTelInput = parsedTelInput.nationalNumber;
+        handleParsePhoneNumber(country, parsedTelInput.phoneNumber);
     }
 });
 const handleInput = (event) => {
     const inputVal = event.target.value.replace(/\s/g, '');
-    rawPhoneInput = inputVal;
-    handleParsePhoneNumber(defaultCountry, inputVal);
+    rawTelInput = inputVal;
+    handleParsePhoneNumber(country, inputVal);
 };
 const handleParsePhoneNumber = (country, input) => {
     try {
-        parsedPhoneInput = normalizePhoneInput(parsePhoneNumberWithError(input, country || undefined));
+        parsedTelInput = normalizeTelInput(parsePhoneNumberWithError(input, country || undefined));
     }
     catch (err) {
         if (err instanceof ParseError) {
             // Not a phone number, non-existent country, etc.
-            parsedPhoneInput = {
+            parsedTelInput = {
                 isValid: false,
                 error: PhoneNumberParseError[err.message]
             };
@@ -38,18 +38,18 @@ const handleParsePhoneNumber = (country, input) => {
     }
 };
 const watchFunction = () => {
-    if (rawPhoneInput !== null)
-        handleParsePhoneNumber(defaultCountry, rawPhoneInput);
+    if (rawTelInput !== null)
+        handleParsePhoneNumber(country, rawTelInput);
 };
 const countryChangeWatch = watcher(null, watchFunction);
-$: $countryChangeWatch = defaultCountry;
+$: $countryChangeWatch = country;
 </script>
 
 <input
 	{id}
 	{name}
 	{disabled}
-	value={parsedPhoneInput?.formatOriginal ?? rawPhoneInput ?? ''}
+	value={parsedTelInput?.formatOriginal ?? rawTelInput ?? ''}
 	type="tel"
 	class={$$props.class}
 	{...$$restProps}

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

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { NormalizedPhoneNumber } from '../../types/interfaces/Phone.interface';
+import type { NormalizedTelNumber } from '../../types/interfaces/Phone.interface';
 import { type CountryCode } from 'libphonenumber-js';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        defaultCountry?: CountryCode | null | undefined;
-        rawPhoneInput?: string | null | undefined;
-        parsedPhoneInput?: Partial<NormalizedPhoneNumber> | null | undefined;
+        country?: CountryCode | null | undefined;
+        rawTelInput?: string | null | undefined;
+        parsedTelInput?: Partial<NormalizedTelNumber> | null | undefined;
         disabled?: boolean | undefined;
         id?: string | null | undefined;
         name?: string | null | undefined;

package/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TelInput } from './components/Input/TelInput.svelte';
+export { getCurrentCountry, isSelected } from './utils/helpers';
+export { clickOutsideAction } from './utils/directives/clickOutsideAction';
+export { normalizedCountries } from './assets';

package/index.js

@@ -0,0 +1,4 @@
+export { default as TelInput } from './components/Input/TelInput.svelte';
+export { getCurrentCountry, isSelected } from './utils/helpers';
+export { clickOutsideAction } from './utils/directives/clickOutsideAction';
+export { normalizedCountries } from './assets';