@lion/ui 0.15.1 → 0.15.3

package/README.md

@@ -26,15 +26,15 @@
 </p>
 
 <p align="center">
-  <a href="https://lion-web.netlify.app">Website</a>
+  <a href="https://lion.js.org">Website</a>
   ·
-  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
+  <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
   ·
-  <a href="https://lion-web.netlify.app/guides/">Guides</a>
+  <a href="https://lion.js.org/guides/">Guides</a>
   ·
-  <a href="https://lion-web.netlify.app/components/">Components</a>
+  <a href="https://lion.js.org/components/">Components</a>
   ·
-  <a href="https://lion-web.netlify.app/blog/">Blog</a>
+  <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
 **Lion is a set of highly performant, accessible and flexible Web Components.!**
@@ -51,9 +51,38 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 > This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
 
 <p align="center">
-  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+  <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
+<details>
+<summary><h2>Table of Contents</h2></summary>
+<ul>
+  <li><a href="#astro-migration"> Astro migration </a>
+  <ul>
+   <li><a href="#astro-how-to"> Astro how to </a></li>
+   <li><a href="#issues-which-are-not-caused-by-the-migration-not-to-be-fixed-now"> Issues which are not caused by migration </a></li>
+  </ul>
+ </li>
+ <li><a href="#how-to-install"> Installation </a></li>
+ <li><a href="#how-to-use"> How to use </a>
+  <ul>
+   <li><a href="#extend-a-web-component"> Extend a web component </a></li>
+   <li><a href="#use-a-javascript-system"> Use a JavaScript system </a></li>
+   <li><a href="#use-a-web-component"> Use a Web Component </a></li>
+  </ul>
+ </li>
+ <li><a href="#issues"> Issues </a></li>
+ <li><a href="#feature-requests"> Feature request </a></li>
+ <li><a href="#content"> Content </a></li>
+ <li><a href="#technologies"> Technologies </a></li>
+ <li><a href="#rationale"> Rationale </a></li>
+ <li><a href="#coding-guidelines"> Coding guidelines </a></li>
+ <li><a href="#how-to-contribute"> How to contribute </a></li>
+ <li><a href="#site-deployment"> Site deployment </a></li>
+ <li><a href="#content"> Contact </a></li>
+</ul>
+</details>
+
 ## Astro migration
 
 - Keep using `/docs` on the root level as we used it in the `master` branch. The documentation is copied into Astro related directories on `npm run start` and when when anything in `/docs` is updated.
@@ -77,8 +106,6 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 
   Note. There is the same error on master. This issue is not caused by the migration
 
-### TODO
-
 ## How to install
 
 ```bash
@@ -184,7 +211,7 @@ This means you only have to apply your own Design System: by delivering styles,
 
 ## Coding guidelines
 
-Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
+Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
 
 ## How to contribute
 
@@ -193,6 +220,14 @@ Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles
 Lion Web Components are only as good as its contributions.
 Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.
 
+## Site deployment
+
+We use [GitHub Pages](https://docs.github.com/en/pages) to host our static website. Collaborators with push permission to the repository branch [`gh-pages`](https://github.com/ing-bank/lion/tree/gh-pages) can trigger a deploy by simply running:
+
+```bash
+npm run deploy
+```
+
 ## Contact
 
 Feel free to create a github issue for any feedback or questions you might have.

package/components/dialog/test/lion-dialog.integration.test.js

@@ -0,0 +1,170 @@
+/* eslint-disable lit-a11y/no-autofocus */
+import { expect, fixture as _fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '@lion/ui/define/lion-button.js';
+import '@lion/ui/define/lion-combobox.js';
+import '@lion/ui/define/lion-select-rich.js';
+import '@lion/ui/define/lion-option.js';
+import '@lion/ui/define/lion-dialog.js';
+import '@lion/ui/define/lion-tooltip.js';
+
+import { mimicUserTyping } from '@lion/ui/combobox-test-helpers.js';
+import sinon from 'sinon';
+
+/**
+ * @typedef {import('../src/LionDialog.js').LionDialog} LionDialog
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
+
+const dropDownEntries = ['Apple', 'Banana'];
+
+describe('lion-dialog', () => {
+  describe('lion-combobox integration', () => {
+    it('should close lion-combobox dropdown on Escape and should not close the parent lion-dialog', async () => {
+      const el = await fixture(html`
+        <lion-dialog has-close-button>
+          <lion-button slot="invoker">Open Dialog</lion-button>
+          <div slot="header">Combobox example</div>
+          <div slot="content">
+            <lion-combobox name="combo" label="Select a fruit">
+              ${dropDownEntries.map(
+                (/** @type { string } */ entry) =>
+                  html` <lion-option .choiceValue="${entry}">${entry}</lion-option>`,
+              )}
+            </lion-combobox>
+          </div>
+        </lion-dialog>
+      `);
+      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      dialogInvoker.click();
+      const combobox = /** @type {HTMLElement} */ el.querySelector('lion-combobox');
+      const isComboboxRendered = () => !!combobox?.shadowRoot?.childNodes.length;
+      await waitUntil(isComboboxRendered);
+      // @ts-ignore
+      await mimicUserTyping(combobox, 'a');
+      const firstOption = /** @type { HTMLElement | undefined } */ (
+        el.querySelectorAll('lion-option')?.[0]
+      );
+      // @ts-ignore
+      const isComboboxFirstOptionInDropdownVisible = () => firstOption?.checkVisibility();
+      await waitUntil(isComboboxFirstOptionInDropdownVisible);
+      const comboboxDialog = combobox?.shadowRoot?.querySelector('dialog');
+      // Note, do not remove `console.log` down below. There is a bug in test engine.
+      // Referring dialog.close from the test environement fixes the bug
+      console.log(sinon.spy(comboboxDialog?.close));
+      const comboboxInput = combobox?.querySelector('input');
+      comboboxInput?.focus();
+      const dropdownDialog = combobox?.shadowRoot?.querySelector('dialog');
+      // @ts-ignore
+      const dropdownDialogCloseSpy = sinon.spy(dropdownDialog, 'close');
+      await sendKeys({
+        press: 'Escape',
+      });
+      // @ts-ignore
+      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      await waitUntil(() => dropdownDialogCloseSpy.called);
+      expect(isDialogVisible()).to.equal(true);
+    });
+  });
+
+  describe('lion-select-rich integration', () => {
+    it('should close lion-select-rich dropdown on Escape and should not close the parent lion-dialog', async () => {
+      const el = await fixture(html`
+        <lion-dialog has-close-button>
+          <lion-button slot="invoker">Open Dialog</lion-button>
+          <div slot="header">Select rich example</div>
+          <div slot="content">
+            <lion-select-rich label="Select a fruit">
+              ${dropDownEntries.map(
+                (/** @type { string } */ entry) =>
+                  html` <lion-option .choiceValue="${entry}">${entry}</lion-option>`,
+              )}
+            </lion-select-rich>
+          </div>
+        </lion-dialog>
+      `);
+      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
+      dialogInvoker.click();
+      const selectRichInvoker = /** @type {HTMLElement} */ (
+        el.querySelector('lion-select-invoker')
+      );
+      const isSelectRichInvokerRendered = () => !!selectRichInvoker?.shadowRoot?.childNodes.length;
+      await waitUntil(isSelectRichInvokerRendered);
+      const selectRich = el?.querySelector('lion-select-rich');
+      const selectRichDialog = selectRich?.shadowRoot?.querySelector('dialog');
+      // Note, do not remove `console.log` down below. There is a bug in test engine.
+      // Referring dialog.close from the test environement fixes the bug
+      console.log(selectRichDialog?.close);
+
+      selectRichInvoker?.click();
+      const dropdownDialog = el
+        ?.querySelector('lion-select-rich')
+        ?.shadowRoot?.querySelector('dialog');
+      // @ts-ignore
+      const dropdownDialogCloseSpy = sinon.spy(dropdownDialog, 'close');
+      const isDropdownVisible = () =>
+        el
+          ?.querySelector('lion-select-rich')
+          ?.shadowRoot?.querySelector('dialog')
+          // @ts-ignore
+          ?.checkVisibility();
+      await waitUntil(isDropdownVisible);
+      const lionOptions = /** @type {HTMLElement} */ (el.querySelector('lion-options'));
+      lionOptions?.focus();
+      await sendKeys({
+        press: 'Escape',
+      });
+      // @ts-ignore
+      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      await waitUntil(() => dropdownDialogCloseSpy.called);
+      expect(isDialogVisible()).to.equal(true);
+    });
+  });
+
+  describe('lion-tooltip integration', () => {
+    it('should close lion-tooltip on first Escape and should close the parent lion-dialog on the second Escape', async () => {
+      const el = await fixture(html`
+        <lion-dialog has-close-button>
+          <lion-button slot="invoker" class="dialog-invoker">Open Dialog</lion-button>
+          <div slot="header">Tooltip example</div>
+          <div slot="content">
+            <lion-tooltip has-arrow>
+              <button slot="invoker" class="demo-tooltip-invoker">Focus on me</button>
+              <div slot="content">This is a tooltip</div>
+            </lion-tooltip>
+          </div>
+        </lion-dialog>
+      `);
+
+      await el.updateComplete;
+      const dialogInvoker = /** @type {HTMLElement} */ (el.querySelector('.dialog-invoker'));
+      dialogInvoker.click();
+      const tooltip = /** @type {HTMLElement} */ el.querySelector('lion-tooltip');
+      const isTooltipRendered = () => !!tooltip?.shadowRoot?.childNodes.length;
+      await waitUntil(isTooltipRendered);
+      const tooltipButton = /** @type {HTMLElement} */ (el.querySelector('.demo-tooltip-invoker'));
+      tooltipButton?.focus();
+      const getTooltipContent = () =>
+        el
+          .querySelector('lion-tooltip')
+          ?.shadowRoot?.querySelector('#overlay-content-node-wrapper');
+      // @ts-ignore
+      const isTooltipContentVisible = () => getTooltipContent()?.checkVisibility();
+      await waitUntil(isTooltipContentVisible);
+      await sendKeys({
+        press: 'Escape',
+      });
+      // @ts-ignore
+      const isDialogVisible = () => el?.shadowRoot?.querySelector('dialog')?.checkVisibility();
+      expect(isTooltipContentVisible()).to.equal(false);
+      expect(isDialogVisible()).to.equal(true);
+      await sendKeys({
+        press: 'Escape',
+      });
+      expect(isTooltipContentVisible()).to.equal(false);
+      expect(isDialogVisible()).to.equal(false);
+    });
+  });
+});

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

@@ -87,11 +87,11 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       ${this.feedbackData &&
       this.feedbackData.map(
         ({ message, type, validator }) => html`
-          <div class="validation-feedback__type">
+          <span class="validation-feedback__type">
             ${message && type
               ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
               : nothing}
-          </div>
+          </span>
           ${this._messageTemplate({ message, type, validator })}
         `,
       )}

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

@@ -1,15 +1,15 @@
 /* eslint-disable class-methods-use-this, camelcase, no-param-reassign, max-classes-per-file */
-import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
+import { DisabledMixin, SlotMixin } from '@lion/ui/core.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 // TODO: make form-core independent from localize
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { ScopedElementsMixin } from '../../../core/src/ScopedElementsMixin.js';
+import { FormControlMixin } from '../FormControlMixin.js';
 import { AsyncQueue } from '../utils/AsyncQueue.js';
 import { pascalCase } from '../utils/pascalCase.js';
 import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
 import { LionValidationFeedback } from './LionValidationFeedback.js';
 import { Unparseable } from './Unparseable.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
@@ -399,7 +399,7 @@ export const ValidateMixinImplementation = superclass =>
         this.__validateCompleteResolve = resolve;
       });
 
-      if (this.disabled) {
+      if (this.disabled || this.readOnly) {
         this.__clearValidationResults();
         this.__finishValidationPass();
         this._updateFeedbackComponent();

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -61,12 +61,12 @@ describe('lion-validation-feedback', () => {
     await el.updateComplete;
 
     const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
-    expect(validationFeedbackType?.textContent?.trim()).to.equal('Error');
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Error,');
 
     el.feedbackData = [{ message: 'hello', type: 'info', validator: new AlwaysInvalid() }];
     await el.updateComplete;
 
-    expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Info,');
   });
 
   it('it does not share the type if there is no message', async () => {

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

@@ -1,26 +1,26 @@
-import { LitElement } from 'lit';
-import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import {
-  getFormControlMembers,
-  AsyncAlwaysInvalid,
-  AsyncAlwaysValid,
   AlwaysInvalid,
   AlwaysValid,
+  AsyncAlwaysInvalid,
+  AsyncAlwaysValid,
+  getFormControlMembers,
 } from '@lion/ui/form-core-test-helpers.js';
-import sinon from 'sinon';
 import {
-  ResultValidator,
-  ValidateMixin,
   EqualsLength,
-  Unparseable,
   MaxLength,
   MinLength,
-  Validator,
   Required,
+  ResultValidator,
+  Unparseable,
+  ValidateMixin,
+  Validator,
 } from '@lion/ui/form-core.js';
+import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { LitElement } from 'lit';
+import sinon from 'sinon';
 
-import '@lion/ui/define/lion-validation-feedback.js';
 import '@lion/ui/define/lion-field.js';
+import '@lion/ui/define/lion-validation-feedback.js';
 
 /**
  * @typedef {import('@lion/ui/form-core.js').LionField} LionField
@@ -631,6 +631,18 @@ export function runValidateMixinSuite(customConfig) {
         isCatValidator.param = 'Garfield';
         expect(catSpy.callCount).to.equal(2);
       });
+
+      it('Validators will not be called on readOnly fields', async () => {
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+          <${tag} .validators=${[new IsCat()]}>${lightDom}</${tag}>
+        `)
+        );
+
+        el.readOnly = true;
+        el.modelValue = 'dog';
+        expect(el.validationStates.error.IsCat).to.be.undefined;
+      });
     });
 
     describe('Async Validator Integration', () => {

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Грешка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успех',
-  validationInfo: 'Информация',
+  validationError: 'Грешка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успех,',
+  validationInfo: 'Информация,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
-  validationWarning: 'Varování',
-  validationSuccess: 'Úspěch',
-  validationInfo: 'Informace',
+  validationError: 'Chyba,',
+  validationWarning: 'Varování,',
+  validationSuccess: 'Úspěch,',
+  validationInfo: 'Informace,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fehler',
-  validationWarning: 'Warnhinweis',
-  validationSuccess: 'Erfolgreich',
-  validationInfo: 'Info',
+  validationError: 'Fehler,',
+  validationWarning: 'Warnhinweis,',
+  validationSuccess: 'Erfolgreich,',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
-  validationWarning: 'Warning',
-  validationSuccess: 'Success',
-  validationInfo: 'Info',
+  validationError: 'Error,',
+  validationWarning: 'Warning,',
+  validationSuccess: 'Success,',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
-  validationWarning: 'Advertencia',
-  validationSuccess: 'Satisfactorio',
-  validationInfo: 'Información',
+  validationError: 'Error,',
+  validationWarning: 'Advertencia,',
+  validationSuccess: 'Satisfactorio,',
+  validationInfo: 'Información,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Erreur',
-  validationWarning: 'Avertissement',
-  validationSuccess: 'Succès',
-  validationInfo: 'Info',
+  validationError: 'Erreur,',
+  validationWarning: 'Avertissement,',
+  validationSuccess: 'Succès,',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Hiba',
-  validationWarning: 'Figyelmeztetés',
-  validationSuccess: 'Sikeres',
-  validationInfo: 'Információ',
+  validationError: 'Hiba,',
+  validationWarning: 'Figyelmeztetés,',
+  validationSuccess: 'Sikeres,',
+  validationInfo: 'Információ,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Errore',
-  validationWarning: 'Avvertenza',
-  validationSuccess: 'Operazione riuscita',
-  validationInfo: 'Info',
+  validationError: 'Errore,',
+  validationWarning: 'Avvertenza,',
+  validationSuccess: 'Operazione riuscita,',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fout',
-  validationWarning: 'Waarschuwing',
-  validationSuccess: 'Succes',
-  validationInfo: 'Informatie',
+  validationError: 'Fout,',
+  validationWarning: 'Waarschuwing,',
+  validationSuccess: 'Succes,',
+  validationInfo: 'Informatie,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Błąd',
-  validationWarning: 'Ostrzeżenie',
-  validationSuccess: 'Zrealizowano pomyślnie',
-  validationInfo: 'Informacja',
+  validationError: 'Błąd,',
+  validationWarning: 'Ostrzeżenie,',
+  validationSuccess: 'Zrealizowano pomyślnie,',
+  validationInfo: 'Informacja,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Eroare',
-  validationWarning: 'Atenție',
-  validationSuccess: 'Succes',
-  validationInfo: 'Informații',
+  validationError: 'Eroare,',
+  validationWarning: 'Atenție,',
+  validationSuccess: 'Succes,',
+  validationInfo: 'Informații,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Ошибка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успешно',
-  validationInfo: 'Информация',
+  validationError: 'Ошибка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успешно,',
+  validationInfo: 'Информация,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
-  validationWarning: 'Varovanie',
-  validationSuccess: 'Úspešné',
-  validationInfo: 'Info',
+  validationError: 'Chyba,',
+  validationWarning: 'Varovanie,',
+  validationSuccess: 'Úspešné,',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Помилка',
-  validationWarning: 'Попередження',
-  validationSuccess: 'Успішно',
-  validationInfo: 'Інформація',
+  validationError: 'Помилка,',
+  validationWarning: 'Попередження,',
+  validationSuccess: 'Успішно,',
+  validationInfo: 'Інформація,',
 };

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

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

package/components/input-amount-dropdown/src/localizeNamespaceLoader.js

@@ -1,6 +1,59 @@
 /* eslint-disable import/no-extraneous-dependencies */
 export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
   switch (locale) {
+    case 'bg-BG':
+    case 'bg':
+      return import('@lion/ui/input-amount-dropdown-translations/bg.js');
+    case 'cs-CZ':
+    case 'cs':
+      return import('@lion/ui/input-amount-dropdown-translations/cs.js');
+    case 'de-DE':
+    case 'de':
+      return import('@lion/ui/input-amount-dropdown-translations/de.js');
+    case 'en-AU':
+    case 'en-GB':
+    case 'en-US':
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/input-amount-dropdown-translations/en.js');
+    case 'es-ES':
+    case 'es':
+      return import('@lion/ui/input-amount-dropdown-translations/es.js');
+    case 'fr-FR':
+    case 'fr-BE':
+    case 'fr':
+      return import('@lion/ui/input-amount-dropdown-translations/fr.js');
+    case 'hu-HU':
+    case 'hu':
+      return import('@lion/ui/input-amount-dropdown-translations/hu.js');
+    case 'id-ID':
+    case 'id':
+      return import('@lion/ui/input-amount-dropdown-translations/id.js');
+    case 'it-IT':
+    case 'it':
+      return import('@lion/ui/input-amount-dropdown-translations/it.js');
+    case 'nl-BE':
+    case 'nl-NL':
+    case 'nl':
+      return import('@lion/ui/input-amount-dropdown-translations/nl.js');
+    case 'pl-PL':
+    case 'pl':
+      return import('@lion/ui/input-amount-dropdown-translations/pl.js');
+    case 'ro-RO':
+    case 'ro':
+      return import('@lion/ui/input-amount-dropdown-translations/ro.js');
+    case 'ru-RU':
+    case 'ru':
+      return import('@lion/ui/input-amount-dropdown-translations/ru.js');
+    case 'sk-SK':
+    case 'sk':
+      return import('@lion/ui/input-amount-dropdown-translations/sk.js');
+    case 'uk-UA':
+    case 'uk':
+      return import('@lion/ui/input-amount-dropdown-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/input-amount-dropdown-translations/zh.js');
     default:
       return import('@lion/ui/input-amount-dropdown-translations/en.js');
   }

package/components/input-amount-dropdown/translations/bg.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Всички валути',
+  selectCurrency: 'Избор на валута',
+  suggestedCurrencies: 'Предпочитани валути',
+};

package/components/input-amount-dropdown/translations/cs.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Všechny měny',
+  selectCurrency: 'Vybrat měnu',
+  suggestedCurrencies: 'Preferované měny',
+};

package/components/input-amount-dropdown/translations/de.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Alle Währungen',
+  selectCurrency: 'Währung auswählen',
+  suggestedCurrencies: 'Bevorzugte Währungen',
+};

package/components/input-amount-dropdown/translations/es.js

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Todas las divisas',
+  selectCurrency: 'Seleccione divisa',
+  suggestedCurrencies: 'Divisas preferidas',
+};