svelte-tel-input 0.14.2 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # svelte-tel-input
 
+## 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

package/README.md

@@ -6,7 +6,14 @@
 
 > Lightweight svelte tel/phone input standardizer.
 
-The package is in `BETA` stage, expect bugs.
+The package is recently bumped to `1.0`. If you experience any problems, please open an issue, to be able to me to fix it.
+
+## 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.
 
 ## Installation
 
@@ -16,6 +23,14 @@ Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-t
 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.
+-   Optionally it can set the user's current country automatically, via IP lookup.
+-   Prevent non-digits typing into the input, except the `+` sign (and `space` optionally).
+-   Handle copy-pasted phone numbers, it's sanitize non-digit characters except the `+` sign (and `space` optionally).
+
 ## Usage
 
 ### Basic
@@ -25,30 +40,42 @@ npm install --save svelte-tel-input
 ```html
 <script lang="ts">
 	import TelInput from 'svelte-tel-input';
-	import type { NormalizedTelNumber, CountryCode } from 'svelte-tel-input/types';
+	import type { NormalizedTelNumber, CountryCode, E164Number } from 'svelte-tel-input/types';
 
 	// Any Country Code Alpha-2 (ISO 3166)
-	let country: CountryCode = 'US';
+	let country: CountryCode | null = 'HU';
 
+	// You must use E164 number format. It's guarantee the parsing and storing consistency.
+	let value: E164Number | null = '+36301234567';
+
+	// Optional - Extended information about the parsed phone number
 	let parsedTelInput: NormalizedTelNumber | null = null;
 </script>
 
-<TelInput {country} bind:parsedTelInput class="any class passed down" />
+<TelInput bind:country bind:parsedTelInput bind:value class="any class passed down" />
 ```
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## Features
+## API
 
--   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.
+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                                                                                                                                                                                                                                                                     |
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## 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>
@@ -70,8 +97,6 @@ npm install --save svelte-tel-input
 -   [x] Add basics docs and examples
 -   [ ] Add advanced examples
 -   [ ] Improve A11Y
--   [ ] Default country sould be optional. ( ip | browserLang |off )
--   [ ] Simlify code and types
 
 See the [open issues](https://github.com/gyurielf/svelte-tel-input/issues) for a list of proposed features (and known issues).
 

package/assets/allCountry.js

@@ -270,6 +270,7 @@ const allCountries = [
     ['Tokelau', 'tk', '690'],
     ['Tonga', 'to', '676'],
     ['Trinidad and Tobago', 'tt', '1', 22, ['868']],
+    ['Tristan da Cunha', 'ta', '290'],
     ['Tunisia (‫تونس‬‎)', 'tn', '216'],
     ['Turkey (Türkiye)', 'tr', '90'],
     ['Turkmenistan', 'tm', '993'],

package/components/Input/AdvancedTelInput.svelte

@@ -4,31 +4,14 @@ 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
-};
+let selected;
 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'
-};
+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) => {
@@ -59,18 +42,7 @@ 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') ||
+    if (((selected === undefined || selected === null) && typeof val === 'object') ||
         (typeof selected === typeof val && selected !== val)) {
         selected = val;
         onChange(val);
@@ -102,8 +74,8 @@ const onChange = (selectedCountry) => {
 	>
 		{#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>
+				<span class="flag flag-{selected.toLowerCase()} flex-shrink-0 mr-3" />
+				<span class=" text-gray-500">+{selectedCountryDialCode}</span>
 			</div>
 		{:else}
 			Please select
@@ -147,7 +119,7 @@ const onChange = (selectedCountry) => {
 					/>
 				{/if}
 				{#each filteredItems as country (country.id)}
-					{@const isActive = isSelected(country, selected)}
+					{@const isActive = isSelected(country.iso2, selected)}
 					<li role="option" aria-selected={isActive}>
 						<button
 							type="button"
@@ -157,7 +129,7 @@ const onChange = (selectedCountry) => {
 								? 'bg-gray-600 dark:text-white'
 								: 'dark:hover:text-white dark:text-gray-400'}"
 							on:click={(e) => {
-								handleSelect(country, e);
+								handleSelect(country.iso2, e);
 							}}
 						>
 							<div class="inline-flex items-center text-left">
@@ -176,8 +148,9 @@ const onChange = (selectedCountry) => {
 
 	<TelInput
 		id="tel-input"
-		country={selected?.iso2}
+		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`

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

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { NormalizedTelNumber, Country } from '../../types';
+import type { NormalizedTelNumber, E164Number } 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;
+        value: E164Number | null;
     };
     events: {
         change: CustomEvent<any>;
@@ -16,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type AdvancedTelInputProps = typeof __propDef.props;
-export declare type AdvancedTelInputEvents = typeof __propDef.events;
-export declare type AdvancedTelInputSlots = typeof __propDef.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/components/Input/TelInput.svelte

@@ -1,42 +1,96 @@
-<script>import { watcher } from '../../stores';
-import { normalizeTelInput } from '../../utils/helpers';
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import metadata from 'libphonenumber-js/metadata.min.json';
 import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
-import { onMount } from 'svelte';
-export let country = null;
-export let rawTelInput = null;
-export let parsedTelInput = null;
+import { telInputAction } from '../../utils/directives/telInputAction';
+import { normalizeTelInput, getCountryForPartialE164Number } from '../../utils/helpers';
+import { watcher } from '../../stores';
+const dispatch = createEventDispatcher();
+export let country;
+export let value;
+export let parsedTelInput;
+export let valid = true;
 export let disabled = false;
-onMount(() => {
-    if (parsedTelInput !== null) {
-        rawTelInput = parsedTelInput.nationalNumber;
-        handleParsePhoneNumber(country, parsedTelInput.phoneNumber);
+let inputValue = value;
+let prevCountry = country;
+const handleInputAction = (value) => {
+    handleParsePhoneNumber(value, country);
+};
+const updateCountry = (countryCode) => {
+    country = countryCode;
+    prevCountry = countryCode;
+    return country;
+};
+const handleParsePhoneNumber = (input, currCountry = null) => {
+    if (input) {
+        const numberHasCountry = getCountryForPartialE164Number(input, { metadata });
+        if (numberHasCountry && numberHasCountry !== prevCountry) {
+            updateCountry(numberHasCountry);
+        }
+        try {
+            parsedTelInput = normalizeTelInput(parsePhoneNumberWithError(input, currCountry ?? numberHasCountry));
+        }
+        catch (err) {
+            if (err instanceof ParseError) {
+                // Not a phone number, non-existent country, etc.
+                parsedTelInput = {
+                    isValid: false,
+                    error: err.message
+                };
+                dispatch('parseError', err.message);
+            }
+            else {
+                throw err;
+            }
+        }
+        // It's keep the html input value on the first parsed format, or the user's format.
+        if (parsedTelInput?.isValid && parsedTelInput?.formatOriginal) {
+            // It's need for refreshing html input value, if it is the same as the previouly parsed.
+            if (inputValue === parsedTelInput?.formatOriginal) {
+                inputValue = null;
+            }
+            inputValue = parsedTelInput?.formatOriginal;
+        }
+        value = parsedTelInput?.e164 ?? null;
+        valid = parsedTelInput?.isValid ?? false;
+        dispatch('valid', valid);
+        dispatch('parseInput', parsedTelInput);
+    }
+    else {
+        if (currCountry !== prevCountry) {
+            value = null;
+            inputValue = '';
+            valid = true;
+        }
+        prevCountry = currCountry;
     }
-});
-const handleInput = (event) => {
-    const inputVal = event.target.value.replace(/\s/g, '');
-    rawTelInput = inputVal;
-    handleParsePhoneNumber(country, inputVal);
 };
-const handleParsePhoneNumber = (country, input) => {
-    try {
-        parsedTelInput = normalizeTelInput(parsePhoneNumberWithError(input, country || undefined));
+const initialize = () => {
+    if (value && country) {
+        handleParsePhoneNumber(value, country);
     }
-    catch (err) {
-        if (err instanceof ParseError) {
-            // Not a phone number, non-existent country, etc.
-            parsedTelInput = {
-                isValid: false,
-                error: err.message
-            };
+    else if (value) {
+        const numberHasCountry = getCountryForPartialE164Number(value, { metadata });
+        if (numberHasCountry) {
+            updateCountry(numberHasCountry);
+            handleParsePhoneNumber(value, country);
         }
         else {
-            throw err;
+            handleParsePhoneNumber(value);
         }
     }
+    else if (parsedTelInput && parsedTelInput.phoneNumber) {
+        handleParsePhoneNumber(parsedTelInput.phoneNumber, country);
+    }
 };
+onMount(() => {
+    initialize();
+});
+let initRun = true;
 const watchFunction = () => {
-    if (rawTelInput !== null)
-        handleParsePhoneNumber(country, rawTelInput);
+    if (!initRun) {
+        handleParsePhoneNumber(null, country);
+    }
+    initRun = false;
 };
 const countryChangeWatch = watcher(null, watchFunction);
 $: $countryChangeWatch = country;
@@ -44,9 +98,18 @@ $: $countryChangeWatch = country;
 
 <input
 	{disabled}
-	value={parsedTelInput?.formatOriginal ?? rawTelInput ?? ''}
 	type="tel"
-	class={$$props.class}
+	value={inputValue}
 	{...$$restProps}
-	on:input={handleInput}
+	class={$$props.class}
+	on:beforeinput
+	on:blur
+	on:change
+	on:focus
+	on:input
+	on:keydown
+	on:keypress
+	on:keyup
+	on:paste
+	use:telInputAction={handleInputAction}
 />

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

@@ -1,21 +1,35 @@
 import { SvelteComponentTyped } from "svelte";
-import type { NormalizedTelNumber, CountryCode } from '../../types';
+import type { NormalizedTelNumber, CountryCode, E164Number } from '../../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        country?: CountryCode | null | undefined;
-        rawTelInput?: string | null | undefined;
-        parsedTelInput?: Partial<NormalizedTelNumber> | null | undefined;
+        country: CountryCode | null;
+        value: E164Number | null;
+        parsedTelInput: Partial<NormalizedTelNumber> | null;
+        valid?: boolean | undefined;
         disabled?: boolean | undefined;
     };
     events: {
+        beforeinput: InputEvent;
+        blur: FocusEvent;
+        change: Event;
+        focus: FocusEvent;
+        input: Event;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        paste: ClipboardEvent;
+        parseError: CustomEvent<any>;
+        valid: CustomEvent<any>;
+        parseInput: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type TelInputProps = typeof __propDef.props;
-export declare type TelInputEvents = typeof __propDef.events;
-export declare type TelInputSlots = typeof __propDef.slots;
+export type TelInputProps = typeof __propDef.props;
+export type TelInputEvents = typeof __propDef.events;
+export type TelInputSlots = typeof __propDef.slots;
 export default class TelInput extends SvelteComponentTyped<TelInputProps, TelInputEvents, TelInputSlots> {
 }
 export {};

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "0.14.2",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -21,126 +21,62 @@
     "node": ">= 16"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.14"
+    "libphonenumber-js": "^1.10.16",
+    "svelte": "^3.55.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@changesets/cli": "^2.25.0",
-    "@changesets/get-github-info": "^0.5.1",
-    "@changesets/types": "^5.2.0",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@changesets/cli": "^2.26.0",
+    "@changesets/get-github-info": "^0.5.2",
+    "@changesets/types": "^5.2.1",
     "@macfja/svelte-persistent-store": "^2.2.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.45",
-    "@sveltejs/kit": "^1.0.0-next.520",
-    "@sveltejs/package": "^1.0.0-next.5",
+    "@sveltejs/adapter-static": "^1.0.1",
+    "@sveltejs/kit": "^1.0.7",
+    "@sveltejs/package": "^1.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "^3.2.2",
-    "@types/jest": "^29.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
-    "autoprefixer": "^10.4.12",
-    "babel-jest": "^29.2.1",
-    "babel-loader": "^8.2.5",
-    "cssnano": "^5.1.13",
+    "@types/jest": "^29.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "autoprefixer": "^10.4.13",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "^9.1.2",
+    "cssnano": "^5.1.14",
     "dotenv": "^16.0.3",
-    "eslint": "^8.25.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.3",
+    "edit-package-json": "^0.8.7",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
-    "husky": "^8.0.1",
-    "jest": "^29.2.1",
+    "husky": "^8.0.3",
+    "jest": "^29.3.1",
     "jest-matchmedia-mock": "^1.1.0",
     "micromatch": "^4.0.5",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.21",
     "postcss-load-config": "^4.0.1",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.0",
-    "svelte": "^3.52.0",
-    "svelte-check": "^2.9.2",
-    "svelte-inview": "^3.0.1",
+    "prettier": "^2.8.1",
+    "prettier-plugin-svelte": "^2.9.0",
+    "svelte-check": "^3.0.1",
+    "svelte-inview": "^3.0.2",
     "svelte-jester": "^2.3.2",
-    "svelte-loader": "^3.1.3",
-    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.20",
-    "tailwindcss": "^3.2.0",
+    "svelte-loader": "^3.1.4",
+    "svelte-preprocess": "^5.0.0",
+    "svelte2tsx": "^0.6.0",
+    "tailwindcss": "^3.2.4",
     "ts-jest": "^29.0.3",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.1.8"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4"
   },
-  "standard-version": {
-    "skip": {
-      "tag": true
-    },
-    "types": [
-      {
-        "type": "chore",
-        "section": "Others (chore)",
-        "hidden": false
-      },
-      {
-        "type": "revert",
-        "section": "Reverts",
-        "hidden": false
-      },
-      {
-        "type": "feat",
-        "section": "Features",
-        "hidden": false
-      },
-      {
-        "type": "fix",
-        "section": "Bug Fixes",
-        "hidden": false
-      },
-      {
-        "type": "improvement",
-        "section": "Feature Improvements",
-        "hidden": false
-      },
-      {
-        "type": "docs",
-        "section": "Docs",
-        "hidden": false
-      },
-      {
-        "type": "style",
-        "section": "Styling",
-        "hidden": false
-      },
-      {
-        "type": "refactor",
-        "section": "Code Refactoring",
-        "hidden": false
-      },
-      {
-        "type": "perf",
-        "section": "Performance Improvements",
-        "hidden": false
-      },
-      {
-        "type": "test",
-        "section": "Tests",
-        "hidden": false
-      },
-      {
-        "type": "build",
-        "section": "Build System",
-        "hidden": false
-      },
-      {
-        "type": "ci",
-        "section": "CI",
-        "hidden": false
-      }
-    ]
-  },
-  "svelte": ".",
   "type": "module",
   "license": "MIT",
+  "types": "./types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./index.js"
-  }
+    ".": "./index.js",
+    "./styles/flags.css": "./styles/flags.css"
+  },
+  "svelte": "./index.js"
 }

package/types/index.d.ts

@@ -3,8 +3,10 @@ import type {
 	CountryCode,
 	E164Number,
 	NationalNumber,
+	MetadataJson,
 	PhoneNumber
 } from 'libphonenumber-js';
+import type { Countries } from 'libphonenumber-js/types';
 
 export interface Country {
 	id: string;
@@ -50,4 +52,25 @@ 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 };
+export type {
+	CountryCallingCode,
+	CountryCode,
+	E164Number,
+	NationalNumber,
+	PhoneNumber,
+	Countries,
+	MetadataJson
+};
+
+export interface TelInputValidity {
+	value: boolean | null;
+	errorMessage?: string;
+}
+
+export type TelInputDispatchEvents = {
+	country: CountryCode | null;
+	parseError: string;
+	parseInput: Partial<NormalizedTelNumber> | null;
+	valid: boolean;
+	value: E164Number | null;
+};

package/utils/directives/telInputAction.d.ts

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

package/utils/directives/telInputAction.js

@@ -0,0 +1,20 @@
+import { inspectAllowedChars, inputParser } from '../..';
+export const telInputAction = (node, handler) => {
+    const onInput = (event) => {
+        if (node && node.contains(event.target)) {
+            const value = event.target.value;
+            const formattedInput = inputParser(value, {
+                parseCharacter: inspectAllowedChars,
+                allowSpaces: true
+            });
+            node.value = formattedInput;
+            handler(formattedInput);
+        }
+    };
+    node.addEventListener('input', onInput, true);
+    return {
+        destroy() {
+            node.removeEventListener('input', onInput, true);
+        }
+    };
+};

package/utils/helpers.d.ts

@@ -1,10 +1,77 @@
-import type { PhoneNumber } from '../types';
+import type { PhoneNumber, MetadataJson, Countries, E164Number, CountryCode } from '../types';
 export declare const capitalize: (str: string) => string;
 export declare const getCurrentCountry: () => Promise<string | undefined>;
 export declare const isNumber: (value: number) => boolean;
-export declare const normalizeTelInput: (input: PhoneNumber) => {
-    [k: string]: string | boolean | import("libphonenumber-js/types").E164Number | import("libphonenumber-js/types").CountryCallingCode | import("libphonenumber-js/types").NationalNumber | null | undefined;
+export declare const normalizeTelInput: (input?: PhoneNumber) => {
+    [k: string]: string | boolean | E164Number | import("libphonenumber-js/types").CountryCallingCode | import("libphonenumber-js/types").NationalNumber | null | undefined;
 };
 export declare const isSelected: <T extends {
     id: string;
-}>(itemToSelect: T, selectedItem: T | null | undefined) => boolean;
+}>(itemToSelect: string | T, selectedItem: string | T | null | undefined) => boolean;
+export declare const getInternationalPhoneNumberPrefix: (country: CountryCode, metadata: MetadataJson) => string;
+/**
+ * Trims phone number digits if they exceed the maximum possible length
+ * for a national (significant) number for the country.
+ * @param  {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.
+ * @param  {string} country
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string} Can be empty.
+ */
+export declare const trimNumber: (number: E164Number, country: CountryCode, metadata: MetadataJson) => string;
+export declare const getMaxNumberLength: (country: CountryCode, metadata: MetadataJson) => number;
+/**
+ * If the phone number being input is an international one
+ * then tries to derive the country from the phone number.
+ * (regardless of whether there's any country currently selected)
+ * @param {string} partialE164Number - A possibly incomplete E.164 phone number.
+ * @param {string?} country - Currently selected country.
+ * @param {string[]?} countries - A list of available countries. If not passed then "all countries" are assumed.
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string?}
+ */
+export declare const getCountryForPartialE164Number: (partialE164Number: E164Number, { country, countries, required, metadata }: {
+    country?: CountryCode | undefined;
+    countries?: Countries[] | undefined;
+    required?: boolean | undefined;
+    metadata: MetadataJson;
+}) => CountryCode | undefined;
+/**
+ * Determines the country for a given (possibly incomplete) E.164 phone number.
+ * @param  {string} number - A possibly incomplete E.164 phone number.
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string?}
+ */
+export declare const getCountryFromPossiblyIncompleteInternationalPhoneNumber: (number: E164Number, metadata: MetadataJson) => CountryCode | undefined;
+/**
+ * Parses a partially entered national phone number digits
+ * (or a partially entered E.164 international phone number)
+ * and returns the national significant number part.
+ * National significant number returned doesn't come with a national prefix.
+ * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.
+ * @param {string?} country
+ * @param {object} metadata - `libphonenumber-js` metadata.
+ * @return {string} [result]
+ */
+export declare const getNationalSignificantNumberDigits: (number: E164Number, country: CountryCode, metadata: MetadataJson) => import("libphonenumber-js/types").NationalNumber | undefined;
+/**
+ * Checks if a partially entered E.164 phone number could belong to a country.
+ * @param  {string} number
+ * @param  {CountryCode} country
+ * @return {boolean}
+ */
+export declare const couldNumberBelongToCountry: (number: E164Number, country: CountryCode, metadata: MetadataJson) => boolean;
+export declare const isSupportedCountry: (country: CountryCode, metadata: MetadataJson) => boolean;
+/**
+ * These mappings map a character (key) to a specific digit that should
+ * replace it for normalization purposes.
+ * @param {string} character
+ * @returns {string}
+ */
+export declare const allowedCharacters: (character: string, { spaces }?: {
+    spaces?: boolean | undefined;
+}) => string;
+export declare const inputParser: (text: string, { allowSpaces, parseCharacter }: {
+    allowSpaces: boolean;
+    parseCharacter: (characted: string, val: string, allowSpaces?: boolean) => string;
+}) => string;
+export declare const inspectAllowedChars: (character: string, value: string, allowSpaces?: boolean) => string;

package/utils/helpers.js

@@ -1,6 +1,8 @@
+import { AsYouType, Metadata, getCountryCallingCode } from 'libphonenumber-js/core';
 export const capitalize = (str) => {
     return (str && str[0].toUpperCase() + str.slice(1).toLowerCase()) || '';
 };
+// Use carefully, it can be rate limited.
 export const getCurrentCountry = async () => {
     try {
         const response = await (await fetch('https://ip2c.org/s')).text();
@@ -23,6 +25,7 @@ export const normalizeTelInput = (input) => {
     const filteredResult = Object.fromEntries(Object.entries({
         countryCode: input ? input.country : null,
         isValid: input ? input.isValid() : false,
+        isPossible: input ? input.isPossible() : false,
         phoneNumber: input ? input.number : null,
         countryCallingCode: input ? input.countryCallingCode : null,
         formattedNumber: input ? input.formatInternational() : null,
@@ -57,7 +60,224 @@ export const isSelected = (itemToSelect, selectedItem) => {
             return false;
         }
     }
+    else if (itemToSelect === selectedItem) {
+        return true;
+    }
     else {
         return false;
     }
 };
+export const getInternationalPhoneNumberPrefix = (country, metadata) => {
+    const ONLY_DIGITS_REGEXP = /^\d+$/;
+    // Standard international phone number prefix: "+" and "country calling code".
+    let prefix = '+' + getCountryCallingCode(country, metadata);
+    // Get "leading digits" for a phone number of the country.
+    // If there're "leading digits" then they can be part of the prefix too.
+    const newMetadata = new Metadata(metadata);
+    const leadingDigits = newMetadata.numberingPlan?.leadingDigits();
+    if (leadingDigits && ONLY_DIGITS_REGEXP.test(leadingDigits)) {
+        prefix += leadingDigits;
+    }
+    return prefix;
+};
+/**
+ * Trims phone number digits if they exceed the maximum possible length
+ * for a national (significant) number for the country.
+ * @param  {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.
+ * @param  {string} country
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string} Can be empty.
+ */
+export const trimNumber = (number, country, metadata) => {
+    const nationalSignificantNumberPart = getNationalSignificantNumberDigits(number, country, metadata);
+    if (nationalSignificantNumberPart) {
+        const overflowDigitsCount = nationalSignificantNumberPart.length - getMaxNumberLength(country, metadata);
+        if (overflowDigitsCount > 0) {
+            return number.slice(0, number.length - overflowDigitsCount);
+        }
+    }
+    return number;
+};
+export const getMaxNumberLength = (country, metadata) => {
+    // Get "possible lengths" for a phone number of the country.
+    const newMetadata = new Metadata(metadata);
+    newMetadata.selectNumberingPlan(country);
+    // Return the last "possible length".
+    if (newMetadata.numberingPlan) {
+        return newMetadata.numberingPlan.possibleLengths()[newMetadata.numberingPlan.possibleLengths().length - 1];
+    }
+    else {
+        throw new Error('There is no metadata object.');
+    }
+};
+/**
+ * If the phone number being input is an international one
+ * then tries to derive the country from the phone number.
+ * (regardless of whether there's any country currently selected)
+ * @param {string} partialE164Number - A possibly incomplete E.164 phone number.
+ * @param {string?} country - Currently selected country.
+ * @param {string[]?} countries - A list of available countries. If not passed then "all countries" are assumed.
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string?}
+ */
+export const getCountryForPartialE164Number = (partialE164Number, { country, countries, required, metadata }) => {
+    if (partialE164Number === '+') {
+        // Don't change the currently selected country yet.
+        return country;
+    }
+    const derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(partialE164Number, metadata);
+    // If a phone number is being input in international form
+    // and the country can already be derived from it,
+    // then select that country.
+    if (derived_country && (!countries || countries.indexOf(derived_country) >= 0)) {
+        return derived_country;
+    }
+    // If "International" country option has not been disabled
+    // and the international phone number entered doesn't correspond
+    // to the currently selected country then reset the currently selected country.
+    else if (country &&
+        !required &&
+        !couldNumberBelongToCountry(partialE164Number, country, metadata)) {
+        return undefined;
+    }
+    // Don't change the currently selected country.
+    return country;
+};
+/**
+ * Determines the country for a given (possibly incomplete) E.164 phone number.
+ * @param  {string} number - A possibly incomplete E.164 phone number.
+ * @param  {object} metadata - `libphonenumber-js` metadata.
+ * @return {string?}
+ */
+export const getCountryFromPossiblyIncompleteInternationalPhoneNumber = (number, metadata) => {
+    const formatter = new AsYouType(undefined, metadata);
+    formatter.input(number);
+    // // `001` is a special "non-geograpical entity" code
+    // // in Google's `libphonenumber` library.
+    // if (formatter.getCountry() === '001') {
+    // 	return
+    // }
+    return formatter.getCountry();
+};
+/**
+ * Parses a partially entered national phone number digits
+ * (or a partially entered E.164 international phone number)
+ * and returns the national significant number part.
+ * National significant number returned doesn't come with a national prefix.
+ * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.
+ * @param {string?} country
+ * @param {object} metadata - `libphonenumber-js` metadata.
+ * @return {string} [result]
+ */
+export const getNationalSignificantNumberDigits = (number, country, metadata) => {
+    // Create "as you type" formatter.
+    const formatter = new AsYouType(country, metadata);
+    // Input partial national phone number.
+    formatter.input(number);
+    // Return the parsed partial national phone number.
+    const phoneNumber = formatter.getNumber();
+    return phoneNumber && phoneNumber.nationalNumber;
+};
+/**
+ * Checks if a partially entered E.164 phone number could belong to a country.
+ * @param  {string} number
+ * @param  {CountryCode} country
+ * @return {boolean}
+ */
+export const couldNumberBelongToCountry = (number, country, metadata) => {
+    const intlPhoneNumberPrefix = getInternationalPhoneNumberPrefix(country, metadata);
+    let i = 0;
+    while (i < number.length && i < intlPhoneNumberPrefix.length) {
+        if (number[i] !== intlPhoneNumberPrefix[i]) {
+            return false;
+        }
+        i++;
+    }
+    return true;
+};
+export const isSupportedCountry = (country, metadata) => {
+    return metadata.countries[country] !== undefined;
+};
+/**
+ * These mappings map a character (key) to a specific digit that should
+ * replace it for normalization purposes.
+ * @param {string} character
+ * @returns {string}
+ */
+export const allowedCharacters = (character, { spaces } = {
+    spaces: false
+}) => {
+    const DIGITS = {
+        '0': '0',
+        '1': '1',
+        '2': '2',
+        '3': '3',
+        '4': '4',
+        '5': '5',
+        '6': '6',
+        '7': '7',
+        '8': '8',
+        '9': '9',
+        '\uFF10': '0',
+        '\uFF11': '1',
+        '\uFF12': '2',
+        '\uFF13': '3',
+        '\uFF14': '4',
+        '\uFF15': '5',
+        '\uFF16': '6',
+        '\uFF17': '7',
+        '\uFF18': '8',
+        '\uFF19': '9',
+        '\u0660': '0',
+        '\u0661': '1',
+        '\u0662': '2',
+        '\u0663': '3',
+        '\u0664': '4',
+        '\u0665': '5',
+        '\u0666': '6',
+        '\u0667': '7',
+        '\u0668': '8',
+        '\u0669': '9',
+        '\u06F0': '0',
+        '\u06F1': '1',
+        '\u06F2': '2',
+        '\u06F3': '3',
+        '\u06F4': '4',
+        '\u06F5': '5',
+        '\u06F6': '6',
+        '\u06F7': '7',
+        '\u06F8': '8',
+        '\u06F9': '9' // Eastern-Arabic digit 9,
+    };
+    // Allow spaces
+    if (spaces) {
+        const regex = new RegExp('[\\t\\n\\v\\f\\r \\u00a0\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u200b\\u2028\\u2029\\u3000]', 'g');
+        if (regex.test(character)) {
+            return character;
+        }
+    }
+    // Allow digits
+    return DIGITS[character];
+};
+export const inputParser = (text, { allowSpaces, parseCharacter }) => {
+    let value = '';
+    let index = 0;
+    while (index < text.length) {
+        const character = parseCharacter(text[index], value, allowSpaces);
+        if (character !== undefined) {
+            value += character;
+        }
+        index++;
+    }
+    return value;
+};
+export const inspectAllowedChars = (character, value, allowSpaces) => {
+    // Leading plus is allowed
+    if (character === '+') {
+        if (!value) {
+            return character;
+        }
+    }
+    // Allowed characters
+    return allowedCharacters(character, { spaces: allowSpaces });
+};