@lion/ui 0.6.1 → 0.7.1

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/helpers/src/SbActionLogger.js

@@ -126,6 +126,7 @@ export class SbActionLogger extends LitElement {
 
   constructor() {
     super();
+    // eslint-disable-next-line wc/no-constructor-attributes
     this.title = 'Action Logger';
     this.simple = false;
     this.__logCounter = 0;

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-date/src/LionInputDate.js

@@ -21,7 +21,7 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
     /**
      * @param {string} value
      */
-    this.parser = value => (value === '' ? undefined : parseDate(value));
+    this.parser = value => (value === '' ? undefined : parseDate(value, this.formatOptions));
     this.formatter = formatDate;
     this.defaultValidators.push(new IsDate());
     // Just explicitly make clear we shouldn't use type 'date'

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/date/getDateFormatBasedOnLocale.js

@@ -3,9 +3,10 @@ import { splitDate } from './utils/splitDate.js';
 
 /**
  * To compute the localized date format
+ * @param {string} [locale]
  * @returns {string}
  */
-export function getDateFormatBasedOnLocale() {
+export function getDateFormatBasedOnLocale(locale) {
   /**
    *
    * @param {ArrayLike.<string>} dateParts
@@ -35,9 +36,9 @@ export function getDateFormatBasedOnLocale() {
   date.setDate(20);
   date.setMonth(11);
   date.setFullYear(2012);
-
+  const options = locale ? { locale } : {};
   // Strange characters added by IE11 need to be taken into account here
-  const formattedDate = sanitizedDateTimeFormat(date);
+  const formattedDate = sanitizedDateTimeFormat(date, options);
 
   // For Dutch locale, dateParts would match: [ 1:'20', 2:'-', 3:'12', 4:'-', 5:'2012' ]
   const dateParts = splitDate(formattedDate);

package/components/localize/src/date/parseDate.js

@@ -2,6 +2,10 @@ import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
 import { getLocalizeManager } from '../getLocalizeManager.js';
 import { addLeadingZero } from './utils/addLeadingZero.js';
 
+/**
+ * @typedef {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} FormatDateOptions
+ */
+
 /**
  * @param {function} fn
  */
@@ -26,15 +30,16 @@ const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
  * To parse a date into the right format
  *
  * @param {string} dateString
+ * @param {FormatDateOptions} [options] Intl options are available
  * @returns {Date | undefined}
  */
-export function parseDate(dateString) {
+export function parseDate(dateString, options) {
   const localizeManager = getLocalizeManager();
 
   const stringToParse = addLeadingZero(dateString);
   let parsedString;
 
-  switch (memoizedGetDateFormatBasedOnLocale(localizeManager.locale)) {
+  switch (memoizedGetDateFormatBasedOnLocale(options?.locale || localizeManager.locale)) {
     case 'day-month-year':
       parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
         3,

package/components/localize/src/date/utils/sanitizedDateTimeFormat.js

@@ -5,9 +5,10 @@ import { clean } from './clean.js';
  * To sanitize a date from IE11 handling
  *
  * @param {Date} date
+ * @param {import('../../../types/LocalizeMixinTypes.js').FormatDateOptions} [options] Intl options are available
  * @returns {string}
  */
-export function sanitizedDateTimeFormat(date) {
-  const fDate = formatDate(date);
+export function sanitizedDateTimeFormat(date, options) {
+  const fDate = formatDate(date, options);
   return clean(fDate);
 }

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/date/getDateFormatBasedOnLocale.test.js

@@ -7,15 +7,19 @@ import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 describe('getDateFormatBasedOnLocale()', () => {
   const localizeManager = getLocalizeManager();
-
   beforeEach(() => {
     localizeTearDown();
   });
 
-  it('returns the positions of day, month and year', async () => {
+  it('returns the positions of day, month and year with locale set globally', async () => {
     localizeManager.locale = 'en-GB';
     expect(getDateFormatBasedOnLocale()).to.equal('day-month-year');
     localizeManager.locale = 'en-US';
     expect(getDateFormatBasedOnLocale()).to.equal('month-day-year');
   });
+
+  it('returns the positions of day, month and year with given locale', async () => {
+    expect(getDateFormatBasedOnLocale('en-GB')).to.equal('day-month-year');
+    expect(getDateFormatBasedOnLocale('en-US')).to.equal('month-day-year');
+  });
 });

package/components/localize/test/date/parseDate.test.js

@@ -51,13 +51,20 @@ describe('parseDate()', () => {
     expect(equalsDate(parseDate('14.12.1976 r.'), new Date('1976/12/14'))).to.equal(true);
   });
 
-  it('handles different locales', () => {
+  it('handles different locales globally set', () => {
     localizeManager.locale = 'en-GB';
     expect(equalsDate(parseDate('31-12-1976'), new Date('1976/12/31'))).to.equal(true);
     localizeManager.locale = 'en-US';
     expect(equalsDate(parseDate('12-31-1976'), new Date('1976/12/31'))).to.equal(true);
   });
 
+  it('handles different locales as option', () => {
+    const optionEnGb = { locale: 'en-GB' };
+    expect(equalsDate(parseDate('31-12-1976', optionEnGb), new Date('1976/12/31'))).to.equal(true);
+    const optionEnUs = { locale: 'en-US' };
+    expect(equalsDate(parseDate('12-31-1976', optionEnUs), new Date('1976/12/31'))).to.equal(true);
+  });
+
   it('handles timezones of the browser and parsed date correctly', () => {
     const referenceDate = new Date('2020/01/30');
     localizeManager.locale = 'nl-NL';

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;
     }
 
@@ -485,6 +485,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       return;
     }
 
+    this._isHandlingUserInput = true;
+    setTimeout(() => {
+      // Since we can't control when subclasses are done handling keyboard input, we
+      // schedule a timeout to reset _isHandlingUserInput
+      this._isHandlingUserInput = false;
+    });
+
     const { key } = ev;
     switch (key) {
       case 'ArrowUp':