@lion/ui 0.6.1 → 0.7.0

package/components/core/src/browserDetection.js

@@ -1,17 +1,27 @@
+import { isServer } from 'lit';
+
 /**
  * From https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
- * @param {string} [flavor]
+ * @param {string} [flavor='google-chrome']
  */
 function checkChrome(flavor = 'google-chrome') {
-  const isChromium = /** @type {window & { chrome?: boolean}} */ (window).chrome;
+  if (isServer) {
+    return flavor === 'google-chrome';
+  }
+
+  const isChromium = /** @type {window & { chrome?: boolean}} */ (globalThis).chrome;
+
   if (flavor === 'chromium') {
     return isChromium;
   }
-  const winNav = window.navigator;
-  const vendorName = winNav.vendor;
-  const isOpera = typeof (/** @type {window & { opr?: boolean}} */ (window).opr) !== 'undefined';
-  const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
-  const isIOSChrome = winNav.userAgent.match('CriOS');
+  const winNav = globalThis.navigator;
+  const vendorName = winNav?.vendor;
+  const isOpera =
+    typeof (/** @type {window & { opr?: boolean}} */ (globalThis).opr) !== 'undefined';
+  // @ts-ignore
+  const isIEedge = globalThis.userAgent?.indexOf('Edge') > -1;
+  // @ts-ignore
+  const isIOSChrome = globalThis.userAgent?.match('CriOS');
 
   if (flavor === 'ios') {
     return isIOSChrome;
@@ -31,18 +41,18 @@ function checkChrome(flavor = 'google-chrome') {
 }
 
 export const browserDetection = {
-  isIE11: /Trident/.test(window.navigator.userAgent),
+  isIE11: /Trident/.test(globalThis.navigator?.userAgent),
   isChrome: checkChrome(),
   isIOSChrome: checkChrome('ios'),
   isChromium: checkChrome('chromium'),
-  isFirefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
-  isMac: navigator.appVersion.indexOf('Mac') !== -1,
-  isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent),
+  isFirefox: globalThis.navigator?.userAgent.toLowerCase().indexOf('firefox') > -1,
+  isMac: globalThis.navigator?.appVersion?.indexOf('Mac') !== -1,
+  isIOS: /iPhone|iPad|iPod/i.test(globalThis.navigator?.userAgent),
   isMacSafari:
-    navigator.vendor &&
-    navigator.vendor.indexOf('Apple') > -1 &&
-    navigator.userAgent &&
-    navigator.userAgent.indexOf('CriOS') === -1 &&
-    navigator.userAgent.indexOf('FxiOS') === -1 &&
-    navigator.appVersion.indexOf('Mac') !== -1,
+    globalThis.navigator?.vendor &&
+    globalThis.navigator?.vendor.indexOf('Apple') > -1 &&
+    globalThis.navigator?.userAgent &&
+    globalThis.navigator?.userAgent.indexOf('CriOS') === -1 &&
+    globalThis.navigator?.userAgent.indexOf('FxiOS') === -1 &&
+    globalThis.navigator?.appVersion.indexOf('Mac') !== -1,
 };

package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -666,7 +666,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
 
         await triggerFocusFor(hobbyInputNode);
         await triggerFocusFor(genderInputNode);
-        const button = /**  @type {FormGroup} */ (await fixture(html`<button></button>`));
+        const button = /**  @type {FormGroup} */ (await fixture(html`<button>Button</button>`));
         button.focus();
 
         expect(el.touched).to.be.true;

package/components/input-amount/src/parsers.js

@@ -11,7 +11,8 @@ import { parseNumber, getFractionDigits } from '@lion/ui/localize-no-side-effect
  * @return {number} new value with rounded up decimals
  */
 function round(value, decimals) {
-  if (typeof decimals === 'undefined') {
+  const numberContainsExponent = value?.toString().includes('e');
+  if (typeof decimals === 'undefined' || numberContainsExponent) {
     return Number(value);
   }
   return Number(`${Math.round(Number(`${value}e${decimals}`))}e-${decimals}`);
@@ -30,10 +31,17 @@ function round(value, decimals) {
  * @param {FormatOptions} [givenOptions] Locale Options
  */
 export function parseAmount(value, givenOptions) {
+  const unmatchedInput = value.match(/[^0-9,.\- ]/g);
+  // for the full paste behavior documentation:
+  // ./docs/components/input-amount/use-cases.md#paste-behavior
+  if (unmatchedInput && givenOptions?.mode !== 'pasted') {
+    return undefined;
+  }
+
   const number = parseNumber(value, givenOptions);
 
-  if (typeof number !== 'number') {
-    return number;
+  if (typeof number !== 'number' || Number.isNaN(number)) {
+    return undefined;
   }
 
   /** @type {FormatOptions} */

package/components/input-amount/test/formatters.test.js

@@ -74,4 +74,15 @@ describe('formatAmount()', () => {
     localizeManager.locale = 'nl-NL';
     expect(formatAmount(12345678)).to.equal('12.345.678,00');
   });
+
+  // TODO: make it work with big numbers, e.g. make use of BigInt
+  it.skip('rounds up big numbers', async () => {
+    expect(formatAmount(1e21, { locale: 'en-GB', currency: 'EUR' })).to.equal(
+      '1,000,000,000,000,000,000,000.00',
+    );
+    // eslint-disable-next-line no-loss-of-precision
+    expect(formatAmount(12345678987654321.42, { locale: 'en-GB', currency: 'EUR' })).to.equal(
+      '12,345,678,987,654,321.42',
+    );
+  });
 });

package/components/input-amount/test/parsers.test.js

@@ -1,11 +1,20 @@
 import { expect } from '@open-wc/testing';
-import { localize } from '@lion/ui/localize.js';
-
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { parseAmount } from '@lion/ui/input-amount.js';
 
 describe('parseAmount()', async () => {
+  const localizeManager = getLocalizeManager();
+
+  beforeEach(() => {
+    localizeManager.locale = 'en-GB';
+  });
+
+  afterEach(() => {
+    localizeTearDown();
+  });
+
   it('with currency set to correct amount of decimals', async () => {
-    localize.locale = 'en-GB';
     expect(
       parseAmount('1.015', {
         currency: 'EUR',
@@ -29,7 +38,26 @@ describe('parseAmount()', async () => {
   });
 
   it('with no currency keeps all decimals', async () => {
-    localize.locale = 'en-GB';
     expect(parseAmount('1.015')).to.equal(1.015);
   });
+
+  // TODO: make it work with big numbers, e.g. make use of BigInt
+  it.skip('rounds up big numbers', async () => {
+    // eslint-disable-next-line no-loss-of-precision
+    expect(parseAmount('999999999999999999999,42')).to.equal(999999999999999999999.42);
+    // eslint-disable-next-line no-loss-of-precision
+    expect(parseAmount('12,345,678,987,654,321.42')).to.equal(12345678987654321.42);
+  });
+
+  it('returns undefined if an invalid value is entered', async () => {
+    expect(parseAmount('foo')).to.equal(undefined);
+    expect(parseAmount('foo1')).to.equal(undefined);
+    expect(parseAmount('EUR 1,50')).to.equal(undefined);
+    expect(parseAmount('--1')).to.equal(undefined);
+  });
+
+  it('ignores letters when "pasted" mode used', async () => {
+    expect(parseAmount('foo1', { mode: 'pasted' })).to.equal(1);
+    expect(parseAmount('EUR 1,50', { mode: 'pasted' })).to.equal(1.5);
+  });
 });

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

@@ -100,6 +100,7 @@ export class LionInputTelDropdown extends LionInputTel {
             localizeManager.msg('lion-input-tel:suggestedCountries'),
         },
       },
+      input: this._inputNode,
     };
 
     return {
@@ -357,19 +358,6 @@ export class LionInputTelDropdown extends LionInputTel {
         }
       }
     }
-
-    // Put focus on text box
-    //
-    // A LionSelectRich with interactionMode set on windows/linux
-    // will set each item on arrow key up/down to activeElement
-    // which causes the focus to jump every time to the inputNode
-    const overlayController = dropdownElement._overlayCtrl;
-    // @ts-ignore interactionMode only exists on LionSelectRich not on HTMLSelectElement
-    if (overlayController?.isShown && dropdownElement.interactionMode !== 'windows/linux') {
-      setTimeout(() => {
-        this._inputNode.focus();
-      });
-    }
   }
 
   /**

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

@@ -152,6 +152,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
                 props: { style: 'height: 100%;' },
                 ref: { value: dropdownNode },
               },
+              // @ts-expect-error [allow-protected]
+              input: el._inputNode,
             },
           }),
         );

package/components/input-tel-dropdown/types/index.ts

@@ -36,6 +36,7 @@ export type TemplateDataForDropdownInputTel = {
       };
       labels: { selectCountry: string };
     };
+    input: HTMLInputElement;
   };
   data: {
     activeRegion: string | undefined;

package/components/localize/src/number/formatNumber.js

@@ -26,7 +26,7 @@ export function formatNumber(number, options = /** @type {FormatOptions} */ ({})
   }
   let printNumberOfParts = '';
   // update numberOfParts because there may be some parts added
-  const numberOfParts = formattedToParts && formattedToParts.length;
+  const numberOfParts = formattedToParts ? formattedToParts.length : 0;
   for (let i = 0; i < numberOfParts; i += 1) {
     const part = /** @type {FormatNumberPart} */ (formattedToParts[i]);
     printNumberOfParts += part.value;

package/components/localize/test/number/formatNumber.test.js

@@ -246,6 +246,15 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     });
   });
 
+  // TODO: make it work with big numbers, e.g. make use of BigInt
+  it.skip('can handle big numbers', async () => {
+    expect(formatNumber(1e21)).to.equal('1,000,000,000,000,000,000,000');
+    // eslint-disable-next-line no-loss-of-precision
+    expect(formatNumber(999999999999999999999.42)).to.equal('999,999,999,999,999,999,999.42');
+    // eslint-disable-next-line no-loss-of-precision
+    expect(formatNumber(12345678987654321.42)).to.equal('12,345,678,987,654,321.42');
+  });
+
   describe('normalization', () => {
     describe('en-GB', () => {
       it('supports basics', () => {

package/components/overlays/test/local-positioning.test.js

@@ -75,7 +75,7 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div role="button" style="width: 20px; height: 10px; background: orange;"></div>
+            <div role="button" style="width: 20px; height: 10px; background: orange;">Button</div>
           `)
         ),
       });
@@ -104,11 +104,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
       });
@@ -129,11 +127,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {
@@ -185,11 +181,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {
@@ -257,11 +251,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {

package/components/overlays/test/utils-tests/contain-focus.test.js

@@ -25,7 +25,7 @@ function simulateTabInWindow(elToRecieveFocus) {
 
 const interactionElementsNode = renderLitAsNode(html`
   <div>
-    <button id="el1"></button>
+    <button id="el1">Button</button>
     <a id="el2" href="#">foo</a>
     <div id="el3" tabindex="0"></div>
     <input id="el4" />
@@ -50,7 +50,7 @@ const lightDomAutofocusTemplate = html`
     <button id="outside-1">outside 1</button>
 
     <div id="rootElement">
-      <button id="el1"></button>
+      <button id="el1">Button</button>
       <a id="el2" href="#">foo</a>
       <div id="el3" tabindex="0"></div>
       <input id="el4" autofocus />

package/components/overlays/test/utils-tests/deep-contains.test.js

@@ -17,7 +17,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );
@@ -65,7 +65,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement} ${shadowElement2}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );
@@ -101,7 +101,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );

package/components/overlays/test/utils-tests/get-focusable-elements.test.js

@@ -135,7 +135,7 @@ describe('getFocusableElements()', () => {
       class extends LitElement {
         render() {
           return html`
-            <button id="el-a-1"></button>
+            <button id="el-a-1">Button</button>
 
             <element-b marker="marker-1"></element-b>
 

package/components/select-rich/src/LionSelectRich.js

@@ -477,7 +477,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   // TODO: rename to _onKeyUp in v1
   __onKeyUp(ev) {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       return;
     }
 

package/components/select-rich/test/lion-select-rich-interaction.test.js

@@ -7,6 +7,7 @@ import '@lion/ui/define/lion-option.js';
 
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
+import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
 
 /**
  * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich
@@ -23,32 +24,6 @@ function mimicKeyPress(el, key, code = '') {
   el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
 }
 
-/**
- * @param {LionSelectRich} lionSelectEl
- */
-function getNodes(lionSelectEl) {
-  const {
-    // @ts-ignore protected members allowed in test
-    _invokerNode: invoker,
-    // @ts-ignore protected members allowed in test
-    _feedbackNode: feedback,
-    // @ts-ignore protected members allowed in test
-    _labelNode: label,
-    // @ts-ignore protected members allowed in test
-    _helpTextNode: helpText,
-    // @ts-ignore protected members allowed in test
-    _listboxNode: listbox,
-    // @ts-ignore protected members allowed in test
-  } = lionSelectEl;
-  return {
-    invoker,
-    feedback,
-    label,
-    helpText,
-    listbox,
-  };
-}
-
 describe('lion-select-rich interactions', () => {
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
@@ -187,8 +162,8 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      expect(invoker.tabIndex).to.equal(-1);
+      const { _invokerNode } = getSelectRichMembers(el);
+      expect(_invokerNode.tabIndex).to.equal(-1);
     });
 
     it('cannot be opened via click if disabled', async () => {
@@ -199,8 +174,9 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      invoker.click();
+      const { _invokerNode, _overlayCtrl } = getSelectRichMembers(el);
+      _invokerNode.click();
+      await _overlayCtrl._showComplete;
       expect(el.opened).to.be.false;
     });
 
@@ -212,11 +188,11 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      expect(invoker.hasAttribute('disabled')).to.be.true;
+      const { _invokerNode } = getSelectRichMembers(el);
+      expect(_invokerNode.hasAttribute('disabled')).to.be.true;
       el.removeAttribute('disabled');
       await el.updateComplete;
-      expect(invoker.hasAttribute('disabled')).to.be.false;
+      expect(_invokerNode.hasAttribute('disabled')).to.be.false;
     });
   });
 
@@ -232,10 +208,10 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
+      const { _invokerNode } = getSelectRichMembers(el);
       expect(el.touched).to.be.false;
-      await triggerFocusFor(invoker);
-      await triggerBlurFor(invoker);
+      await triggerFocusFor(_invokerNode);
+      await triggerBlurFor(_invokerNode);
       expect(el.touched).to.be.true;
     });
   });
@@ -252,21 +228,21 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
+      const { _invokerNode } = getSelectRichMembers(el);
       const options = el.formElements;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('false');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false');
 
       options[0].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('true');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('true');
 
       options[1].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('false');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false');
     });
   });
 });

package/components/select-rich/test/lion-select-rich.test.js

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LionOption } from '@lion/ui/listbox.js';
-import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
 import { OverlayController } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import { LionSelectInvoker, LionSelectRich } from '@lion/ui/select-rich.js';
@@ -17,6 +16,7 @@ import {
   nextFrame,
   unsafeStatic,
 } from '@open-wc/testing';
+import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
 
 /**
  * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions
@@ -24,19 +24,6 @@ import {
  * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  */
 
-/**
- * @param { LionSelectRich } el
- */
-function getSelectRichMembers(el) {
-  const obj = getListboxMembers(el);
-  // eslint-disable-next-line no-return-assign
-  return {
-    ...obj,
-    // @ts-ignore [allow-protected] in test
-    ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl },
-  };
-}
-
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
@@ -329,6 +316,21 @@ describe('lion-select-rich', () => {
       expect(elSingleoption.opened).to.be.false;
     });
 
+    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => {
+      const elReadOnly = await fixture(html`
+        <lion-select-rich readonly>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+
+      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      expect(elReadOnly.opened).to.be.false;
+
+      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      expect(elReadOnly.opened).to.be.false;
+    });
+
     it('sets inheritsReferenceWidth to min by default', async () => {
       const el = await fixture(html`
         <lion-select-rich name="favoriteColor" label="Favorite color">

package/components/select-rich/test-helpers/getSelectRichMembers.js

@@ -0,0 +1,18 @@
+import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+
+/**
+ * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich
+ */
+
+/**
+ * @param { LionSelectRich } el
+ */
+export function getSelectRichMembers(el) {
+  const obj = getListboxMembers(el);
+  // eslint-disable-next-line no-return-assign
+  return {
+    ...obj,
+    // @ts-ignore [allow-protected] in test
+    ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl },
+  };
+}