svelte-tel-input 3.0.1 → 3.2.0

package/LICENSE.md

@@ -1,21 +1 @@
-The MIT License (MIT)
-
-Copyright (c) 2022 - Present Gyorgy Kallai, Budapest, Hungary.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+../../LICENSE.md

package/README.md

@@ -1,219 +1 @@
-<a name="readme-top"></a>
-
-[![npm version](https://badge.fury.io/js/svelte-tel-input.svg)](https://badge.fury.io/js/svelte-tel-input)
-
-# Svelte Tel Input
-
-> Lightweight svelte tel/phone input standardizer.
-
-<img src="https://raw.githubusercontent.com/gyurielf/svelte-tel-input/main/static/demo.gif" width="600px" align="center">
-
-🔥 Check it out live [here](https://svelte-tel-input.vercel.app/)
-
-## Installation
-
-Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
-
-```bash
-npm install --save svelte-tel-input
-```
-
-## Features
-
--   Parse and validate phone number.You can store one exact format (`E164`), no matter how users type their phone numbers.
--   Format (specified to its country), to make it more readable.
--   Prevent non-digits typing into the input, except the leading `+` sign (and `space` optionally).
--   Handle copy-pasted phone numbers, it's sanitize non-digit characters except the leading `+` sign (and `space` optionally).
--   Automatic placeholder generation for the selected country.
-
-## Usage
-
-### Advanced
-
-_Snippet would be too long_ - [REPL](https://stackblitz.com/edit/svelte-tel-input-repl-1jfaar?file=README.md) (StackBlitz)
-
-### Basic
-
-[REPL](https://stackblitz.com/edit/svelte-tel-input-repl?file=README.md) (StackBlitz)
-
-```html
-<script lang="ts">
-	import { TelInput, normalizedCountries } from 'svelte-tel-input';
-	import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
-
-	// Any Country Code Alpha-2 (ISO 3166)
-	let selectedCountry: CountryCode | null = 'HU';
-
-	// You must use E164 number format. It's guarantee the parsing and storing consistency.
-	let value: E164Number | null = '+36301234567';
-
-    // Validity
-    let valid = true;
-
-	// Optional - Extended details about the parsed phone number
-	let detailedValue: DetailedValue | null = null;
-</script>
-
-<div class="wrapper">
-	<select
-		class="country-select {!valid && 'invalid'}"
-		aria-label="Default select example"
-		name="Country"
-		bind:value={selectedCountry}
-	>
-		<option value={null} hidden={selectedCountry !== null}>Please select</option>
-		{#each normalizedCountries as country (country.id)}
-			<option
-				value={country.iso2}
-				selected={country.iso2 === selectedCountry}
-				aria-selected={country.iso2 === selectedCountry}
-			>
-				{country.iso2} (+{country.dialCode})
-			</option>
-		{/each}
-	</select>
-    <TelInput bind:country={selectedCountry} bind:value bind:valid bind:detailedValue class="basic-tel-input {!isValid && 'invalid'}" />
-</div>
-
-<style>
-  .wrapper :global(.basic-tel-input) {
-      height: 32px;
-      padding-left: 12px;
-      padding-right: 12px;
-      border-radius: 6px;
-      border: 1px solid;
-      outline: none;
-  }
-
-  .wrapper :global(.country-select) {
-      height: 36px;
-      padding-left: 12px;
-      padding-right: 12px;
-      border-radius: 6px;
-      border: 1px solid;
-      outline: none;
-  }
-
-  .wrapper :global(.invalid) {
-    border-color: red;
-  }
-</style>
-```
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-## Props
-
-The default export of the library is the main TelInput component. It has the following props:
-
-| Property name | Type                   | Default Value | Usage                                                                                                                                                                                                                                                                                                                |
-| ------------- | ---------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value         | `E164Number \| null`   | `null`        | [E164](https://en.wikipedia.org/wiki/E.164) is the international format of phone.numbers. This is the main entry point to store and/or load an existent phone number.                                                                                                                                                |
-| country       | `CountryCode \| null`  | `null`        | It's accept any Country Code Alpha-2 (ISO 3166). You can set manually (e.g: by the user via a select). The parser will inspect the entered phone number and if it detect a valid country calling code, then it's automatically set the country to according to the detected country calling code. E.g: `+36` -> `HU` |
-| disabled      | `boolean`              | `false`       | It's block the parser and prevent entering input. You must handle its styling on your own.                                                                                                                                                                                                                           |
-| valid         | `boolean`              | `true`        | Indicates whether the entered tel number validity.                                                                                                                                                                                                                                                                   |
-| detailedValue | `DetailedValue \|null` | `null`        | All of the formatted results of the tel input.                                                                                                                                                                                                                                                                       |
-| class         | `string`               | ``            | You can pass down any classname to the component                                                                                                                                                                                                                                                                     |
-| required      | `boolean \| null`      | `null`        | Set the required attribute on the input element                                                                                                                                                                                                                                                                      |
-| options       | `TelInputOptions`      | check below   | Allow or disallow spaces in the input field                                                                                                                                                                                                                                                                          |
-
-Config options:
-
-```javascript
-{
-    // Generates country specific placeholder for the selected country.
-    autoPlaceholder: true,
-    // Allow or disallow spaces in the input field
-    spaces: true,
-    // If you have a parsed phone number and you change country manually from outside, then it's set the `valid` prop to false.
-    invalidateOnCountryChange: false
-}
-```
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-## Dispatched Events
-
-The default export of the library is the main TelInput component. It has the following props:
-
-| Event name          | Type                   |
-| ------------------- | ---------------------- |
-| updateValue         | `E164Number \| null`   |
-| updateDetailedValue | `DetailedValue \|null` |
-| updateCountry       | `CountryCode \| null`  |
-| updateValid         | `boolean`              |
-| parseError          | `string`               |
-
-## Use case of the event driven behavior
-
-```typescript
-<script lang="ts">
-	// Imports, etc....
-	let value: E164Number | null = null;
-	const yourHandler = (e: CustomEvent<E164Number | null>) => {
-        value = e.detail //
-        // do stuff...
-	};
-</script>
-
-<TelInput value={cachedValue ?? value} on:updateValue={yourHandler} ... />
-```
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-## Caveats
-
--   In order to reset the component from outside, you must pass (or set if you binded) `null` for both the `value` and `country` properties.
--   Let's assume you pass a `US` `E164` number, which can be a partial `E164`, but long enough to determine the country and you pass `DE` country directly. The country will be updated to `US`, which is determined from the `E164` in this example. If the `E164` is not long enough to determine its country, then the country will stay what you passed to the component (`DE`).
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-## Goals
-
--   Solve the problem that a users can enter the same phone number in different formats.
--   Storing a phone number in a standard format, that can be indexable and searchable in any database.
--   Should be accessible for the the browser. Eg. for a `<a href="tel+36201234567 />`.
--   The stored phone number format can be useable for any SMS gateway(e.g for 2FA) and if somebody can call the number from anywhere, it should work.
-
-## Dependencies
-
-[svelte](https://svelte.dev/)
-
-[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
--   [x] Add advanced examples
--   [x] Generate placeholders autimatically
--   [ ] Improve A11Y
-
-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>
+../../README.md

package/{assets → dist/assets}/allCountry.d.ts

@@ -1,2 +1,2 @@
-import type { Country } from '../types';
+import type { Country } from '../types/index.js';
 export declare const normalizedCountries: Country[];

package/dist/assets/index.d.ts

@@ -0,0 +1 @@
+export { normalizedCountries } from './allCountry.js';

package/dist/assets/index.js

@@ -0,0 +1 @@
+export { normalizedCountries } from './allCountry.js';

package/dist/assets/regions.d.ts

@@ -0,0 +1 @@
+export declare const rawRegions: (string | number | string[])[][];

package/dist/assets/regions.js

@@ -0,0 +1,43 @@
+// Country model:
+// [
+//    Country name,
+//    Regions,
+//    iso2 code,
+//    International dial code,
+//    Format (if available),
+//    Order priority (if >1 country with same dial code),
+//    Area codes (if >1 country with same dial code)
+// ]
+//
+// Regions:
+// ['america', 'europe', 'asia', 'oceania', 'africa']
+//
+// Sub-regions:
+// ['north-america', 'south-america', 'central-america', 'carribean',
+//  'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
+export const rawRegions = [
+    ['American Samoa', ['oceania'], 'as', '1684'],
+    ['Anguilla', ['america', 'carribean'], 'ai', '1264'],
+    ['Bermuda', ['america', 'north-america'], 'bm', '1441'],
+    ['British Virgin Islands', ['america', 'carribean'], 'vg', '1284'],
+    ['Cayman Islands', ['america', 'carribean'], 'ky', '1345'],
+    ['Cook Islands', ['oceania'], 'ck', '682'],
+    ['Falkland Islands', ['america', 'south-america'], 'fk', '500'],
+    ['Faroe Islands', ['europe'], 'fo', '298'],
+    ['Gibraltar', ['europe'], 'gi', '350'],
+    ['Greenland', ['america'], 'gl', '299'],
+    ['Jersey', ['europe', 'eu-union'], 'je', '44', '.... ......'],
+    ['Montserrat', ['america', 'carribean'], 'ms', '1664'],
+    ['Niue', ['asia'], 'nu', '683'],
+    ['Norfolk Island', ['oceania'], 'nf', '672'],
+    ['Northern Mariana Islands', ['oceania'], 'mp', '1670'],
+    ['Saint Barthélemy', ['america', 'carribean'], 'bl', '590', '', 1],
+    ['Saint Helena', ['africa'], 'sh', '290'],
+    ['Saint Martin', ['america', 'carribean'], 'mf', '590', '', 2],
+    ['Saint Pierre and Miquelon', ['america', 'north-america'], 'pm', '508'],
+    ['Sint Maarten', ['america', 'carribean'], 'sx', '1721'],
+    ['Tokelau', ['oceania'], 'tk', '690'],
+    ['Turks and Caicos Islands', ['america', 'carribean'], 'tc', '1649'],
+    ['U.S. Virgin Islands', ['america', 'carribean'], 'vi', '1340'],
+    ['Wallis and Futuna', ['oceania'], 'wf', '681']
+];

package/dist/assets/telTypes.d.ts

@@ -0,0 +1,5 @@
+export declare const telTypes: {
+    id: string;
+    value: string;
+    label: string;
+}[];

package/dist/assets/telTypes.js

@@ -0,0 +1,16 @@
+import { capitalize } from '../utils/index.js';
+export const telTypes = [
+    'PREMIUM_RATE',
+    'TOLL_FREE',
+    'SHARED_COST',
+    'VOIP',
+    'PERSONAL_NUMBER',
+    'PAGER',
+    'UAN',
+    'VOICEMAIL',
+    'FIXED_LINE_OR_MOBILE',
+    'FIXED_LINE',
+    'MOBILE'
+].map((el) => {
+    return { id: el, value: el, label: capitalize(el.split('_').join(' ')) };
+});

package/{components → dist/components}/Input/TelInput.svelte

@@ -1,12 +1,12 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
 import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
-import { telInputAction } from "../../utils/directives/telInputAction";
 import {
   normalizeTelInput,
   getCountryForPartialE164Number,
-  generatePlaceholder
-} from "../../utils/helpers";
-import { watcher } from "../../stores";
+  generatePlaceholder,
+  telInputAction
+} from "../../utils/index.js";
+import { watcher } from "../../stores/index.js";
 const dispatch = createEventDispatcher();
 const defaultOptions = {
   autoPlaceholder: true,
@@ -62,13 +62,11 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     if (detailedValue?.isValid && combinedOptions.spaces && detailedValue?.formatOriginal) {
       if (inputValue === detailedValue?.formatOriginal) {
         inputValue = null;
-        inputValue = "";
       }
       inputValue = detailedValue?.formatOriginal;
     } else if (detailedValue?.isValid && detailedValue?.nationalNumber) {
       if (inputValue === detailedValue?.nationalNumber) {
         inputValue = null;
-        inputValue = "";
       }
       inputValue = detailedValue?.nationalNumber;
     }
@@ -84,7 +82,6 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
       value = null;
       if (inputValue !== null || inputValue !== "") {
         inputValue = null;
-        inputValue = "";
       }
       detailedValue = null;
       dispatch("updateValid", valid);
@@ -99,7 +96,6 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
     dispatch("updateValid", valid);
     dispatch("updateDetailedValue", detailedValue);
     inputValue = null;
-    inputValue = "";
   }
 };
 let countryWatchInitRun = true;
@@ -114,6 +110,12 @@ $:
   $countryChangeWatch = country;
 $:
   getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
+$:
+  if (value === null && inputValue !== null && detailedValue !== null) {
+    inputValue = null;
+    detailedValue = null;
+    dispatch("updateDetailedValue", detailedValue);
+  }
 const initialize = () => {
   if (value && country) {
     handleParsePhoneNumber(value, country);
@@ -149,5 +151,9 @@ onMount(() => {
 	on:keyup
 	on:paste
 	on:click
-	use:telInputAction={{ handler: handleInputAction, spaces: combinedOptions.spaces }}
+	use:telInputAction={{
+		handler: handleInputAction,
+		spaces: combinedOptions.spaces,
+		value
+	}}
 />

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TelInput } from './components/Input/TelInput.svelte';
+export { getCurrentCountry, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number, clickOutsideAction, isSelected } from './utils/index.js';
+export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
+export { normalizedCountries } from './assets/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as TelInput } from './components/Input/TelInput.svelte';
+export { getCurrentCountry, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number, clickOutsideAction, isSelected } from './utils/index.js';
+export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
+export { normalizedCountries } from './assets/index.js';

package/{stores → dist/stores}/index.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="svelte" />
 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;
+    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/{utils → dist/utils}/directives/clickOutsideAction.d.ts

@@ -1,3 +1,3 @@
-export declare const clickOutsideAction: (node: HTMLElement, handler: () => void) => {
+export declare const clickOutsideAction: (node: HTMLElement, handler: () => void, skipPrevented?: boolean) => {
     destroy: () => void;
 };

package/dist/utils/directives/clickOutsideAction.js

@@ -0,0 +1,18 @@
+export const clickOutsideAction = (node, handler, skipPrevented = true) => {
+    const handleClick = async (event) => {
+        if (skipPrevented) {
+            if (!node.contains(event.target) && !event.defaultPrevented)
+                handler();
+        }
+        else {
+            if (!node.contains(event.target))
+                handler();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+};

package/dist/utils/directives/focusAction.d.ts

@@ -0,0 +1,8 @@
+export declare function focusable_children(node: HTMLElement): {
+    next: (selector: string) => void;
+    prev: (selector: string) => void;
+    update: (d: number) => void;
+};
+export declare function trap(node: HTMLElement): {
+    destroy: () => void;
+};

package/dist/utils/directives/focusAction.js

@@ -0,0 +1,71 @@
+export function focusable_children(node) {
+    const nodes = Array.from(node.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
+    const index = document.activeElement ? nodes.indexOf(document.activeElement) : -1;
+    const update = (d) => {
+        let i = index + d;
+        i += nodes.length;
+        i %= nodes.length;
+        // @ts-expect-error Element is not HTMLElement
+        nodes[i].focus();
+    };
+    return {
+        next: (selector) => {
+            const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+            for (let i = 0; i < reordered.length; i += 1) {
+                if (!selector || reordered[i].matches(selector)) {
+                    // @ts-expect-error Element is not HTMLElement
+                    reordered[i].focus();
+                    return;
+                }
+            }
+        },
+        prev: (selector) => {
+            const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+            for (let i = reordered.length - 2; i >= 0; i -= 1) {
+                if (!selector || reordered[i].matches(selector)) {
+                    // @ts-expect-error Element is not HTMLElement
+                    reordered[i].focus();
+                    return;
+                }
+            }
+        },
+        update
+    };
+}
+export function trap(node) {
+    const handle_keydown = (e) => {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const group = focusable_children(node);
+            if (e.shiftKey) {
+                // @ts-expect-error Element is not HTMLElement
+                group.prev();
+            }
+            else {
+                // @ts-expect-error Element is not HTMLElement
+                group.next();
+            }
+        }
+    };
+    node.addEventListener('keydown', handle_keydown);
+    return {
+        destroy: () => {
+            node.removeEventListener('keydown', handle_keydown);
+        }
+    };
+}
+// Put onto the element, where you want to use the keyboard navigation.
+// on:keydown={(e) => {
+//     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+//         e.preventDefault();
+//         const group = focusable_children(e.currentTarget);
+//         // when using arrow keys (as opposed to tab), don't focus buttons
+//         const selector = 'a, input';
+//         if (e.key === 'ArrowDown') {
+//             group.next(selector);
+//         } else {
+//             group.prev(selector);
+//         }
+//     }
+// }}
+// use:trap

package/dist/utils/directives/telInputAction.d.ts

@@ -0,0 +1,13 @@
+import type { E164Number } from 'libphonenumber-js';
+export declare const telInputAction: (node: HTMLInputElement, { handler, spaces }: {
+    handler: (val: string) => void;
+    spaces: boolean;
+    value: E164Number | null;
+}) => {
+    update(params: {
+        handler: (val: string) => void;
+        spaces: boolean;
+        value: E164Number | null;
+    }): void;
+    destroy(): void;
+};

package/{utils → dist/utils}/directives/telInputAction.js

@@ -1,9 +1,9 @@
-import { inspectAllowedChars, inputParser } from '../..';
+import { inspectAllowedChars, inputParser } from '../../index.js';
 export const telInputAction = (node, { handler, spaces }) => {
     const onInput = (event) => {
         if (node && node.contains(event.target)) {
-            const value = event.target.value;
-            const formattedInput = inputParser(value, {
+            const currentValue = event.target.value;
+            const formattedInput = inputParser(currentValue, {
                 parseCharacter: inspectAllowedChars,
                 allowSpaces: spaces
             });
@@ -13,6 +13,11 @@ export const telInputAction = (node, { handler, spaces }) => {
     };
     node.addEventListener('input', onInput, true);
     return {
+        update(params) {
+            if (params.value === null || params.value === '') {
+                node.value = '';
+            }
+        },
         destroy() {
             node.removeEventListener('input', onInput, true);
         }

package/{utils → dist/utils}/helpers.d.ts

@@ -1,4 +1,4 @@
-import type { PhoneNumber, MetadataJson, Countries, E164Number, CountryCode } from '../types';
+import type { PhoneNumber, MetadataJson, Countries, E164Number, CountryCode } from '../types/index.js';
 export declare const capitalize: (str: string) => string;
 export declare const getCurrentCountry: () => Promise<string | undefined>;
 export declare const isNumber: (value: number) => boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './helpers.js';
+export * from './typeCheck.js';
+export * from './directives/clickOutsideAction.js';
+export * from './directives/telInputAction.js';

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export * from './helpers.js';
+export * from './typeCheck.js';
+export * from './directives/clickOutsideAction.js';
+export * from './directives/telInputAction.js';

package/dist/utils/typeCheck.d.ts

@@ -0,0 +1 @@
+export declare const isStringArray: (items: unknown) => items is string[];

package/dist/utils/typeCheck.js

@@ -0,0 +1,3 @@
+export const isStringArray = (items) => {
+    return Array.isArray(items) && items.length > 0 && typeof items[0] === 'string';
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -9,63 +9,113 @@
   "homepage": "https://github.com/gyurielf/svelte-tel-input#readme",
   "keywords": [
     "svelte",
+    "svelte kit",
+    "sveltekit",
     "tel input",
     "phone",
     "phone input",
+    "svelte phone input",
+    "svelte tel input",
     "intl",
-    "intl tel input"
+    "intl tel input",
+    "svelte intl tel input"
   ],
   "engines": {
     "npm": ">= 8",
-    "yarn": ">=2",
-    "node": ">= 16",
-    "pnpm": ">= 7"
+    "yarn": ">= 2",
+    "node": ">= 18",
+    "pnpm": ">= 8"
+  },
+  "peerDependencies": {
+    "libphonenumber-js": "^1.10.30",
+    "svelte": "^3.58.0 || ^4.0.0"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.36",
-    "svelte": "^3.58.0"
+    "libphonenumber-js": "^1.10.37",
+    "svelte": "^4.0.5"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.1",
-    "@changesets/get-github-info": "^0.5.2",
-    "@changesets/types": "^5.2.1",
-    "@macfja/svelte-persistent-store": "^2.3.0",
-    "@playwright/test": "^1.35.1",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^1.0.2",
-    "@testing-library/svelte": "^3.2.2",
+    "@sveltejs/adapter-auto": "2.1.0",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "^2.2.0",
+    "@testing-library/svelte": "^4.0.3",
     "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@types/micromatch": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
-    "dotenv": "^16.3.0",
-    "edit-package-json": "^0.8.14",
-    "eslint": "^8.43.0",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "husky": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-svelte": "^2.32.2",
     "jsdom": "^22.1.0",
     "micromatch": "^4.0.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.26",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
-    "schema-dts": "^1.1.2",
-    "svelte-check": "^3.4.3",
-    "svelte2tsx": "^0.6.15",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.3",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "publint": "^0.1.16",
+    "svelte-check": "^3.4.6",
+    "svelte2tsx": "^0.6.19",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0"
   },
   "type": "module",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/types/index.d.ts"
+      ],
+      "utils": [
+        "./dist/utils/index.d.ts"
+      ],
+      "assets": [
+        "./dist/assets/index.d.ts"
+      ]
+    }
+  },
   "exports": {
-    "./package.json": "./package.json",
-    ".": "./index.js",
-    "./styles/flags.css": "./styles/flags.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.d.ts"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./assets": {
+      "types": "./dist/assets/index.d.ts",
+      "default": "./dist/assets/index.js"
+    },
+    "./styles/flags.css": "./dist/styles/flags.css"
   },
-  "svelte": "./index.js"
+  "scripts": {
+    "check:publint": "publint . --strict",
+    "eslint": "eslint --ext .js,.ts,.svelte .",
+    "eslint:fix": "eslint --fix",
+    "lint": "npm run prettier:check && npm run eslint && npm run ts && npm run svelte-check",
+    "lint:fix": "npm run eslint:fix && npm run prettier:fix",
+    "package:watch": "svelte-kit sync && svelte-package --watch",
+    "package": "svelte-kit sync && svelte-package && npm run check:publint",
+    "prettier:check": "prettier --check --plugin-search-dir=. .",
+    "prettier:fix": "prettier --write --plugin-search-dir=. .",
+    "svelte-check": "svelte-kit sync && svelte-check --ignore 'dist,build,coverage,.svelte-kit,package' --fail-on-warnings",
+    "sync": "svelte-kit sync",
+    "test": "vitest",
+    "ts": "tsc --noEmit"
+  }
 }

package/CHANGELOG.md

@@ -1,376 +0,0 @@
-# svelte-tel-input
-
-## 3.0.1
-
-### Patch Changes
-
--   chore: update readme with advanced example REPL ([#162](https://github.com/gyurielf/svelte-tel-input/pull/162))
-
--   fix: auto country update after manual country change ([#162](https://github.com/gyurielf/svelte-tel-input/pull/162))
-
-## 3.0.0
-
-### Major Changes
-
--   breaking: rename `parsedTelInput` property: ([#156](https://github.com/gyurielf/svelte-tel-input/pull/156))
-    `parsedTelInput` is `detailedValue` from now.
-
-    ```diff
-    -<TelInput bind:parsedTelInput ... />;
-    +<TelInput bind:detailedValue ... />;
-    ```
-
-    breaking: rename dispatched events:
-    `parseInput` is splitted to two (`updateValue` and `updateDetailedValue` ) event.
-    `valid` is `updateValid` from now.
-
-    ```diff
-    -<TelInput on:parseInput={...} on:valid={...} ... />;
-    +<TelInput on:updateValue={...} on:updateDetailedValue={...} on:updateValid={...} on:updateCountry={...} ... />;
-    ```
-
-    breaking: rename `NormalizedTelNumber` type to `DetailedValue`:
-
-    ```diff
-    -import type { NormalizedTelNumber } from 'svelte-tel-input/types';
-    +import type { DetailedValue } from 'svelte-tel-input/types';
-    ```
-
-    feat: new event added: `updateCountry`
-
-    ```html
-    <TelInput on:updateCountry="{...}" ... />;
-    ```
-
-    feat: now the component is fully supports the event driven behavior. So you don't have to bind properties.
-
-    ```diff
-    -<TelInput bind:value ... />;
-    +<TelInput value={yourValue} ... />;
-    ```
-
-## 2.1.1
-
-### Patch Changes
-
--   fix: US flag is now more representative ([#154](https://github.com/gyurielf/svelte-tel-input/pull/154))
-
-## 2.1.0
-
-### Minor Changes
-
--   feat: support event driven behavior ([#150](https://github.com/gyurielf/svelte-tel-input/pull/150))
-
-## 2.0.1
-
-### Patch Changes
-
--   fix: component export ([#147](https://github.com/gyurielf/svelte-tel-input/pull/147))
-
-## 2.0.0
-
-### Major Changes
-
--   breaking: switch from default to named export to export TelInput component. Use named import in the future. From now Svelte >= 3.58.0 is required. ([#143](https://github.com/gyurielf/svelte-tel-input/pull/143))
-
-### Minor Changes
-
--   feat: space config option added, it will enable or disable spaces in the input field. ([#143](https://github.com/gyurielf/svelte-tel-input/pull/143))
-
--   feat: autoPlaceholder feature added, it generates placeholder for each country. ([#143](https://github.com/gyurielf/svelte-tel-input/pull/143))
-
-### Patch Changes
-
--   chore: update deps, re-generate package-lock.json ([#143](https://github.com/gyurielf/svelte-tel-input/pull/143))
-
--   feat: added options panel to example page to be able to try out config opts. ([#143](https://github.com/gyurielf/svelte-tel-input/pull/143))
-
-## 1.3.2
-
-### Patch Changes
-
--   chore: export ParseError class ([#141](https://github.com/gyurielf/svelte-tel-input/pull/141))
-
-## 1.3.1
-
-### Patch Changes
-
--   chore: extend method exports ([#139](https://github.com/gyurielf/svelte-tel-input/pull/139))
-
-## 1.3.0
-
-### Minor Changes
-
--   fix: validation on select all and delete ([#137](https://github.com/gyurielf/svelte-tel-input/pull/137))
-
-## 1.2.0
-
-### Minor Changes
-
--   fix: improved validation ([#132](https://github.com/gyurielf/svelte-tel-input/pull/132))
-
-## 1.1.3
-
-### Patch Changes
-
--   fix: make parsedTelInput prop optional ([#129](https://github.com/gyurielf/svelte-tel-input/pull/129))
-
-## 1.1.2
-
-### Patch Changes
-
--   feat: seo improvement and deps update ([#127](https://github.com/gyurielf/svelte-tel-input/pull/127))
-
--   fix: prevent commit to the main branch ([#127](https://github.com/gyurielf/svelte-tel-input/pull/127))
-
-## 1.1.1
-
-### Patch Changes
-
--   fix: advanced input handleSelect method fix ([#125](https://github.com/gyurielf/svelte-tel-input/pull/125))
-
--   fix: modify style export in package.json and in post-build.js ([#125](https://github.com/gyurielf/svelte-tel-input/pull/125))
-
--   fix: set flags assets import relative in flags.css ([#125](https://github.com/gyurielf/svelte-tel-input/pull/125))
-
-## 1.1.0
-
-### Minor Changes
-
--   feat: vitests and e2e (playwright) added ([#123](https://github.com/gyurielf/svelte-tel-input/pull/123))
-
--   chore: remove unnecessary dependencies ([#123](https://github.com/gyurielf/svelte-tel-input/pull/123))
-
-## 1.0.2
-
-### Patch Changes
-
--   chore: extend REPL example ([#119](https://github.com/gyurielf/svelte-tel-input/pull/119))
-
--   chore: polish readme ([#119](https://github.com/gyurielf/svelte-tel-input/pull/119))
-
--   chore: update dependencies ([#119](https://github.com/gyurielf/svelte-tel-input/pull/119))
-
-## 1.0.1
-
-### Patch Changes
-
--   fix: remove types field right before packaging ([#116](https://github.com/gyurielf/svelte-tel-input/pull/116))
-
-## 1.0.0
-
-### Major Changes
-
--   feat: prevent typing non-tel input characters into the input field. ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
--   fix: now you can use value prop as a single entry ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
--   feat: support monorepos ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
--   feat: sanitize pasted E164 number ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
--   feat: switch country automatically if the pasted/entered phone number contains a valid country calling code ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
--   fix: clear input on manual country change ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
-### Minor Changes
-
--   chore: tweak types ([#108](https://github.com/gyurielf/svelte-tel-input/pull/108))
-
-## 0.14.2
-
-### Patch Changes
-
--   update something ([#105](https://github.com/gyurielf/svelte-tel-input/pull/105))
-
-## 0.14.1
-
-### Patch Changes
-
--   chore: export tests ([#100](https://github.com/gyurielf/svelte-tel-input/pull/100))
-
-## 0.14.0
-
-### Minor Changes
-
--   Prevent circular import ([#98](https://github.com/gyurielf/svelte-tel-input/pull/98))
-
-## 0.13.1
-
-### Patch Changes
-
--   chore: simplify part one ([#94](https://github.com/gyurielf/svelte-tel-input/pull/94))
-
-## 0.13.0
-
-### Minor Changes
-
--   Simplify structure ([#91](https://github.com/gyurielf/svelte-tel-input/pull/91))
-
-## 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))
-
-## 0.10.0
-
-### Minor Changes
-
--   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))
-
-## 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
-
--   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))
-
-## 0.6.4
-
-### Patch Changes
-
--   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))
-
-## 0.6.2
-
-### Patch Changes
-
--   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))
-
-## 0.6.0
-
-### Minor Changes
-
--   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))
-
-## 0.5.0
-
-### Minor Changes
-
--   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: 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))
-
-## 0.4.1
-
-### Patch Changes
-
--   fix: readme fix ([#39](https://github.com/gyurielf/svelte-tel-input/pull/39))
-
-## 0.4.0
-
-### Minor Changes
-
--   fix: rework ci
-
-### Patch Changes
-
--   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: 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))
-
--   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))
-
-## 0.3.2
-
-### Patch Changes
-
--   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))
-
-## 0.3.1
-
-### Patch Changes
-
--   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))
-
-## 0.2.0
-
-### Minor Changes
-
--   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))
-
-## 0.1.0
-
-### Minor Changes
-
--   test_1
-
-### Patch Changes
-
--   szo
-
-*   test 2
-
--   test3

package/assets/index.d.ts

@@ -1 +0,0 @@
-export { normalizedCountries } from './allCountry';

package/assets/index.js

@@ -1 +0,0 @@
-export { normalizedCountries } from './allCountry';

package/index.d.ts

@@ -1,5 +0,0 @@
-export { default as TelInput } from './components/Input/TelInput.svelte';
-export { getCurrentCountry, isSelected, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number } from './utils/helpers';
-export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
-export { clickOutsideAction } from './utils/directives/clickOutsideAction';
-export { normalizedCountries } from './assets';

package/index.js

@@ -1,5 +0,0 @@
-export { default as TelInput } from './components/Input/TelInput.svelte';
-export { getCurrentCountry, isSelected, inputParser, inspectAllowedChars, normalizeTelInput, getCountryForPartialE164Number } from './utils/helpers';
-export { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/max';
-export { clickOutsideAction } from './utils/directives/clickOutsideAction';
-export { normalizedCountries } from './assets';

package/utils/directives/clickOutsideAction.js

@@ -1,9 +0,0 @@
-export const clickOutsideAction = (node, handler) => {
-    const onClick = (event) => node && !node.contains(event.target) && !event.defaultPrevented && handler();
-    document.addEventListener('click', onClick, true);
-    return {
-        destroy() {
-            document.removeEventListener('click', onClick, true);
-        }
-    };
-};

package/utils/directives/telInputAction.d.ts

@@ -1,6 +0,0 @@
-export declare const telInputAction: (node: HTMLInputElement, { handler, spaces }: {
-    handler: (val: string) => void;
-    spaces: boolean;
-}) => {
-    destroy(): void;
-};