@lion/ui 0.2.2 → 0.3.1

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

@@ -0,0 +1,207 @@
+import '@lion/ui/define/lion-selected-file-list.js';
+import { expect, fixture as _fixture, html, oneEvent } from '@open-wc/testing';
+import sinon from 'sinon';
+
+/**
+ * @typedef {import('../src/LionSelectedFileList.js').LionSelectedFileList} LionSelectedFileList
+ * @typedef {import('../types/input-file.js').InputFile} InputFile
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionSelectedFileList>} */ (
+  _fixture
+);
+
+describe('lion-selected-file-list', () => {
+  /**
+   * @type {Partial<InputFile>}
+   */
+  const fileSuccess = {
+    name: 'foo.txt',
+    status: 'SUCCESS',
+    downloadUrl: '#foo',
+    systemFile: {
+      name: 'foo.txt',
+      type: 'text/plain',
+      size: 1000,
+      status: 'SUCCESS',
+    },
+    response: {
+      name: 'foo',
+      type: 'text/plain',
+      size: 1000,
+      status: 'SUCCESS',
+    },
+  };
+
+  /**
+   * @type {Partial<InputFile>}
+   */
+  const fileLoading = {
+    status: 'LOADING',
+    systemFile: {
+      name: 'bar.txt',
+      type: 'text/plain',
+      size: 100,
+      status: 'LOADING',
+    },
+  };
+
+  /**
+   * @type {Partial<InputFile>}
+   */
+  const fileFail = {
+    systemFile: {
+      name: 'foobar.txt',
+      type: 'text/plain',
+      size: 1000,
+      status: 'FAIL',
+    },
+    status: 'FAIL',
+    validationFeedback: [{ message: 'foobar', type: 'error' }],
+  };
+
+  it('when empty show nothing', async () => {
+    const el = await fixture(html`<lion-selected-file-list></lion-selected-file-list>`);
+    expect(el.children.length).to.equal(0);
+  });
+
+  it('can have 1 item', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list .fileList="${[fileSuccess]}"></lion-selected-file-list>
+    `);
+    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
+    expect(fileItems?.length).to.equal(1);
+  });
+
+  it('shows a list when multiple', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list
+        .fileList="${[fileSuccess, fileLoading]}"
+        .multiple="${true}"
+      ></lion-selected-file-list>
+    `);
+    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
+    expect(fileItems?.length).to.equal(2);
+    const fileList = el.shadowRoot?.querySelector('.selected__list');
+    expect(fileList?.tagName).to.equal('UL');
+  });
+
+  it('displays an anchor when status="SUCCESS" and a downloadUrl is available', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list
+        .fileList="${[fileSuccess, fileLoading, fileFail]}"
+        .multiple="${true}"
+      ></lion-selected-file-list>
+    `);
+    const fileItems = el.shadowRoot?.querySelectorAll('.selected__list__item');
+    // @ts-ignore
+    expect(fileItems[0].querySelector('.selected__list__item__label__link')).to.exist;
+    // @ts-ignore
+    expect(fileItems[1].querySelector('.selected__list__item__label__link')).to.not.exist;
+    // @ts-ignore
+    expect(fileItems[2].querySelector('.selected__list__item__label__link')).to.not.exist;
+  });
+
+  it('displays a feedback message when status="FAIL"', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list .fileList="${[fileFail]}"></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');
+  });
+
+  it('should call removeFile method on click of remove button', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list .fileList="${[fileSuccess, fileLoading]}"></lion-selected-file-list>
+    `);
+
+    /**
+     * @type {HTMLButtonElement | null | undefined}
+     */
+    const removeButton = el.shadowRoot?.querySelector('.selected__list__item__remove-button');
+    const removeFileSpy = sinon.spy(el, /** @type {keyof LionSelectedFileList} */ ('_removeFile'));
+    removeButton?.click();
+    expect(removeFileSpy).have.been.calledOnce;
+    removeFileSpy.restore();
+  });
+
+  it('should fire file-remove-requested event with removed file data', async () => {
+    const el = await fixture(html`
+      <lion-selected-file-list .fileList="${[fileSuccess, fileLoading]}"></lion-selected-file-list>
+    `);
+
+    /**
+     * @type {Partial<InputFile>}
+     */
+    const removedFile = {
+      name: el.fileList[0].name,
+      status: el.fileList[0].status,
+      systemFile: {
+        name: el.fileList[0].name,
+      },
+      response: {
+        name: el.fileList[0].name,
+        status: el.fileList[0].status,
+      },
+    };
+
+    setTimeout(() => {
+      // @ts-ignore ignore file typing
+      el._removeFile(removedFile);
+    });
+
+    const removeFileEvent = await oneEvent(el, 'file-remove-requested');
+    expect(removeFileEvent).to.exist;
+    expect(removeFileEvent.detail.removedFile).to.deep.equal({
+      name: 'foo.txt',
+      status: 'SUCCESS',
+      systemFile: {
+        name: 'foo.txt',
+      },
+      response: {
+        name: 'foo.txt',
+        status: 'SUCCESS',
+      },
+    });
+    expect(removeFileEvent.detail.status).to.deep.equal('SUCCESS');
+    expect(removeFileEvent.detail.uploadResponse).to.deep.equal({
+      name: 'foo.txt',
+      status: 'SUCCESS',
+    });
+  });
+
+  describe('Accessibility', async () => {
+    it('is accessible', async () => {
+      const el = await fixture(
+        html`<lion-selected-file-list
+          .fileList="${[fileSuccess, fileLoading, fileFail]}"
+        ></lion-selected-file-list>`,
+      );
+      await expect(el).to.be.accessible();
+    });
+
+    it(`adds aria-live="polite" to the feedback slot on focus, aria-live="assertive" to the feedback slot on blur,
+        so error messages appearing on blur will be read before those of the next input`, async () => {
+      const el = await fixture(html`
+        <lion-selected-file-list .fileList="${[fileFail]}"></lion-selected-file-list>
+      `);
+      const fileFeedback = el?.shadowRoot?.querySelectorAll('[id^="file-feedback"]')[0];
+      const removeButton = /** @type {HTMLButtonElement} */ (
+        el.shadowRoot?.querySelector('.selected__list__item__remove-button')
+      );
+      // @ts-ignore
+      expect(fileFeedback.getAttribute('aria-live')).to.equal('assertive');
+
+      removeButton?.focus();
+      // @ts-ignore
+      expect(fileFeedback.getAttribute('aria-live')).to.equal('polite');
+
+      removeButton?.blur();
+      // @ts-ignore
+      expect(fileFeedback.getAttribute('aria-live')).to.equal('assertive');
+    });
+  });
+});

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

@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+  ...bg,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Моля, качете файл с макс. размер {maxSize}.',
+  allowedFileValidatorSimple: 'Моля, качете файл от тип {allowedType} с макс. размер {maxSize}.',
+  allowedFileValidatorComplex:
+    'Моля, качете файл от тип {allowedTypesArray} или {allowedTypesLastItem} с макс. размер {maxSize}.',
+  dragAndDropText: 'Плъзнете и пуснете Вашите файлове тук или',
+  fileNameDescriptionLabel: 'Име на файл: {fileName}',
+  removeButtonLabel: 'Отстраняване на файла {fileName}',
+  selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',
+  selectTextMultipleFile: 'Избор на файлове',
+  selectTextSingleFile: 'Избор на файл',
+};

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

@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+  ...cs,
+};

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

@@ -0,0 +1,13 @@
+export default {
+  allowedFileSize: 'Nahrajte soubor s max. velikostí {maxSize}.',
+  allowedFileValidatorSimple:
+    'Nahrajte soubor typu {allowedTypesLastItem} s max. velikostí {maxSize}.',
+  allowedFileValidatorComplex:
+    'Nahrajte soubor typu {allowedTypesArray} nebo {allowedTypesLastItem} s max. velikostí {maxSize}.',
+  dragAndDropText: 'Přetáhněte soubory sem nebo',
+  fileNameDescriptionLabel: 'Název souboru: {fileName}',
+  removeButtonLabel: 'Odebrat soubor {fileName}',
+  selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',
+  selectTextMultipleFile: 'Vybrat soubory',
+  selectTextSingleFile: 'Vybrat soubor',
+};

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

@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+  ...de,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Laden Sie eine Datei mit max. {maxSize} hoch.',
+  allowedFileValidatorSimple: 'Laden Sie eine {allowedType}-Datei mit max. {maxSize} hoch.',
+  allowedFileValidatorComplex:
+    'Laden Sie eine {allowedTypesArray} oder {allowedTypesLastItem}-Datei mit max. {maxSize} hoch.',
+  dragAndDropText: 'Ziehen Sie Ihre Dateien per Drag & Drop hierher oder',
+  fileNameDescriptionLabel: 'Dateiname: {fileName}',
+  removeButtonLabel: 'Datei {fileName} entfernen',
+  selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',
+  selectTextMultipleFile: 'Dateien auswählen',
+  selectTextSingleFile: 'Datei auswählen',
+};

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

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

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

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

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

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

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

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Please select a file with max {maxSize}.',
+  allowedFileValidatorSimple: 'Please select a(n) {allowedType} file with max {maxSize}.',
+  allowedFileValidatorComplex:
+    '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}',
+  removeButtonLabel: 'Remove {fileName} file',
+  selectTextDuplicateFileName: 'A file with same filename was already present.',
+  selectTextMultipleFile: 'Select files',
+  selectTextSingleFile: 'Select file',
+};

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

@@ -0,0 +1,5 @@
+import es from './es.js';
+
+export default {
+  ...es,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Cargue un archivo de {maxSize} como máximo.',
+  allowedFileValidatorSimple: 'Cargue un archivo {allowedType} de {maxSize} como máximo.',
+  allowedFileValidatorComplex:
+    'Cargue un archivo {allowedTypesArray} o {allowedTypesLastItem} de {maxSize} como máximo.',
+  dragAndDropText: 'Arrastre y suelte los archivos aquí o',
+  fileNameDescriptionLabel: 'Nombre de archivo: {fileName}',
+  removeButtonLabel: 'Elimine el archivo: {fileName}',
+  selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',
+  selectTextMultipleFile: 'Seleccionar archivos',
+  selectTextSingleFile: 'Seleccionar archivo',
+};

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

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

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

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

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

@@ -0,0 +1,13 @@
+export default {
+  allowedFileSize: 'Veuillez télécharger un fichier avec une taille maximale de {maxSize}.',
+  allowedFileValidatorSimple:
+    'Veuillez télécharger un fichier {allowedType} avec une taille maximale de {maxSize}.',
+  allowedFileValidatorComplex:
+    '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}',
+  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',
+  selectTextSingleFile: 'Sélectionnez un fichier',
+};

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

@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+  ...hu,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Töltsön fel egy legfeljebb {maxSize} méretű fájlt.',
+  allowedFileValidatorSimple: 'Töltsön fel egy legfeljebb {maxSize} méretű {allowedType} fájlt.',
+  allowedFileValidatorComplex:
+    '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}',
+  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',
+  selectTextSingleFile: 'Fájl kiválasztása',
+};

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

@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+  ...it,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Caricare un file di {maxSize} max.',
+  allowedFileValidatorSimple: 'Caricare un file {allowedType} di {maxSize} max.',
+  allowedFileValidatorComplex:
+    'Caricare un file {allowedTypesArray} o {allowedTypesLastItem} di {maxSize} max.',
+  dragAndDropText: 'Trascinare i file qui o',
+  fileNameDescriptionLabel: 'Nome file: {fileName}',
+  removeButtonLabel: 'Rimuovere il file {fileName}',
+  selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',
+  selectTextMultipleFile: 'Seleziona file',
+  selectTextSingleFile: 'Seleziona file',
+};

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

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

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

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Upload een bestand van maximaal {maxSize}.',
+  allowedFileValidatorSimple: 'Upload een {allowedType}-bestand van maximaal {maxSize}.',
+  allowedFileValidatorComplex:
+    'Upload een {allowedTypesArray} of {allowedTypesLastItem}-bestand van maximaal {maxSize}.',
+  dragAndDropText: 'Sleep uw bestanden hierheen of',
+  fileNameDescriptionLabel: 'Bestandsnaam: {fileName}',
+  removeButtonLabel: 'Verwijder het bestand {fileName}',
+  selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
+  selectTextMultipleFile: 'Selecteer bestanden',
+  selectTextSingleFile: 'Selecteer bestand',
+};

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

@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+  ...pl,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Prześlij plik o maks. rozmiarze {maxSize}.',
+  allowedFileValidatorSimple: 'Prześlij plik {allowedType} o maks. rozmiarze {maxSize}.',
+  allowedFileValidatorComplex:
+    'Prześlij plik {allowedTypesArray} lub {allowedTypesLastItem} o maks. rozmiarze {maxSize}.',
+  dragAndDropText: 'Przeciągnij i upuść pliki tutaj lub',
+  fileNameDescriptionLabel: 'Nazwa pliku: {fileName}',
+  removeButtonLabel: 'Usuń plik {fileName}',
+  selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',
+  selectTextMultipleFile: 'Wybierz pliki',
+  selectTextSingleFile: 'Wybierz plik',
+};

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

@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+  ...ro,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Încărcaţi un fişier de max. {maxSize}.',
+  allowedFileValidatorSimple: 'Încărcaţi un fişier {allowedType} de max. {maxSize}.',
+  allowedFileValidatorComplex:
+    'Î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}',
+  removeButtonLabel: 'Eliminaţi fişierul {filename}',
+  selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',
+  selectTextMultipleFile: 'Selectare fișiere',
+  selectTextSingleFile: 'Selectare fișier',
+};

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

@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+  ...ru,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Загрузите файл размером не более {maxSize}.',
+  allowedFileValidatorSimple: 'Загрузите файл {allowedType} размером не более {maxSize}.',
+  allowedFileValidatorComplex:
+    'Загрузите файл {allowedTypesArray} или {allowedTypesLastItem} размером не более {maxSize}.',
+  dragAndDropText: 'Перетащите файлы сюда или',
+  fileNameDescriptionLabel: 'Название файла: {fileName}',
+  removeButtonLabel: 'Удалить файл {fileName}',
+  selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
+  selectTextMultipleFile: 'Выберите файлы',
+  selectTextSingleFile: 'Выберите файл',
+};

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

@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+  ...sk,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Nahrajte súbor s maximálnou veľkosťou {maxSize}.',
+  allowedFileValidatorSimple: 'Nahrajte súbor {allowedType} s maximálnou veľkosťou {maxSize}.',
+  allowedFileValidatorComplex:
+    '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}',
+  removeButtonLabel: 'Odstrániť súbor {fileName}',
+  selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',
+  selectTextMultipleFile: 'Vybrať súbory',
+  selectTextSingleFile: 'Vybrať súbor',
+};

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

@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+  ...uk,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: 'Завантажте файл розміром до {maxSize}.',
+  allowedFileValidatorSimple: 'Завантажте файл {allowedType} розміром до {maxSize}.',
+  allowedFileValidatorComplex:
+    'Завантажте файл {allowedTypesArray} або {allowedTypesLastItem} розміром до {maxSize}.',
+  dragAndDropText: 'Перетягніть файли сюди або',
+  fileNameDescriptionLabel: 'Ім’я файлу: {fileName}',
+  removeButtonLabel: 'Видалення файлу {fileName}',
+  selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',
+  selectTextMultipleFile: 'Виберіть файли',
+  selectTextSingleFile: 'Виберіть файл',
+};

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

@@ -0,0 +1,5 @@
+import zh from './zh.js';
+
+export default {
+  ...zh,
+};

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

@@ -0,0 +1,12 @@
+export default {
+  allowedFileSize: '请上传最大 {maxSize} 的文件。',
+  allowedFileValidatorSimple: '请上传最大 {maxSize} 的 {allowedType} 文件。',
+  allowedFileValidatorComplex:
+    '请上传最大 {maxSize} 的 {allowedTypesArray} 或 {allowedTypesLastItem} 文件。',
+  dragAndDropText: '将您的文件拖放到此处，或',
+  fileNameDescriptionLabel: '文件名: {fileName}',
+  removeButtonLabel: '删除 {fileName} 文件',
+  selectTextDuplicateFileName: '已存在具有相同文件名的文件。',
+  selectTextMultipleFile: '选择多个文件',
+  selectTextSingleFile: '选择文件',
+};

package/components/input-file/types/input-file.d.ts

@@ -0,0 +1,32 @@
+import { FeedbackMessage } from "../../form-core/types/validate/ValidateMixinTypes.js";
+
+type FileBasics = {
+  name: string;
+  /** size in bytes */
+  size: number;
+  type: string;
+  status?: 'SUCCESS' | 'FAIL' | 'LOADING';
+};
+
+export type InputFile = {
+  downloadUrl?: string;
+  errorMessage?: FeedbackMessage.message;
+  failedProp?: Array<string|number>;
+  response?: UploadResponse;
+  systemFile: Partial<SystemFile>;
+  validationFeedback?: Array<FeedbackMessage>;
+} & FileBasics & Partial<File>;
+
+export type SystemFile = {
+  downloadUrl?: string;
+  errorMessage?: FeedbackMessage.message;
+  failedProp?: Array<string|number>;
+  response?: UploadResponse;
+} & FileBasics & Partial<File>;
+
+
+export type UploadResponse = {
+  downloadUrl?: string;
+  errorMessage?: FeedbackMessage.message;
+  id?: string;
+} & Partial<FileBasics>;

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -180,7 +180,6 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          afterRender: this.__syncRegionWithDropdown,
         };
       },
     };
@@ -274,9 +273,7 @@ export class LionInputTelDropdown extends LionInputTel {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('activeRegion')) {
-      this.__syncRegionWithDropdown();
-    }
+    this.__syncRegionWithDropdown();
 
     if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
       if (this.disabled || this.readOnly) {

package/components/listbox/src/ListboxMixin.js

@@ -294,7 +294,6 @@ const ListboxMixinImplementation = superclass =>
        * @protected
        */
       this._repropagationRole = 'choice-group'; // configures FormControlMixin
-
       /**
        * When listbox is coupled to a textbox (in case we are dealing with a combobox),
        * spaces should not select an element (they need to be put in the textbox)
@@ -612,7 +611,9 @@ const ListboxMixinImplementation = superclass =>
           if (key === ' ' && this._listboxReceivesNoFocus) {
             return;
           }
-          ev.preventDefault();
+          if (key === ' ') {
+            ev.preventDefault();
+          }
           if (!this.formElements[this.activeIndex]) {
             return;
           }