@lion/ui 0.21.0 → 0.21.1

package/README.md

@@ -37,7 +37,7 @@
   <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible and flexible Web Components.!**
+**Lion is a set of highly performant, accessible and flexible Web Components!**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 

package/components/input-tel/src/LionInputTel.js

@@ -1,4 +1,3 @@
-import { Unparseable } from '@lion/ui/form-core.js';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { LionInput } from '@lion/ui/input.js';
 
@@ -325,9 +324,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
 
     // 2. Try to derive action region from user value
     const regex = /[+0-9]+/gi;
-    const value = !(this.modelValue instanceof Unparseable)
-      ? this.modelValue
-      : this.value.match(regex)?.join('');
+    const value = this.value.match(regex)?.join('');
     const regionDerivedFromValue =
       value && this._phoneUtil && this._phoneUtil.parsePhoneNumber(value).regionCode;
 

package/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -1,5 +1,8 @@
 import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
-import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
+import {
+  runInputTelDropdownSuite,
+  runInputTelDropdownParenthesesSuite,
+} from '@lion/ui/input-tel-dropdown-test-suites.js';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
 import { aTimeout, expect, fixture } from '@open-wc/testing';
@@ -63,6 +66,7 @@ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDr
 // @ts-expect-error
 runInputTelSuite({ klass: LionInputTelDropdown });
 runInputTelDropdownSuite();
+runInputTelDropdownParenthesesSuite();
 
 describe('WithFormControlInputTelDropdown', () => {
   // @ts-expect-error

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js

@@ -0,0 +1,90 @@
+/**
+ * The tests suites for the components that have `this.formatCountryCodeStyle = 'parentheses';`
+ */
+
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import { sendKeys, selectOption } from '@web/test-runner-commands';
+import {
+  expect,
+  defineCE,
+  unsafeStatic,
+  fixture as _fixture,
+  html,
+  waitUntil,
+} from '@open-wc/testing';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {import('./types.js').TelDropdownConfig} TelDropdownConfig
+ */
+
+const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTelDropdown>} */ (
+  _fixture
+);
+
+/**
+ * @type {TelDropdownConfig}
+ */
+const telDropdownConfig = {
+  getTelDropdownInvokerEl: el => el.querySelector('select'),
+  selectNlOption: async () => {
+    await selectOption({ selector: 'select', value: 'NL' });
+  },
+};
+
+/**
+ * @param {{ klass:LionInputTelDropdown, config: TelDropdownConfig }} config
+ */
+
+export function runInputTelDropdownParenthesesSuite(
+  // @ts-ignore
+  { klass, config } = { klass: LionInputTelDropdown, config: telDropdownConfig },
+) {
+  // @ts-ignore
+  const tagName = defineCE(/** @type {* & HTMLElement} */ (class extends klass {}));
+  const tag = unsafeStatic(tagName);
+
+  describe('LionInputTelDropdown suite with `parentheses`', () => {
+    /**
+     * @type {LionInputTelDropdown}
+     */
+    let el;
+    beforeEach(async () => {
+      // Wait till PhoneUtilManager has been loaded
+      await PhoneUtilManager.loadComplete;
+      el = await fixture(html` <${tag} format-country-code-style="parentheses"></${tag}> `);
+      await el.updateComplete;
+    });
+
+    describe('Dropdown value is in sync with text input', () => {
+      it('should set correct active region when selecting a country from dropdown ', async () => {
+        const dropdownInvoker = config.getTelDropdownInvokerEl(el);
+        // @ts-ignore
+        await waitUntil(() => dropdownInvoker?.checkVisibility());
+        await config.selectNlOption(el);
+        expect(el.activeRegion).to.equal('NL');
+      });
+
+      it('updates dropdown value', async () => {
+        const dropdown = config.getTelDropdownInvokerEl(el);
+        // @ts-ignore
+        await waitUntil(() => dropdown?.checkVisibility());
+        const input = el.querySelector('input');
+        expect(input).to.exist;
+        // @ts-ignore
+        input.value = '';
+        // @ts-ignore
+        input.focus();
+        // @ts-ignore
+        await sendKeys({
+          type: '(+91) 99',
+        });
+        await sendKeys({ press: 'Backspace' });
+        // @ts-ignore
+        expect(input.value).to.equal('(+91) 9');
+        expect(el.activeRegion).to.equal('IN');
+      });
+    });
+  });
+}

package/components/input-tel-dropdown/test-suites/types.ts

@@ -0,0 +1,6 @@
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+
+export type TelDropdownConfig = {
+  getTelDropdownInvokerEl: (el: LionInputTelDropdown) => HTMLElement | null;
+  selectNlOption: (el: LionInputTelDropdown) => Promise<void>;
+};

package/custom-elements.json

@@ -1206,6 +1206,14 @@
             "name": "runInputTelDropdownSuite",
             "module": "../components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "runInputTelDropdownParenthesesSuite",
+          "declaration": {
+            "name": "runInputTelDropdownParenthesesSuite",
+            "module": "../components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js"
+          }
         }
       ]
     },
@@ -2212,6 +2220,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-action-logger.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-action-logger",
+          "declaration": {
+            "name": "SbActionLogger",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-locale-switcher.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-locale-switcher",
+          "declaration": {
+            "name": "SbLocaleSwitcher",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "exports/define/lion-accordion.js",
@@ -2917,36 +2955,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-action-logger.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-action-logger",
-          "declaration": {
-            "name": "SbActionLogger",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-locale-switcher.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-locale-switcher",
-          "declaration": {
-            "name": "SbLocaleSwitcher",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordion/src/LionAccordion.js",
@@ -102546,6 +102554,38 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "runInputTelDropdownParenthesesSuite",
+          "parameters": [
+            {
+              "name": "{ klass, config }",
+              "default": "{ klass: LionInputTelDropdown, config: telDropdownConfig }"
+            },
+            {
+              "name": "config",
+              "type": {
+                "text": "{ klass:LionInputTelDropdown, config: TelDropdownConfig }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "runInputTelDropdownParenthesesSuite",
+          "declaration": {
+            "name": "runInputTelDropdownParenthesesSuite",
+            "module": "components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/input-tel-dropdown/src/getFlagSymbol.js",

package/dist-types/components/input-tel/src/LionInputTel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionInputTel.d.ts","sourceRoot":"","sources":["../../../../components/input-tel/src/LionInputTel.js"],"names":[],"mappings":";AAWA;;;;;;;GAOG;AAEH;;GAEG;AACH;IACE;;OAEG;IACH;;;;;;;;;;;;;;;;;;;;;;MAOE;IAEF,kGAGE;IAgBF,mFAAsB;IAdtB;;;;;;;OAOG;IACH,gFAEC;IAoCD,6CAA+B;IA9B/B;;;;;;;;;;;;;;;;OAgBG;IACH,0CASC;IAMD;;;;OAIG;IACH,qCAFW,UAAU,GAAC,SAAS,QAM9B;IAFC,mEAA8B;IAIhC;;;;OAIG;IACH,qEAMC;IAED;;;;OAIG;IAEH,6DAEC;IAED;;;;OAIG;IAGH,wBAEC;IASC;;;;;OAKG;IACH,gBAFU,iBAAiB,CAEU;IAErC;;;;OAIG;IACH,wBAFU,MAAM,CAEuB;IAEvC;;;;OAIG;IACH,gBAFU,UAAU,EAAE,CAEE;IAExB;;;OAGG;IACH,kBAFU,UAAU,EAAE,CAEI;IAE1B,eAAe;IACf,yCAAyD;IAKzD;;;OAGG;IACH,sBAFU,kBAAkB,GAAC,IAAI,CAIzB;IA0BN,oDAAkD;IAiCpD;;;OAGG;IACH,uEAEC;IAIH;;;;OAIG;IACH,sBAHW,MAAM,GACJ,MAAM,CAQlB;IAED;;;;OAIG;IACH,kBAHW,MAAM,GACJ,MAAM,CAMlB;IAED;;;;;;;OAOG;IACH,wBANW,MAAM;QAEU,aAAa,EAA7B,MAAM;QACU,iBAAiB,EAAjC,MAAM;QACJ;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;KAAE,GAAG,SAAS,CAUlE;IAaD;;OAEG;IACH,0CAOC;IAED;;OAEG;IACH,gCAkCC;CACF;yBArVY,OAAO,mBAAmB,EAAE,UAAU;gCACtC,OAAO,qBAAqB,EAAE,iBAAiB;+BAC/C,OAAO,qBAAqB,EAAE,gBAAgB;4BAC9C,OAAO,2CAA2C,EAAE,aAAa;iCACjE,0CAAiC;+BACjC,aAAa,GAAG;IAAC,UAAU,EAAE,UAAU,CAAC;IAAC,cAAc,EAAE,iBAAiB,CAAC;IAAC,sBAAsB,EAAE,MAAM,CAAC;CAAC"}
+{"version":3,"file":"LionInputTel.d.ts","sourceRoot":"","sources":["../../../../components/input-tel/src/LionInputTel.js"],"names":[],"mappings":";AAUA;;;;;;;GAOG;AAEH;;GAEG;AACH;IACE;;OAEG;IACH;;;;;;;;;;;;;;;;;;;;;;MAOE;IAEF,kGAGE;IAgBF,mFAAsB;IAdtB;;;;;;;OAOG;IACH,gFAEC;IAoCD,6CAA+B;IA9B/B;;;;;;;;;;;;;;;;OAgBG;IACH,0CASC;IAMD;;;;OAIG;IACH,qCAFW,UAAU,GAAC,SAAS,QAM9B;IAFC,mEAA8B;IAIhC;;;;OAIG;IACH,qEAMC;IAED;;;;OAIG;IAEH,6DAEC;IAED;;;;OAIG;IAGH,wBAEC;IASC;;;;;OAKG;IACH,gBAFU,iBAAiB,CAEU;IAErC;;;;OAIG;IACH,wBAFU,MAAM,CAEuB;IAEvC;;;;OAIG;IACH,gBAFU,UAAU,EAAE,CAEE;IAExB;;;OAGG;IACH,kBAFU,UAAU,EAAE,CAEI;IAE1B,eAAe;IACf,yCAAyD;IAKzD;;;OAGG;IACH,sBAFU,kBAAkB,GAAC,IAAI,CAIzB;IA0BN,oDAAkD;IAiCpD;;;OAGG;IACH,uEAEC;IAIH;;;;OAIG;IACH,sBAHW,MAAM,GACJ,MAAM,CAQlB;IAED;;;;OAIG;IACH,kBAHW,MAAM,GACJ,MAAM,CAMlB;IAED;;;;;;;OAOG;IACH,wBANW,MAAM;QAEU,aAAa,EAA7B,MAAM;QACU,iBAAiB,EAAjC,MAAM;QACJ;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;KAAE,GAAG,SAAS,CAUlE;IAaD;;OAEG;IACH,0CAOC;IAED;;OAEG;IACH,gCAgCC;CACF;yBAnVY,OAAO,mBAAmB,EAAE,UAAU;gCACtC,OAAO,qBAAqB,EAAE,iBAAiB;+BAC/C,OAAO,qBAAqB,EAAE,gBAAgB;4BAC9C,OAAO,2CAA2C,EAAE,aAAa;iCACjE,0CAAiC;+BACjC,aAAa,GAAG;IAAC,UAAU,EAAE,UAAU,CAAC;IAAC,cAAc,EAAE,iBAAiB,CAAC;IAAC,sBAAsB,EAAE,MAAM,CAAC;CAAC"}

package/dist-types/components/input-tel-dropdown/test/LionInputTelDropdown.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionInputTelDropdown.test.d.ts","sourceRoot":"","sources":["../../../../components/input-tel-dropdown/test/LionInputTelDropdown.test.js"],"names":[],"mappings":"8CAiBa,OAAO,mBAAmB,EAAE,+BAA+B;8BAC3D,iBAAiB,IAAC,WAAW,GAAG;IAAC,UAAU,EAAC,MAAM,CAAA;CAAC,CAAA;yBACnD,OAAO,mBAAmB,EAAE,UAAU;6BACtC,OAAO,KAAK,EAAE,cAAc"}
+{"version":3,"file":"LionInputTelDropdown.test.d.ts","sourceRoot":"","sources":["../../../../components/input-tel-dropdown/test/LionInputTelDropdown.test.js"],"names":[],"mappings":"8CAoBa,OAAO,mBAAmB,EAAE,+BAA+B;8BAC3D,iBAAiB,IAAC,WAAW,GAAG;IAAC,UAAU,EAAC,MAAM,CAAA;CAAC,CAAA;yBACnD,OAAO,mBAAmB,EAAE,UAAU;6BACtC,OAAO,KAAK,EAAE,cAAc"}

package/dist-types/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @param {{ klass:LionInputTelDropdown, config: TelDropdownConfig }} config
+ */
+export function runInputTelDropdownParenthesesSuite({ klass, config }?: {
+    klass: LionInputTelDropdown;
+    config: TelDropdownConfig;
+}): void;
+export type TemplateResult = import('lit').TemplateResult;
+export type TelDropdownConfig = import('./types.js').TelDropdownConfig;
+import { LionInputTelDropdown } from "../../../exports/input-tel-dropdown.js";
+//# sourceMappingURL=LionInputTelDropdown--parentheses.suite.d.ts.map

package/dist-types/components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LionInputTelDropdown--parentheses.suite.d.ts","sourceRoot":"","sources":["../../../../components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js"],"names":[],"mappings":"AAmCA;;GAEG;AAEH,wEAHW;IAAE,KAAK,EAAC,oBAAoB,CAAC;IAAC,MAAM,EAAE,iBAAiB,CAAA;CAAE,QAqDnE;6BAxEY,OAAO,KAAK,EAAE,cAAc;gCAC5B,OAAO,YAAY,EAAE,iBAAiB"}

package/dist-types/components/input-tel-dropdown/test-suites/types.d.ts

@@ -0,0 +1,6 @@
+import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+export type TelDropdownConfig = {
+    getTelDropdownInvokerEl: (el: LionInputTelDropdown) => HTMLElement | null;
+    selectNlOption: (el: LionInputTelDropdown) => Promise<void>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist-types/components/input-tel-dropdown/test-suites/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/input-tel-dropdown/test-suites/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uBAAuB,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,WAAW,GAAG,IAAI,CAAC;IAC1E,cAAc,EAAE,CAAC,EAAE,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC"}

package/dist-types/exports/input-tel-dropdown-test-suites.d.ts

@@ -1,2 +1,3 @@
 export { runInputTelDropdownSuite } from "../components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js";
+export { runInputTelDropdownParenthesesSuite } from "../components/input-tel-dropdown/test-suites/LionInputTelDropdown--parentheses.suite.js";
 //# sourceMappingURL=input-tel-dropdown-test-suites.d.ts.map