@lion/ui 0.7.2 → 0.7.4

package/components/form-core/translations/zh.js

@@ -0,0 +1,6 @@
+export default {
+  validationError: '错误',
+  validationWarning: '警告',
+  validationSuccess: '成功',
+  validationInfo: '信息',
+};

package/components/form-core/types/FormControlMixinTypes.ts

@@ -43,10 +43,6 @@ export declare interface HTMLElementWithValue extends HTMLElement {
 export declare class FormControlHost {
   static get styles(): CSSResultArray;
   static get properties(): {
-    name: {
-      type: StringConstructor;
-      reflect: boolean;
-    };
     readOnly: {
       type: BooleanConstructor;
       attribute: string;

package/components/form-core/types/registration/FormRegisteringMixinTypes.ts

@@ -4,10 +4,13 @@ import { LitElement } from 'lit';
 import { FormRegistrarHost } from './FormRegistrarMixinTypes.js';
 
 export declare class FormRegisteringHost {
-  /**
-   * The name the host is registered with to a parent
-   */
-  name: string;
+  static get properties(): {
+    name: {
+      type: StringConstructor;
+      reflect: boolean;
+    };
+  }
+  
   /**
    * To encourage accessibility best practices, `form-element-register` events
    * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that
@@ -17,12 +20,22 @@ export declare class FormRegisteringHost {
    */
   allowCrossRootRegistration: boolean;
 
+  /**
+   * The name the element will be registered with to the .formElements collection
+   * of the parent. Also, it serves as the key of key/value pairs in
+   *  modelValue/serializedValue objects
+   */
+  get name(): string;
+  set name(arg: any);
+
   /**
    * The registrar this FormControl registers to, Usually a descendant of FormGroup or
    * ChoiceGroup
    */
   protected _parentFormGroup: FormRegistrarHost | undefined;
 
+  private __name: string;
+
   private __unregisterFormElement: void;
 }
 

package/components/form-integrations/test/dialog-integrations.test.js

@@ -17,10 +17,12 @@ import '@lion/ui/define/lion-radio.js';
 // Test umbrella form inside dialog
 describe('Form inside dialog Integrations', () => {
   it('Successfully registers all form components inside a dialog', async () => {
-    const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
-      <button slot="invoker">Open Dialog</button>
-      <umbrella-form slot="content"></umbrella-form>
-    </lion-dialog>`);
+    const el = /** @type {LionDialog} */ await fixture(
+      html` <lion-dialog>
+        <button slot="invoker">Open Dialog</button>
+        <umbrella-form slot="content"></umbrella-form>
+      </lion-dialog>`,
+    );
 
     // @ts-ignore
     const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);

package/components/helpers/src/SbActionLogger.js

@@ -25,8 +25,17 @@ export class SbActionLogger extends LitElement {
 
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
           display: block;
-          font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
-            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          font-family:
+            'Nunito Sans',
+            -apple-system,
+            '.SFNSText-Regular',
+            'San Francisco',
+            BlinkMacSystemFont,
+            'Segoe UI',
+            'Helvetica Neue',
+            Helvetica,
+            Arial,
+            sans-serif;
         }
 
         .header__info {

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

@@ -118,20 +118,18 @@ describe('lion-icon', () => {
       window.addEventListener('importDone', resolve);
     });
 
-    const el = await fixture(
-      html`
-        <lion-icon
-          .svg=${until(
-            import('./heart.svg.js').then(e => {
-              dispatchEvent(new CustomEvent('importDone'));
-              return e.default;
-            }),
-            html``,
-          )}
-          aria-label="Love"
-        ></lion-icon>
-      `,
-    );
+    const el = await fixture(html`
+      <lion-icon
+        .svg=${until(
+          import('./heart.svg.js').then(e => {
+            dispatchEvent(new CustomEvent('importDone'));
+            return e.default;
+          }),
+          html``,
+        )}
+        aria-label="Love"
+      ></lion-icon>
+    `);
 
     await svgLoading;
     // We need to await the until directive is resolved and rendered to the dom

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

@@ -36,24 +36,20 @@ describe('<lion-input-amount>', () => {
 
   it('formatAmount uses locale provided in formatOptions', async () => {
     let el = /** @type {LionInputAmount} */ (
-      await fixture(
-        html`
-          <lion-input-amount
-            .formatOptions="${{ locale: 'en-GB' }}"
-            .modelValue="${123}"
-          ></lion-input-amount>
-        `,
-      )
-    );
-    expect(el.formattedValue).to.equal('123.00');
-    el = await fixture(
-      html`
+      await fixture(html`
         <lion-input-amount
-          .formatOptions="${{ locale: 'nl-NL' }}"
+          .formatOptions="${{ locale: 'en-GB' }}"
           .modelValue="${123}"
         ></lion-input-amount>
-      `,
+      `)
     );
+    expect(el.formattedValue).to.equal('123.00');
+    el = await fixture(html`
+      <lion-input-amount
+        .formatOptions="${{ locale: 'nl-NL' }}"
+        .modelValue="${123}"
+      ></lion-input-amount>
+    `);
     expect(el.formattedValue).to.equal('123,00');
   });
 
@@ -199,6 +195,9 @@ describe('<lion-input-amount>', () => {
     expect(el.formattedValue).to.equal('123.45');
     localize.locale = 'nl-NL';
     await el.updateComplete;
+    // TODO find out why the localize needs to be loaded for the feedbackNode
+    // @ts-ignore [allow-protected] in test
+    await el._feedbackNode.localizeNamespacesLoaded;
     expect(el.formattedValue).to.equal('123,45');
   });
 

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

@@ -286,10 +286,10 @@ describe('<lion-input-datepicker>', () => {
 
       it('converts MinDate validator to "minDate" property', async () => {
         const myMinDate = new Date('2019/06/15');
-        const el = await fixture(html` <lion-input-datepicker
-          .validators="${[new MinDate(myMinDate)]}"
-        >
-        </lion-input-datepicker>`);
+        const el = await fixture(
+          html` <lion-input-datepicker .validators="${[new MinDate(myMinDate)]}">
+          </lion-input-datepicker>`,
+        );
         const elObj = new DatepickerInputObject(el);
         await elObj.openCalendar();
 

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

@@ -77,6 +77,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         >
           ${this.buttonLabel}
         </button>`,
+      after: () => html`<div data-description></div>`,
       'selected-file-list': () => ({
         template: html`
           <lion-selected-file-list
@@ -105,8 +106,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   }
 
   /**
-   * The helpt text for the input node.
-   * When no light dom defined via [slot=help-text], this value will be used
+   * The label of the button
    * @type {string}
    */
   get buttonLabel() {
@@ -176,6 +176,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
 
     /** @private */
     this.__duplicateFileNamesValidator = new DuplicateFileNames({ show: false });
+    /**
+     * @private
+     * @type {FileList | null}
+     */
+    this.__previouslyParsedFiles = null;
   }
 
   /**
@@ -283,8 +288,20 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @returns {InputFile[]} parsedValue
    */
   parser() {
-    // @ts-ignore
-    return this._inputNode.files ? Array.from(this._inputNode.files) : [];
+    // parser is called twice for one user event; one for 'user-input-change', another for 'change'
+    if (this.__previouslyParsedFiles === this._inputNode.files) {
+      return this.modelValue;
+    }
+    this.__previouslyParsedFiles = this._inputNode.files;
+
+    const files = this._inputNode.files
+      ? /** @type {InputFile[]} */ (Array.from(this._inputNode.files))
+      : [];
+    if (this.multiple) {
+      return [...(this.modelValue ?? []), ...files];
+    }
+
+    return files;
   }
 
   /**
@@ -332,8 +349,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     super.firstUpdated(changedProperties);
 
     this.__setupFileValidators();
-    // We need to update our light dom
-    this._enhanceSelectedList();
 
     // TODO: if there's no inputNode by now, we should either throw an error or add a slot change listener
     if (this._inputNode) {
@@ -443,6 +458,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
+      this._updateUploadButtonDescription();
     }
   }
 
@@ -482,16 +498,17 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
 
     this._inputNode.files = ev.dataTransfer.files;
-    // @ts-ignore
-    this.modelValue = Array.from(ev.dataTransfer.files);
-    // if same file is selected again, e.dataTransfer.files lists that file.
-    // So filter if the file already exists
-    // @ts-ignore
-    // const newFiles = this.__computeNewAddedFiles(Array.from(ev.dataTransfer.files));
-    // if (newFiles.length > 0) {
-    //   this._processFiles(newFiles);
-    // }
-    this._processFiles(Array.from(ev.dataTransfer.files));
+
+    if (this.multiple) {
+      const computedFiles = this.__computeNewAddedFiles(
+        /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)),
+      );
+      this.modelValue = [...(this.modelValue ?? []), ...computedFiles];
+    } else {
+      this.modelValue = /** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files));
+    }
+
+    this._processFiles(/** @type {InputFile[]} */ (Array.from(ev.dataTransfer.files)));
   }
 
   /**
@@ -521,20 +538,6 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     ev.target.value = ''; // eslint-disable-line no-param-reassign
   }
 
-  /**
-   * @protected
-   */
-  _enhanceSelectedList() {
-    /**
-     * @type {LionSelectedFileList | null}
-     */
-    const selectedFileList = this.querySelector('[slot="selected-file-list"]');
-    if (selectedFileList) {
-      selectedFileList.setAttribute('id', `selected-file-list-${this._inputId}`);
-      this.addToAriaDescribedBy(selectedFileList, { idPrefix: 'selected-file-list' });
-    }
-  }
-
   /**
    * @protected
    */
@@ -739,6 +742,46 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     fileObj.validationFeedback?.push(errorObj);
   }
 
+  /**
+   * Description for screen readers connected to the button about how many files have been updated
+   * @protected
+   */
+  _updateUploadButtonDescription() {
+    const erroneousFilesNames = /** @type {string[]} */ ([]);
+    let errorMessage;
+
+    this._selectedFilesMetaData.forEach(file => {
+      if (file.status === 'FAIL') {
+        errorMessage = file.validationFeedback ? file.validationFeedback[0].message.toString() : '';
+        erroneousFilesNames.push(/** @type {string} */ (file.systemFile.name));
+      }
+    });
+
+    const selectedFiles = this.querySelector('[slot="after"]');
+    if (selectedFiles) {
+      if (!this._selectedFilesMetaData || this._selectedFilesMetaData.length === 0) {
+        selectedFiles.textContent = /** @type {string} */ (
+          this.msgLit('lion-input-file:noFilesSelected')
+        );
+      } else if (this._selectedFilesMetaData.length === 1) {
+        selectedFiles.textContent = /** @type {string} */ (
+          errorMessage || this._selectedFilesMetaData[0].systemFile.name
+        );
+      } else {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:numberOfFiles', {
+          numberOfFiles: this._selectedFilesMetaData.length,
+        })} ${
+          errorMessage
+            ? this.msgLit('lion-input-file:generalValidatorMessage', {
+                validatorMessage: errorMessage,
+                listOfErroneousFiles: erroneousFilesNames.join(', '),
+              })
+            : ''
+        }`;
+      }
+    }
+  }
+
   /**
    * @private
    * @param {InputFile} removedFile
@@ -755,6 +798,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
     this._inputNode.value = '';
     this._handleErrors();
+    this._updateUploadButtonDescription();
   }
 
   /**
@@ -847,6 +891,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   _inputGroupInputTemplate() {
     return html`
       <slot name="input"> </slot>
+      <slot name="after"> </slot>
       ${this.enableDropZone && this._isDragAndDropSupported
         ? this._dropZoneTemplate()
         : html`
@@ -891,6 +936,19 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
           border: dashed 2px black;
           padding: 24px 0;
         }
+
+        .input-group__container ::slotted([slot='after']) {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
       `,
     ];
   }

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 () => {
@@ -637,9 +640,9 @@ describe('lion-input-file', () => {
         })
       );
 
-      const el = await fixture(
-        html` <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file> `,
-      );
+      const el = await fixture(html`
+        <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
+      `);
 
       setTimeout(() => {
         mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);
@@ -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',