@mozaic-ds/web-components 0.4.0 → 0.5.0

package/public/components/phonenumber/PhoneNumber.svelte

@@ -4,22 +4,34 @@
   import {
     parsePhoneNumber,
     formatIncompletePhoneNumber,
+    AsYouType,
+    CountryCode,
   } from 'libphonenumber-js';
+  import * as examples from 'libphonenumber-js/examples.mobile.json';
   import type { CountryItems } from './phonenumber.types';
   import { EventHandler } from '../../utilities/EventHandler';
+  import { onMount } from 'svelte';
+  import { clickOutside } from '../../utilities/ClickOutside';
+
   export let phonenumber: string;
   export let placeholder = '0102030405';
+  export let countrysearchplaceholder = 'Search Country';
   export let buttonId = 'dropdown_country';
   export let listId = 'phone_number_list';
   export let countries: string;
   export let selectedcountry: string;
   export let isvalid: boolean;
   export let isinvalid: boolean;
+  export let enablecountrysearch: boolean;
 
   let isCountriesListOpened = false;
   let maxlength = 25;
   let eventHandler = new EventHandler();
   let phoneNumber: string;
+  let searchcountrytext: string = '';
+  let rootElement: Element;
+  let selectedCountry: CountryItems;
+  let searchCountryDomElement: Element;
 
   $: selectedCountry = selectedcountry
     ? JSON.parse(selectedcountry)
@@ -33,15 +45,26 @@
     ? (JSON.parse(countries) as CountryItems[])
     : [];
 
-  $: phoneNumber = phonenumber ? getNumber() : '';
-
-  function getNumber(): string {
-    return parsePhoneNumber(
-      phonenumber,
-      selectedCountry.shortName,
-    ).formatNational();
+  $: if (isCountriesListOpened && searchCountryDomElement) {
+    scrollIntoSearchElement();
   }
+  $: placeholder = selectedCountry
+    ? getSelectedCountryPlaceholder()
+    : 'Search Country';
+
+  onMount(() => {
+    phoneNumber = phonenumber
+      ? parsePhoneNumber(
+          phonenumber,
+          selectedCountry?.shortName,
+        ).formatNational()
+      : phoneNumber;
+  });
 
+  function getSelectedCountryPlaceholder(): string {
+    const example = examples.default[selectedCountry.shortName as CountryCode];
+    return new AsYouType(selectedCountry.shortName).input(example);
+  }
   function dispatchEvent(
     eventName: string,
     data?: string | CountryItems,
@@ -92,7 +115,8 @@
         phoneNumberValue,
         selectedCountry.shortName,
       ).formatInternational();
-
+      isvalid = true;
+      isinvalid = false;
       dispatchEvent('blur', formatInternational);
     } catch (error) {
       const formatIncomplete: string = formatIncompletePhoneNumber(
@@ -153,15 +177,34 @@
         break;
     }
   }
+  function scrollIntoSearchElement(): void {
+    const searchElement = parsedCountries.find(
+      (country) =>
+        country.isd.toLowerCase().includes(searchcountrytext.toLowerCase()) ||
+        country.name.toLowerCase().includes(searchcountrytext.toLowerCase()),
+    );
+    const domElement = searchElement
+      ? (rootElement.querySelector(`li#${searchElement.shortName}`) as Element)
+      : (rootElement.querySelector(`li.mc-phone-number__item`) as Element);
+    domElement.scrollIntoView({
+      behavior: 'auto',
+      block: 'center',
+      inline: 'nearest',
+    });
+  }
 </script>
 
 <div
+  bind:this={rootElement}
   class="mc-phone-number
   {isCountriesListOpened ? ' mc-phone-number--focused' : ''}"
 >
   <div
     class="mc-phone-number__dropdown"
+    tabindex="-1"
     on:keydown={initKeyboardNav}
+    use:clickOutside
+    on:outclick={closeCountriesList}
     {...$$restProps}
   >
     <button
@@ -182,14 +225,29 @@
     {#if isCountriesListOpened}
       <ul
         id={listId}
-        tabindex="-1"
+        tabindex="0"
         role="listbox"
         aria-labelledby={listId}
         class="mc-phone-number__list"
         aria-activedescendant={selectedCountry.isd}
       >
+        {#if enablecountrysearch}
+          <input
+            id="searchfield"
+            type="text"
+            class="mc-phone-number__input mc-phone-number__flag-search-field  mc-text-input mc-text-input--m mc-field__input"
+            name="search-country-input"
+            spellcheck="false"
+            bind:value={searchcountrytext}
+            on:input={scrollIntoSearchElement}
+            placeholder={countrysearchplaceholder}
+            on:focus|preventDefault={scrollIntoSearchElement}
+            bind:this={searchCountryDomElement}
+          />
+        {/if}
         {#each parsedCountries as country}
           <li
+            id={country.shortName}
             role="option"
             class="mc-phone-number__item
             {country.isd === selectedCountry.isd
@@ -241,6 +299,11 @@
   .mc-phone-number {
     max-width: none;
 
+    &__flag-search-field {
+      position: sticky;
+      top: 0;
+    }
+
     &__indicator,
     &__country {
       padding-left: 1rem;