svelte-tel-input 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # svelte-tel-input
 
+## 0.6.0
+
+### Minor Changes
+
+- feat: example page preparations & extend functionality (part 1) ([#50](https://github.com/gyurielf/svelte-tel-input/pull/50))
+
+## 0.5.1
+
+### Patch Changes
+
+- chore: update packages and resolve breaking changes ([#46](https://github.com/gyurielf/svelte-tel-input/pull/46))
+
+## 0.5.0
+
+### Minor Changes
+
+- feat: prepare github pages deployment ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
+* feat: implement selects and input ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
+- feat: basic stores created ([#43](https://github.com/gyurielf/svelte-tel-input/pull/43))
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -6,20 +6,22 @@
 
 ## Installation
 
----
-
 Svelte Tel Input is distributed via [npm](https://www.npmjs.com/package/svelte-tel-input).
 
 ```sh
 yarn add svelte-tel-input
+```
 
-# or
-
+```
 npm install --save svelte-tel-input
 ```
 
----
-
 ## Dependencies
 
 [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
+
+## Changelog
+
+| Package                        | Changelog                 |
+| ------------------------------ | ------------------------- |
+| [@gyurielf/svelte-tel-input]() | [Changelog](CHANGELOG.md) |

package/assets/allCountry.d.ts

@@ -0,0 +1,3 @@
+import type { Country } from '../models/interfaces/Country.interface';
+declare const restructuredCountries: Country[];
+export default restructuredCountries;

package/assets/allCountry.js

@@ -0,0 +1,306 @@
+// Array of country objects for the flag dropdown.
+const allCountries = [
+    ['Afghanistan (‫افغانستان‬‎)', 'af', '93'],
+    ['Albania (Shqipëri)', 'al', '355'],
+    ['Algeria (‫الجزائر‬‎)', 'dz', '213'],
+    ['American Samoa', 'as', '1', 5, ['684']],
+    ['Andorra', 'ad', '376'],
+    ['Angola', 'ao', '244'],
+    ['Anguilla', 'ai', '1', 6, ['264']],
+    ['Antigua and Barbuda', 'ag', '1', 7, ['268']],
+    ['Argentina', 'ar', '54'],
+    ['Armenia (Հայաստան)', 'am', '374'],
+    ['Aruba', 'aw', '297'],
+    ['Ascension Island', 'ac', '247'],
+    ['Australia', 'au', '61', 0],
+    ['Austria (Österreich)', 'at', '43'],
+    ['Azerbaijan (Azərbaycan)', 'az', '994'],
+    ['Bahamas', 'bs', '1', 8, ['242']],
+    ['Bahrain (‫البحرين‬‎)', 'bh', '973'],
+    ['Bangladesh (বাংলাদেশ)', 'bd', '880'],
+    ['Barbados', 'bb', '1', 9, ['246']],
+    ['Belarus (Беларусь)', 'by', '375'],
+    ['Belgium (België)', 'be', '32'],
+    ['Belize', 'bz', '501'],
+    ['Benin (Bénin)', 'bj', '229'],
+    ['Bermuda', 'bm', '1', 10, ['441']],
+    ['Bhutan (འབྲུག)', 'bt', '975'],
+    ['Bolivia', 'bo', '591'],
+    ['Bosnia and Herzegovina (Босна и Херцеговина)', 'ba', '387'],
+    ['Botswana', 'bw', '267'],
+    ['Brazil (Brasil)', 'br', '55'],
+    ['British Indian Ocean Territory', 'io', '246'],
+    ['British Virgin Islands', 'vg', '1', 11, ['284']],
+    ['Brunei', 'bn', '673'],
+    ['Bulgaria (България)', 'bg', '359'],
+    ['Burkina Faso', 'bf', '226'],
+    ['Burundi (Uburundi)', 'bi', '257'],
+    ['Cambodia (កម្ពុជា)', 'kh', '855'],
+    ['Cameroon (Cameroun)', 'cm', '237'],
+    [
+        'Canada',
+        'ca',
+        '1',
+        1,
+        [
+            '204',
+            '226',
+            '236',
+            '249',
+            '250',
+            '289',
+            '306',
+            '343',
+            '365',
+            '387',
+            '403',
+            '416',
+            '418',
+            '431',
+            '437',
+            '438',
+            '450',
+            '506',
+            '514',
+            '519',
+            '548',
+            '579',
+            '581',
+            '587',
+            '604',
+            '613',
+            '639',
+            '647',
+            '672',
+            '705',
+            '709',
+            '742',
+            '778',
+            '780',
+            '782',
+            '807',
+            '819',
+            '825',
+            '867',
+            '873',
+            '902',
+            '905'
+        ]
+    ],
+    ['Cape Verde (Kabu Verdi)', 'cv', '238'],
+    ['Caribbean Netherlands', 'bq', '599', 1, ['3', '4', '7']],
+    ['Cayman Islands', 'ky', '1', 12, ['345']],
+    ['Central African Republic (République centrafricaine)', 'cf', '236'],
+    ['Chad (Tchad)', 'td', '235'],
+    ['Chile', 'cl', '56'],
+    ['China (中国)', 'cn', '86'],
+    ['Christmas Island', 'cx', '61', 2, ['89164']],
+    ['Cocos (Keeling) Islands', 'cc', '61', 1, ['89162']],
+    ['Colombia', 'co', '57'],
+    ['Comoros (‫جزر القمر‬‎)', 'km', '269'],
+    ['Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)', 'cd', '243'],
+    ['Congo (Republic) (Congo-Brazzaville)', 'cg', '242'],
+    ['Cook Islands', 'ck', '682'],
+    ['Costa Rica', 'cr', '506'],
+    ['Côte d’Ivoire', 'ci', '225'],
+    ['Croatia (Hrvatska)', 'hr', '385'],
+    ['Cuba', 'cu', '53'],
+    ['Curaçao', 'cw', '599', 0],
+    ['Cyprus (Κύπρος)', 'cy', '357'],
+    ['Czech Republic (Česká republika)', 'cz', '420'],
+    ['Denmark (Danmark)', 'dk', '45'],
+    ['Djibouti', 'dj', '253'],
+    ['Dominica', 'dm', '1', 13, ['767']],
+    ['Dominican Republic (República Dominicana)', 'do', '1', 2, ['809', '829', '849']],
+    ['Ecuador', 'ec', '593'],
+    ['Egypt (‫مصر‬‎)', 'eg', '20'],
+    ['El Salvador', 'sv', '503'],
+    ['Equatorial Guinea (Guinea Ecuatorial)', 'gq', '240'],
+    ['Eritrea', 'er', '291'],
+    ['Estonia (Eesti)', 'ee', '372'],
+    ['Eswatini', 'sz', '268'],
+    ['Ethiopia', 'et', '251'],
+    ['Falkland Islands (Islas Malvinas)', 'fk', '500'],
+    ['Faroe Islands (Føroyar)', 'fo', '298'],
+    ['Fiji', 'fj', '679'],
+    ['Finland (Suomi)', 'fi', '358', 0],
+    ['France', 'fr', '33'],
+    ['French Guiana (Guyane française)', 'gf', '594'],
+    ['French Polynesia (Polynésie française)', 'pf', '689'],
+    ['Gabon', 'ga', '241'],
+    ['Gambia', 'gm', '220'],
+    ['Georgia (საქართველო)', 'ge', '995'],
+    ['Germany (Deutschland)', 'de', '49'],
+    ['Ghana (Gaana)', 'gh', '233'],
+    ['Gibraltar', 'gi', '350'],
+    ['Greece (Ελλάδα)', 'gr', '30'],
+    ['Greenland (Kalaallit Nunaat)', 'gl', '299'],
+    ['Grenada', 'gd', '1', 14, ['473']],
+    ['Guadeloupe', 'gp', '590', 0],
+    ['Guam', 'gu', '1', 15, ['671']],
+    ['Guatemala', 'gt', '502'],
+    ['Guernsey', 'gg', '44', 1, ['1481', '7781', '7839', '7911']],
+    ['Guinea (Guinée)', 'gn', '224'],
+    ['Guinea-Bissau (Guiné Bissau)', 'gw', '245'],
+    ['Guyana', 'gy', '592'],
+    ['Haiti', 'ht', '509'],
+    ['Honduras', 'hn', '504'],
+    ['Hong Kong (香港)', 'hk', '852'],
+    ['Hungary (Magyarország)', 'hu', '36'],
+    ['Iceland (Ísland)', 'is', '354'],
+    ['India (भारत)', 'in', '91'],
+    ['Indonesia', 'id', '62'],
+    ['Iran (‫ایران‬‎)', 'ir', '98'],
+    ['Iraq (‫العراق‬‎)', 'iq', '964'],
+    ['Ireland', 'ie', '353'],
+    ['Isle of Man', 'im', '44', 2, ['1624', '74576', '7524', '7924', '7624']],
+    ['Israel (‫ישראל‬‎)', 'il', '972'],
+    ['Italy (Italia)', 'it', '39', 0],
+    ['Jamaica', 'jm', '1', 4, ['876', '658']],
+    ['Japan (日本)', 'jp', '81'],
+    ['Jersey', 'je', '44', 3, ['1534', '7509', '7700', '7797', '7829', '7937']],
+    ['Jordan (‫الأردن‬‎)', 'jo', '962'],
+    ['Kazakhstan (Казахстан)', 'kz', '7', 1, ['33', '7']],
+    ['Kenya', 'ke', '254'],
+    ['Kiribati', 'ki', '686'],
+    ['Kosovo', 'xk', '383'],
+    ['Kuwait (‫الكويت‬‎)', 'kw', '965'],
+    ['Kyrgyzstan (Кыргызстан)', 'kg', '996'],
+    ['Laos (ລາວ)', 'la', '856'],
+    ['Latvia (Latvija)', 'lv', '371'],
+    ['Lebanon (‫لبنان‬‎)', 'lb', '961'],
+    ['Lesotho', 'ls', '266'],
+    ['Liberia', 'lr', '231'],
+    ['Libya (‫ليبيا‬‎)', 'ly', '218'],
+    ['Liechtenstein', 'li', '423'],
+    ['Lithuania (Lietuva)', 'lt', '370'],
+    ['Luxembourg', 'lu', '352'],
+    ['Macau (澳門)', 'mo', '853'],
+    ['North Macedonia (Македонија)', 'mk', '389'],
+    ['Madagascar (Madagasikara)', 'mg', '261'],
+    ['Malawi', 'mw', '265'],
+    ['Malaysia', 'my', '60'],
+    ['Maldives', 'mv', '960'],
+    ['Mali', 'ml', '223'],
+    ['Malta', 'mt', '356'],
+    ['Marshall Islands', 'mh', '692'],
+    ['Martinique', 'mq', '596'],
+    ['Mauritania (‫موريتانيا‬‎)', 'mr', '222'],
+    ['Mauritius (Moris)', 'mu', '230'],
+    ['Mayotte', 'yt', '262', 1, ['269', '639']],
+    ['Mexico (México)', 'mx', '52'],
+    ['Micronesia', 'fm', '691'],
+    ['Moldova (Republica Moldova)', 'md', '373'],
+    ['Monaco', 'mc', '377'],
+    ['Mongolia (Монгол)', 'mn', '976'],
+    ['Montenegro (Crna Gora)', 'me', '382'],
+    ['Montserrat', 'ms', '1', 16, ['664']],
+    ['Morocco (‫المغرب‬‎)', 'ma', '212', 0],
+    ['Mozambique (Moçambique)', 'mz', '258'],
+    ['Myanmar (Burma) (မြန်မာ)', 'mm', '95'],
+    ['Namibia (Namibië)', 'na', '264'],
+    ['Nauru', 'nr', '674'],
+    ['Nepal (नेपाल)', 'np', '977'],
+    ['Netherlands (Nederland)', 'nl', '31'],
+    ['New Caledonia (Nouvelle-Calédonie)', 'nc', '687'],
+    ['New Zealand', 'nz', '64'],
+    ['Nicaragua', 'ni', '505'],
+    ['Niger (Nijar)', 'ne', '227'],
+    ['Nigeria', 'ng', '234'],
+    ['Niue', 'nu', '683'],
+    ['Norfolk Island', 'nf', '672'],
+    ['North Korea (조선 민주주의 인민 공화국)', 'kp', '850'],
+    ['Northern Mariana Islands', 'mp', '1', 17, ['670']],
+    ['Norway (Norge)', 'no', '47', 0],
+    ['Oman (‫عُمان‬‎)', 'om', '968'],
+    ['Pakistan (‫پاکستان‬‎)', 'pk', '92'],
+    ['Palau', 'pw', '680'],
+    ['Palestine (‫فلسطين‬‎)', 'ps', '970'],
+    ['Panama (Panamá)', 'pa', '507'],
+    ['Papua New Guinea', 'pg', '675'],
+    ['Paraguay', 'py', '595'],
+    ['Peru (Perú)', 'pe', '51'],
+    ['Philippines', 'ph', '63'],
+    ['Poland (Polska)', 'pl', '48'],
+    ['Portugal', 'pt', '351'],
+    ['Puerto Rico', 'pr', '1', 3, ['787', '939']],
+    ['Qatar (‫قطر‬‎)', 'qa', '974'],
+    ['Réunion (La Réunion)', 're', '262', 0],
+    ['Romania (România)', 'ro', '40'],
+    ['Russia (Россия)', 'ru', '7', 0],
+    ['Rwanda', 'rw', '250'],
+    ['Saint Barthélemy', 'bl', '590', 1],
+    ['Saint Helena', 'sh', '290'],
+    ['Saint Kitts and Nevis', 'kn', '1', 18, ['869']],
+    ['Saint Lucia', 'lc', '1', 19, ['758']],
+    ['Saint Martin (Saint-Martin (partie française))', 'mf', '590', 2],
+    ['Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)', 'pm', '508'],
+    ['Saint Vincent and the Grenadines', 'vc', '1', 20, ['784']],
+    ['Samoa', 'ws', '685'],
+    ['San Marino', 'sm', '378'],
+    ['São Tomé and Príncipe (São Tomé e Príncipe)', 'st', '239'],
+    ['Saudi Arabia (‫المملكة العربية السعودية‬‎)', 'sa', '966'],
+    ['Senegal (Sénégal)', 'sn', '221'],
+    ['Serbia (Србија)', 'rs', '381'],
+    ['Seychelles', 'sc', '248'],
+    ['Sierra Leone', 'sl', '232'],
+    ['Singapore', 'sg', '65'],
+    ['Sint Maarten', 'sx', '1', 21, ['721']],
+    ['Slovakia (Slovensko)', 'sk', '421'],
+    ['Slovenia (Slovenija)', 'si', '386'],
+    ['Solomon Islands', 'sb', '677'],
+    ['Somalia (Soomaaliya)', 'so', '252'],
+    ['South Africa', 'za', '27'],
+    ['South Korea (대한민국)', 'kr', '82'],
+    ['South Sudan (‫جنوب السودان‬‎)', 'ss', '211'],
+    ['Spain (España)', 'es', '34'],
+    ['Sri Lanka (ශ්‍රී ලංකාව)', 'lk', '94'],
+    ['Sudan (‫السودان‬‎)', 'sd', '249'],
+    ['Suriname', 'sr', '597'],
+    ['Svalbard and Jan Mayen', 'sj', '47', 1, ['79']],
+    ['Sweden (Sverige)', 'se', '46'],
+    ['Switzerland (Schweiz)', 'ch', '41'],
+    ['Syria (‫سوريا‬‎)', 'sy', '963'],
+    ['Taiwan (台灣)', 'tw', '886'],
+    ['Tajikistan', 'tj', '992'],
+    ['Tanzania', 'tz', '255'],
+    ['Thailand (ไทย)', 'th', '66'],
+    ['Timor-Leste', 'tl', '670'],
+    ['Togo', 'tg', '228'],
+    ['Tokelau', 'tk', '690'],
+    ['Tonga', 'to', '676'],
+    ['Trinidad and Tobago', 'tt', '1', 22, ['868']],
+    ['Tunisia (‫تونس‬‎)', 'tn', '216'],
+    ['Turkey (Türkiye)', 'tr', '90'],
+    ['Turkmenistan', 'tm', '993'],
+    ['Turks and Caicos Islands', 'tc', '1', 23, ['649']],
+    ['Tuvalu', 'tv', '688'],
+    ['U.S. Virgin Islands', 'vi', '1', 24, ['340']],
+    ['Uganda', 'ug', '256'],
+    ['Ukraine (Україна)', 'ua', '380'],
+    ['United Arab Emirates (‫الإمارات العربية المتحدة‬‎)', 'ae', '971'],
+    ['United Kingdom', 'gb', '44', 0],
+    ['United States', 'us', '1', 0],
+    ['Uruguay', 'uy', '598'],
+    ['Uzbekistan (Oʻzbekiston)', 'uz', '998'],
+    ['Vanuatu', 'vu', '678'],
+    ['Vatican City (Città del Vaticano)', 'va', '39', 1, ['06698']],
+    ['Venezuela', 've', '58'],
+    ['Vietnam (Việt Nam)', 'vn', '84'],
+    ['Wallis and Futuna (Wallis-et-Futuna)', 'wf', '681'],
+    ['Western Sahara (‫الصحراء الغربية‬‎)', 'eh', '212', 1, ['5288', '5289']],
+    ['Yemen (‫اليمن‬‎)', 'ye', '967'],
+    ['Zambia', 'zm', '260'],
+    ['Zimbabwe', 'zw', '263'],
+    ['Åland Islands', 'ax', '358', 1, ['18']]
+];
+const restructuredCountries = allCountries.map((country) => {
+    return {
+        name: country[0],
+        iso2: country[1],
+        dialCode: country[2],
+        priority: country[3] || 0,
+        areaCodes: country[4] || null
+    };
+});
+export default restructuredCountries;

package/components/Input/TelInput.svelte

@@ -0,0 +1,23 @@
+<script >import { enteredTelInputStore } from '../../stores';
+import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js';
+export let enteredTelInput;
+const handleInput = (event) => {
+    const inputVal = event.target.value;
+    enteredTelInput = inputVal;
+    $enteredTelInputStore = inputVal;
+    try {
+        const phoneNumber = parsePhoneNumberWithError(inputVal);
+    }
+    catch (error) {
+        if (error instanceof ParseError) {
+            // Not a phone number, non-existent country, etc.
+            console.log(error.message);
+        }
+        else {
+            throw error;
+        }
+    }
+};
+</script>
+
+<input class={$$props.class} type="tel" on:input={handleInput} />

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        enteredTelInput: string;
+    };
+    events: {
+        [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 default class TelInput extends SvelteComponentTyped<TelInputProps, TelInputEvents, TelInputSlots> {
+}
+export {};

package/components/Select/Select.svelte

@@ -0,0 +1,41 @@
+<script >import { clickOutsideAction } from '../../utils/directives/clickOutsideAction';
+export let selectOptions = {
+    searchInput: false,
+    flags: true
+};
+export let items;
+let isOpen = false;
+let enteredSearch;
+const toggleSelect = (e) => {
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    isOpen = !isOpen;
+};
+const closeSelect = (e) => {
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    isOpen = false;
+};
+</script>
+
+<div class="select cursor-pointer" use:clickOutsideAction={closeSelect}>
+    <div on:click={() => toggleSelect()}>CHOOSE</div>
+    {#if isOpen}
+        <ul class="border border-gray-900 max-h-40 w-fit overflow-y-scroll">
+            {#if !selectOptions.searchInput}
+                <input
+                    type="text"
+                    class="px-4 py-1 text-gray-900 focus:outline-none w-full"
+                    bind:value={enteredSearch}
+                />
+            {/if}
+            {#each items as item}
+                <li class="p-2 bg-gray-600 hover:bg-opacity-30">
+                    <span class="mr-3">{item.name}</span> +{item.dialCode}
+                </li>
+            {:else}
+                <div>List is on the way..</div>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style ></style>

package/components/Select/Select.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Country } from '../../models/interfaces/Country.interface';
+declare const __propDef: {
+    props: {
+        selectOptions?: {
+            searchInput: boolean;
+            flags: boolean;
+        } | undefined;
+        items: Country[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SelectProps = typeof __propDef.props;
+export declare type SelectEvents = typeof __propDef.events;
+export declare type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/components/Select/SelectListItem.svelte

@@ -0,0 +1,10 @@
+<script >import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+const setSelected = (e) => {
+    dispatch('selectedItem');
+};
+</script>
+
+<li on:click={setSelected}>
+    <slot />
+</li>

package/components/Select/SelectListItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        selectedItem: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SelectListItemProps = typeof __propDef.props;
+export declare type SelectListItemEvents = typeof __propDef.events;
+export declare type SelectListItemSlots = typeof __propDef.slots;
+export default class SelectListItem extends SvelteComponentTyped<SelectListItemProps, SelectListItemEvents, SelectListItemSlots> {
+}
+export {};

package/components/Select/TelCountrySelect/TelCountrySelect.svelte

@@ -0,0 +1,56 @@
+<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>

package/components/Select/TelCountrySelect/TelCountrySelect.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        selectedCountry: string;
+    };
+    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 {};

package/components/Select/TelRegionSelect/TelRegionSelect.svelte

@@ -0,0 +1,12 @@
+<script >"use strict";
+let selectedTelRegion;
+</script>
+
+<select
+    name="region_select"
+    class={$$props.class}
+    bind:value={selectedTelRegion}
+    on:change={() => console.log(selectedTelRegion)}
+>
+    <slot name="options" />
+</select>

package/components/Select/TelRegionSelect/TelRegionSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        options: {};
+    };
+};
+export declare type TelRegionSelectProps = typeof __propDef.props;
+export declare type TelRegionSelectEvents = typeof __propDef.events;
+export declare type TelRegionSelectSlots = typeof __propDef.slots;
+export default class TelRegionSelect extends SvelteComponentTyped<TelRegionSelectProps, TelRegionSelectEvents, TelRegionSelectSlots> {
+}
+export {};

package/components/Select/TelRegionSelect/TelRegionSelectOption.svelte

@@ -0,0 +1,4 @@
+<script >export let regionOption;
+</script>
+
+<option class={$$props.class} value={regionOption.value}>{regionOption.label}</option>

package/components/Select/TelRegionSelect/TelRegionSelectOption.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectObject } from '../../../models/interfaces/Select.interface';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        regionOption: SelectObject;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TelRegionSelectOptionProps = typeof __propDef.props;
+export declare type TelRegionSelectOptionEvents = typeof __propDef.events;
+export declare type TelRegionSelectOptionSlots = typeof __propDef.slots;
+export default class TelRegionSelectOption extends SvelteComponentTyped<TelRegionSelectOptionProps, TelRegionSelectOptionEvents, TelRegionSelectOptionSlots> {
+}
+export {};

package/components/Select/TelTypeSelect/TelTypeSelect.svelte

@@ -0,0 +1,15 @@
+<script >import { selectedTelTypeStore } from '../../../stores';
+export let selectedTelType;
+const setSelectedCountry = (value) => {
+    selectedTelType = value;
+    $selectedTelTypeStore = value;
+};
+</script>
+
+<select
+    name="type_select"
+    class={$$props.class}
+    on:change={(e) => setSelectedCountry(e.currentTarget.value)}
+>
+    <slot name="options" />
+</select>

package/components/Select/TelTypeSelect/TelTypeSelect.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectType } from '../../../models/types/Select.type';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        selectedTelType: SelectType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        options: {};
+    };
+};
+export declare type TelTypeSelectProps = typeof __propDef.props;
+export declare type TelTypeSelectEvents = typeof __propDef.events;
+export declare type TelTypeSelectSlots = typeof __propDef.slots;
+export default class TelTypeSelect extends SvelteComponentTyped<TelTypeSelectProps, TelTypeSelectEvents, TelTypeSelectSlots> {
+}
+export {};

package/components/Select/TelTypeSelect/TelTypeSelectOption.svelte

@@ -0,0 +1,4 @@
+<script >export let typeOption;
+</script>
+
+<option class={$$props.class} value={typeOption.value}>{typeOption.label}</option>

package/components/Select/TelTypeSelect/TelTypeSelectOption.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SelectObject } from '../../../models/interfaces/Select.interface';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        typeOption: SelectObject;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TelTypeSelectOptionProps = typeof __propDef.props;
+export declare type TelTypeSelectOptionEvents = typeof __propDef.events;
+export declare type TelTypeSelectOptionSlots = typeof __propDef.slots;
+export default class TelTypeSelectOption extends SvelteComponentTyped<TelTypeSelectOptionProps, TelTypeSelectOptionEvents, TelTypeSelectOptionSlots> {
+}
+export {};

package/index.d.ts

@@ -1,2 +1,8 @@
-export { default as LazyLoad } from './components/LazyLoad/LazyLoad.svelte';
-export { default as PhoneInput } from './components/Input/SvelteTelInput.svelte';
+export { default as TelCountrySelect } from "./components/Select/TelCountrySelect/TelCountrySelect.svelte";
+export { default as SelectListItem } from "./components/Select/SelectListItem.svelte";
+export { default as TelTypeSelect } from "./components/Select/TelTypeSelect/TelTypeSelect.svelte";
+export { default as TelTypeSelectOption } from "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte";
+export { default as Select } from "./components/Select/Select.svelte";
+export { default as TelRegionSelect } from "./components/Select/TelRegionSelect/TelRegionSelect.svelte";
+export { default as TelRegionSelectOption } from "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte";
+export { default as TelInput } from "./components/Input/TelInput.svelte";

package/index.js

@@ -1,2 +1,8 @@
-export { default as LazyLoad } from './components/LazyLoad/LazyLoad.svelte';
-export { default as PhoneInput } from './components/Input/SvelteTelInput.svelte';
+export { default as TelCountrySelect } from './components/Select/TelCountrySelect/TelCountrySelect.svelte';
+export { default as SelectListItem } from './components/Select/SelectListItem.svelte';
+export { default as TelTypeSelect } from './components/Select/TelTypeSelect/TelTypeSelect.svelte';
+export { default as TelTypeSelectOption } from './components/Select/TelTypeSelect/TelTypeSelectOption.svelte';
+export { default as Select } from './components/Select/Select.svelte';
+export { default as TelRegionSelect } from './components/Select/TelRegionSelect/TelRegionSelect.svelte';
+export { default as TelRegionSelectOption } from './components/Select/TelRegionSelect/TelRegionSelectOption.svelte';
+export { default as TelInput } from './components/Input/TelInput.svelte';

package/models/interfaces/Country.interface.d.ts

@@ -0,0 +1,7 @@
+export interface Country {
+    name: string;
+    iso2: string | number | string[];
+    dialCode: string | number | string[];
+    priority: string | number | string[];
+    areaCodes: string | number | string[] | null;
+}

package/models/interfaces/Country.interface.js

@@ -0,0 +1 @@
+export {};

package/models/types/DynamicSvelteComponent.type.d.ts

@@ -1,8 +1,8 @@
 import type { SvelteComponentTyped } from 'svelte';
 export declare type DynamicSvelteComponent = {
     component: typeof SvelteComponentTyped;
-    props?: Record<string, any>;
-    slot?: any;
-    click?: any;
-    input?: any;
+    props?: Record<string, any> | string | number | null;
+    slot?: SvelteComponentTyped;
+    click?: MouseEvent;
+    input?: InputEvent;
 };

package/models/types/DynamicSvelteComponent.type.js

@@ -1,16 +1 @@
 export {};
-// declare const __propDef: {
-//     props: {};
-//     slots: {};
-//     events: {
-//         [evt: string]: CustomEvent<any>;
-//     };
-// };
-// export declare type DynamicSvelteComponentProps = typeof __propDef.props;
-// export declare type DynamicSvelteComponentEvents = typeof __propDef.events;
-// export declare type DynamicSvelteComponentSlots = typeof __propDef.slots;
-// export default class DynamicSvelteComponent extends SvelteComponentTyped<
-//     DynamicSvelteComponentProps,
-//     DynamicSvelteComponentEvents,
-//     DynamicSvelteComponentSlots
-// > {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -17,57 +17,54 @@
   ],
   "engines": {
     "npm": ">= 7",
-    "yarn": "please-use-npm",
+    "yarn": ">=2",
     "node": ">= 16"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.9.44"
+    "libphonenumber-js": "^1.9.50"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.10",
-    "@changesets/cli": "^2.19.0",
+    "@babel/core": "^7.17.8",
+    "@babel/preset-env": "^7.16.11",
+    "@changesets/cli": "^2.21.1",
     "@changesets/get-github-info": "^0.5.0",
-    "@changesets/types": "^4.0.2",
-    "@sveltejs/adapter-static": "^1.0.0-next.26",
-    "@sveltejs/kit": "^1.0.0-next.234",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/svelte": "^3.0.3",
-    "@types/jest": "^27.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "autoprefixer": "^10.4.2",
-    "babel-jest": "^27.4.6",
-    "babel-loader": "^8.2.3",
-    "commitizen": "^4.2.4",
-    "cssnano": "^5.0.15",
-    "dotenv": "^14.2.0",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.7.0",
-    "eslint-plugin-svelte3": "^3.4.0",
+    "@changesets/types": "^4.1.0",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
+    "@sveltejs/kit": "^1.0.0-next.303",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/svelte": "^3.1.0",
+    "@types/jest": "^27.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "autoprefixer": "^10.4.4",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.4",
+    "cssnano": "^5.1.5",
+    "dotenv": "^16.0.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-svelte3": "^3.4.1",
     "husky": "^7.0.4",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
     "jest-matchmedia-mock": "^1.1.0",
-    "micromatch": "^4.0.4",
-    "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.1",
-    "prettier": "^2.5.1",
+    "micromatch": "^4.0.5",
+    "postcss": "^8.4.12",
+    "postcss-load-config": "^3.1.3",
+    "prettier": "^2.6.1",
     "prettier-plugin-svelte": "^2.6.0",
-    "standard-changelog": "^2.0.27",
-    "standard-version": "^9.3.2",
-    "svelte": "^3.46.2",
-    "svelte-check": "^2.3.0",
-    "svelte-inview": "^2.1.1",
-    "svelte-jester": "^2.1.5",
+    "svelte": "^3.46.4",
+    "svelte-check": "^2.4.6",
+    "svelte-inview": "^3.0.0",
+    "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.2",
-    "svelte-preprocess": "^4.10.2",
-    "svelte2tsx": "^0.4.14",
-    "tailwindcss": "^3.0.15",
-    "ts-jest": "^27.1.3",
+    "svelte-preprocess": "^4.10.4",
+    "svelte2tsx": "^0.5.6",
+    "tailwindcss": "^3.0.23",
+    "ts-jest": "^27.1.4",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.3"
   },
   "standard-version": {
     "skip": {
@@ -141,20 +138,29 @@
   "license": "MIT",
   "exports": {
     "./package.json": "./package.json",
+    "./assets/allCountry": "./assets/allCountry.js",
     "./assets/countries": "./assets/countries.js",
     "./assets/regions": "./assets/regions.js",
-    "./components/Input/SvelteTelInput.svelte": "./components/Input/SvelteTelInput.svelte",
-    "./components/Select/CountrySelect.svelte": "./components/Select/CountrySelect.svelte",
-    "./components/Select/RegionSelect.svelte": "./components/Select/RegionSelect.svelte",
+    "./components/Input/TelInput.svelte": "./components/Input/TelInput.svelte",
+    "./components/Select/Select.svelte": "./components/Select/Select.svelte",
+    "./components/Select/SelectListItem.svelte": "./components/Select/SelectListItem.svelte",
+    "./components/Select/TelCountrySelect/TelCountrySelect.svelte": "./components/Select/TelCountrySelect/TelCountrySelect.svelte",
+    "./components/Select/TelRegionSelect/TelRegionSelect.svelte": "./components/Select/TelRegionSelect/TelRegionSelect.svelte",
+    "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte": "./components/Select/TelRegionSelect/TelRegionSelectOption.svelte",
+    "./components/Select/TelTypeSelect/TelTypeSelect.svelte": "./components/Select/TelTypeSelect/TelTypeSelect.svelte",
+    "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte": "./components/Select/TelTypeSelect/TelTypeSelectOption.svelte",
     ".": "./index.js",
     "./models/enums/PhoneType.enum": "./models/enums/PhoneType.enum.js",
     "./models/enums": "./models/enums/index.js",
     "./models": "./models/index.js",
+    "./models/interfaces/Country.interface": "./models/interfaces/Country.interface.js",
     "./models/interfaces/Select.interface": "./models/interfaces/Select.interface.js",
     "./models/types/DynamicSvelteComponent.type": "./models/types/DynamicSvelteComponent.type.js",
     "./models/types/Select.type": "./models/types/Select.type.js",
     "./stores": "./stores/index.js",
+    "./utils/api": "./utils/api.js",
     "./utils/directives/clickOutsideAction": "./utils/directives/clickOutsideAction.js",
+    "./utils/helpers": "./utils/helpers.js",
     "./utils/simulator": "./utils/simulator.js",
     "./utils/typeCheck": "./utils/typeCheck.js"
   }

package/stores/index.d.ts

@@ -1,11 +1,17 @@
+import type { Writable } from 'svelte/store';
+import type { SelectType } from '../models/types/Select.type';
 export declare const booleanStore: (initial: boolean) => {
-    isOpen: import("svelte/store").Writable<boolean>;
+    isOpen: Writable<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;
 };
 export declare const statefulSwap: (initialState: boolean | null) => {
-    transitionState: import("svelte/store").Writable<boolean | null>;
+    transitionState: Writable<boolean | null>;
     transitionTo: (newState: boolean | null) => void;
     onOutro: () => void;
 };
+export declare const selectedCountryStore: Writable<string>;
+export declare const selectedRegionStore: Writable<string>;
+export declare const selectedTelTypeStore: Writable<SelectType>;
+export declare const enteredTelInputStore: Writable<string>;

package/stores/index.js

@@ -29,3 +29,9 @@ export const statefulSwap = (initialState) => {
         onOutro
     };
 };
+// SELECTS
+export const selectedCountryStore = writable();
+export const selectedRegionStore = writable();
+export const selectedTelTypeStore = writable();
+// INPUT
+export const enteredTelInputStore = writable();

package/utils/api.d.ts

@@ -0,0 +1,28 @@
+export declare const get: (base: string, path: string) => Promise<{
+    response: Response;
+    json?: undefined;
+} | {
+    response: Response;
+    json: Record<string, any>;
+}>;
+export declare const del: (base: string, path: string, data?: any) => Promise<{
+    response: Response;
+    json?: undefined;
+} | {
+    response: Response;
+    json: Record<string, any>;
+}>;
+export declare const post: (base: string, path: string, data?: any) => Promise<{
+    response: Response;
+    json?: undefined;
+} | {
+    response: Response;
+    json: Record<string, any>;
+}>;
+export declare const put: (base: string, path: string, data?: any) => Promise<{
+    response: Response;
+    json?: undefined;
+} | {
+    response: Response;
+    json: Record<string, any>;
+}>;

package/utils/api.js

@@ -0,0 +1,30 @@
+const send = async ({ method, path, data, base }) => {
+    const opts = { method, headers: {}, credentials: 'include' };
+    if (data) {
+        opts.headers['content-type'] = 'application/json';
+        opts.body = JSON.stringify(data);
+    }
+    const fullPath = encodeURI(`${base}${path}`);
+    const response = await fetch(fullPath, opts);
+    if (response.status === 204) {
+        return { response };
+    }
+    if (response.headers.get('content-type') === 'application/json') {
+        const json = await response.json();
+        return { response, json };
+    }
+    return { response };
+};
+// Shortcut methods
+export const get = (base, path) => {
+    return send({ method: 'GET', path, base });
+};
+export const del = (base, path, data) => {
+    return send({ method: 'DELETE', path, data, base });
+};
+export const post = (base, path, data) => {
+    return send({ method: 'POST', path, data, base });
+};
+export const put = (base, path, data) => {
+    return send({ method: 'PUT', path, data, base });
+};

package/utils/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const capitalize: (str: string) => string;
+export declare const getCurrentCountry: () => Promise<string>;

package/utils/helpers.js

@@ -0,0 +1,11 @@
+export const capitalize = (str) => {
+    return (str && str[0].toUpperCase() + str.slice(1).toLowerCase()) || '';
+};
+export const getCurrentCountry = async () => {
+    const response = await (await fetch('https://ip2c.org/s')).text();
+    const result = (response || '').toString();
+    if (!result || result[0] !== '1') {
+        throw new Error('Unable to fetch the country');
+    }
+    return result.substring(2, 4);
+};

package/components/Input/SvelteTelInput.svelte

@@ -1,23 +0,0 @@
-<script >import { parsePhoneNumberFromString } from 'libphonenumber-js';
-let telInputNumber;
-// const phoneNumber = parsePhoneNumber(' 8 (800) 555-35-35 ', 'RU');
-// if (phoneNumber) {
-//     phoneNumber.country === 'RU';
-//     phoneNumber.number === '+78005553535';
-//     phoneNumber.isValid() === true;
-//     // Note: `.getType()` requires `/max` metadata: see below for an explanation.
-//     phoneNumber.getType() === 'TOLL_FREE';
-// }
-// const parse = parsePhoneNumber(telInputNumber);
-const handleInput = (event) => {
-    let inputVal = event.target.value;
-    console.log(parsePhoneNumberFromString(inputVal));
-};
-$: console.log(telInputNumber);
-</script>
-
-<input
-    class="px-4 py-1 text-gray-900 rounded-full focus:outline-none"
-    type="tel"
-    on:input={handleInput}
-/>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SvelteTelInputProps = typeof __propDef.props;
-export declare type SvelteTelInputEvents = typeof __propDef.events;
-export declare type SvelteTelInputSlots = typeof __propDef.slots;
-export default class SvelteTelInput extends SvelteComponentTyped<SvelteTelInputProps, SvelteTelInputEvents, SvelteTelInputSlots> {
-}
-export {};

package/components/Select/CountrySelect.svelte

@@ -1,14 +0,0 @@
-<script >import rawCountries from '../../assets/countries';
-let selectedCountry;
-</script>
-
-<select
-    name="countrySelect"
-    class="text-gray-700"
-    bind:value={selectedCountry}
-    on:change={() => console.log(selectedCountry)}
->
-    {#each rawCountries as country}
-        <option value={country[2]}>{country[0]}</option>
-    {/each}
-</select>

package/components/Select/CountrySelect.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type CountrySelectProps = typeof __propDef.props;
-export declare type CountrySelectEvents = typeof __propDef.events;
-export declare type CountrySelectSlots = typeof __propDef.slots;
-export default class CountrySelect extends SvelteComponentTyped<CountrySelectProps, CountrySelectEvents, CountrySelectSlots> {
-}
-export {};

package/components/Select/RegionSelect.svelte

@@ -1,14 +0,0 @@
-<script >import rawRegions from '../../assets/regions';
-let selectedRegion;
-</script>
-
-<select
-    name="countrySelect"
-    class="text-gray-700"
-    bind:value={selectedRegion}
-    on:change={() => console.log(selectedRegion)}
->
-    {#each rawRegions as region}
-        <option value={region[2]}>{region[0]}</option>
-    {/each}
-</select>

package/components/Select/RegionSelect.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {};
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RegionSelectProps = typeof __propDef.props;
-export declare type RegionSelectEvents = typeof __propDef.events;
-export declare type RegionSelectSlots = typeof __propDef.slots;
-export default class RegionSelect extends SvelteComponentTyped<RegionSelectProps, RegionSelectEvents, RegionSelectSlots> {
-}
-export {};