@lion/ui 0.20.0-menu-system.0 → 0.21.0

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

@@ -0,0 +1,27 @@
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
+
+import '@lion/ui/define/lion-input-amount-dropdown.js';
+
+const tagString = 'lion-input-amount-dropdown';
+
+describe('<lion-input-amount-dropdown> integrations', () => {
+  runFormatMixinSuite({
+    tagString,
+    modelValueType: Object,
+    parser: value => value.replace('foo: ', ''),
+    valueToggler: ({ toggleValue, viewValue }) => {
+      if (viewValue) {
+        return !toggleValue ? '123' : '456';
+      }
+      return !toggleValue ? { amount: 123, currency: 'EUR' } : { amount: 456, currency: 'EUR' };
+    },
+    getExpectedInitialModelValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialFormattedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedInitialSerializedValue: el => ({ currency: /** @type {any} */ (el).currency }),
+    getExpectedModelValueForEmptyInputNode: el => ({
+      currency: /** @type {any} */ (el).currency,
+      amount: '',
+    }),
+    valueChangeCounterOffset: 0,
+  });
+});

package/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -1,14 +1,14 @@
 import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
-import sinon from 'sinon';
 import {
-  fixtureSync as _fixtureSync,
   fixture as _fixture,
-  unsafeStatic,
+  fixtureSync as _fixtureSync,
   aTimeout,
   defineCE,
   expect,
   html,
+  unsafeStatic,
 } from '@open-wc/testing';
+import sinon from 'sinon';
 
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { mimicUserChangingDropdown } from '../test-helpers/mimicUserChangingDropdown.js';
@@ -100,6 +100,62 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       expect(el.prefilled).to.be.true;
     });
 
+    it('does not fire model-value-changed for semantically equal modelValue objects', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'EUR', amount: 123 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(0);
+    });
+
+    it('does fire model-value-changed when amount is updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'EUR', amount: 126 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
+    it('does fire model-value-changed when currency is updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'GBP', amount: 123 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
+    it('does fire model-value-changed when currency & amount are updated', async () => {
+      const el = await fixture(
+        html` <${tag} .modelValue="${{ currency: 'GBP', amount: 100 }}"></${tag}> `,
+      );
+
+      const spy = sinon.spy();
+      el.addEventListener('model-value-changed', spy);
+
+      el.modelValue = { currency: 'EUR', amount: 123 };
+      await el.updateComplete;
+
+      expect(spy.callCount).to.equal(1);
+    });
+
     describe('Dropdown display', () => {
       it('calls `templates.dropdown` with TemplateDataForDropdownInputAmount object', async () => {
         const modelValue = { currency: 'EUR', amount: 123 };
@@ -336,6 +392,7 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       // @ts-ignore
       expect(el._isEmpty(), 'missing amount property').to.be.true;
 
+      // @ts-ignore
       el.modelValue = null;
       await el.updateComplete;
       // @ts-ignore

package/components/input-date/test/lion-input-date-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input-date.js';

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -130,6 +130,10 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     );
   }
 
+  get _isEditingTextField() {
+    return this.focused && this._isHandlingUserInput;
+  }
+
   constructor() {
     super();
     /** @private */

package/components/input-datepicker/src/localizeNamespaceLoader.js

@@ -6,7 +6,6 @@ async function combineLocalizeImports(importPromises) {
   const combinedResult = localizeObjects[0];
   for (const localizeObject of localizeObjects.slice(1)) {
     Object.entries(localizeObject.default).forEach(([key, val]) => {
-      // @ts-ignore - dynamic property access
       combinedResult.default[key] = val;
     });
   }

package/components/input-datepicker/test/lion-input-datepicker-integrations.test.js

@@ -1,6 +1,6 @@
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 
 import '@lion/ui/define/lion-input-datepicker.js';

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

@@ -3,12 +3,15 @@ import { html, LitElement } from 'lit';
 import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core.js';
 import { aTimeout, defineCE, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
+import { parseDate } from '@lion/ui/localize.js';
 import sinon from 'sinon';
-import { setViewport } from '@web/test-runner-commands';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { AlwaysInvalid } from '@lion/ui/form-core-test-helpers.js';
 import { DatepickerInputObject } from '@lion/ui/input-datepicker-test-helpers.js';
 import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
 
 import '@lion/ui/define/lion-input-datepicker.js';
+import { runDatepickerSuite } from '../test-suites/LionInputDatepicker.suite.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -454,6 +457,59 @@ describe('<lion-input-datepicker>', () => {
         expect(el.validationStates.error).to.have.property('IsDate');
       });
 
+      it('syncs view value from calendar if custom validator is in error state', async () => {
+        const el = await fixture(html`
+          <lion-input-datepicker .validators=${[new AlwaysInvalid()]}></lion-input-datepicker>
+        `);
+
+        const elObj = new DatepickerInputObject(el);
+        await elObj.openCalendar();
+        await elObj.selectMonthDay(12);
+        await el.updateComplete; // safari take a little longer
+
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
+          .to.be.true;
+        expect(
+          isSameDate(
+            // @ts-ignore [allow-protected] in test
+            /** @type {Date} */ (parseDate(el._inputNode.value)),
+            elObj.calendarEl.selectedDate,
+          ),
+        ).to.be.true;
+      });
+
+      it('syncs view value from calendar if custom validator is in error state, when there was a previous modelValue', async () => {
+        const modelValue = new Date('2022/12/30');
+        const el = await fixture(html`
+          <lion-input-datepicker
+            .modelValue="${modelValue}"
+            .validators=${[new AlwaysInvalid()]}
+          ></lion-input-datepicker>
+        `);
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), modelValue)).to.be.true;
+
+        const elObj = new DatepickerInputObject(el);
+        await elObj.openCalendar();
+        await elObj.selectMonthDay(12);
+        await el.updateComplete; // safari take a little longer
+
+        expect(el.hasFeedbackFor).to.include('error');
+        expect(el.validationStates).to.have.property('error');
+        expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), elObj.calendarEl.selectedDate))
+          .to.be.true;
+        expect(
+          isSameDate(
+            // @ts-ignore [allow-protected] in test
+            /** @type {Date} */ (parseDate(el._inputNode.value)),
+            elObj.calendarEl.selectedDate,
+          ),
+        ).to.be.true;
+      });
+
       /**
        * Not in scope:
        * - min/max attr (like platform has): could be added in future if observers needed
@@ -479,10 +535,14 @@ describe('<lion-input-datepicker>', () => {
       // Open the calendar
       await elObj.openCalendar();
 
+      const selectedDateEl = calendarEl?.shadowRoot?.querySelector(
+        '.calendar__day-button[selected]',
+      );
+      // @ts-ignore
+      selectedDateEl?.focus();
+
       // Move focus to 18th of December
-      calendarEl.shadowRoot
-        ?.querySelector('#js-content-wrapper')
-        ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+      await sendKeys({ press: 'ArrowRight' });
 
       expect(/** @type {Date} */ (calendarEl.focusedDate).getTime()).to.equal(
         new Date('December 18, 2020 03:24:00 GMT+0000').getTime(),
@@ -597,11 +657,12 @@ describe('<lion-input-datepicker>', () => {
         <lion-input-datepicker label="End date" name="endDate"></lion-input-datepicker>
       `);
 
-      const elements = el.parentElement?.children;
-      // @ts-ignore - accessing by name property
-      const startLabel = elements?.startDate?.querySelector('button')?.ariaLabel;
-      // @ts-ignore - accessing by name property
-      const endLabel = elements?.endDate?.querySelector('button')?.ariaLabel;
+      // @ts-expect-error
+      const elements = el.parentElement.children;
+      // @ts-expect-error
+      const startLabel = elements.startDate.querySelector('button').ariaLabel;
+      // @ts-expect-error
+      const endLabel = elements.endDate.querySelector('button').ariaLabel;
 
       expect(startLabel).to.not.equal(endLabel);
     });
@@ -833,4 +894,8 @@ describe('<lion-input-datepicker>', () => {
       ).to.be.true;
     });
   });
+
+  describe('Run suite', () => {
+    runDatepickerSuite();
+  });
 });

package/components/input-datepicker/test-suites/LionInputDatepicker.suite.js

@@ -0,0 +1,35 @@
+import { expect, html, fixture, waitUntil, unsafeStatic } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+/** @typedef {import('@lion/ui/input-datepicker.js').LionInputDatepicker} LionInputDatepicker */
+
+export function runDatepickerSuite({
+  datepickerTagName = 'lion-input-datepicker',
+  calendarTagName = 'lion-calendar',
+} = {}) {
+  const tag = unsafeStatic(datepickerTagName);
+
+  it('should not reopen the datepicker popup when the date is selected by keyboard', async () => {
+    /** @type {LionInputDatepicker} */
+    const el = await fixture(html`<${tag} .modelValue="${new Date('2018/05/30')}"></${tag}>`);
+    await el.updateComplete;
+
+    // @ts-ignore
+    const openDatepickerButton = el._invokerNode;
+    openDatepickerButton?.focus();
+    openDatepickerButton?.click();
+    /**
+     * @returns {HTMLElement | null | undefined}
+     */
+    const getSelectedDateEl = () =>
+      el?.shadowRoot
+        ?.querySelector(calendarTagName)
+        ?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+    await waitUntil(getSelectedDateEl);
+    getSelectedDateEl()?.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+
+    expect(el.opened).to.be.false;
+  });
+}

package/components/input-email/src/LionInputEmail.js

@@ -10,6 +10,8 @@ import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 export class LionInputEmail extends LocalizeMixin(LionInput) {
   constructor() {
     super();
+    this.autocomplete = 'email';
+
     // local-part@domain where the local part may be up to 64 characters long
     // and the domain may have a maximum of 255 characters.
     // @see https://www.wikiwand.com/en/Email_address

package/components/input-email/test/lion-input-email-integrations.test.js

@@ -1,5 +1,5 @@
-import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-input-email.js';
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 
 const tagString = 'lion-input-email';
 

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

@@ -15,6 +15,12 @@ describe('<lion-input-email>', () => {
     expect(_inputNode.type).to.equal('text');
   });
 
+  it('sets autocomplete to "email"', async () => {
+    const el = await fixture(`<lion-input-email></lion-input-email>`);
+    // @ts-expect-error [allow-protected] inside tests
+    expect(el._inputNode.getAttribute('autocomplete')).to.equal('email');
+  });
+
   it('has validator "IsEmail" applied by default', async () => {
     // More elaborate tests can be found in lion-validate/test/StringValidators.test.js
     const el = await fixture(`<lion-input-email></lion-input-email>`);

package/components/input-file/src/validators.js

@@ -2,13 +2,14 @@ import { Validator } from '@lion/ui/form-core.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 /**
+ * @typedef {import('../../form-core/types/validate/index.js').FeedbackMessageData} FeedbackMessageData
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorConfig} ValidatorConfig
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorParam} ValidatorParam
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorOutcome} ValidatorOutcome
  * @typedef {import('../types/input-file.js').InputFile} InputFile
  */
 
-/* eslint max-classes-per-file: ["error", 2] */
+/* eslint max-classes-per-file: ["error", 3] */
 export class IsAcceptedFile extends Validator {
   static validatorName = 'IsAcceptedFile';
 
@@ -112,3 +113,32 @@ export class DuplicateFileNames extends Validator {
     return localizeManager.msg('lion-input-file:uploadTextDuplicateFileName');
   }
 }
+
+export class MaxFileCount extends Validator {
+  static get validatorName() {
+    return 'MaxFileCount';
+  }
+
+  /**
+   * @param {Partial<FeedbackMessageData>} [data]
+   * @returns {Promise<string|Element>}
+   */
+  static async getMessage(data) {
+    const localizeManager = getLocalizeManager();
+    if (!data?.params || typeof data.params !== 'number' || data.params <= 0) {
+      return 'Invalid MaxFileCount parameter. Please provide a valid number greater than 0.';
+    }
+    return localizeManager.msg('lion-input-file:maxFileCountExceeded', {
+      maxFileCount: data.params,
+    });
+  }
+
+  /**
+   * @param {File[]} value
+   * @param {number} maxFiles
+   * @returns {boolean}
+   */
+  execute(value, maxFiles = this.param || 0) {
+    return maxFiles > 0 && value.length > maxFiles;
+  }
+}

package/components/input-file/test/FileValidators.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@open-wc/testing';
+import { MaxFileCount } from '@lion/ui/input-file.js';
 import { IsAcceptedFile } from '../src/validators.js';
 
 describe('lion-input-file: IsAcceptedFile', () => {
@@ -167,4 +168,34 @@ describe('lion-input-file: IsAcceptedFile', () => {
       expect(returnVal).to.be.true;
     });
   });
+
+  describe('Max File Count', () => {
+    /**
+     *
+     * @param {string} filename
+     * @returns {File}
+     */
+    const newFile = filename => new File([], filename);
+
+    it('Allow up to 2 files', () => {
+      const validator = new MaxFileCount(2);
+      expect(MaxFileCount.validatorName).to.equal('MaxFileCount');
+
+      let isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
+      expect(isEnabled).to.be.false;
+
+      isEnabled = validator.execute([
+        newFile('file1.txt'),
+        newFile('file2.txt'),
+        newFile('file3.txt'),
+      ]);
+      expect(isEnabled).to.be.true;
+    });
+
+    it('Allow any number of files with empty param', () => {
+      const validator = new MaxFileCount();
+      const isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
+      expect(isEnabled).to.be.false;
+    });
+  });
 });

package/components/input-file/translations/bg.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',
   selectTextMultipleFile: 'Избор на файлове',
   selectTextSingleFile: 'Избор на файл',
+  maxFileCountExceeded: 'Броят на качените файлове не може да надвишава {maxFileCount}.',
 };

package/components/input-file/translations/cs.js

@@ -18,4 +18,5 @@ export default {
   selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',
   selectTextMultipleFile: 'Vybrat soubory',
   selectTextSingleFile: 'Vybrat soubor',
+  maxFileCountExceeded: 'Počet nahraných souborů nesmí překročit {maxFileCount}.',
 };

package/components/input-file/translations/de.js

@@ -17,4 +17,6 @@ export default {
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',
   selectTextMultipleFile: 'Dateien auswählen',
   selectTextSingleFile: 'Datei auswählen',
+  maxFileCountExceeded:
+    'Die Anzahl der hochgeladenen Dateien darf {maxFileCount} nicht überschreiten.',
 };

package/components/input-file/translations/en.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'A file with same filename was already present.',
   selectTextMultipleFile: 'Select files',
   selectTextSingleFile: 'Select file',
+  maxFileCountExceeded: 'The number of uploaded files must not exceed {maxFileCount}.',
 };

package/components/input-file/translations/es.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',
   selectTextMultipleFile: 'Seleccionar archivos',
   selectTextSingleFile: 'Seleccionar archivo',
+  maxFileCountExceeded: 'El número de archivos cargados no puede superar {maxFileCount}.',
 };

package/components/input-file/translations/fr.js

@@ -18,4 +18,5 @@ export default {
   selectTextDuplicateFileName: 'Un fichier portant le même nom de fichier était déjà présent.',
   selectTextMultipleFile: 'Sélectionnez des fichiers',
   selectTextSingleFile: 'Sélectionnez un fichier',
+  maxFileCountExceeded: 'Le nombre de fichiers téléchargés ne peut pas dépasser {maxFileCount}.',
 };

package/components/input-file/translations/hu.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Már volt ilyen nevű fájl.',
   selectTextMultipleFile: 'Fájl(ok) kiválasztása',
   selectTextSingleFile: 'Fájl kiválasztása',
+  maxFileCountExceeded: 'A feltöltött fájlok száma nem haladhatja meg a {maxFileCount}-ot.',
 };

package/components/input-file/translations/id.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'File dengan nama file yang sama sudah ada.',
   selectTextMultipleFile: 'Pilih beberapa file',
   selectTextSingleFile: 'Pilih berkas',
+  maxFileCountExceeded: 'Jumlah file yang diunggah tidak boleh melebihi {maxFileCount}.',
 };

package/components/input-file/translations/it.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',
   selectTextMultipleFile: 'Seleziona file',
   selectTextSingleFile: 'Seleziona file',
+  maxFileCountExceeded: 'Il numero di file caricati non può superare {maxFileCount}.',
 };

package/components/input-file/translations/nl.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
   selectTextMultipleFile: 'Selecteer bestanden',
   selectTextSingleFile: 'Selecteer bestand',
+  maxFileCountExceeded: 'Het aantal geüploade bestanden mag niet meer dan {maxFileCount} zijn.',
 };

package/components/input-file/translations/pl.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',
   selectTextMultipleFile: 'Wybierz pliki',
   selectTextSingleFile: 'Wybierz plik',
+  maxFileCountExceeded: 'Liczba przesłanych plików nie może przekraczać {maxFileCount}.',
 };

package/components/input-file/translations/ro.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',
   selectTextMultipleFile: 'Selectare fișiere',
   selectTextSingleFile: 'Selectare fișier',
+  maxFileCountExceeded: 'Numărul de fișiere încărcate nu poate depăși {maxFileCount}.',
 };

package/components/input-file/translations/ru.js

@@ -16,4 +16,5 @@ export default {
   selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
   selectTextMultipleFile: 'Выберите файлы',
   selectTextSingleFile: 'Выберите файл',
+  maxFileCountExceeded: 'Количество загруженных файлов не может превышать {maxFileCount}.',
 };

package/components/input-file/translations/sk.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',
   selectTextMultipleFile: 'Vybrať súbory',
   selectTextSingleFile: 'Vybrať súbor',
+  maxFileCountExceeded: 'Počet nahratých súborov nesmie prekročiť {maxFileCount}.',
 };

package/components/input-file/translations/uk.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',
   selectTextMultipleFile: 'Виберіть файли',
   selectTextSingleFile: 'Виберіть файл',
+  maxFileCountExceeded: 'Кількість завантажених файлів не може перевищувати {maxFileCount}.',
 };

package/components/input-file/translations/zh.js

@@ -17,4 +17,5 @@ export default {
   selectTextDuplicateFileName: '已存在具有相同文件名的文件。',
   selectTextMultipleFile: '选择多个文件',
   selectTextSingleFile: '选择文件',
+  maxFileCountExceeded: '上传的文件数量不能超过 {maxFileCount} 个。',
 };

package/components/input-iban/test/lion-input-iban-integrations.test.js

@@ -1,5 +1,5 @@
-import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-input-iban.js';
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
 
 const tagString = 'lion-input-iban';