@lion/ui 0.7.3 → 0.7.4

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

@@ -1,7 +1,7 @@
 import '@lion/ui/define/lion-input-file.js';
 import { Required } from '@lion/ui/form-core.js';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { expect, fixture as _fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
 import sinon from 'sinon';
 
 /**
@@ -556,19 +556,22 @@ describe('lion-input-file', () => {
       });
       const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
       filesListChanged(el, fileListChangedEvent);
-      await el.updateComplete;
+      await elementUpdated(el);
 
       // @ts-expect-error [allow-protected-in-test]
       expect(el._selectedFilesMetaData.length).to.equal(2);
+      expect(el.modelValue.length).to.equal(2);
 
       setTimeout(() => {
         mimicSelectFile(el, [file3, file4]);
       });
       const fileListChangedEvent1 = await oneEvent(el, 'file-list-changed');
       filesListChanged(el, fileListChangedEvent1);
-      await el.updateComplete;
+      await elementUpdated(el);
+
       // @ts-expect-error [allow-protected-in-test]
       expect(el._selectedFilesMetaData.length).to.equal(4);
+      expect(el.modelValue.length).to.equal(4);
     });
 
     it('should add multiple files and dispatch file-list-changed event ONLY with newly added file', async () => {
@@ -958,6 +961,37 @@ describe('lion-input-file', () => {
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 
+    it('should update modelValue on drop', async () => {
+      const list = new DataTransfer();
+      // @ts-ignore
+      list.items.add(file);
+      const droppedFiles = list.files;
+
+      // @ts-expect-error [allow-protected-in-test]
+      await el._processDroppedFiles({
+        // @ts-ignore
+        dataTransfer: { files: droppedFiles, items: [{ name: 'test.txt' }] },
+        preventDefault: () => {},
+      });
+      await el.updateComplete;
+
+      expect(el.modelValue.length).to.equal(1);
+
+      const list2 = new DataTransfer();
+      // @ts-ignore
+      list2.items.add(file2);
+
+      // @ts-expect-error [allow-protected-in-test]
+      await el._processDroppedFiles({
+        // @ts-ignore
+        dataTransfer: { files: list2.files, items: [{ name: 'test2.txt' }] },
+        preventDefault: () => {},
+      });
+      await el.updateComplete;
+
+      expect(el.modelValue.length).to.equal(2);
+    });
+
     it('should call _processFiles method', async () => {
       const list = new DataTransfer();
       // @ts-ignore
@@ -1133,7 +1167,7 @@ describe('lion-input-file', () => {
         );
       });
 
-      it('select-button has aria-describedby set to the help-text, selected list and the feedback message', async () => {
+      it('select-button has aria-describedby set to the help-text, after and the feedback message', async () => {
         const uploadResponse = [
           {
             name: 'file1.txt',
@@ -1159,11 +1193,73 @@ describe('lion-input-file', () => {
           // @ts-expect-error [allow-protected-in-test]
           `feedback-${el._inputId}`,
         );
-        await el.updateComplete;
         // @ts-expect-error [allow-protected-in-test]
         expect(el._buttonNode?.getAttribute('aria-describedby')).to.contain(
           // @ts-expect-error [allow-protected-in-test]
-          `selected-file-list-${el._inputId}`,
+          `after-${el._inputId}`,
+        );
+      });
+
+      it('after contains upload name of file when SUCCESS', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'SUCCESS',
+            errorMessage: '',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
+
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files selected.');
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('file1.txt');
+      });
+
+      it('after contains upload validator message of file when FAIL', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'FAIL',
+            errorMessage: 'something went wrong',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
+
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files selected.');
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('something went wrong');
+      });
+
+      it('after contains upload status of files when multiple files have been uploaded', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'SUCCESS',
+            errorMessage: '',
+            downloadUrl: '/downloadFile',
+          },
+          {
+            name: 'file2.txt',
+            status: 'FAIL',
+            errorMessage: 'something went wrong',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html`
+          <lion-input-file label="Select" multiple></lion-input-file>
+        `);
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
+          '2 files. "something went wrong", for file2.txt.',
         );
       });
     });

package/components/input-file/test/lion-selected-file-list.test.js

@@ -108,9 +108,10 @@ describe('lion-selected-file-list', () => {
     `);
     const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
     const feedback = fileItems ? fileItems[0].querySelector('lion-validation-feedback') : undefined;
+
     // @ts-ignore
     expect(feedback).to.exist;
-    expect(feedback).shadowDom.to.equal('foobar');
+    expect(el.shadowRoot?.textContent).to.include('foobar');
   });
 
   it('should call removeFile method on click of remove button', async () => {

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

@@ -5,6 +5,9 @@ export default {
     'Моля, качете файл от тип {allowedTypesArray} или {allowedTypesLastItem} с макс. размер {maxSize}.',
   dragAndDropText: 'Плъзнете и пуснете Вашите файлове тук или',
   fileNameDescriptionLabel: 'Име на файл: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", за {listOfErroneousFiles}.',
+  noFilesSelected: 'Не са избрани файлове.',
+  numberOfFiles: '{numberOfFiles} файла.',
   removeButtonLabel: 'Отстраняване на файла {fileName}',
   selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',
   selectTextMultipleFile: 'Избор на файлове',

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

@@ -6,6 +6,9 @@ export default {
     'Nahrajte soubor typu {allowedTypesArray} nebo {allowedTypesLastItem} s max. velikostí {maxSize}.',
   dragAndDropText: 'Přetáhněte soubory sem nebo',
   fileNameDescriptionLabel: 'Název souboru: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", pro {listOfErroneousFiles}.',
+  noFilesSelected: 'Nebyly vybrány žádné soubory.',
+  numberOfFiles: '{numberOfFiles} soubory/souborů.',
   removeButtonLabel: 'Odebrat soubor {fileName}',
   selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',
   selectTextMultipleFile: 'Vybrat soubory',

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

@@ -5,6 +5,9 @@ export default {
     'Laden Sie eine {allowedTypesArray} oder {allowedTypesLastItem}-Datei mit max. {maxSize} hoch.',
   dragAndDropText: 'Ziehen Sie Ihre Dateien per Drag & Drop hierher oder',
   fileNameDescriptionLabel: 'Dateiname: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", für {listOfErroneousFiles}.',
+  noFilesSelected: 'Keine Dateien ausgewählt.',
+  numberOfFiles: '{numberOfFiles} Dateien.',
   removeButtonLabel: 'Datei {fileName} entfernen',
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',
   selectTextMultipleFile: 'Dateien auswählen',

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

@@ -5,6 +5,9 @@ export default {
     'Please select a {allowedTypesArray} or {allowedTypesLastItem} file with max {maxSize}.',
   dragAndDropText: 'Drag & Drop your files here or', // TODO: or what? Why is Drag & Drop capitalized?
   fileNameDescriptionLabel: 'File name: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", for {listOfErroneousFiles}.',
+  noFilesSelected: 'No files selected.',
+  numberOfFiles: '{numberOfFiles} files.',
   removeButtonLabel: 'Remove {fileName} file',
   selectTextDuplicateFileName: 'A file with same filename was already present.',
   selectTextMultipleFile: 'Select files',

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

@@ -5,6 +5,9 @@ export default {
     'Cargue un archivo {allowedTypesArray} o {allowedTypesLastItem} de {maxSize} como máximo.',
   dragAndDropText: 'Arrastre y suelte los archivos aquí o',
   fileNameDescriptionLabel: 'Nombre de archivo: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", para {listOfErroneousFiles}.',
+  noFilesSelected: 'No se han seleccionado archivos.',
+  numberOfFiles: '{numberOfFiles} archivos.',
   removeButtonLabel: 'Elimine el archivo: {fileName}',
   selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',
   selectTextMultipleFile: 'Seleccionar archivos',

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

@@ -6,6 +6,9 @@ export default {
     'Veuillez télécharger un fichier {allowedTypesArray} ou {allowedTypesLastItem} avec une taille maximale de {maxSize}.',
   dragAndDropText: 'Glissez et déposez vos fichiers ici ou',
   fileNameDescriptionLabel: 'Nom de fichier: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", pour {listOfErroneousFiles}.',
+  noFilesSelected: 'Aucun fichier sélectionné.',
+  numberOfFiles: '{numberOfFiles} fichiers.',
   removeButtonLabel: 'Supprimer le fichier {fileName}',
   selectTextDuplicateFileName: 'Un fichier portant le même nom de fichier était déjà présent.',
   selectTextMultipleFile: 'Sélectionnez des fichiers',

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

@@ -5,6 +5,9 @@ export default {
     'Töltsön fel egy legfeljebb {maxSize} méretű {allowedTypesArray} vagy {allowedTypesLastItem} fájlt.',
   dragAndDropText: 'Húzza át a fájlokat ide vagy',
   fileNameDescriptionLabel: 'Fájlnév: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", ehhez: {listOfErroneousFiles}.',
+  noFilesSelected: 'Nincs fájl kiválasztva.',
+  numberOfFiles: '{numberOfFiles} fájl.',
   removeButtonLabel: 'A(z) {fileName} fájl eltávolítása',
   selectTextDuplicateFileName: 'Már volt ilyen nevű fájl.',
   selectTextMultipleFile: 'Fájl(ok) kiválasztása',

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

@@ -5,6 +5,9 @@ export default {
     'Caricare un file {allowedTypesArray} o {allowedTypesLastItem} di {maxSize} max.',
   dragAndDropText: 'Trascinare i file qui o',
   fileNameDescriptionLabel: 'Nome file: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", per {listOfErroneousFiles}.',
+  noFilesSelected: 'Nessun file selezionato.',
+  numberOfFiles: '{numberOfFiles} file.',
   removeButtonLabel: 'Rimuovere il file {fileName}',
   selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',
   selectTextMultipleFile: 'Seleziona file',

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

@@ -5,6 +5,9 @@ export default {
     'Upload een {allowedTypesArray} of {allowedTypesLastItem}-bestand van maximaal {maxSize}.',
   dragAndDropText: 'Sleep uw bestanden hierheen of',
   fileNameDescriptionLabel: 'Bestandsnaam: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", voor {listOfErroneousFiles}.',
+  noFilesSelected: 'Geen bestanden geselecteerd.',
+  numberOfFiles: '{numberOfFiles} bestanden.',
   removeButtonLabel: 'Verwijder het bestand {fileName}',
   selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
   selectTextMultipleFile: 'Selecteer bestanden',

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

@@ -5,6 +5,9 @@ export default {
     'Prześlij plik {allowedTypesArray} lub {allowedTypesLastItem} o maks. rozmiarze {maxSize}.',
   dragAndDropText: 'Przeciągnij i upuść pliki tutaj lub',
   fileNameDescriptionLabel: 'Nazwa pliku: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", dla {listOfErroneousFiles}.',
+  noFilesSelected: 'Nie wybrano żadnych plików.',
+  numberOfFiles: 'Liczba plików: {numberOfFiles}.',
   removeButtonLabel: 'Usuń plik {fileName}',
   selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',
   selectTextMultipleFile: 'Wybierz pliki',

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

@@ -5,6 +5,9 @@ export default {
     'Încărcaţi un fişier {allowedTypesArray} sau {allowedTypesLastItem} de max. {maxSize}.',
   dragAndDropText: 'Glisaţi şi fixaţi fişierele aici sau',
   fileNameDescriptionLabel: 'Nume fişier: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", pentru {listOfErroneousFiles}.',
+  noFilesSelected: 'Niciun fișier selectat.',
+  numberOfFiles: '{numberOfFiles} fișiere.',
   removeButtonLabel: 'Eliminaţi fişierul {filename}',
   selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',
   selectTextMultipleFile: 'Selectare fișiere',

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

@@ -5,6 +5,9 @@ export default {
     'Загрузите файл {allowedTypesArray} или {allowedTypesLastItem} размером не более {maxSize}.',
   dragAndDropText: 'Перетащите файлы сюда или',
   fileNameDescriptionLabel: 'Название файла: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
+  noFilesSelected: 'Файлы не выбраны.',
+  numberOfFiles: 'Файлов: {numberOfFiles}.',
   removeButtonLabel: 'Удалить файл {fileName}',
   selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
   selectTextMultipleFile: 'Выберите файлы',

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

@@ -5,6 +5,9 @@ export default {
     'Nahrajte súbor {allowedTypesArray} alebo {allowedTypesLastItem} s maximálnou veľkosťou {maxSize}.',
   dragAndDropText: 'Súbory presuňte sem alebo',
   fileNameDescriptionLabel: 'Názov súboru: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", pre {listOfErroneousFiles}.',
+  noFilesSelected: 'Neboli vybrané žiadne súbory.',
+  numberOfFiles: 'Počet súborov: {numberOfFiles}.',
   removeButtonLabel: 'Odstrániť súbor {fileName}',
   selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',
   selectTextMultipleFile: 'Vybrať súbory',

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

@@ -5,6 +5,9 @@ export default {
     'Завантажте файл {allowedTypesArray} або {allowedTypesLastItem} розміром до {maxSize}.',
   dragAndDropText: 'Перетягніть файли сюди або',
   fileNameDescriptionLabel: 'Ім’я файлу: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
+  noFilesSelected: 'Не вибрано жодного файлу.',
+  numberOfFiles: '{numberOfFiles} файли(-ів).',
   removeButtonLabel: 'Видалення файлу {fileName}',
   selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',
   selectTextMultipleFile: 'Виберіть файли',

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

@@ -5,6 +5,9 @@ export default {
     '请上传最大 {maxSize} 的 {allowedTypesArray} 或 {allowedTypesLastItem} 文件。',
   dragAndDropText: '将您的文件拖放到此处，或',
   fileNameDescriptionLabel: '文件名: {fileName}',
+  generalValidatorMessage: '"{validatorMessage}", 例如 {listOfErroneousFiles}。',
+  noFilesSelected: '未选择任何文件。',
+  numberOfFiles: '{numberOfFiles}  个文件。',
   removeButtonLabel: '删除 {fileName} 文件',
   selectTextDuplicateFileName: '已存在具有相同文件名的文件。',
   selectTextMultipleFile: '选择多个文件',

package/components/overlays/src/OverlayMixin.js

@@ -26,9 +26,16 @@ export const OverlayMixinImplementation = superclass =>
 
     constructor() {
       super();
+      /**
+       * If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
+       * in case the user does not need to be able to reopen the dialog.
+       */
       this.opened = false;
 
-      /** @type {Partial<OverlayConfig>} */
+      /**
+       * Configure the many options of the `OverlayController`
+       * @type {Partial<OverlayConfig>}
+       */
       this.config = {};
 
       /** @type {EventListener} */

package/components/switch/src/LionSwitch.js

@@ -105,6 +105,16 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
     }
   }
 
+  /**
+   * Override this function from ChoiceInputMixin.
+   * @param {Event} ev
+   * @protected
+   */
+  _toggleChecked(ev) {
+    ev.preventDefault();
+    super._toggleChecked(ev);
+  }
+
   /**
    * Override this function from ChoiceInputMixin.
    * @protected

package/components/tabs/src/LionTabs.js

@@ -19,6 +19,16 @@ function setupPanel({ el, uid }) {
   el.setAttribute('id', `panel-${uid}`);
   el.setAttribute('role', 'tabpanel');
   el.setAttribute('aria-labelledby', `button-${uid}`);
+  /**
+   * Facilitates navigation to panel content for assistive technology users.
+   *
+   * Focusable tab panel elements are recommended if any panels in a set contain
+   * content where the first element in the panel is not focusable.
+   * https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
+   */
+  if (!el.hasAttribute('tabindex')) {
+    el.setAttribute('tabindex', '0');
+  }
 }
 
 /**

package/components/tabs/test/lion-tabs.test.js

@@ -452,45 +452,26 @@ describe('<lion-tabs>', () => {
   });
 
   describe('Accessibility', () => {
-    it('does not make panels focusable', async () => {
-      const el = /** @type {LionTabs} */ (
-        await fixture(html`
-          <lion-tabs>
-            <button slot="tab">tab 1</button>
-            <div slot="panel">panel 1</div>
-            <button slot="tab">tab 2</button>
-            <div slot="panel">panel 2</div>
-          </lion-tabs>
-        `)
-      );
-      expect(Array.from(el.children).find(child => child.slot === 'panel')).to.not.have.attribute(
-        'tabindex',
-      );
-      expect(Array.from(el.children).find(child => child.slot === 'panel')).to.not.have.attribute(
-        'tabindex',
-      );
-    });
-
-    it('makes selected tab focusable (other tabs are unfocusable)', async () => {
-      const el = /** @type {LionTabs} */ (
-        await fixture(html`
-          <lion-tabs>
-            <button slot="tab">tab 1</button>
-            <div slot="panel">panel 1</div>
-            <button slot="tab">tab 2</button>
-            <div slot="panel">panel 2</div>
-            <button slot="tab">tab 3</button>
-            <div slot="panel">panel 3</div>
-          </lion-tabs>
-        `)
-      );
-      const tabs = el.querySelectorAll('[slot=tab]');
-      expect(tabs[0]).to.have.attribute('tabindex', '0');
-      expect(tabs[1]).to.have.attribute('tabindex', '-1');
-      expect(tabs[2]).to.have.attribute('tabindex', '-1');
-    });
-
     describe('Tabs', () => {
+      it('makes selected tab focusable (other tabs are unfocusable)', async () => {
+        const el = /** @type {LionTabs} */ (
+          await fixture(html`
+            <lion-tabs>
+              <button slot="tab">tab 1</button>
+              <div slot="panel">panel 1</div>
+              <button slot="tab">tab 2</button>
+              <div slot="panel">panel 2</div>
+              <button slot="tab">tab 3</button>
+              <div slot="panel">panel 3</div>
+            </lion-tabs>
+          `)
+        );
+        const tabs = el.querySelectorAll('[slot=tab]');
+        expect(tabs[0]).to.have.attribute('tabindex', '0');
+        expect(tabs[1]).to.have.attribute('tabindex', '-1');
+        expect(tabs[2]).to.have.attribute('tabindex', '-1');
+      });
+
       it('links ids of content items to tab via [aria-controls]', async () => {
         const el = /** @type {LionTabs} */ (
           await fixture(html`
@@ -562,6 +543,36 @@ describe('<lion-tabs>', () => {
         expect(panels[0]).to.have.attribute('aria-labelledby', tabs[0].id);
         expect(panels[1]).to.have.attribute('aria-labelledby', tabs[1].id);
       });
+
+      it('makes panel focusable', async () => {
+        const el = /** @type {LionTabs} */ (
+          await fixture(html`
+            <lion-tabs>
+              <button slot="tab">tab 1</button>
+              <div slot="panel">panel 1</div>
+              <button slot="tab">tab 2</button>
+              <div slot="panel">panel 2</div>
+            </lion-tabs>
+          `)
+        );
+        const panels = el.querySelectorAll('[slot=panel]');
+        expect(panels[0]).to.have.attribute('tabindex', '0');
+      });
+
+      it('does not override the tabindex already set on the panel', async () => {
+        const el = /** @type {LionTabs} */ (
+          await fixture(html`
+            <lion-tabs>
+              <button slot="tab">tab 1</button>
+              <div slot="panel" tabindex="-1">panel 1</div>
+              <button slot="tab">tab 2</button>
+              <div slot="panel">panel 2</div>
+            </lion-tabs>
+          `)
+        );
+        const panels = el.querySelectorAll('[slot=panel]');
+        expect(panels[0]).to.have.attribute('tabindex', '-1');
+      });
     });
   });