@lion/ui 0.6.0-beta.0 → 0.6.0

package/components/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -1,6 +1,7 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { FormRegistrarMixin } from '../registration/FormRegistrarMixin.js';
 import { InteractionStateMixin } from '../InteractionStateMixin.js';
+import { ValidateMixin } from '../validate/ValidateMixin.js';
 
 /**
  * @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes.js').ChoiceGroupMixin} ChoiceGroupMixin
@@ -8,6 +9,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes.js').ElementWithParentFormGroup} ElementWithParentFormGroup
  * @typedef {import('../../types/form-group/FormGroupMixinTypes.js').FormControl} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes.js').ChoiceInputHost} ChoiceInputHost
+ * @typedef {import('../validate/Validator.js').Validator} Validator
  */
 
 /**
@@ -22,7 +24,9 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  */
 const ChoiceGroupMixinImplementation = superclass =>
   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
-  class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) {
+  class ChoiceGroupMixin extends FormRegistrarMixin(
+    ValidateMixin(InteractionStateMixin(superclass)),
+  ) {
     /** @type {any} */
     static get properties() {
       return {
@@ -123,6 +127,11 @@ const ChoiceGroupMixinImplementation = superclass =>
       }
     }
 
+    get operationMode() {
+      // @ts-ignore
+      return this._repropagationRole === 'choice-group' ? 'select' : 'enter';
+    }
+
     constructor() {
       super();
 

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

@@ -20,6 +20,7 @@ import { FormControlMixin } from '../FormControlMixin.js';
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidateMixin} ValidateMixin
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidationType} ValidationType
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').ValidateHost} ValidateHost
+ * @typedef {import('../../types/validate/ValidateMixinTypes.js').OperationMode} OperationMode
  * @typedef {import('../../types/validate/index.js').ValidatorOutcome} ValidatorOutcome
  * @typedef {typeof import('../../types/validate/ValidateMixinTypes.js').ValidateHost} ValidateHostConstructor
  * @typedef {{validator:Validator; outcome:boolean|string}} ValidationResultEntry
@@ -98,6 +99,15 @@ export const ValidateMixinImplementation = superclass =>
       return ['error'];
     }
 
+    /**
+     * Types of input interaction of the FormControl (for instance 'enter'|'select'|'upload')
+     * @overridable
+     * @type {OperationMode}
+     */
+    get operationMode() {
+      return 'enter';
+    }
+
     /**
      * Adds "._feedbackNode" as described below
      * @public

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

@@ -27,12 +27,15 @@ export class Validator extends EventTarget {
     this.__param = param;
     /** @type {ValidatorConfig} */
     this.__config = config || {};
-    /** @type {ValidationType} */
-    this.type = config?.type || 'error'; // Default type supported by ValidateMixin
+    /**
+     * Default type supported by ValidateMixin
+     * @type {ValidationType}
+     */
+    this.type = config?.type || 'error';
   }
 
   /**
-   * The name under which validation results get registered. For convience and predictability, this
+   * The name under which validation results get registered. For convenience and predictability, this
    * should always be the same as the constructor name (since it will be obfuscated in js builds,
    * we need to provide it separately).
    * @type {ValidatorName}

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

@@ -163,20 +163,20 @@ export const runRegistrationSuite = customConfig => {
     });
 
     it('works for components that have a delayed render', async () => {
-      class PerformUpdate extends FormRegistrarMixin(LitElement) {
-        async performUpdate() {
+      class ScheduleUpdate extends FormRegistrarMixin(LitElement) {
+        async scheduleUpdate() {
           // eslint-disable-next-line no-promise-executor-return
           await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
-          await super.performUpdate();
+          await super.scheduleUpdate();
         }
 
         render() {
           return html`<slot></slot>`;
         }
       }
-      const tagWrapperString = defineCE(PerformUpdate);
+      const tagWrapperString = defineCE(ScheduleUpdate);
       const tagWrapper = unsafeStatic(tagWrapperString);
-      const el = /** @type {PerformUpdate} */ (
+      const el = /** @type {ScheduleUpdate} */ (
         await fixture(html`
         <${tagWrapper}>
           <${childTag}></${childTag}>
@@ -359,10 +359,10 @@ export const runRegistrationSuite = customConfig => {
       it('works for portals that have a delayed render', async () => {
         const delayedPortalString = defineCE(
           class extends FormRegistrarPortalMixin(LitElement) {
-            async performUpdate() {
+            async scheduleUpdate() {
               // eslint-disable-next-line no-promise-executor-return
               await new Promise(resolve => setTimeout(() => resolve(undefined), 10));
-              await super.performUpdate();
+              await super.scheduleUpdate();
             }
 
             render() {

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

@@ -115,6 +115,8 @@ export declare class FormControlHost {
   set fieldName(arg: string);
   get fieldName(): string;
 
+  get operationMode(): string;
+
   /**
    * Allows to add extra element references to aria-labelledby attribute.
    */

package/components/form-core/types/validate/ValidateMixinTypes.ts

@@ -16,6 +16,8 @@ export type FeedbackMessage = {
 
 export type ValidationType = 'error' | 'warning' | 'info' | 'success' | string;
 
+export type OperationMode = 'enter' | 'select' | 'upload';
+
 export declare class ValidateHost {
   /**
    * Used by Application Developers to add Validators to a FormControl.

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

@@ -2,7 +2,7 @@ import { FormControlHost } from '../../src/FormControlMixin.js';
 import { ValidationType } from './ValidateMixinTypes.js';
 
 /**
- * The name under which validation results get registered. For convience and predictability, this
+ * The name under which validation results get registered. For convenience and predictability, this
  * should always be the same as the constructor name (since it will be obfuscated in js builds,
  * we need to provide it separately).
  * @example
@@ -34,7 +34,7 @@ export type ValidatorConfig = {
 };
 
 /**
- * Output of the `execute` function that returns a validity outcome. When we need to shpw feedback,
+ * Output of the `execute` function that returns a validity outcome. When we need to show feedback,
  * it should return true, otherwise false. So when an error\info|warning|success message
  * needs to be shown, return true.
  * It's also possible to return an enum. Let's say that a phone number can have multiple

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

@@ -215,6 +215,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  get operationMode() {
+    return 'upload';
+  }
+
   get _acceptCriteria() {
     /** @type {string[]} */
     let allowedFileTypes = [];
@@ -433,7 +438,8 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               ];
             }
           });
-          // this._selectedFilesMetaData = [...this._selectedFilesMetaData];
+          // TODO: add a unit test for this
+          this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
     }

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

@@ -324,7 +324,10 @@ export class LionInputTelDropdown extends LionInputTel {
    */
   _onDropdownValueChange(event) {
     const isInitializing = event.detail?.initialize || !this._phoneUtil;
-    const dropdownValue = /** @type {RegionCode} */ (event.target.modelValue || event.target.value);
+    const dropdownElement = event.target;
+    const dropdownValue = /** @type {RegionCode} */ (
+      dropdownElement.modelValue || dropdownElement.value
+    );
 
     if (isInitializing || this.activeRegion === dropdownValue) {
       return;
@@ -355,8 +358,13 @@ export class LionInputTelDropdown extends LionInputTel {
     }
 
     // Put focus on text box
-    const overlayController = event.target._overlayCtrl;
-    if (overlayController?.isShown) {
+    //
+    // A LionSelectRich with interactionMode set on windows/linux
+    // will set each item on arrow key up/down to activeElement
+    // which causes the focus to jump every time to the inputNode
+    const overlayController = dropdownElement._overlayCtrl;
+    // @ts-ignore interactionMode only exists on LionSelectRich not on HTMLSelectElement
+    if (overlayController?.isShown && dropdownElement.interactionMode !== 'windows/linux') {
       setTimeout(() => {
         this._inputNode.focus();
       });

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

@@ -1,12 +1,12 @@
 import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js';
-import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { ref } from 'lit/directives/ref.js';
-
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
 import { LionOption } from '@lion/ui/listbox.js';
 import { LionSelectRich } from '@lion/ui/select-rich.js';
 import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js';
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 
 /**
@@ -62,4 +62,112 @@ describe('WithFormControlInputTelDropdown', () => {
   // @ts-expect-error
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
+
+  it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
+    class InputTelDropdownMac extends LionInputTelDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="mac"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.regionCode,
+                regionMeta =>
+                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-tel-dropdown-mac', InputTelDropdownMac);
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(
+        html`
+          <input-tel-dropdown-mac
+            .allowedRegions="${['NL', 'BE']}"
+            .modelValue="${'+31612345678'}"
+          ></input-tel-dropdown-mac>
+        `,
+      )
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'BE');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(el._inputNode).to.equal(document.activeElement);
+    }
+  });
+
+  it('does not focus the textbox right after selection if selected via opened dropdown if interaction-mode is windows/linux', async () => {
+    class InputTelDropdownWindows extends LionInputTelDropdown {
+      static templates = {
+        ...(super.templates || {}),
+        /**
+         * @param {TemplateDataForDropdownInputTel} templateDataForDropdown
+         */
+        dropdown: templateDataForDropdown => {
+          const { refs, data } = templateDataForDropdown;
+          // TODO: once spread directive available, use it per ref (like ref(refs?.dropdown?.ref))
+          return html`
+            <lion-select-rich
+              ${ref(refs?.dropdown?.ref)}
+              label="${refs?.dropdown?.labels?.country}"
+              label-sr-only
+              @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
+              style="${refs?.dropdown?.props?.style}"
+              interaction-mode="windows/linux"
+            >
+              ${repeat(
+                data.regionMetaList,
+                regionMeta => regionMeta.regionCode,
+                regionMeta =>
+                  html` <lion-option .choiceValue="${regionMeta.regionCode}"> </lion-option> `,
+              )}
+            </lion-select-rich>
+          `;
+        },
+      };
+    }
+    customElements.define('input-tel-dropdown-windows', InputTelDropdownWindows);
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(
+        html`
+          <input-tel-dropdown-windows
+            .allowedRegions="${['NL', 'BE']}"
+            .modelValue="${'+31612345678'}"
+          ></input-tel-dropdown-windows>
+        `,
+      )
+    );
+    const dropdownElement = el.refs.dropdown.value;
+    // @ts-expect-error [allow-protected-in-tests]
+    if (dropdownElement?._overlayCtrl) {
+      // @ts-expect-error [allow-protected-in-tests]
+      dropdownElement._overlayCtrl.show();
+      mimicUserChangingDropdown(dropdownElement, 'BE');
+      await el.updateComplete;
+      await aTimeout(0);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(el._inputNode).to.not.equal(document.activeElement);
+    }
+  });
 });

package/components/input-tel-dropdown/test-helpers/mimicUserChangingDropdown.js

@@ -0,0 +1,22 @@
+/**
+ * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement
+ */
+
+/**
+ * @param {DropdownElement} dropdownEl
+ * @param {string} value
+ */
+export function mimicUserChangingDropdown(dropdownEl, value) {
+  if ('modelValue' in dropdownEl) {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.modelValue = value;
+    dropdownEl.dispatchEvent(
+      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
+    );
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    dropdownEl.value = value;
+    dropdownEl.dispatchEvent(new Event('change'));
+    dropdownEl.dispatchEvent(new Event('input'));
+  }
+}

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -11,6 +11,7 @@ import {
 } from '@open-wc/testing';
 import sinon from 'sinon';
 import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js';
+import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -36,24 +37,6 @@ function getDropdownValue(dropdownEl) {
   return dropdownEl.value;
 }
 
-/**
- * @param {DropdownElement} dropdownEl
- * @param {string} value
- */
-function mimicUserChangingDropdown(dropdownEl, value) {
-  if ('modelValue' in dropdownEl) {
-    // eslint-disable-next-line no-param-reassign
-    dropdownEl.modelValue = value;
-    dropdownEl.dispatchEvent(
-      new CustomEvent('model-value-changed', { detail: { isTriggeredByUser: true } }),
-    );
-  } else {
-    // eslint-disable-next-line no-param-reassign
-    dropdownEl.value = value;
-    dropdownEl.dispatchEvent(new Event('change'));
-  }
-}
-
 /**
  * @param {{ klass:LionInputTelDropdown }} config
  */
@@ -335,26 +318,6 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         expect(el.value).to.equal('+32');
       });
 
-      it('focuses the textbox right after selection if selected via opened dropdown', async () => {
-        const el = await fixture(
-          html` <${tag} .allowedRegions="${[
-            'NL',
-            'BE',
-          ]}" .modelValue="${'+31612345678'}"></${tag}> `,
-        );
-        const dropdownElement = el.refs.dropdown.value;
-        // @ts-expect-error [allow-protected-in-tests]
-        if (dropdownElement?._overlayCtrl) {
-          // @ts-expect-error [allow-protected-in-tests]
-          dropdownElement._overlayCtrl.show();
-          mimicUserChangingDropdown(dropdownElement, 'BE');
-          await el.updateComplete;
-          await aTimeout(0);
-          // @ts-expect-error [allow-protected-in-tests]
-          expect(el._inputNode).to.equal(document.activeElement);
-        }
-      });
-
       it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
         const el = await fixture(
           html` <${tag} .allowedRegions="${[

package/components/localize/src/LocalizeMixin.js

@@ -64,11 +64,11 @@ const LocalizeMixinImplementation = superclass =>
      * hook into LitElement to only render once all translations are loaded
      * @returns {Promise.<void>}
      */
-    async performUpdate() {
+    async scheduleUpdate() {
       if (Object.getPrototypeOf(this).constructor.waitForLocalizeNamespaces) {
         await this.localizeNamespacesLoaded;
       }
-      super.performUpdate();
+      super.scheduleUpdate();
     }
 
     connectedCallback() {

package/components/overlays/src/OverlayController.js

@@ -931,7 +931,7 @@ export class OverlayController extends EventTarget {
       return;
     }
 
-    if (this.elementToFocusAfterHide) {
+    if (this.elementToFocusAfterHide instanceof HTMLElement) {
       this.elementToFocusAfterHide.focus();
       this.elementToFocusAfterHide.scrollIntoView({ block: 'nearest' });
     } else {

package/components/select/src/LionSelect.js

@@ -57,6 +57,11 @@ class LionFieldWithSelect extends LionField {
  * @customElement lion-select
  */
 export class LionSelect extends LionFieldWithSelect {
+  // eslint-disable-next-line class-methods-use-this
+  get operationMode() {
+    return 'select';
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);

package/components/validate-messages/src/getLocalizedMessage.js

@@ -6,6 +6,11 @@
 /** @type {Promise<void | object>} */
 let pendingPromise;
 
+/**
+ * @param {string} string
+ */
+const capitalize = string => (string && string[0].toUpperCase() + string.slice(1)) || '';
+
 /**
  * @param {{localize: LocalizeManager}} opts
  */
@@ -105,7 +110,13 @@ export async function loadValidateNamespace({ localize }) {
 export const getLocalizedMessage = async ({ data, localize }) => {
   await loadValidateNamespace({ localize });
   if (data) {
-    return localize.msg(`lion-validate:${data.type}.${data.name}`, data);
+    const operationMode =
+      data.formControl?.operationMode !== 'enter' && data.name === 'Required'
+        ? capitalize(data.formControl?.operationMode)
+        : undefined;
+    const validatorName = operationMode ? `_${data.name}${operationMode}` : data.name;
+
+    return localize.msg(`lion-validate:${data.type}.${validatorName}`, data);
   }
   return '';
 };

package/components/validate-messages/test/loadDefaultFeedbackMessagesNoSideEffects.test.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-unused-vars, no-param-reassign */
+import { expect } from '@open-wc/testing';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
+import { MinDate, MinLength, Required } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessagesNoSideEffects } from '@lion/ui/validate-messages-no-side-effects.js';
+
+/**
+ * @typedef {import('../../form-core/src/validate/Validator.js').Validator} Validator
+ */
+
+/**
+ * @param {Validator} validatorEl
+ */
+function getProtectedMembers(validatorEl) {
+  // @ts-ignore protected members allowed in test
+  return {
+    // @ts-ignore
+    getMessage: (...args) => validatorEl._getMessage(...args),
+  };
+}
+
+/**
+ * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
+ * @typedef {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
+ */
+
+describe('loadDefaultFeedbackMessagesNoSideEffects', () => {
+  const localizeManager = getLocalizeManager();
+
+  it('will set default feedback message for Required', async () => {
+    const el = new Required();
+    const { getMessage } = getProtectedMembers(el);
+    expect(await getMessage()).to.equals(
+      'Please configure an error message for "Required" by overriding "static async getMessage()"',
+    );
+
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    expect(await getMessage({ fieldName: 'password' })).to.equal('Please enter a(n) password.');
+  });
+
+  it('passes data to the feedback message', async () => {
+    const el = new MinLength(10);
+    const { getMessage } = getProtectedMembers(el);
+
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    expect(await getMessage({ fieldName: 'password' })).to.equal(
+      'Please enter a correct password (at least 10 characters).',
+    );
+
+    const el2 = new MinDate(new Date('2024-01-29'));
+    // @ts-ignore protected members allowed in test
+    expect(await el2._getMessage({ fieldName: 'date' })).to.equal(
+      'Please enter a(n) date after or equal to 29/01/2024.',
+    );
+  });
+
+  it('will set select specific feedback message for Required when operationMode is set', async () => {
+    const el = new Required();
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    const { getMessage } = getProtectedMembers(el);
+    const formControl = { operationMode: 'select' };
+    expect(await getMessage({ fieldName: 'password', formControl })).to.equal(
+      'Please select a(n) password.',
+    );
+  });
+
+  it('will set upload specific feedback message for Required when operationMode is set', async () => {
+    const el = new Required();
+    const { getMessage } = getProtectedMembers(el);
+
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    const formControl = { operationMode: 'upload' };
+    expect(await getMessage({ fieldName: 'password', formControl })).to.equal(
+      'Please upload a(n) password.',
+    );
+  });
+
+  it('will set ignore the operationMode for any other validator then Required, e.g. MinLength', async () => {
+    const el = new MinLength(10);
+    const { getMessage } = getProtectedMembers(el);
+
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    const formControl = { operationMode: 'select' };
+    expect(await getMessage({ fieldName: 'password', formControl })).to.equal(
+      'Please enter a correct password (at least 10 characters).',
+    );
+  });
+
+  it('will await loading of translations when switching locale', async () => {
+    const el = new Required();
+    const { getMessage } = getProtectedMembers(el);
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
+    expect(await getMessage({ fieldName: 'password' })).to.equal('Please enter a(n) password.');
+    expect(await getMessage({ fieldName: 'user name' })).to.equal('Please enter a(n) user name.');
+
+    localizeManager.locale = 'de-DE';
+    await localizeManager.loadingComplete;
+    expect(await getMessage({ fieldName: 'Password' })).to.equal(
+      'Password muss ausgefüllt werden.',
+    );
+    expect(await getMessage({ fieldName: 'Benutzername' })).to.equal(
+      'Benutzername muss ausgefüllt werden.',
+    );
+  });
+});

package/components/validate-messages/translations/bg.js

@@ -1,6 +1,8 @@
 export default {
   error: {
     Required: 'Моля, въведете също {fieldName}.',
+    _RequiredUpload: 'Моля, качете {fieldName}.',
+    _RequiredSelect: 'Wählen Sie auch einen Wert für {fieldName} aus.',
     EqualsLength: 'Моля, въведете правилно {fieldName} от точно {params} знака.',
     MinLength: 'Моля, въведете правилен {fieldName} (поне {params}).',
     MaxLength: 'Моля, въведете правилен {fieldName} (до {params} знака).',
@@ -22,6 +24,8 @@ export default {
   },
   warning: {
     Required: 'Моля, въведете също {fieldName}.',
+    _RequiredUpload: 'Моля, качете {fieldName}.',
+    _RequiredSelect: 'Wählen Sie auch einen Wert für {fieldName} aus.',
     EqualsLength: 'Моля, въведете правилно {fieldName} от точно {params} знака.',
     MinLength: 'Моля, въведете правилен {fieldName} (поне {params}).',
     MaxLength: 'Моля, въведете правилен {fieldName} (до {params} знака).',

package/components/validate-messages/translations/cs.js

@@ -1,6 +1,8 @@
 export default {
   error: {
     Required: 'Zadejte rovněž {fieldName}.',
+    _RequiredUpload: 'Nahrajte {fieldname}.',
+    _RequiredSelect: 'Vyberte rovněž {fieldname}.',
     EqualsLength: 'Zadejte správné {fieldName}, přesně {params} znaků.',
     MinLength: 'Zadejte správné {fieldName} (alespoň {params}).',
     MaxLength: 'Zadejte správné {fieldName} (až {params} znaků).',
@@ -21,6 +23,8 @@ export default {
   },
   warning: {
     Required: 'Zadejte rovněž {fieldName}.',
+    _RequiredUpload: 'Nahrajte {fieldname}.',
+    _RequiredSelect: 'Vyberte rovněž {fieldname}.',
     EqualsLength: 'Zadejte správné {fieldName}, přesně {params} znaků.',
     MinLength: 'Zadejte správné {fieldName} (alespoň {params}).',
     MaxLength: 'Zadejte správné {fieldName} (až {params} znaků).',

package/components/validate-messages/translations/de.js

@@ -1,6 +1,8 @@
 export default {
   error: {
     Required: '{fieldName} muss ausgefüllt werden.',
+    _RequiredUpload: 'Bitte laden Sie ein/e/n {fieldName} hoch.',
+    _RequiredSelect: 'Wählen Sie auch einen Wert für {fieldName} aus.',
     EqualsLength: 'Geben Sie einen korrekten Wert für {fieldName} mit exakt {params} Zeichen ein.',
     MinLength: 'Du musst mindestens {params} Zeichen eingeben.',
     MaxLength: 'Du kannst maximal {params} Zeichen eingeben.',
@@ -23,6 +25,8 @@ export default {
   },
   warning: {
     Required: '{fieldName} sollte ausgefüllt werden.',
+    _RequiredUpload: 'Bitte laden Sie ein/e/n {fieldName} hoch.',
+    _RequiredSelect: 'Wählen Sie auch einen Wert für {fieldName} aus.',
     EqualsLength: 'Geben Sie einen korrekten Wert für {fieldName} mit exakt {params} Zeichen ein.',
     MinLength: 'Du solltest mindestens {params} Zeichen eingeben.',
     MaxLength: 'Du kannst maximal {params} Zeichen eingeben.',