svelte-tel-input 3.3.4 → 3.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +52 -40
  2. package/dist/components/input/TelInput.svelte +8 -5
  3. package/dist/stores/index.d.ts +2 -1
  4. package/dist/utils/helpers.d.ts +1 -1
  5. package/dist/utils/helpers.js +2 -2
  6. package/package.json +16 -16
package/README.md CHANGED
@@ -40,60 +40,72 @@ _Snippet would be too long_ - [Example](https://github.com/gyurielf/svelte-tel-i
40
40
 
41
41
  ```html
42
42
  <script lang="ts">
43
- import { TelInput, normalizedCountries } from 'svelte-tel-input';
44
- import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
43
+ import { TelInput, normalizedCountries } from 'svelte-tel-input';
44
+ import type { DetailedValue, CountryCode, E164Number } from 'svelte-tel-input/types';
45
45
 
46
- // Any Country Code Alpha-2 (ISO 3166)
47
- let selectedCountry: CountryCode | null = 'HU';
46
+ // Any Country Code Alpha-2 (ISO 3166)
47
+ let selectedCountry: CountryCode | null = 'HU';
48
48
 
49
- // You must use E164 number format. It's guarantee the parsing and storing consistency.
50
- let value: E164Number | null = '+36301234567';
49
+ // You must use E164 number format. It's guarantee the parsing and storing consistency.
50
+ let value: E164Number | null = '+36301234567';
51
51
 
52
- // Validity
53
- let valid = true;
52
+ // Validity
53
+ let valid = true;
54
54
 
55
- // Optional - Extended details about the parsed phone number
56
- let detailedValue: DetailedValue | null = null;
55
+ // Optional - Extended details about the parsed phone number
56
+ let detailedValue: DetailedValue | null = null;
57
57
  </script>
58
58
 
59
59
  <div class="wrapper">
60
- <select
61
- class="country-select {!valid && 'invalid'}"
62
- aria-label="Default select example"
63
- name="Country"
64
- bind:value={selectedCountry}
65
- >
66
- <option value={null} hidden={selectedCountry !== null}>Please select</option>
67
- {#each normalizedCountries as country (country.id)}
68
- <option
69
- value={country.iso2}
70
- selected={country.iso2 === selectedCountry}
71
- aria-selected={country.iso2 === selectedCountry}
72
- >
73
- {country.iso2} (+{country.dialCode})
74
- </option>
75
- {/each}
76
- </select>
77
- <TelInput bind:country={selectedCountry} bind:value bind:valid bind:detailedValue class="basic-tel-input {!isValid && 'invalid'}" />
60
+ <select
61
+ class="country-select {!valid && 'invalid'}"
62
+ aria-label="Default select example"
63
+ name="Country"
64
+ bind:value="{selectedCountry}"
65
+ >
66
+ <option value="{null}" hidden="{selectedCountry" !="" ="null}">Please select</option>
67
+ {#each normalizedCountries as country (country.id)}
68
+ <option
69
+ value="{country.iso2}"
70
+ selected="{country.iso2"
71
+ =""
72
+ =""
73
+ ="selectedCountry}"
74
+ aria-selected="{country.iso2"
75
+ =""
76
+ =""
77
+ ="selectedCountry}"
78
+ >
79
+ {country.iso2} (+{country.dialCode})
80
+ </option>
81
+ {/each}
82
+ </select>
83
+ <TelInput
84
+ bind:country="{selectedCountry}"
85
+ bind:value
86
+ bind:valid
87
+ bind:detailedValue
88
+ class="basic-tel-input {!isValid && 'invalid'}"
89
+ />
78
90
  </div>
79
91
 
80
92
  <style>
81
93
  .wrapper :global(.basic-tel-input) {
82
- height: 32px;
83
- padding-left: 12px;
84
- padding-right: 12px;
85
- border-radius: 6px;
86
- border: 1px solid;
87
- outline: none;
94
+ height: 32px;
95
+ padding-left: 12px;
96
+ padding-right: 12px;
97
+ border-radius: 6px;
98
+ border: 1px solid;
99
+ outline: none;
88
100
  }
89
101
 
90
102
  .wrapper :global(.country-select) {
91
- height: 36px;
92
- padding-left: 12px;
93
- padding-right: 12px;
94
- border-radius: 6px;
95
- border: 1px solid;
96
- outline: none;
103
+ height: 36px;
104
+ padding-left: 12px;
105
+ padding-right: 12px;
106
+ border-radius: 6px;
107
+ border: 1px solid;
108
+ outline: none;
97
109
  }
98
110
 
99
111
  .wrapper :global(.invalid) {
package/dist/components/input/TelInput.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script>import { createEventDispatcher } from "svelte";
1
+ <script>import { createEventDispatcher, onMount } from "svelte";
2
2
  import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js/max";
3
3
  import {
4
4
  normalizeTelInput,
@@ -42,7 +42,8 @@ const handleInputAction = (value2) => {
42
42
  };
43
43
  const updateCountry = (countryCode) => {
44
44
  if (countryCode !== country) {
45
- country = prevCountry = countryCode;
45
+ country = countryCode;
46
+ prevCountry = country;
46
47
  dispatch("updateCountry", country);
47
48
  }
48
49
  return country;
@@ -122,9 +123,11 @@ $:
122
123
  detailedValue = null;
123
124
  dispatch("updateDetailedValue", detailedValue);
124
125
  }
125
- if (value) {
126
- handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
127
- }
126
+ onMount(() => {
127
+ if (value) {
128
+ handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);
129
+ }
130
+ });
128
131
  </script>
129
132
 
130
133
  <input
package/dist/stores/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
+ /// <reference types="svelte" />
1
2
  export declare const watcher: (initialValue: string | null, watchFunction: (oldVal: string | null, newVal: string | null) => void) => {
2
- subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: ((value?: string | null | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
3
+ subscribe: (this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined) => import("svelte/store").Unsubscriber;
3
4
  set: (value: string | null) => void;
4
5
  };
package/dist/utils/helpers.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const capitalize: (str: string) => string;
3
3
  export declare const getCurrentCountry: () => Promise<string | undefined>;
4
4
  export declare const isNumber: (value: number) => boolean;
5
5
  export declare const normalizeTelInput: (input?: PhoneNumber) => {
6
- [k: string]: string | boolean | E164Number | import("libphonenumber-js/types").CountryCallingCode | import("libphonenumber-js/types").NationalNumber | null | undefined;
6
+ [k: string]: string | boolean | import("libphonenumber-js/types").NationalNumber | E164Number | import("libphonenumber-js/types").CountryCallingCode | null | undefined;
7
7
  };
8
8
  export declare const generatePlaceholder: (country: CountryCode, { format, spaces }?: {
9
9
  format: 'international' | 'national';
package/dist/utils/helpers.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AsYouType, Metadata, getCountryCallingCode, getExampleNumber } from 'libphonenumber-js/max';
2
- import examples from 'libphonenumber-js/mobile/examples' assert { type: 'json' };
2
+ import { examplePhoneNumbers } from '../assets/index.js';
3
3
  export const capitalize = (str) => {
4
4
  if (!str)
5
5
  return '';
@@ -50,7 +50,7 @@ export const generatePlaceholder = (country, { format, spaces } = {
50
50
  format: 'national',
51
51
  spaces: true
52
52
  }) => {
53
- const examplePhoneNumber = getExampleNumber(country, examples);
53
+ const examplePhoneNumber = getExampleNumber(country, examplePhoneNumbers);
54
54
  if (examplePhoneNumber) {
55
55
  switch (format) {
56
56
  case 'international':
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "svelte-tel-input",
3
3
  "description": "svelte-tel-input",
4
- "version": "3.3.4",
4
+ "version": "3.3.6",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -30,38 +30,38 @@
30
30
  "svelte": "^3.58.0 || ^4.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "libphonenumber-js": "^1.10.41"
33
+ "libphonenumber-js": "^1.10.43"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@sveltejs/adapter-auto": "2.1.0",
37
- "@sveltejs/kit": "^1.22.6",
38
- "@sveltejs/package": "^2.2.1",
37
+ "@sveltejs/kit": "^1.23.0",
38
+ "@sveltejs/package": "^2.2.2",
39
39
  "@testing-library/svelte": "^4.0.3",
40
40
  "@testing-library/user-event": "^14.4.3",
41
41
  "@types/micromatch": "^4.0.2",
42
- "@typescript-eslint/eslint-plugin": "^6.4.0",
43
- "@typescript-eslint/parser": "^6.4.0",
42
+ "@typescript-eslint/eslint-plugin": "^6.5.0",
43
+ "@typescript-eslint/parser": "^6.5.0",
44
44
  "autoprefixer": "^10.4.15",
45
45
  "cssnano": "^6.0.1",
46
46
  "dotenv": "^16.3.1",
47
- "eslint": "^8.47.0",
48
- "eslint-config-prettier": "^8.8.0",
47
+ "eslint": "^8.48.0",
48
+ "eslint-config-prettier": "^9.0.0",
49
49
  "eslint-plugin-import": "^2.28.1",
50
- "eslint-plugin-svelte": "^2.32.4",
50
+ "eslint-plugin-svelte": "^2.33.0",
51
51
  "jsdom": "^22.1.0",
52
52
  "micromatch": "^4.0.5",
53
53
  "postcss": "^8.4.28",
54
- "prettier": "^2.8.8",
55
- "prettier-plugin-svelte": "^2.10.1",
54
+ "prettier": "^3.0.2",
55
+ "prettier-plugin-svelte": "^3.0.3",
56
56
  "publint": "^0.2.2",
57
- "svelte": "^3.58.0",
58
- "svelte-check": "^3.5.0",
59
- "svelte2tsx": "^0.6.20",
57
+ "svelte": "^4.2.0",
58
+ "svelte-check": "^3.5.1",
59
+ "svelte2tsx": "^0.6.21",
60
60
  "tailwindcss": "^3.3.3",
61
61
  "tslib": "^2.6.2",
62
- "typescript": "^5.1.6",
62
+ "typescript": "^5.2.2",
63
63
  "vite": "^4.4.9",
64
- "vitest": "^0.34.2"
64
+ "vitest": "^0.34.3"
65
65
  },
66
66
  "type": "module",
67
67
  "license": "MIT",