svelte-tel-input 2.1.1 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # 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

package/README.md

@@ -28,6 +28,10 @@ npm install --save svelte-tel-input
 
 ## 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)
@@ -35,10 +39,10 @@ npm install --save svelte-tel-input
 ```html
 <script lang="ts">
 	import { TelInput, normalizedCountries } from 'svelte-tel-input';
-	import type { NormalizedTelNumber, CountryCode, E164Number } from 'svelte-tel-input/types';
+	import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
 
 	// Any Country Code Alpha-2 (ISO 3166)
-	let country: CountryCode | null = 'HU';
+	let selectedCountry: CountryCode | null = 'HU';
 
 	// You must use E164 number format. It's guarantee the parsing and storing consistency.
 	let value: E164Number | null = '+36301234567';
@@ -47,7 +51,7 @@ npm install --save svelte-tel-input
     let valid = true;
 
 	// Optional - Extended details about the parsed phone number
-	let parsedTelInput: NormalizedTelNumber | null = null;
+	let detailedValue: DetailedValue | null = null;
 </script>
 
 <div class="wrapper">
@@ -68,7 +72,7 @@ npm install --save svelte-tel-input
 			</option>
 		{/each}
 	</select>
-    <TelInput bind:country bind:value bind:valid bind:parsedTelInput class="basic-tel-input {!isValid && 'invalid'}" />
+    <TelInput bind:country={selectedCountry} bind:value bind:valid bind:detailedValue class="basic-tel-input {!isValid && 'invalid'}" />
 </div>
 
 <style>
@@ -102,16 +106,65 @@ npm install --save svelte-tel-input
 
 The default export of the library is the main TelInput component. It has the following props:
 
-| Props           | Type                        | Default Value | Usage                                                                                                                                                                                                                                                                                                                |
-| --------------- | --------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 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.                                                                                                                                                                                                                                                                   |
-| 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.                                                                                                                                                |
-| parsedTelInput  | `NormalizedTelInput \|null` | `null`        | All of the formatted results of the tel input.                                                                                                                                                                                                                                                                       |
-| class           | `string`                    | ``            | You can pass down any classname to the component                                                                                                                                                                                                                                                                     |
-| autoPlaceholder | `boolean`                   | `true`        | Generates country specific placeholder for the selected country.something                                                                                                                                                                                                                                            |
-| allowSpaces     | `boolean`                   | `true`        | Allow or disallow spaces in the input field                                                                                                                                                                                                                                                                          |
+| 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>
 

package/assets/index.d.ts

@@ -1,3 +1 @@
 export { normalizedCountries } from './allCountry';
-export { telTypes } from './telTypes';
-export { rawRegions } from './regions';

package/assets/index.js

@@ -1,3 +1 @@
 export { normalizedCountries } from './allCountry';
-export { telTypes } from './telTypes';
-export { rawRegions } from './regions';

package/components/Input/TelInput.svelte

@@ -7,14 +7,15 @@ import {
   generatePlaceholder
 } from "../../utils/helpers";
 import { watcher } from "../../stores";
+const dispatch = createEventDispatcher();
 const defaultOptions = {
   autoPlaceholder: true,
-  spaces: true
+  spaces: true,
+  invalidateOnCountryChange: false
 };
-const dispatch = createEventDispatcher();
 export let country;
 export let value;
-export let parsedTelInput = null;
+export let detailedValue = null;
 export let valid = true;
 export let disabled = false;
 export let placeholder = null;
@@ -22,11 +23,10 @@ export let options = defaultOptions;
 export let required = null;
 let inputValue = value;
 let prevCountry = country;
-$:
-  combinedOptions = {
-    ...defaultOptions,
-    ...options
-  };
+const combinedOptions = {
+  ...defaultOptions,
+  ...options
+};
 const handleInputAction = (value2) => {
   if (disabled)
     return;
@@ -35,6 +35,7 @@ const handleInputAction = (value2) => {
 const updateCountry = (countryCode) => {
   country = countryCode;
   prevCountry = countryCode;
+  dispatch("updateCountry", country);
   return country;
 };
 const handleParsePhoneNumber = (input, currCountry = null) => {
@@ -44,12 +45,12 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
       updateCountry(numberHasCountry);
     }
     try {
-      parsedTelInput = normalizeTelInput(
-        parsePhoneNumberWithError(input, currCountry ?? numberHasCountry)
+      detailedValue = normalizeTelInput(
+        parsePhoneNumberWithError(input, numberHasCountry ?? currCountry ?? void 0)
       );
     } catch (err) {
       if (err instanceof ParseError) {
-        parsedTelInput = {
+        detailedValue = {
           isValid: false,
           error: err.message
         };
@@ -58,86 +59,85 @@ const handleParsePhoneNumber = (input, currCountry = null) => {
         throw err;
       }
     }
-    if (parsedTelInput?.isValid && combinedOptions.spaces && parsedTelInput?.formatOriginal) {
-      if (inputValue === parsedTelInput?.formatOriginal) {
+    if (detailedValue?.isValid && combinedOptions.spaces && detailedValue?.formatOriginal) {
+      if (inputValue === detailedValue?.formatOriginal) {
         inputValue = null;
+        inputValue = "";
       }
-      inputValue = parsedTelInput?.formatOriginal;
-    } else if (parsedTelInput?.isValid && parsedTelInput?.nationalNumber) {
-      if (inputValue === parsedTelInput?.nationalNumber) {
+      inputValue = detailedValue?.formatOriginal;
+    } else if (detailedValue?.isValid && detailedValue?.nationalNumber) {
+      if (inputValue === detailedValue?.nationalNumber) {
         inputValue = null;
+        inputValue = "";
       }
-      inputValue = parsedTelInput?.nationalNumber;
+      inputValue = detailedValue?.nationalNumber;
     }
-    value = parsedTelInput?.e164 ?? null;
-    valid = parsedTelInput?.isValid ?? false;
-    dispatch("valid", valid);
-    dispatch("parseInput", parsedTelInput);
-  } else {
+    value = detailedValue?.e164 ?? input ?? null;
+    valid = detailedValue?.isValid ?? false;
+    dispatch("updateValid", valid);
+    dispatch("updateValue", value);
+    dispatch("updateDetailedValue", detailedValue);
+  } else if (input === null && currCountry !== null) {
     if (currCountry !== prevCountry) {
+      prevCountry = currCountry;
+      valid = !options.invalidateOnCountryChange;
       value = null;
-      inputValue = "";
-      valid = false;
-      parsedTelInput = null;
+      if (inputValue !== null || inputValue !== "") {
+        inputValue = null;
+        inputValue = "";
+      }
+      detailedValue = null;
+      dispatch("updateValid", valid);
+      dispatch("updateValue", value);
+      dispatch("updateDetailedValue", detailedValue);
     }
+  } else {
+    valid = true;
+    value = null;
+    detailedValue = null;
     prevCountry = currCountry;
-    dispatch("valid", valid);
-    dispatch("parseInput", parsedTelInput);
+    dispatch("updateValid", valid);
+    dispatch("updateDetailedValue", detailedValue);
+    inputValue = null;
+    inputValue = "";
+  }
+};
+let countryWatchInitRun = true;
+const countryChangeWatchFunction = () => {
+  if (!countryWatchInitRun) {
+    handleParsePhoneNumber(null, country);
   }
+  countryWatchInitRun = false;
 };
+const countryChangeWatch = watcher(null, countryChangeWatchFunction);
+$:
+  $countryChangeWatch = country;
+$:
+  getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
 const initialize = () => {
   if (value && country) {
     handleParsePhoneNumber(value, country);
   } else if (value) {
     const numberHasCountry = getCountryForPartialE164Number(value);
     if (numberHasCountry) {
-      updateCountry(numberHasCountry);
-      handleParsePhoneNumber(value, country);
+      handleParsePhoneNumber(value, numberHasCountry);
     } else {
-      handleParsePhoneNumber(value);
+      handleParsePhoneNumber(value, null);
     }
   }
 };
 onMount(() => {
   initialize();
 });
-let countryWatchInitRun = true;
-const countryChangeWatchFunction = () => {
-  if (!countryWatchInitRun) {
-    handleParsePhoneNumber(null, country);
-  }
-  countryWatchInitRun = false;
-};
-let resetValueWatchInitRun = true;
-const resetValueWatchFunction = () => {
-  if (!resetValueWatchInitRun) {
-    inputValue = "";
-    updateCountry(null);
-    valid = true;
-    parsedTelInput = null;
-    dispatch("parseInput", parsedTelInput);
-  }
-  resetValueWatchInitRun = false;
-};
-const countryChangeWatch = watcher(null, countryChangeWatchFunction);
-$:
-  $countryChangeWatch = country;
-const resetValueWatch = watcher(null, resetValueWatchFunction);
-$:
-  if (value === null && inputValue !== "") {
-    $resetValueWatch = value;
-  }
-$:
-  getPlaceholder = combinedOptions.autoPlaceholder ? country ? generatePlaceholder(country) : null : placeholder;
 </script>
 
 <input
-	{required}
+	type="tel"
 	placeholder={getPlaceholder}
+	{required}
 	{disabled}
-	type="tel"
-	value={inputValue}
 	{...$$restProps}
+	value={inputValue}
 	class={$$props.class}
 	on:beforeinput
 	on:blur
@@ -148,5 +148,6 @@ $:
 	on:keypress
 	on:keyup
 	on:paste
+	on:click
 	use:telInputAction={{ handler: handleInputAction, spaces: combinedOptions.spaces }}
 />

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

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { NormalizedTelNumber, CountryCode, E164Number, TelInputOptions } from '../../types';
+import type { DetailedValue, CountryCode, E164Number, TelInputOptions } from '../../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         country: CountryCode | null;
         value: E164Number | null;
-        parsedTelInput?: Partial<NormalizedTelNumber> | null | undefined;
+        detailedValue?: Partial<DetailedValue> | null | undefined;
         valid?: boolean | undefined;
         disabled?: boolean | undefined;
         placeholder?: string | null | undefined;
@@ -22,11 +22,12 @@ declare const __propDef: {
         keypress: KeyboardEvent;
         keyup: KeyboardEvent;
         paste: ClipboardEvent;
-        country: CustomEvent<CountryCode | null>;
+        click: MouseEvent;
+        updateCountry: CustomEvent<CountryCode | null>;
         parseError: CustomEvent<string>;
-        parseInput: CustomEvent<NormalizedTelNumber | Partial<NormalizedTelNumber> | null>;
-        valid: CustomEvent<boolean>;
-        value: CustomEvent<E164Number | null>;
+        updateDetailedValue: CustomEvent<Partial<DetailedValue> | null>;
+        updateValid: CustomEvent<boolean>;
+        updateValue: CustomEvent<E164Number | null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "2.1.1",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -22,7 +22,7 @@
     "pnpm": ">= 7"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.30",
+    "libphonenumber-js": "^1.10.36",
     "svelte": "^3.58.0"
   },
   "devDependencies": {
@@ -30,35 +30,35 @@
     "@changesets/get-github-info": "^0.5.2",
     "@changesets/types": "^5.2.1",
     "@macfja/svelte-persistent-store": "^2.3.0",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.35.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.16.3",
+    "@sveltejs/kit": "^1.20.4",
     "@sveltejs/package": "^1.0.2",
     "@testing-library/svelte": "^3.2.2",
     "@testing-library/user-event": "^14.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
-    "dotenv": "^16.0.3",
-    "edit-package-json": "^0.8.12",
-    "eslint": "^8.40.0",
+    "dotenv": "^16.3.0",
+    "edit-package-json": "^0.8.14",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "husky": "^8.0.3",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
     "micromatch": "^4.0.5",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "schema-dts": "^1.1.2",
-    "svelte-check": "^3.3.1",
-    "svelte2tsx": "^0.6.13",
+    "svelte-check": "^3.4.3",
+    "svelte2tsx": "^0.6.15",
     "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.0",
+    "tslib": "^2.5.3",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "^0.31.0"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "type": "module",
   "license": "MIT",

package/types/index.d.ts

@@ -34,7 +34,7 @@ export interface PhoneNumberError {
 	error: PhoneNumberParseError;
 }
 
-export interface NormalizedTelNumber {
+export interface DetailedValue {
 	countryCode?: CountryCode | null;
 	isValid: boolean;
 	phoneNumber: string | null;
@@ -52,16 +52,6 @@ export interface NormalizedTelNumber {
 export type PhoneNumberParseError = 'NOT_A_NUMBER' | 'INVALID_COUNTRY' | 'TOO_SHORT' | 'TOO_LONG';
 export type PhoneType = 'FIXED_LINE' | 'MOBILE';
 
-export type {
-	CountryCallingCode,
-	CountryCode,
-	E164Number,
-	NationalNumber,
-	PhoneNumber,
-	Countries,
-	MetadataJson
-};
-
 export interface TelInputValidity {
 	value: boolean | null;
 	errorMessage?: string;
@@ -80,6 +70,11 @@ export interface TelInputOptions {
 	 * @default true
 	 */
 	spaces?: boolean;
+	/**
+	 * Set validation to false if you change the country property.
+	 * @default false
+	 */
+	invalidateOnCountryChange?: boolean;
 	/**
 	 *  "formatInternational": "+36 20 123 4567",
 	 *  "formatOriginal": "20 123 4567",
@@ -88,3 +83,13 @@ export interface TelInputOptions {
 	 */
 	// format: 'original' | 'national' | 'international';
 }
+
+export type {
+	CountryCallingCode,
+	CountryCode,
+	E164Number,
+	NationalNumber,
+	PhoneNumber,
+	Countries,
+	MetadataJson
+};

package/assets/regions.d.ts

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

package/assets/regions.js

@@ -1,43 +0,0 @@
-// 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/assets/telTypes.d.ts

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

package/assets/telTypes.js

@@ -1,16 +0,0 @@
-import { capitalize } from '../utils/helpers';
-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/Input/AdvancedTelInput.svelte

@@ -1,156 +0,0 @@
-<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 = "";
-let selected;
-export let clickOutside = true;
-export let closeOnClick = true;
-export let disabled = false;
-export let parsedTelInput = null;
-export let value;
-$:
-  selectedCountryDialCode = normalizedCountries.find((el) => el.iso2 === selected)?.dialCode || null;
-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 (selected === void 0 || selected === null || 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.toLowerCase()} flex-shrink-0 mr-3" />
-				<span class=" text-gray-500">+{selectedCountryDialCode}</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.iso2, selected)}
-					<li role="option" aria-selected={isActive}>
-						<button
-							value={country.iso2}
-							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.iso2, 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"
-		bind:country={selected}
-		bind:parsedTelInput
-		bind:value
-		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

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

package/utils/directives/seoJsonLdAction.d.ts

@@ -1,2 +0,0 @@
-import type { Thing, WithContext } from 'schema-dts';
-export declare const jsonLdScript: (node: HTMLScriptElement, jsonLd: (Thing | WithContext<Thing>)[]) => void;

package/utils/directives/seoJsonLdAction.js

@@ -1,6 +0,0 @@
-export const jsonLdScript = (node, jsonLd) => {
-    if (node) {
-        node.type = 'application/ld+json';
-        node.text = JSON.stringify(jsonLd, null, 2);
-    }
-};