@lion/ui 0.11.3 → 0.11.5

package/components/calendar/src/LionCalendar.js

@@ -88,6 +88,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
             case 'sk-SK':
             case 'sk':
               return import('@lion/ui/calendar-translations/sk.js');
+            case 'tr-TR':
+            case 'tr':
+              return import('@lion/ui/calendar-translations/tr.js');
             case 'uk-UA':
             case 'uk':
               return import('@lion/ui/calendar-translations/uk.js');

package/components/calendar/translations/tr.js

@@ -0,0 +1,11 @@
+export default {
+  nextMonth: 'Sonraki ay',
+  previousMonth: 'Önceki ay',
+  nextFullYear: 'Gelecek yıl',
+  previousFullYear: 'Geçen yıl',
+  defaultDisabledDate: 'Bu tarih kullanılamaz. Lütfen başka bir tarih seçin.',
+  beforeDisabledDate:
+    'Bu tarih kullanılamaz. En erken kullanılabilir tarih: {params}. Lütfen başka bir tarih seçin.',
+  afterDisabledDate:
+    'Bu tarih kullanılamaz. En geç kullanılabilir tarih: {params}. Lütfen başka bir tarih seçin.',
+};

package/components/form-core/src/FormControlMixin.js

@@ -293,11 +293,11 @@ const FormControlMixinImplementation = superclass =>
         );
       }
 
-      if (changedProperties.has('label') && this._labelNode) {
+      if (changedProperties.has('label') && this.__label && this._labelNode) {
         this._labelNode.textContent = this.label;
       }
 
-      if (changedProperties.has('helpText') && this._helpTextNode) {
+      if (changedProperties.has('helpText') && this.__helpText && this._helpTextNode) {
         this._helpTextNode.textContent = this.helpText;
       }
 

package/components/form-core/src/localizeNamespaceLoader.js

@@ -62,6 +62,10 @@ export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
       return import('@lion/ui/form-core-translations/sk-SK.js');
     case 'sk':
       return import('@lion/ui/form-core-translations/sk.js');
+    case 'tr-TR':
+      return import('@lion/ui/form-core-translations/tr-TR.js');
+    case 'tr':
+      return import('@lion/ui/form-core-translations/tr.js');
     case 'uk-UA':
       return import('@lion/ui/form-core-translations/uk-UA.js');
     case 'uk':

package/components/form-core/src/validate/ValidateMixin.js

@@ -8,11 +8,11 @@ import { AsyncQueue } from '../utils/AsyncQueue.js';
 import { pascalCase } from '../utils/pascalCase.js';
 import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
 import { LionValidationFeedback } from './LionValidationFeedback.js';
-import { ResultValidator as MetaValidator } from './ResultValidator.js';
 import { Unparseable } from './Unparseable.js';
-import { Required } from './validators/Required.js';
 import { FormControlMixin } from '../FormControlMixin.js';
 // eslint-disable-next-line no-unused-vars
+import { ResultValidator as MetaValidator } from './ResultValidator.js';
+// eslint-disable-next-line no-unused-vars
 import { Validator } from './Validator.js';
 // TODO: [v1] make all @readOnly => @readonly and actually make sure those values cannot be set
 
@@ -134,7 +134,7 @@ export const ValidateMixinImplementation = superclass =>
 
     /**
      * Combination of validators provided by Application Developer and the default validators
-     * @type {Validator[]}
+     * @type {(Validator | MetaValidator)[]}
      * @protected
      */
     get _allValidators() {
@@ -480,9 +480,9 @@ export const ValidateMixinImplementation = superclass =>
       const asyncValidators = /** @type {Validator[]} */ [];
 
       for (const v of this._allValidators) {
-        if (v instanceof MetaValidator) {
-          metaValidators.push(v);
-        } else if (v instanceof Required) {
+        if (/** @type {MetaValidator} */ (v)?.executeOnResults) {
+          metaValidators.push(/** @type {MetaValidator} */ (v));
+        } else if (/** @type {typeof Validator} */ (v.constructor)?.validatorName === 'Required') {
           // Required validator was already handled
         } else if (/** @type {typeof Validator} */ (v.constructor).async) {
           asyncValidators.push(v);

package/components/form-core/test/FormControlMixin.test.js

@@ -52,11 +52,13 @@ describe('FormControlMixin', () => {
       const elElem = /** @type {FormControlMixinClass} */ (
         await fixture(html`
         <${tag}>
-          <label slot="label">Email address</label>
+          <label slot="label"><b>Email</b> address</label>
           ${inputSlot}
         </${tag}>`)
       );
       expect(elElem.label).to.equal('Email address', 'as an element');
+      // @ts-expect-error
+      expect(elElem._labelNode.innerHTML).to.equal('<b>Email</b> address', 'html as an element');
     });
 
     it('has a label that supports inner html', async () => {
@@ -68,6 +70,8 @@ describe('FormControlMixin', () => {
         </${tag}>`)
       );
       expect(el.label).to.equal('Email address');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('Email <span>address</span>');
     });
 
     it('only takes label of direct child', async () => {
@@ -139,11 +143,13 @@ describe('FormControlMixin', () => {
       const elElem = /** @type {FormControlMixinClass} */ (
         await fixture(html`
         <${tag}>
-          <div slot="help-text">We will not send you any spam</div>
+          <div slot="help-text">We will <b>not</b> send you any spam</div>
           ${inputSlot}
         </${tag}>`)
       );
       expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
+      // @ts-expect-error
+      expect(elElem._helpTextNode.innerHTML).to.equal('We will <b>not</b> send you any spam');
     });
 
     it('can have a help-text that supports inner html', async () => {
@@ -155,6 +161,8 @@ describe('FormControlMixin', () => {
         </${tag}>`)
       );
       expect(el.helpText).to.equal('We will not send you any spam');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('We will not send you any <span>spam</span>');
     });
 
     it('only takes help-text of direct child', async () => {

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -130,6 +130,121 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
 
+      it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
+        class BundledValidator extends EventTarget {
+          static ['_$isValidator$'] = true;
+
+          static validatorName = '';
+
+          constructor() {
+            super();
+
+            this.type = 'error';
+          }
+
+          get config() {
+            // simplified version of the actual config
+            return {};
+          }
+
+          execute() {
+            // simplified version of the action execution
+            return true;
+          }
+
+          onFormControlConnect() {}
+
+          onFormControlDisconnect() {}
+
+          async _getMessage() {
+            // simplified version of the actual logic
+            return 'You need to enter something.';
+          }
+        }
+
+        class BundledRequired extends BundledValidator {
+          static get validatorName() {
+            return 'Required';
+          }
+        }
+
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+            <${tag}
+            .validators=${[new BundledRequired()]}
+            .modelValue=${'myValue'}
+          >${lightDom}</${tag}>
+          `)
+        );
+
+        expect(el.hasFeedbackFor).to.deep.equal([]);
+      });
+
+      it('determines whether the passed Validators are ResultValidators judging by the presence of "executeOnResults"', async () => {
+        class ValidateElementWithSuccessType extends ValidateElement {
+          static get validationTypes() {
+            return ['error', 'success'];
+          }
+        }
+
+        const elTagString = defineCE(ValidateElementWithSuccessType);
+        const elTag = unsafeStatic(elTagString);
+
+        class BundledValidator extends EventTarget {
+          static ['_$isValidator$'] = true;
+
+          static validatorName = '';
+
+          constructor() {
+            super();
+
+            this.type = 'error';
+          }
+
+          get config() {
+            // simplified version of the actual config
+            return {};
+          }
+
+          execute() {
+            // simplified version of the action execution
+            return true;
+          }
+
+          onFormControlConnect() {}
+
+          onFormControlDisconnect() {}
+
+          async _getMessage() {
+            // simplified version of the actual logic
+            return 'Success message.';
+          }
+        }
+
+        class BundledDefaultSuccess extends BundledValidator {
+          constructor() {
+            super();
+
+            this.type = 'success';
+          }
+
+          executeOnResults() {
+            return true;
+          }
+        }
+
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+            <${elTag}
+            .validators=${[new Required(), new BundledDefaultSuccess()]}
+            .modelValue=${'myValue'}
+          >${lightDom}</${elTag}>
+          `)
+        );
+
+        expect(el.hasFeedbackFor).to.deep.equal(['success']);
+      });
+
       it('revalidates when ".modelValue" changes', async () => {
         const el = /** @type {ValidateElement} */ (
           await fixture(html`
@@ -791,7 +906,7 @@ export function runValidateMixinSuite(customConfig) {
               // @ts-expect-error
               new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
             ]}" })]}"
-            .modelValue="${'123'}"            
+            .modelValue="${'123'}"
             label="Custom message for validator instance"
           ></${tag}>
         `)

package/components/form-core/translations/tr-TR.js

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

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

@@ -0,0 +1,6 @@
+export default {
+  validationError: 'Hatalı',
+  validationWarning: 'Uyarı',
+  validationSuccess: 'Başarılı',
+  validationInfo: 'Bilgilendirme',
+};

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

@@ -62,7 +62,6 @@ export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
         import('@lion/ui/overlays-translations/en.js'),
         import('@lion/ui/input-datepicker-translations/en.js'),
       ]);
-
     case 'es-ES':
       return combineLocalizeImports([
         import('@lion/ui/overlays-translations/es-ES.js'),
@@ -163,6 +162,13 @@ export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
         import('@lion/ui/overlays-translations/sk.js'),
         import('@lion/ui/input-datepicker-translations/sk.js'),
       ]);
+    case 'tr-TR':
+      return import('@lion/ui/input-datepicker-translations/tr-TR.js');
+    case 'tr':
+      return combineLocalizeImports([
+        import('@lion/ui/overlays-translations/tr.js'),
+        import('@lion/ui/input-datepicker-translations/tr.js'),
+      ]);
     case 'uk-UA':
       return combineLocalizeImports([
         import('@lion/ui/overlays-translations/uk-UA.js'),

package/components/input-datepicker/translations/tr-TR.js

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

package/components/input-datepicker/translations/tr.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Tarih seçimini aç',
+};

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

@@ -110,7 +110,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    * @type {string}
    */
   get buttonLabel() {
-    return this.__buttonLabel || this._buttonNode?.textContent || '';
+    return this.__buttonLabel || this._buttonNode?.textContent?.trim() || '';
   }
 
   /**
@@ -164,6 +164,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     this.enableDropZone = false;
     this.maxFileSize = MAX_FILE_SIZE;
     this.accept = '';
+    this.buttonLabel = '';
+    this._initialButtonLabel = '';
     /**
      * @type {InputFile[]}
      */
@@ -196,7 +198,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
   connectedCallback() {
     super.connectedCallback();
     this.__initialUploadResponse = this.uploadResponse;
-
+    this._initialButtonLabel = this.buttonLabel;
     this._inputNode.addEventListener('change', this._onChange);
     this._inputNode.addEventListener('click', this._onClick);
   }
@@ -214,10 +216,12 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     super.onLocaleUpdated();
     if (this.multiple) {
       // @ts-ignore
-      this.buttonLabel = this.msgLit('lion-input-file:selectTextMultipleFile');
+      this.buttonLabel =
+        this._initialButtonLabel || this.msgLit('lion-input-file:selectTextMultipleFile');
     } else {
       // @ts-ignore
-      this.buttonLabel = this.msgLit('lion-input-file:selectTextSingleFile');
+      this.buttonLabel =
+        this._initialButtonLabel || this.msgLit('lion-input-file:selectTextSingleFile');
     }
   }
 
@@ -758,15 +762,39 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     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')
-        );
+        if (this.uploadOnSelect) {
+          selectedFiles.textContent = /** @type {string} */ (
+            this.msgLit('lion-input-file:noFilesUploaded')
+          );
+        } else {
+          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
-        );
+        const { name } = this._selectedFilesMetaData[0].systemFile;
+        if (this.uploadOnSelect) {
+          selectedFiles.textContent = /** @type {string} */ (
+            errorMessage || this.msgLit('lion-input-file:fileUploaded') + (name ?? '')
+          );
+        } else {
+          selectedFiles.textContent = /** @type {string} */ (
+            errorMessage || this.msgLit('lion-input-file:fileSelected') + (name ?? '')
+          );
+        }
+      } else if (this.uploadOnSelect) {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:filesUploaded', {
+          numberOfFiles: this._selectedFilesMetaData.length,
+        })} ${
+          errorMessage
+            ? this.msgLit('lion-input-file:generalValidatorMessage', {
+                validatorMessage: errorMessage,
+                listOfErroneousFiles: erroneousFilesNames.join(', '),
+              })
+            : ''
+        }`;
       } else {
-        selectedFiles.textContent = `${this.msgLit('lion-input-file:numberOfFiles', {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:filesSelected', {
           numberOfFiles: this._selectedFilesMetaData.length,
         })} ${
           errorMessage

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

@@ -212,7 +212,6 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
 
         .sr-only {
           position: absolute;
-          top: 0;
           width: 1px;
           height: 1px;
           overflow: hidden;

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

@@ -1,6 +1,8 @@
 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 { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
 import sinon from 'sinon';
 
@@ -59,6 +61,10 @@ const file4 = /** @type {InputFile} */ (
 );
 
 describe('lion-input-file', () => {
+  const localizeManager = getLocalizeManager();
+
+  afterEach(localizeTearDown);
+
   it('has a type of "file"', async () => {
     const el = await fixture(html`<lion-input-file></lion-input-file>`);
     // @ts-expect-error [allow-protected-in-tests]
@@ -151,6 +157,43 @@ describe('lion-input-file', () => {
     expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('bar.txt');
   });
 
+  describe('structure', async () => {
+    it('can has a button label by default', async () => {
+      const el = await fixture(html`<lion-input-file></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select file');
+    });
+
+    it('can has a button label by default when multiple', async () => {
+      const el = await fixture(html`<lion-input-file multiple></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select files');
+    });
+
+    it('will update the button label on locale change', async () => {
+      const el = await fixture(html`<lion-input-file></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Select file');
+
+      localizeManager.locale = 'nl-NL';
+      await localizeManager.loadingComplete;
+      await el.updateComplete;
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Selecteer bestand');
+    });
+
+    it('can overwrite the button label', async () => {
+      const el = await fixture(html`<lion-input-file .buttonLabel="${'Foo'}"></lion-input-file>`);
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Foo');
+
+      el.buttonLabel = 'Bar';
+      await el.updateComplete;
+      // @ts-expect-error [allow-protected-in-test]
+      expect(el._buttonNode.textContent).to.equal('Bar');
+    });
+  });
+
   describe('invalid file types', async () => {
     const fileWrongType = /** @type {InputFile} */ (
       new File(['foobar'], 'foobar.txt', {
@@ -1197,7 +1240,29 @@ describe('lion-input-file', () => {
         );
       });
 
-      it('after contains upload name of file when SUCCESS', async () => {
+      it('after contains upload name of file when uploadOnSelect is true and status is SUCCESS', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'SUCCESS',
+            errorMessage: '',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html`
+          <lion-input-file label="Select" upload-on-select></lion-input-file>
+        `);
+
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files uploaded.');
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
+          'Uploaded file: file1.txt',
+        );
+      });
+
+      it('after contains upload name of file when uploadOnSelect is false and status is SUCCESS', async () => {
         const uploadResponse = [
           {
             name: 'file1.txt',
@@ -1212,7 +1277,9 @@ describe('lion-input-file', () => {
         // @ts-expect-error
         el.uploadResponse = uploadResponse;
         await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('file1.txt');
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
+          'Selected file: file1.txt',
+        );
       });
 
       it('after contains upload validator message of file when FAIL', async () => {
@@ -1233,7 +1300,34 @@ describe('lion-input-file', () => {
         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 () => {
+      it('after contains upload status of files when uploadOnSelect is true and multiple files have been selected', 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 upload-on-select></lion-input-file>
+        `);
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
+          'Uploaded files: 2 files. "something went wrong", for file2.txt.',
+        );
+      });
+
+      it('after contains upload status of files when uploadOnSelect is false and multiple files have been selected', async () => {
         const uploadResponse = [
           {
             name: 'file1.txt',
@@ -1256,7 +1350,7 @@ describe('lion-input-file', () => {
 
         await el.updateComplete;
         expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
-          '2 files. "something went wrong", for file2.txt.',
+          'Selected files: 2 files. "something went wrong", for file2.txt.',
         );
       });
     });

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

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Моля, качете файл от тип {allowedTypesArray} или {allowedTypesLastItem} с макс. размер {maxSize}.',
   dragAndDropText: 'Плъзнете и пуснете Вашите файлове тук или',
-  fileNameDescriptionLabel: 'Име на файл: {fileName}',
+  fileNameDescriptionLabel: 'Име на файл: ',
   generalValidatorMessage: '"{validatorMessage}", за {listOfErroneousFiles}.',
   noFilesSelected: 'Не са избрани файлове.',
   numberOfFiles: '{numberOfFiles} файла.',

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

@@ -5,7 +5,7 @@ export default {
   allowedFileValidatorComplex:
     'Nahrajte soubor typu {allowedTypesArray} nebo {allowedTypesLastItem} s max. velikostí {maxSize}.',
   dragAndDropText: 'Přetáhněte soubory sem nebo',
-  fileNameDescriptionLabel: 'Název souboru: {fileName}',
+  fileNameDescriptionLabel: 'Název souboru: ',
   generalValidatorMessage: '"{validatorMessage}", pro {listOfErroneousFiles}.',
   noFilesSelected: 'Nebyly vybrány žádné soubory.',
   numberOfFiles: '{numberOfFiles} soubory/souborů.',

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

@@ -4,9 +4,14 @@ export default {
   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}',
+  fileNameDescriptionLabel: 'Dateiname: ',
   generalValidatorMessage: '"{validatorMessage}", für {listOfErroneousFiles}.',
   noFilesSelected: 'Keine Dateien ausgewählt.',
+  noFilesUploaded: 'Keine Dateien hochgeladen.',
+  fileSelected: 'Ausgewählte Datei: ',
+  fileUploaded: 'Hochgeladene Datei: ',
+  filesSelected: 'Ausgewählte Dateien: {numberOfFiles} Dateien.',
+  filesUploaded: 'Hochgeladene Dateien: {numberOfFiles} Dateien.',
   numberOfFiles: '{numberOfFiles} Dateien.',
   removeButtonLabel: 'Datei {fileName} entfernen',
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',

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

@@ -4,10 +4,14 @@ export default {
   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}',
+  fileNameDescriptionLabel: 'File name: ',
   generalValidatorMessage: '"{validatorMessage}", for {listOfErroneousFiles}.',
   noFilesSelected: 'No files selected.',
-  numberOfFiles: '{numberOfFiles} files.',
+  noFilesUploaded: 'No files uploaded.',
+  fileSelected: 'Selected file: ',
+  fileUploaded: 'Uploaded file: ',
+  filesSelected: 'Selected files: {numberOfFiles} files.',
+  filesUploaded: 'Uploaded files: {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

@@ -4,7 +4,7 @@ export default {
   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}',
+  fileNameDescriptionLabel: 'Nombre de archivo: ',
   generalValidatorMessage: '"{validatorMessage}", para {listOfErroneousFiles}.',
   noFilesSelected: 'No se han seleccionado archivos.',
   numberOfFiles: '{numberOfFiles} archivos.',

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

@@ -5,7 +5,7 @@ export default {
   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}',
+  fileNameDescriptionLabel: 'Nom de fichier: ',
   generalValidatorMessage: '"{validatorMessage}", pour {listOfErroneousFiles}.',
   noFilesSelected: 'Aucun fichier sélectionné.',
   numberOfFiles: '{numberOfFiles} fichiers.',

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

@@ -4,7 +4,7 @@ export default {
   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}',
+  fileNameDescriptionLabel: 'Fájlnév: ',
   generalValidatorMessage: '"{validatorMessage}", ehhez: {listOfErroneousFiles}.',
   noFilesSelected: 'Nincs fájl kiválasztva.',
   numberOfFiles: '{numberOfFiles} fájl.',

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

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Caricare un file {allowedTypesArray} o {allowedTypesLastItem} di {maxSize} max.',
   dragAndDropText: 'Trascinare i file qui o',
-  fileNameDescriptionLabel: 'Nome file: {fileName}',
+  fileNameDescriptionLabel: 'Nome file: ',
   generalValidatorMessage: '"{validatorMessage}", per {listOfErroneousFiles}.',
   noFilesSelected: 'Nessun file selezionato.',
   numberOfFiles: '{numberOfFiles} file.',