Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

svelte-tel-input

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-tel-input - npm Package Compare versions

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

@@ -4,0 +10,0 @@ 

+12
-12
components/Input/TelInput.svelte
<script>import { watcher } from '../../stores';
import { PhoneNumberParseError } from '../../types';
import { normalizePhoneInput } from '../../utils/helpers';
import { normalizeTelInput } from '../../utils/helpers';
import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
import { onMount } from 'svelte';
export let country = null;
export let rawPhoneInput = null;
export let parsedPhoneInput = null;
export let rawTelInput = null;
export let parsedTelInput = null;
export let disabled = false;

@@ -13,5 +13,5 @@ export let id = null;

onMount(() => {
if (parsedPhoneInput !== null) {
rawPhoneInput = parsedPhoneInput.nationalNumber;
handleParsePhoneNumber(country, parsedPhoneInput.phoneNumber);
if (parsedTelInput !== null) {
rawTelInput = parsedTelInput.nationalNumber;
handleParsePhoneNumber(country, parsedTelInput.phoneNumber);
}

@@ -21,3 +21,3 @@ });

const inputVal = event.target.value.replace(/\s/g, '');
rawPhoneInput = inputVal;
rawTelInput = inputVal;
handleParsePhoneNumber(country, inputVal);

@@ -27,3 +27,3 @@ };

try {
parsedPhoneInput = normalizePhoneInput(parsePhoneNumberWithError(input, country || undefined));
parsedTelInput = normalizeTelInput(parsePhoneNumberWithError(input, country || undefined));
}

@@ -33,3 +33,3 @@ catch (err) {

// Not a phone number, non-existent country, etc.
parsedPhoneInput = {
parsedTelInput = {
isValid: false,

@@ -45,4 +45,4 @@ error: PhoneNumberParseError[err.message]

const watchFunction = () => {
if (rawPhoneInput !== null)
handleParsePhoneNumber(country, rawPhoneInput);
if (rawTelInput !== null)
handleParsePhoneNumber(country, rawTelInput);
};

@@ -57,3 +57,3 @@ const countryChangeWatch = watcher(null, watchFunction);

{disabled}
value={parsedPhoneInput?.formatOriginal ?? rawPhoneInput ?? ''}
value={parsedTelInput?.formatOriginal ?? rawTelInput ?? ''}
type="tel"

@@ -60,0 +60,0 @@ class={$$props.class}

+3
-3
components/Input/TelInput.svelte.d.ts
import { SvelteComponentTyped } from "svelte";
import type { NormalizedPhoneNumber } from '../../types/interfaces/Phone.interface';
import type { NormalizedTelNumber } from '../../types/interfaces/Phone.interface';
import { type CountryCode } from 'libphonenumber-js';

@@ -8,4 +8,4 @@ declare const __propDef: {

country?: CountryCode | null | undefined;
rawPhoneInput?: string | null | undefined;
parsedPhoneInput?: Partial<NormalizedPhoneNumber> | null | undefined;
rawTelInput?: string | null | undefined;
parsedTelInput?: Partial<NormalizedTelNumber> | null | undefined;
disabled?: boolean | undefined;

@@ -12,0 +12,0 @@ id?: string | null | undefined;

+3
-1
index.d.ts
export { default as TelInput } from './components/Input/TelInput.svelte';
export { getCurrentCountry, normalizePhoneInput } from './utils/helpers';
export { getCurrentCountry, isSelected } from './utils/helpers';
export { clickOutsideAction } from './utils/directives/clickOutsideAction';
export { normalizedCountries } from './assets';
+3
-1
index.js
export { default as TelInput } from './components/Input/TelInput.svelte';
export { getCurrentCountry, normalizePhoneInput } from './utils/helpers';
export { getCurrentCountry, isSelected } from './utils/helpers';
export { clickOutsideAction } from './utils/directives/clickOutsideAction';
export { normalizedCountries } from './assets';
+4
-4
package.json
{
"name": "svelte-tel-input",
"description": "svelte-tel-input",
"version": "0.11.1",
"version": "0.12.0",
"repository": {

@@ -34,3 +34,3 @@ "type": "git",

"@sveltejs/adapter-static": "^1.0.0-next.43",
"@sveltejs/kit": "^1.0.0-next.482",
"@sveltejs/kit": "^1.0.0-next.483",
"@sveltejs/package": "^1.0.0-next.3",

@@ -42,3 +42,3 @@ "@testing-library/jest-dom": "^5.16.5",

"@typescript-eslint/parser": "^5.37.0",
"autoprefixer": "^10.4.10",
"autoprefixer": "^10.4.11",
"babel-jest": "^29.0.3",

@@ -72,3 +72,3 @@ "babel-loader": "^8.2.5",

"typescript": "^4.8.3",
"vite": "^3.1.0"
"vite": "^3.1.1"
},

@@ -75,0 +75,0 @@ "standard-version": {

+9
-13
README.md

@@ -9,10 +9,4 @@ <a name="readme-top"></a>

## Under development!
The package is in `BETA` stage, expect bugs.
<ins>Do not use it before 1.0, it won't works properly!</ins>
Lightweight phone input standardization.
---
## Installation

@@ -28,14 +22,16 @@

### Basic
```html
<script lang="ts">
import { TelInput } from 'svelte-tel-input';
import type { CountryCode } from 'svelte-tel-input'
import { TelInput } from 'svelte-tel-input';
import type { NormalizedTelNumber, CountryCode } from 'svelte-tel-input/types';
// Any Country Code Alpha-2 (ISO 3166)
let country: CountryCode = 'US'
// Any Country Code Alpha-2 (ISO 3166)
let country: CountryCode = 'US';
let parsedTelInput: NormalizedPhoneNumber | null = null;
let parsedTelInput: NormalizedTelNumber | null = null;
</script>
<TelInput {country} bind:parsedPhoneInput class="any class passed down" />
<TelInput {country} bind:parsedTelInput class="any class passed down" />
```

@@ -42,0 +38,0 @@ 

+0
-14
stores/index.d.ts

@@ -1,13 +0,1 @@

import type { Writable } from 'svelte/store';
export declare const booleanStore: (initial: boolean) => {
isOpen: Writable<boolean>;
open: () => void;
close: () => void;
toggle: () => void;
};
export declare const statefulSwap: (initialState: boolean | null) => {
transitionState: Writable<boolean | null>;
transitionTo: (newState: boolean | null) => void;
onOutro: () => void;
};
export declare const watcher: (initialValue: string | null, watchFunction: (oldVal: string | null, newVal: string | null) => void) => {

@@ -17,3 +5,1 @@ subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: ((value?: string | null | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;

};
export declare const selectedCountryStore: Writable<string>;
export declare const enteredTelInputStore: Writable<string>;
+1
-34
stores/index.js
import { writable } from 'svelte/store';
// Modal
export const booleanStore = (initial) => {
const isOpen = writable(initial);
const { set, update } = isOpen;
return {
isOpen,
open: () => set(true),
close: () => set(false),
toggle: () => update((n) => !n)
};
};
// StatefulSwap (transition)
export const statefulSwap = (initialState) => {
const transitionState = writable(initialState);
let nextState = initialState;
const transitionTo = (newState) => {
if (nextState === newState)
return;
nextState = newState;
transitionState.set(null);
};
const onOutro = () => {
transitionState.set(nextState);
};
return {
transitionState,
transitionTo,
onOutro
};
};
// Watch variable changes.
export const watcher = (initialValue, watchFunction) => {

@@ -44,5 +15,1 @@ const { subscribe, update } = writable(initialValue);

};
// SELECTS
export const selectedCountryStore = writable();
// INPUT
export const enteredTelInputStore = writable();
+10
-2
types/enums/index.d.ts

@@ -1,2 +0,10 @@

export { PhoneType } from './PhoneType.enum';
export { PhoneNumberParseError } from './PhoneNumberParseError.enum';
export declare enum PhoneNumberParseError {
NOT_A_NUMBER = "NOT_A_NUMBER",
INVALID_COUNTRY = "INVALID_COUNTRY",
TOO_SHORT = "TOO_SHORT",
TOO_LONG = "TOO_LONG"
}
export declare enum PhoneType {
FIXED_LINE = "FIXED_LINE",
MOBILE = "MOBILE"
}
+12
-2
types/enums/index.js

@@ -1,2 +0,12 @@

export { PhoneType } from './PhoneType.enum';
export { PhoneNumberParseError } from './PhoneNumberParseError.enum';
export var PhoneNumberParseError;
(function (PhoneNumberParseError) {
PhoneNumberParseError["NOT_A_NUMBER"] = "NOT_A_NUMBER";
PhoneNumberParseError["INVALID_COUNTRY"] = "INVALID_COUNTRY";
PhoneNumberParseError["TOO_SHORT"] = "TOO_SHORT";
PhoneNumberParseError["TOO_LONG"] = "TOO_LONG";
})(PhoneNumberParseError || (PhoneNumberParseError = {}));
export var PhoneType;
(function (PhoneType) {
PhoneType["FIXED_LINE"] = "FIXED_LINE";
PhoneType["MOBILE"] = "MOBILE";
})(PhoneType || (PhoneType = {}));
+1
-1
types/index.d.ts
export * from './enums';
export * from './interfaces';
export declare type DispatchSelectEvents<T> = {
export declare type CountrySelectEvents<T> = {
add: {

@@ -5,0 +5,0 @@ option: T;

+1
-1
types/interfaces/Country.interface.d.ts

@@ -1,2 +0,2 @@

import type { CountryCode } from 'libphonenumber-js';
import type { CountryCode } from './Phone.interface';
export interface Country {

@@ -3,0 +3,0 @@ id: string;

+2
-3
types/interfaces/index.d.ts

@@ -1,3 +0,2 @@

export type { Country } from './Country.interface';
export type { TelSelectObject } from './Select.interface';
export type { PhoneNumberError } from './Phone.interface';
export * from './Country.interface';
export * from './Phone.interface';
+2
-1
types/interfaces/index.js

@@ -1,1 +0,2 @@

export {};
export * from './Country.interface';
export * from './Phone.interface';
+2
-1
types/interfaces/Phone.interface.d.ts

@@ -7,3 +7,3 @@ import type { PhoneNumberParseError } from '../enums';

}
export interface NormalizedPhoneNumber {
export interface NormalizedTelNumber {
countryCode?: CountryCode | null;

@@ -22,1 +22,2 @@ isValid: boolean;

}
export type { CountryCallingCode, CountryCode, E164Number, NationalNumber };
+3
-3
utils/helpers.d.ts

@@ -1,2 +0,2 @@

import type { NormalizedPhoneNumber } from '../types/interfaces/Phone.interface';
import type { NormalizedTelNumber } from '../types/interfaces/Phone.interface';
import type { PhoneNumber } from 'libphonenumber-js';

@@ -6,3 +6,3 @@ export declare const capitalize: (str: string) => string;

export declare const isNumber: (value: number) => boolean;
export declare const normalizePhoneInput: (input: PhoneNumber) => {
export declare const normalizeTelInput: (input: PhoneNumber) => {
[k: string]: string | boolean | import("libphonenumber-js").CountryCallingCode | import("libphonenumber-js").NationalNumber | import("libphonenumber-js").E164Number | null | undefined;

@@ -13,4 +13,4 @@ };

}>(itemToSelect: T, selectedItem: T | null | undefined) => boolean;
export declare const jsonPrettyParser: (node: HTMLElement, data: NormalizedPhoneNumber | null) => {
export declare const jsonPrettyParser: (node: HTMLElement, data: NormalizedTelNumber | null) => {
destroy: () => void;
};
+1
-1
utils/helpers.js

@@ -22,3 +22,3 @@ export const capitalize = (str) => {

};
export const normalizePhoneInput = (input) => {
export const normalizeTelInput = (input) => {
const filteredResult = Object.fromEntries(Object.entries({

@@ -25,0 +25,0 @@ countryCode: input ? input.country : null,

-56
components/Select/TelCountrySelect/TelCountrySelect.svelte
<script>import { selectedCountryStore } from '../../../stores';
export let selectedCountry;
const setSelectedCountry = (value) => {
selectedCountry = value;
$selectedCountryStore = value;
};
// const getCountries = (list = []) => {
// return list.map((countryCode) => findCountry(countryCode)).filter(Boolean);
// };
// const findCountry = (iso: string) => {
// return filteredCountries.find((country) => country.iso2 === iso.toUpperCase());
// };
// const findCountryByDialCode = (dialCode: any) => {
// return filteredCountries.find((country) => Number(country.dialCode) === dialCode);
// };
// $: filteredCountries = () => {
// // List countries after filtered
// if (onlyCountries.length) {
// return allCountries.filter(({ iso2 }) =>
// onlyCountries.some((c) => c.toUpperCase() === iso2)
// );
// }
// if (ignoredCountries.length) {
// return allCountries.filter(
// ({ iso2 }) =>
// !ignoredCountries.includes(iso2.toUpperCase()) &&
// !ignoredCountries.includes(iso2.toLowerCase())
// );
// }
// return allCountries;
// };
// $: sortedCountries = () => {
// // Sort the list countries: from preferred countries to all countries
// const preferredCountries = getCountries(preferredCountries).map((country) => ({
// ...country,
// preferred: true
// }));
// return [...preferredCountries, ...filteredCountries];
// };
// const getDefault(key: string) => {
// const value = utils.options[key];
// if (typeof value === 'undefined') {
// return utils.options[key];
// }
// return value;
// }
</script>
<select
name="country_select"
class="some-class {$$props.class}"
on:change={(e) => setSelectedCountry(e.currentTarget.value)}
bind:value={selectedCountry}
>
<slot name="options" />
</select>
-19
components/Select/...ntrySelect/TelCountrySelect.svelte.d.ts
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: any;
selectedCountry: string | null;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {
options: {};
};
};
export declare type TelCountrySelectProps = typeof __propDef.props;
export declare type TelCountrySelectEvents = typeof __propDef.events;
export declare type TelCountrySelectSlots = typeof __propDef.slots;
export default class TelCountrySelect extends SvelteComponentTyped<TelCountrySelectProps, TelCountrySelectEvents, TelCountrySelectSlots> {
}
export {};
-6
stores/DevExampleStores.d.ts
import type { PersistentStore } from '@macfja/svelte-persistent-store';
import type { NormalizedPhoneNumber } from '../types/interfaces/Phone.interface';
export declare const exampleDataStore: import("svelte/store").Writable<NormalizedPhoneNumber>;
export declare const theme: PersistentStore<string | null>;
export declare const initTheme: () => void;
export declare const toggleTheme: () => void;
-30
stores/DevExampleStores.js
import { writable } from 'svelte/store';
import { createLocalStorage, persist } from '@macfja/svelte-persistent-store';
export const exampleDataStore = writable();
// Theme
export const theme = persist(writable(null), createLocalStorage(), 'theme');
let preferedTheme = null;
export const initTheme = () => {
try {
const unsubscribe = theme.subscribe((theme) => {
preferedTheme = theme;
});
unsubscribe();
}
catch (error) {
console.error(error);
}
};
export const toggleTheme = () => {
initTheme();
const { classList, ...htmlEl } = document.querySelector('html');
if (preferedTheme !== null) {
classList.remove(preferedTheme);
preferedTheme = null;
}
else {
preferedTheme = 'dark';
classList.add(preferedTheme);
}
theme.update((theme) => (theme = preferedTheme));
};
-6
types/enums/PhoneNumberParseError.enum.d.ts
export declare enum PhoneNumberParseError {
NOT_A_NUMBER = "NOT_A_NUMBER",
INVALID_COUNTRY = "INVALID_COUNTRY",
TOO_SHORT = "TOO_SHORT",
TOO_LONG = "TOO_LONG"
}
-7
types/enums/PhoneNumberParseError.enum.js
export var PhoneNumberParseError;
(function (PhoneNumberParseError) {
PhoneNumberParseError["NOT_A_NUMBER"] = "NOT_A_NUMBER";
PhoneNumberParseError["INVALID_COUNTRY"] = "INVALID_COUNTRY";
PhoneNumberParseError["TOO_SHORT"] = "TOO_SHORT";
PhoneNumberParseError["TOO_LONG"] = "TOO_LONG";
})(PhoneNumberParseError || (PhoneNumberParseError = {}));
-4
types/enums/PhoneType.enum.d.ts
export declare enum PhoneType {
FIXED_LINE = "FIXED_LINE",
MOBILE = "MOBILE"
}
-5
types/enums/PhoneType.enum.js
export var PhoneType;
(function (PhoneType) {
PhoneType["FIXED_LINE"] = "FIXED_LINE";
PhoneType["MOBILE"] = "MOBILE";
})(PhoneType || (PhoneType = {}));
-5
types/interfaces/Select.interface.d.ts
export interface TelSelectObject {
id: string;
label: string;
value: string | number;
}
-1
types/interfaces/Select.interface.js
export {};