@lion/input-tel - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

custom-elements.json

@@ -217,2 +217,10 @@ {
               "kind": "field",
+              "name": "formatCountryCodeStyle",
+              "type": {
+                "text": "string"
+              },
+              "description": "Extra styling of the format strategy\ndefault | parentheses"
+            },
+            {
+              "kind": "field",
               "name": "allowedRegions",
@@ -476,2 +484,13 @@ "type": {
               "kind": "field",
+              "name": "formatCountryCodeStyle",
+              "type": {
+                "text": "string"
+              },
+              "description": "Extra styling of the format strategy\ndefault | parentheses",
+              "default": "'default'",
+              "privacy": "public",
+              "attribute": "format-country-code-style"
+            },
+            {
+              "kind": "field",
               "name": "allowedRegions",
@@ -523,2 +542,6 @@ "type": {
             {
+              "name": "format-country-code-style",
+              "fieldName": "formatCountryCodeStyle"
+            },
+            {
               "name": "activeRegion",
@@ -643,2 +666,31 @@ "fieldName": "activeRegion"
           "kind": "function",
+          "name": "getFormatCountryCodeStyle",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "{ regionCode, formatCountryCodeStyle }",
+              "type": {
+                "text": "{\n    regionCode: RegionCode;\n    formatCountryCodeStyle: string;\n}"
+              }
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.formatCountryCodeStyle\n "
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
           "name": "formatPhoneNumber",
@@ -658,5 +710,5 @@ "return": {
             {
-              "name": "{ regionCode, formatStrategy }",
+              "name": "{ regionCode, formatStrategy, formatCountryCodeStyle }",
               "type": {
-                "text": "{\n    regionCode: RegionCode;\n    formatStrategy?: import(\"awesome-phonenumber\").PhoneNumberFormat | undefined;\n}"
+                "text": "{\n    regionCode: RegionCode;\n    formatStrategy?: import(\"awesome-phonenumber\").PhoneNumberFormat | undefined;\n    formatCountryCodeStyle?: string | undefined;\n}"
               }
@@ -667,3 +719,3 @@ },
               "type": {
-                "text": "@param {RegionCode} options.regionCode\n * @param {PhoneNumberFormat} [options.formatStrategy='international']\n * "
+                "text": "@param {RegionCode} options.regionCode\n * @param {PhoneNumberFormat} [options.formatStrategy='international']\n * @param {string} [options.formatCountryCodeStyle='default']\n * "
               }
@@ -677,2 +729,10 @@ }
           "kind": "js",
+          "name": "getFormatCountryCodeStyle",
+          "declaration": {
+            "name": "getFormatCountryCodeStyle",
+            "module": "src/formatters.d.ts"
+          }
+        },
+        {
+          "kind": "js",
           "name": "formatPhoneNumber",
@@ -692,2 +752,23 @@ "declaration": {
           "kind": "function",
+          "name": "getFormatCountryCodeStyle",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "{ regionCode, formatCountryCodeStyle }"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.formatCountryCodeStyle\n "
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
           "name": "formatPhoneNumber",
@@ -702,3 +783,3 @@ "parameters": [
             {
-              "name": "{ regionCode, formatStrategy = 'international' }"
+              "name": "{ regionCode, formatStrategy = 'international', formatCountryCodeStyle = 'default' }"
             },
@@ -708,3 +789,3 @@ {
               "type": {
-                "text": "@param {RegionCode} options.regionCode\n * @param {PhoneNumberFormat} [options.formatStrategy='international']\n * "
+                "text": "@param {RegionCode} options.regionCode\n * @param {PhoneNumberFormat} [options.formatStrategy='international']\n * @param {string} [options.formatCountryCodeStyle='default']\n * "
               }
@@ -723,2 +804,10 @@ }
           "kind": "js",
+          "name": "getFormatCountryCodeStyle",
+          "declaration": {
+            "name": "getFormatCountryCodeStyle",
+            "module": "src/formatters.js"
+          }
+        },
+        {
+          "kind": "js",
           "name": "formatPhoneNumber",
@@ -897,5 +986,5 @@ "declaration": {
             {
-              "name": "{ regionCode, formatStrategy, prevViewValue, currentCaretIndex }",
+              "name": "{ regionCode, formatStrategy, prevViewValue, currentCaretIndex, formatCountryCodeStyle }",
               "type": {
-                "text": "{\n    regionCode: RegionCode;\n    prevViewValue: string;\n    currentCaretIndex: number;\n    formatStrategy: PhoneNumberFormat;\n}"
+                "text": "{\n    regionCode: RegionCode;\n    prevViewValue: string;\n    currentCaretIndex: number;\n    formatStrategy: PhoneNumberFormat;\n    formatCountryCodeStyle?: string | null | undefined;\n}"
               }
@@ -906,3 +995,3 @@ },
               "type": {
-                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.prevViewValue\n * @param {number} options.currentCaretIndex\n * @param {PhoneNumberFormat} options.formatStrategy\n * "
+                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.prevViewValue\n * @param {number} options.currentCaretIndex\n * @param {PhoneNumberFormat} options.formatStrategy\n * @param {string?} [options.formatCountryCodeStyle='default']\n * "
               }
@@ -939,3 +1028,3 @@ }
             {
-              "name": "{ regionCode, formatStrategy, prevViewValue, currentCaretIndex }"
+              "name": "{ regionCode, formatStrategy, prevViewValue, currentCaretIndex, formatCountryCodeStyle }"
             },
@@ -945,3 +1034,3 @@ {
               "type": {
-                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.prevViewValue\n * @param {number} options.currentCaretIndex\n * @param {PhoneNumberFormat} options.formatStrategy\n * "
+                "text": "@param {RegionCode} options.regionCode\n * @param {string} options.prevViewValue\n * @param {number} options.currentCaretIndex\n * @param {PhoneNumberFormat} options.formatStrategy\n * @param {string?} [options.formatCountryCodeStyle='default']\n * "
               }
@@ -948,0 +1037,0 @@ }

docs/overview.md

@@ -41,3 +41,3 @@ # Input Tel >> Overview ||10
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/master/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
@@ -44,0 +44,0 @@ - Can be configured with a list of allowed region codes

docs/use-cases.md

@@ -25,3 +25,3 @@ # Input Tel >> Use Cases ||20
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
@@ -41,7 +41,7 @@
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel/#allowed-regions) if configured)
 
@@ -135,3 +135,3 @@ What follows from the list above is that .activeRegion can change dynamically, after a value
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/master/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
@@ -182,4 +182,6 @@
 
-## Format strategy
+## Format
 
+### Format strategy
+
 Determines what the formatter output should look like.
@@ -230,4 +232,34 @@ Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
 
-## Live format
+### Format country code style
 
+You can also style the country code with parentheses.
+
+```js preview-story
+export const formatCountryCodeStyle = () => {
+  loadDefaultFeedbackMessages();
+  const inputTel = createRef();
+  return html`
+    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
+      <option value="e164">e164</option>
+      <option value="international">international</option>
+      <option value="rfc3966">rfc3966</option>
+    </select>
+    <lion-input-tel
+      ${ref(inputTel)}
+      label="Format strategy"
+      help-text="Choose a strategy above"
+      .modelValue=${'[phone]'}
+      format-country-code-style="parentheses"
+      name="phoneNumber"
+    ></lion-input-tel>
+    <h-output
+      .show="${['modelValue', 'formatStrategy']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```
+
+### Live format
+
 Type '6' in the example below to see how the phone number is formatted during typing.
@@ -234,0 +266,0 @@

package.json

 {
   "name": "@lion/input-tel",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Input field for entering phone numbers, including validation, formatting and mobile keyboard support.",
@@ -41,3 +41,3 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "^0.23.0",
+    "@lion/core": "^0.23.1",
     "@lion/form-core": "^0.18.1",
@@ -44,0 +44,0 @@ "@lion/input": "^0.18.0",

README.md

@@ -41,3 +41,3 @@ # Input Tel >> Overview ||10
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/master/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/5be7776e1e5fe4dbc91c087b36ac615b047d1c66/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
@@ -44,0 +44,0 @@ - Can be configured with a list of allowed region codes

src/formatters.d.ts

@@ -7,2 +7,12 @@ /**
 /**
+ * @param {string} value
+ * @param {object} options
+ * @param {RegionCode} options.regionCode
+ * @param {string} options.formatCountryCodeStyle
+ */
+export function getFormatCountryCodeStyle(value: string, { regionCode, formatCountryCodeStyle }: {
+    regionCode: RegionCode;
+    formatCountryCodeStyle: string;
+}): string;
+/**
  * @param {string} modelValue
@@ -12,7 +22,9 @@ * @param {object} options
  * @param {PhoneNumberFormat} [options.formatStrategy='international']
+ * @param {string} [options.formatCountryCodeStyle='default']
  * @returns {string}
  */
-export function formatPhoneNumber(modelValue: string, { regionCode, formatStrategy }: {
+export function formatPhoneNumber(modelValue: string, { regionCode, formatStrategy, formatCountryCodeStyle }: {
     regionCode: RegionCode;
     formatStrategy?: import("awesome-phonenumber").PhoneNumberFormat | undefined;
+    formatCountryCodeStyle?: string | undefined;
 }): string;
@@ -19,0 +31,0 @@ export type PhoneNumberFormat = import('awesome-phonenumber').PhoneNumberFormat;

src/formatters.js

@@ -10,2 +10,21 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 /**
+ * @param {string} value
+ * @param {object} options
+ * @param {RegionCode} options.regionCode
+ * @param {string} options.formatCountryCodeStyle
+ */
+export function getFormatCountryCodeStyle(value, { regionCode, formatCountryCodeStyle }) {
+  const countryCode = PhoneUtilManager?.PhoneUtil?.getCountryCodeForRegionCode(regionCode);
+  if (
+    formatCountryCodeStyle === 'parentheses' &&
+    countryCode &&
+    value.includes(`+${countryCode}`) &&
+    !value.includes(`(`)
+  ) {
+    return value.replace(`+${countryCode}`, `(+${countryCode})`);
+  }
+  return value;
+}
+
+/**
  * @param {string} modelValue
@@ -15,5 +34,9 @@ * @param {object} options
  * @param {PhoneNumberFormat} [options.formatStrategy='international']
+ * @param {string} [options.formatCountryCodeStyle='default']
  * @returns {string}
  */
-export function formatPhoneNumber(modelValue, { regionCode, formatStrategy = 'international' }) {
+export function formatPhoneNumber(
+  modelValue,
+  { regionCode, formatStrategy = 'international', formatCountryCodeStyle = 'default' },
+) {
   // Do not format when not loaded
@@ -55,6 +78,13 @@ if (!PhoneUtilManager.isLoaded) {
     }
+
+    if (formatCountryCodeStyle !== 'default') {
+      return getFormatCountryCodeStyle(formattedValue, { regionCode, formatCountryCodeStyle });
+    }
     return formattedValue;
   }
 
+  if (formatCountryCodeStyle !== 'default') {
+    return getFormatCountryCodeStyle(modelValue, { regionCode, formatCountryCodeStyle });
+  }
   return modelValue;
 }

src/LionInputTel.d.ts

@@ -8,3 +8,3 @@ declare const LionInputTel_base: typeof LionInput & import("@open-wc/dedupe-mixin").Constructor<import("@lion/localize/types/LocalizeMixinTypes").LocalizeMixinHost> & Pick<typeof import("@lion/localize/types/LocalizeMixinTypes").LocalizeMixinHost, "prototype" | "localizeNamespaces" | "waitForLocalizeNamespaces"> & Pick<typeof import("lit").LitElement, "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "shadowRootOptions">;
  * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
- * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat}} FormatOptionsTel
+ * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
@@ -23,2 +23,6 @@ export class LionInputTel extends LionInputTel_base {
         };
+        formatCountryCodeStyle: {
+            type: StringConstructor;
+            attribute: string;
+        };
         activeRegion: {
@@ -93,2 +97,8 @@ type: StringConstructor;
     /**
+     * Extra styling of the format strategy
+     * default | parentheses
+     * @type {string}
+     */
+    formatCountryCodeStyle: string;
+    /**
      * The regions that should be considered when international phone numbers are detected.
@@ -141,2 +151,3 @@ * (when not configured, all regions worldwide will be considered)
     formatStrategy: PhoneNumberFormat;
+    formatCountryCodeStyle: string;
 };
@@ -143,0 +154,0 @@ import { LionInput } from "@lion/input";

src/LionInputTel.js

@@ -17,3 +17,3 @@ import { Unparseable } from '@lion/form-core';
  * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
- * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat}} FormatOptionsTel
+ * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
@@ -28,2 +28,3 @@
     formatStrategy: { type: String, attribute: 'format-strategy' },
+    formatCountryCodeStyle: { type: String, attribute: 'format-country-code-style' },
     activeRegion: { type: String },
@@ -145,2 +146,9 @@ _phoneUtil: { type: Object, state: true },
     /**
+     * Extra styling of the format strategy
+     * default | parentheses
+     * @type {string}
+     */
+    this.formatCountryCodeStyle = 'default';
+
+    /**
      * The regions that should be considered when international phone numbers are detected.
@@ -214,2 +222,8 @@ * (when not configured, all regions worldwide will be considered)
 
+    if (changedProperties.has('formatCountryCodeStyle')) {
+      this._calculateValues({ source: null });
+      /** @type {FormatOptionsTel} */
+      (this.formatOptions).formatCountryCodeStyle = this.formatCountryCodeStyle;
+    }
+
     if (changedProperties.has('modelValue') || changedProperties.has('allowedRegions')) {
@@ -246,2 +260,3 @@ this.__calculateActiveRegion();
       formatStrategy: this.formatStrategy,
+      formatCountryCodeStyle: this.formatCountryCodeStyle,
     });
@@ -273,2 +288,3 @@ }
       formatStrategy: this.formatStrategy,
+      formatCountryCodeStyle: this.formatCountryCodeStyle,
       currentCaretIndex,
@@ -322,3 +338,6 @@ prevViewValue,
     // 2. Try to derive action region from user value
-    const value = !(this.modelValue instanceof Unparseable) ? this.modelValue : this.value;
+    const regex = /[+0-9]+/gi;
+    const value = !(this.modelValue instanceof Unparseable)
+      ? this.modelValue
+      : this.value.match(regex)?.join('');
     const regionDerivedFromValue = value && this._phoneUtil && this._phoneUtil(value).g?.regionCode;
@@ -325,0 +344,0 @@

src/parsers.js

@@ -21,6 +21,7 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
   const PhoneNumber = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
-
+  const regex = /[+0-9]+/gi;
+  const strippedViewValue = viewValue.match(regex)?.join('');
   let pn;
   try {
-    pn = PhoneNumber(viewValue, regionCode);
+    pn = PhoneNumber(strippedViewValue, regionCode);
     // eslint-disable-next-line no-empty
@@ -27,0 +28,0 @@ } catch (_) {}

src/preprocessors.d.ts

@@ -13,5 +13,6 @@ /**
  * @param {PhoneNumberFormat} options.formatStrategy
+ * @param {string?} [options.formatCountryCodeStyle='default']
  * @returns {{viewValue:string; caretIndex:number;}|undefined}
  */
-export function liveFormatPhoneNumber(viewValue: string, { regionCode, formatStrategy, prevViewValue, currentCaretIndex }: {
+export function liveFormatPhoneNumber(viewValue: string, { regionCode, formatStrategy, prevViewValue, currentCaretIndex, formatCountryCodeStyle }: {
     regionCode: RegionCode;
@@ -21,2 +22,3 @@ prevViewValue: string;
     formatStrategy: PhoneNumberFormat;
+    formatCountryCodeStyle?: string | null | undefined;
 }): {
@@ -23,0 +25,0 @@ viewValue: string;

src/preprocessors.js

@@ -0,3 +1,3 @@
+import { formatPhoneNumber, getFormatCountryCodeStyle } from './formatters.js';
 import { PhoneUtilManager } from './PhoneUtilManager.js';
-import { formatPhoneNumber } from './formatters.js';
 
@@ -17,2 +17,3 @@ /**
  * @param {PhoneNumberFormat} options.formatStrategy
+ * @param {string?} [options.formatCountryCodeStyle='default']
  * @returns {{viewValue:string; caretIndex:number;}|undefined}
@@ -22,3 +23,3 @@ */
   viewValue,
-  { regionCode, formatStrategy, prevViewValue, currentCaretIndex },
+  { regionCode, formatStrategy, prevViewValue, currentCaretIndex, formatCountryCodeStyle },
 ) {
@@ -41,3 +42,8 @@ const diff = viewValue.length - prevViewValue.length;
 
-  const newViewValue = formatPhoneNumber(ayt.number(), { regionCode, formatStrategy });
+  let parenthesesAdded = false;
+  let newViewValue = formatPhoneNumber(ayt.number(), { regionCode, formatStrategy });
+  if (formatCountryCodeStyle === 'parentheses' && regionCode && !newViewValue.includes(`(`)) {
+    newViewValue = getFormatCountryCodeStyle(newViewValue, { regionCode, formatCountryCodeStyle });
+    parenthesesAdded = true;
+  }
 
@@ -51,5 +57,14 @@ /**
    */
+  const countryCode = PhoneUtilManager?.PhoneUtil?.getCountryCodeForRegionCode(regionCode);
   const diffBetweenNewAndCurrent = newViewValue.length - viewValue.length;
-  const newCaretIndex = currentCaretIndex + diffBetweenNewAndCurrent;
+  let newCaretIndex = currentCaretIndex + diffBetweenNewAndCurrent;
+  if (
+    parenthesesAdded &&
+    countryCode &&
+    viewValue.length > countryCode.toString().length + 1 &&
+    currentCaretIndex <= countryCode.toString().length + 1
+  ) {
+    newCaretIndex -= 2;
+  }
   return newViewValue ? { viewValue: newViewValue, caretIndex: newCaretIndex } : undefined;
 }

test-suites/LionInputTel.suite.js

@@ -13,2 +13,3 @@ import {
 import { localize } from '@lion/localize';
+import { Unparseable } from '@lion/form-core';
 import { LionInputTel } from '../src/LionInputTel.js';
@@ -107,2 +108,24 @@ import { PhoneNumber } from '../src/validators.js';
 
+    it('deducts it from value when modelValue is unparseable', async () => {
+      const modelValue = new Unparseable('+316');
+      const el = await fixture(html` <${tag} .modelValue=${modelValue}></${tag}> `);
+      if (resolvePhoneUtilLoaded) {
+        resolvePhoneUtilLoaded(undefined);
+        await el.updateComplete;
+      }
+      // Region code for country code '31' is 'NL'
+      expect(el.activeRegion).to.equal('NL');
+    });
+
+    it('deducts it from value when modelValue is unparseable and contains parentheses', async () => {
+      const modelValue = new Unparseable('(+31)6');
+      const el = await fixture(html` <${tag} .modelValue=${modelValue}></${tag}> `);
+      if (resolvePhoneUtilLoaded) {
+        resolvePhoneUtilLoaded(undefined);
+        await el.updateComplete;
+      }
+      // Region code for country code '31' is 'NL'
+      expect(el.activeRegion).to.equal('NL');
+    });
+
     // 3. **locale**: try to get the region from locale (`html[lang]` attribute)
@@ -275,2 +298,12 @@ it('automatically bases it on current locale when nothing preconfigured', async () => {
         });
+
+        it('formats according to formatCountryCodeStyle', async () => {
+          const el = await fixture(
+            html` <${tag} format-country-code-style="parentheses" .modelValue="${'[phone]'}" .allowedRegions="${[
+              'NL',
+            ]}"></${tag}> `,
+          );
+          await aTimeout(0);
+          expect(el.formattedValue).to.equal('([phone]');
+        });
       });
@@ -277,0 +310,0 @@

test/formatters.test.js

@@ -28,2 +28,40 @@ import { expect } from '@open-wc/testing';
   });
+
+  it('formats a phone number according to provided formatCountryCodeStyle', () => {
+    expect(
+      formatPhoneNumber('0707123456', {
+        regionCode: 'SE',
+        formatStrategy: 'e164',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('([phone]');
+    expect(
+      formatPhoneNumber('[phone]', {
+        regionCode: 'SE',
+        formatStrategy: 'international',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('([phone]');
+    expect(
+      formatPhoneNumber('[phone]', {
+        regionCode: 'SE',
+        formatStrategy: 'national',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('070-712 34 56');
+    expect(
+      formatPhoneNumber('[phone]', {
+        regionCode: 'SE',
+        formatStrategy: 'rfc3966',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('tel:[phone]');
+    expect(
+      formatPhoneNumber('[phone]', {
+        regionCode: 'SE',
+        formatStrategy: 'significant',
+        formatCountryCodeStyle: 'parentheses',
+      }),
+    ).to.equal('707123456');
+  });
 });

test/parsers.test.js

@@ -16,2 +16,10 @@ import { expect } from '@open-wc/testing';
   });
+
+  it('removes unwanted characters', () => {
+    expect(parsePhoneNumber('([phone]', { regionCode: 'NL' })).to.equal('[phone]');
+    expect(parsePhoneNumber('[phone]', { regionCode: 'NL' })).to.equal('[phone]');
+    expect(parsePhoneNumber('[phone]', { regionCode: 'NL' })).to.equal('[phone]');
+    expect(parsePhoneNumber('+31|70|7123456', { regionCode: 'NL' })).to.equal('[phone]');
+    expect(parsePhoneNumber('tel:[phone]', { regionCode: 'NL' })).to.equal('[phone]');
+  });
 });

test/preprocessors.test.js

@@ -19,3 +19,3 @@ import { expect } from '@open-wc/testing';
       }),
-    ).to.eql({ viewValue: '+31 6 123', caretIndex: 4 });
+    ).to.eql({ caretIndex: 4, viewValue: '+31 6 123' });
   });
@@ -33,2 +33,52 @@
   });
+
+  describe('with formatCountryCodeStyle is set to parantheses', () => {
+    it('live formats an incomplete view value', () => {
+      expect(
+        liveFormatPhoneNumber('+316123', {
+          regionCode: 'NL',
+          formatStrategy: 'international',
+          prevViewValue: '+31613',
+          currentCaretIndex: 5,
+          formatCountryCodeStyle: 'parentheses',
+        }),
+      ).to.eql({ caretIndex: 9, viewValue: '(+31) 6 123' });
+    });
+
+    it('live formats a complete view value', () => {
+      expect(
+        liveFormatPhoneNumber('[phone]', {
+          regionCode: 'NL',
+          formatStrategy: 'international',
+          prevViewValue: '[phone]',
+          currentCaretIndex: 10,
+          formatCountryCodeStyle: 'parentheses',
+        }),
+      ).to.eql({ caretIndex: 14, viewValue: '([phone]' });
+    });
+
+    it('does not update if parentheses are already in place', () => {
+      expect(
+        liveFormatPhoneNumber('(+31)6123', {
+          regionCode: 'NL',
+          formatStrategy: 'international',
+          prevViewValue: '(+31)123',
+          currentCaretIndex: 5,
+          formatCountryCodeStyle: 'parentheses',
+        }),
+      ).to.eql({ caretIndex: 5, viewValue: '(+31)6123' });
+    });
+
+    it('sets the correct caretIndex if currentCaretIndex in between the countryCode', () => {
+      expect(
+        liveFormatPhoneNumber('+316123', {
+          regionCode: 'NL',
+          formatStrategy: 'international',
+          prevViewValue: '+36123',
+          currentCaretIndex: 2,
+          formatCountryCodeStyle: 'parentheses',
+        }),
+      ).to.eql({ caretIndex: 4, viewValue: '(+31) 6 123' });
+    });
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

148328

increased by9.06%

Lines of code

4513

increased by7.02%

Dependency changes

• Updated@lion/core@^0.23.1