feat(input-tel-dropdown): add optgroups when preferredCountries are shown

.changeset/fast-chairs-cross.md

@@ -0,0 +1,5 @@
+---
+'@lion/input-tel-dropdown': patch
+---
+
+Add optgroups when preferredCountries are shown

.changeset/plenty-moles-repeat.md

@@ -0,0 +1,5 @@
+---
+'@lion/input-tel': patch
+---
+
+Export formatPhoneNumber

docs/components/input-tel-dropdown/use-cases.md

@@ -51,8 +51,7 @@ export const allowedRegions = () => html`
 
 ## Preferred regions
 
-When `.preferredRegions` is configured, they will show up on top of the dropdown list to
+When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
-enhance user experience.
 
 ```js preview-story
 export const preferredRegionCodes = () => html`
@@ -61,8 +60,8 @@ export const preferredRegionCodes = () => html`
     help-text="Preferred regions show on top"
     .modelValue=${'+31612345678'}
     name="phoneNumber"
-    .allowedRegions=${['NL', 'DE', 'GB', 'BE', 'US', 'CA']}
+    .allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}
-    .preferredRegions=${['NL', 'DE']}
+    .preferredRegions=${['DE', 'NL']}
   ></lion-input-tel-dropdown>
   <h-output
     .show="${['modelValue', 'activeRegion']}"

packages/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -52,7 +52,9 @@ export class LionInputTelDropdown extends LionInputTel {
    * @configure LitElement
    * @type {any}
    */
-  static properties = { preferredRegions: { type: Array } };
+  static properties = {
+    preferredRegions: { type: Array },
+  };
 
   refs = {
     /** @type {DropdownRef} */
@@ -97,6 +99,9 @@ export class LionInputTelDropdown extends LionInputTel {
         },
         labels: {
           selectCountry: localize.msg('lion-input-tel:selectCountry'),
+          // TODO: add translations
+          allCountries: this._allCountriesLabel || 'All countries',
+          preferredCountries: this._preferredCountriesLabel || 'Suggested countries',
         },
       },
     };
@@ -126,9 +131,12 @@ export class LionInputTelDropdown extends LionInputTel {
         >
           ${data?.regionMetaListPreferred?.length
             ? html`
-                ${data.regionMetaListPreferred.map(renderOption)}
+                <optgroup label="${refs?.dropdown?.labels?._preferredCountries}">
-                <option disabled>---------------</option>
+                  ${data.regionMetaListPreferred.map(renderOption)}
-                ${data?.regionMetaList?.map(renderOption)}
+                </optgroup>
+                <optgroup label="${refs?.dropdown?.labels?._allCountries}">
+                  ${data?.regionMetaList?.map(renderOption)}
+                </optgroup>
               `
             : html` ${data?.regionMetaList?.map(renderOption)}`}
         </select>
@@ -206,6 +214,16 @@ export class LionInputTelDropdown extends LionInputTel {
      * @type {string[]}
      */
     this.preferredRegions = [];
+    /**
+     * Group label for all countries, when preferredCountries are shown
+     * @protected
+     */
+    this._allCountriesLabel = '';
+    /**
+     * Group label for preferred countries, when preferredCountries are shown
+     * @protected
+     */
+    this._preferredCountriesLabel = '';
 
     /** @type {HTMLDivElement} */
     this.__dropdownRenderParent = document.createElement('div');

packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -112,7 +112,11 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
             },
             refs: {
               dropdown: {
-                labels: { selectCountry: 'Select country' },
+                labels: {
+                  selectCountry: 'Select country',
+                  allCountries: 'All countries',
+                  preferredCountries: 'Suggested countries',
+                },
                 listeners: {
                   // @ts-expect-error [allow-protected]
                   change: el._onDropdownValueChange,
@@ -125,6 +129,44 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
             },
           }),
         );
+        spy.restore();
+      });
+
+      it('can override "all-countries-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._allCountriesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+
+        expect(templateDataForDropdown.refs.dropdown.labels.allCountries).to.eql('foo');
+        spy.restore();
+      });
+
+      it('can override "preferred-countries-label"', async () => {
+        const el = fixtureSync(html` <${tag}
+          .preferredRegions="${['PH']}"
+          ></${tag}> `);
+        const spy = sinon.spy(
+          /** @type {typeof LionInputTelDropdown} */ (el.constructor).templates,
+          'dropdown',
+        );
+        // @ts-expect-error [allow-protected]
+        el._preferredCountriesLabel = 'foo';
+        await el.updateComplete;
+        const templateDataForDropdown = /** @type {TemplateDataForDropdownInputTel} */ (
+          spy.args[0][0]
+        );
+        expect(templateDataForDropdown.refs.dropdown.labels.preferredCountries).to.eql('foo');
+        spy.restore();
       });
 
       it('syncs dropdown value initially from activeRegion', async () => {

packages/input-tel/index.js

@@ -1,3 +1,4 @@
+export { formatPhoneNumber } from './src/formatters.js';
 export { LionInputTel } from './src/LionInputTel.js';
 export { PhoneNumber } from './src/validators.js';
 export { PhoneUtilManager } from './src/PhoneUtilManager.js';