@lion/ui 0.10.1 → 0.11.0

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

@@ -131,7 +131,7 @@ describe('<lion-input-amount>', () => {
     expect(_inputNode.value).to.equal('100.12');
   });
 
-  it('adjusts formats with locale when formatOptions.mode is "user-edited"', async () => {
+  it('formats with locale when formatOptions.mode is "user-edited" and value has three decimal places', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(
         html`<lion-input-amount
@@ -154,6 +154,14 @@ describe('<lion-input-amount>', () => {
     expect(el.modelValue).to.equal(123456);
     expect(el.formattedValue).to.equal('123.456,00');
 
+    // When editing an already existing value, we interpet the separators as they are.
+    // However, only when the decimal places are 3 or more.
+    mimicUserInput(el, '123.456.00');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(123456);
+    expect(el.formattedValue).to.equal('123.456,00');
+
     // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
     // When a user finished editing, the default should be restored.
     // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
@@ -162,6 +170,45 @@ describe('<lion-input-amount>', () => {
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
   });
 
+  it('formats with heuristic when formatOptions.mode is "user-edited" and value has two decimal places', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .modelValue=${64}
+          currency="EUR"
+          .formatOptions="${{ locale: 'en-GB' }}"
+        ></lion-input-amount>`,
+      )
+    );
+    const parserSpy = sinon.spy(el, 'parser');
+    const formatterSpy = sinon.spy(el, 'formatter');
+
+    expect(el.formattedValue).to.equal('64.00');
+    // @ts-expect-error [allow-protected] in test
+    expect(el._inputNode.value).to.equal('64.00');
+
+    // When editing an already existing value, we interpret the separators based on decimal places when there's 1 or
+    // less separator in total (otherwise we would accidentally multiply or divide by 1000)
+    mimicUserInput(el, '64,00');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(64);
+    expect(el.formattedValue).to.equal('64.00');
+
+    mimicUserInput(el, '64,0');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(64);
+    expect(el.formattedValue).to.equal('64.00');
+
+    // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+    // When a user finished editing, the default should be restored.
+    // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+    el.modelValue = 1234;
+    expect(el.formattedValue).to.equal('1,234.00');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+  });
+
   it('sets inputmode attribute to decimal', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`<lion-input-amount></lion-input-amount>`)

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

@@ -69,6 +69,6 @@ describe('parseAmount()', async () => {
     expect(parseAmount('123.456,78', { mode: 'auto' })).to.equal(123456.78);
     expect(
       parseAmount('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
-    ).to.equal(123.45678);
+    ).to.equal(123456.78);
   });
 });

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

@@ -20,25 +20,34 @@ import { getDecimalSeparator } from './getDecimalSeparator.js';
  * @return {string} unparseable|withLocale|heuristic
  */
 function getParseMode(value, { mode = 'auto', viewValueStates } = {}) {
-  const separators = value.match(/[., ]/g);
+  const separatorsRe = /[., ]/g;
+  const separators = value.match(separatorsRe) || [];
+  // @ts-expect-error [wait-for-platform-types]
+  const decimalPlaces = (value.split(separatorsRe) || []).at(-1).length;
+  const isCurViewFormattedAndUserIsEditing =
+    viewValueStates?.includes('formatted') && mode === 'user-edited';
 
   // When a user edits an existing value, we already formatted it with a certain locale.
-  // For best UX, we stick with this locale
-  const shouldAlignWithExistingSeparators =
-    viewValueStates?.includes('formatted') && mode === 'user-edited';
+  // For best UX, we stick with this locale. However, we only do this when the user has
+  // entered at least 3 decimal places.
+  const shouldUseCurLocale = isCurViewFormattedAndUserIsEditing && decimalPlaces > 2;
 
-  if (!separators || shouldAlignWithExistingSeparators) {
+  const shouldUseLocale =
+    shouldUseCurLocale ||
+    !separators.length ||
+    (mode === 'auto' && separators.length === 1 && decimalPlaces >= 3);
+  if (shouldUseLocale) {
     return 'withLocale';
   }
-  if (mode === 'auto' && separators.length === 1) {
-    const decimalLength = value.split(`${separators}`)[1].length;
-    if (decimalLength >= 3) {
-      return 'withLocale';
-    }
-  }
-  if (separators.length === 1 || separators[0] !== separators[separators.length - 1]) {
+
+  const shouldUseHeuristic =
+    (isCurViewFormattedAndUserIsEditing && decimalPlaces <= 2) ||
+    separators.length === 1 ||
+    separators[0] !== separators[separators.length - 1];
+  if (shouldUseHeuristic) {
     return 'heuristic';
   }
+
   return 'unparseable';
 }
 

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

@@ -82,7 +82,7 @@ describe('parseNumber()', () => {
     expect(parseNumber('123.456,78', { mode: 'auto' })).to.equal(123456.78);
     expect(
       parseNumber('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
-    ).to.equal(123.45678);
+    ).to.equal(123456.78);
   });
 
   it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {

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

@@ -489,7 +489,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @param {KeyboardEvent} ev
    * @protected
    */
-  // TODO: rename to _onKeyUp in v1
+  // TODO: rename to #invokerOnKeyUp() (and move event listener to the invoker) in v1
   __onKeyUp(ev) {
     if (this.disabled || this.readOnly) {
       return;
@@ -529,6 +529,22 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
           this.opened = true;
         }
         break;
+      case 'ArrowLeft':
+        ev.preventDefault();
+        if (this.navigateWithinInvoker) {
+          this.setCheckedIndex(
+            this._getPreviousEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+          );
+        }
+        break;
+      case 'ArrowRight':
+        ev.preventDefault();
+        if (this.navigateWithinInvoker) {
+          this.setCheckedIndex(
+            this._getNextEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+          );
+        }
+        break;
       default:
         if (!this._noTypeAhead) {
           this._handleTypeAhead(ev, { setAsChecked: true });

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

@@ -24,6 +24,24 @@ function mimicKeyPress(el, key, code = '') {
   el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
 }
 
+/**
+ * @param {LionOption[]} options
+ * @param {number} selectedIndex
+ */
+function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
+  /**
+   * @param {{ checked: any; }} option
+   * @param {any} i
+   */
+  options.forEach((option, i) => {
+    if (i === selectedIndex) {
+      expect(option.checked).to.be.true;
+    } else {
+      expect(option.checked).to.be.false;
+    }
+  });
+}
+
 describe('lion-select-rich interactions', () => {
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
@@ -86,26 +104,91 @@ describe('lion-select-rich interactions', () => {
     });
   });
 
-  describe('Invoker Keyboard navigation Windows', () => {
-    it('navigates through list with [ArrowDown] [ArrowUp] keys checks the option while listbox unopened', async () => {
-      /**
-       * @param {LionOption[]} options
-       * @param {number} selectedIndex
-       */
-      function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
-        /**
-         * @param {{ checked: any; }} option
-         * @param {any} i
-         */
-        options.forEach((option, i) => {
-          if (i === selectedIndex) {
-            expect(option.checked).to.be.true;
-          } else {
-            expect(option.checked).to.be.false;
-          }
-        });
-      }
+  describe('Invoker Keyboard navigation Mac', () => {
+    it('opens dropdown with [ArrowDown] [ArrowUp] keys or navigates through the listbox options', async () => {
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <lion-option .choiceValue=${30}>Item 3</lion-option>
+            </lion-options>
+          </lion-select-rich>
+        `)
+      );
+
+      const options = el.formElements;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+
+      expect(el.opened).to.be.true;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      el.opened = false;
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      expect(el.opened).to.be.true;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+    });
+
+    it('does not open dropdown with [ArrowLeft] [ArrowRight] keys or navigates through the listbox options', async () => {
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <lion-option .choiceValue=${30}>Item 3</lion-option>
+            </lion-options>
+          </lion-select-rich>
+        `)
+      );
+
+      const options = el.formElements;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
+
+      expect(el.opened).to.be.false;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+      expect(el.opened).to.be.false;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+    });
+
+    it('checks a value with [character] keys while listbox unopened', async () => {
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${'red'}>Red</lion-option>
+              <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+              <lion-option .choiceValue=${'turquoise'}>Turquoise</lion-option>
+            </lion-options>
+          </lion-select-rich>
+        `)
+      );
 
+      // @ts-ignore [allow-private] in test
+      mimicKeyPress(el, 't', 'KeyT');
+      expect(el.checkedIndex).to.equal(1);
+
+      mimicKeyPress(el, 'u', 'KeyU');
+      expect(el.checkedIndex).to.equal(2);
+    });
+  });
+
+  describe('Invoker Keyboard navigation Windows/Linux', () => {
+    it('navigation through list with [ArrowDown] [ArrowUp] keys checks the option while listbox unopened', async () => {
       let isTriggeredByUser;
       const el = /** @type {LionSelectRich} */ (
         await fixture(html`
@@ -141,7 +224,43 @@ describe('lion-select-rich interactions', () => {
       expect(isTriggeredByUser).to.be.true;
     });
 
-    it('checkes a value with [character] keys while listbox unopened', async () => {
+    it('navigation through list with [ArrowLeft] [ArrowRight] keys checks the option while listbox unopened', async () => {
+      let isTriggeredByUser;
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich
+            interaction-mode="windows/linux"
+            @model-value-changed="${(/** @type {CustomEvent} */ event) => {
+              isTriggeredByUser = event.detail.isTriggeredByUser;
+            }}"
+          >
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <lion-option .choiceValue=${30}>Item 3</lion-option>
+            </lion-options>
+          </lion-select-rich>
+        `)
+      );
+
+      const options = el.formElements;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+      expect(el.checkedIndex).to.equal(1);
+      expectOnlyGivenOneOptionToBeChecked(options, 1);
+      expect(isTriggeredByUser).to.be.true;
+
+      isTriggeredByUser = false;
+
+      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+      expect(isTriggeredByUser).to.be.true;
+    });
+
+    it('checks a value with [character] keys while listbox unopened', async () => {
       const el = /** @type {LionSelectRich} */ (
         await fixture(html`
           <lion-select-rich interaction-mode="windows/linux">

package/components/validate-messages/translations/pl.js

@@ -10,8 +10,8 @@ export default {
       'Proszę podać prawidłową wartość {fieldName} (od {params.min} do {params.max} znaków).',
     Pattern: 'Wprowadź prawidłową wartość w polu {fieldName}.',
     IsNumber: 'Wprowadź prawidłową wartość w polu {fieldName}.',
-    MinNumber: 'Proszę podać wartość {fieldName} większą niż {params}.',
-    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż {params}.',
+    MinNumber: 'Proszę podać wartość {fieldName} większą niż lub równą {params}.',
+    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż lub równą {params}.',
     MinMaxNumber: 'Proszę podać wartość {fieldName} o długości od {params.min} do {params.max}.',
     IsDate: 'Wprowadź datę (DD MM RRRR).',
     MinDate: 'Proszę podać wartość {fieldName} przypadającą po {params, date, YYYYMMDD}.',
@@ -32,8 +32,8 @@ export default {
     MinMaxLength:
       'Proszę podać prawidłową wartość {fieldName} (od {params.min} do {params.max} znaków).',
     IsNumber: 'Wprowadź prawidłową wartość w polu {fieldName}.',
-    MinNumber: 'Proszę podać wartość {fieldName} większą niż {params}.',
-    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż {params}.',
+    MinNumber: 'Proszę podać wartość {fieldName} większą niż lub równą {params}.',
+    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż lub równą {params}.',
     MinMaxNumber: 'Proszę podać wartość {fieldName} o długości od {params.min} do {params.max}.',
     IsDate: 'Wprowadź datę (DD MM RRRR).',
     MinDate: 'Proszę podać wartość {fieldName} przypadającą po {params, date, YYYYMMDD}.',

package/dist-types/components/localize/src/number/parseNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseNumber.d.ts","sourceRoot":"","sources":["../../../../../components/localize/src/number/parseNumber.js"],"names":[],"mappings":"AA2FA;;;;;;;;;;;;;;;;;;GAkBG;AACH,mCAHW,MAAM,6GA8BhB"}
+{"version":3,"file":"parseNumber.d.ts","sourceRoot":"","sources":["../../../../../components/localize/src/number/parseNumber.js"],"names":[],"mappings":"AAoGA;;;;;;;;;;;;;;;;;;GAkBG;AACH,mCAHW,MAAM,6GA8BhB"}

package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionSelectRich.d.ts","sourceRoot":"","sources":["../../../../components/select-rich/src/LionSelectRich.js"],"names":[],"mappings":";AAsBA;;GAEG;AACH;IACE;;MAKC;IAED,kBAAkB;IAClB,6BAgBC;IAED;;;OAGG;IAEH,2EAUC;IAUD;;;OAGG;IACH,gDAIC;IAED;;;OAGG;IAEH,kDAEC;IAiBC;;;;OAIG;IACH,+BAAkC;IAClC;;;;OAIG;IACH,iBAFU,eAAe,GAAC,KAAK,GAAC,MAAM,CAET;IAE7B,sBAAyB;IACzB,iBAAiB;IACjB,8BAAqB;IAyWvB;;;OAGG;IAEH,wBAJW,aAAa,QAgDvB;IA9MD,eAAe;IACf,wBAEC;IAiED,eAAe;IACf,wBAGC;IAZD,eAAe;IACf,wBAKC;IAzED,eAAe;IACf,yBAIC;IAkDD,eAAe;IACf,4BASC;IA2LD,iBAAiB;IACjB,kCAEC;IAlbD,0BAUC;IAQD;;;;;OAKG;IACH,oDAJW,OAAO,sEAEL,IAAI,CAgBhB;IAED;;OAEG;IACH,2BAFW,OAAO,KAAK,EAAE,cAAc,QAiDtC;IAED;;;;OAIG;IACH,sBAHW,UAAU,GAAG,eAAe,iCAoBtC;IALG,qDAA2C;IAiB/C;;;;;OAKG;IACH,iGAEC;IAED,iBAAiB;IACjB,yCAGC;IAED,eAAe;IACf,gCAEC;IAED,eAAe;IACf,gCAKC;IAED,eAAe;IACf,6BAaC;IAED,eAAe;IACf,2BAKC;IAcD,eAAe;IACf,wCAIC;IAED,eAAe;IACf,8BAGC;IAED;;;OAGG;IAEH;;;;;;;;;;;;;;;8CA1PI,8DAA8D;;;;;;;;;;MAgQjE;IAED;;;;;;OAMG;IACH,kDAQC;IAkCC,4EAA8E;IAqBhF;;;;OAIG;IACH,8CAyBC;IAED;;;OAGG;IACH,gCAEC;IAED;;;OAGG;IACH,uDAEC;IAED;;;OAGG;IACH,4FAEC;IAgBC,0CAAgC;IA6FlC;;;;OAIG;IACH,wCASC;IARC,qCAA2B;CAS9B;0BAzlBY,OAAO,kCAAkC,EAAE,WAAW;yBACtD,OAAO,iCAAiC,EAAE,UAAU;kCACpD,OAAO,iEAAiE,EAAE,mBAAmB;8BAC7F,OAAO,gDAAgD,EAAE,eAAe;uBACxE,OAAO,oCAAoC,EAAE,QAAQ"}
+{"version":3,"file":"LionSelectRich.d.ts","sourceRoot":"","sources":["../../../../components/select-rich/src/LionSelectRich.js"],"names":[],"mappings":";AAsBA;;GAEG;AACH;IACE;;MAKC;IAED,kBAAkB;IAClB,6BAgBC;IAED;;;OAGG;IAEH,2EAUC;IAUD;;;OAGG;IACH,gDAIC;IAED;;;OAGG;IAEH,kDAEC;IAiBC;;;;OAIG;IACH,+BAAkC;IAClC;;;;OAIG;IACH,iBAFU,eAAe,GAAC,KAAK,GAAC,MAAM,CAET;IAE7B,sBAAyB;IACzB,iBAAiB;IACjB,8BAAqB;IAyWvB;;;OAGG;IAEH,wBAJW,aAAa,QAgEvB;IA9ND,eAAe;IACf,wBAEC;IAiED,eAAe;IACf,wBAGC;IAZD,eAAe;IACf,wBAKC;IAzED,eAAe;IACf,yBAIC;IAkDD,eAAe;IACf,4BASC;IA2MD,iBAAiB;IACjB,kCAEC;IAlcD,0BAUC;IAQD;;;;;OAKG;IACH,oDAJW,OAAO,sEAEL,IAAI,CAgBhB;IAED;;OAEG;IACH,2BAFW,OAAO,KAAK,EAAE,cAAc,QAiDtC;IAED;;;;OAIG;IACH,sBAHW,UAAU,GAAG,eAAe,iCAoBtC;IALG,qDAA2C;IAiB/C;;;;;OAKG;IACH,iGAEC;IAED,iBAAiB;IACjB,yCAGC;IAED,eAAe;IACf,gCAEC;IAED,eAAe;IACf,gCAKC;IAED,eAAe;IACf,6BAaC;IAED,eAAe;IACf,2BAKC;IAcD,eAAe;IACf,wCAIC;IAED,eAAe;IACf,8BAGC;IAED;;;OAGG;IAEH;;;;;;;;;;;;;;;8CA1PI,8DAA8D;;;;;;;;;;MAgQjE;IAED;;;;;;OAMG;IACH,kDAQC;IAkCC,4EAA8E;IAqBhF;;;;OAIG;IACH,8CAyBC;IAED;;;OAGG;IACH,gCAEC;IAED;;;OAGG;IACH,uDAEC;IAED;;;OAGG;IACH,4FAEC;IAgBC,0CAAgC;IA6GlC;;;;OAIG;IACH,wCASC;IARC,qCAA2B;CAS9B;0BAzmBY,OAAO,kCAAkC,EAAE,WAAW;yBACtD,OAAO,iCAAiC,EAAE,UAAU;kCACpD,OAAO,iEAAiE,EAAE,mBAAmB;8BAC7F,OAAO,gDAAgD,EAAE,eAAe;uBACxE,OAAO,oCAAoC,EAAE,QAAQ"}