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

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

@@ -4,11 +4,12 @@ import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core
 import { aTimeout, defineCE, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import sinon from 'sinon';
-import { setViewport } from '@web/test-runner-commands';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
 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
@@ -479,10 +480,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 +602,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 +839,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';
 

package/components/input-stepper/test-suites/lion-input-stepper.integration.suite.js

@@ -1,8 +1,8 @@
-import { defineCE } from '@open-wc/testing';
 import {
-  runInteractionStateMixinSuite,
   runFormatMixinSuite,
+  runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
+import { defineCE } from '@open-wc/testing';
 import { LionInputStepper } from '../src/LionInputStepper.js';
 
 export const runInputStepperIntegrationSuite = (klass = LionInputStepper) => {

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

@@ -137,6 +137,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   constructor() {
     super();
+    this.autocomplete = 'tel';
 
     /**
      * Determines what the formatter output should look like.
@@ -192,7 +193,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
-
     // This will trigger the right keyboard on mobile
     this._inputNode.inputMode = 'tel';
   }

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -222,6 +222,13 @@ export function runInputTelSuite({ klass = LionInputTel } = {}) {
         expect(el._inputNode.inputMode).to.equal('tel');
       });
 
+      it('sets autocomplete to "tel"', async () => {
+        const el = await fixture(html` <${tag}></${tag}> `);
+        await el.updateComplete;
+        // @ts-expect-error [allow-protected] inside tests
+        expect(el._inputNode.getAttribute('autocomplete')).to.equal('tel');
+      });
+
       it('formats according to locale', async () => {
         const el = await fixture(
           html` <${tag} .modelValue="${'+31612345678'}" .allowedRegions="${['NL']}"></${tag}> `,

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

@@ -210,7 +210,6 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
-        // @ts-ignore - dynamic locale key access
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });