@lion/ui 0.15.0 → 0.15.2

package/README.md

@@ -26,33 +26,59 @@
 </p>
 
 <p align="center">
-  <a href="https://lion.js.org">Website</a>
+  <a href="https://lion-web.netlify.app">Website</a>
   ·
-  <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
+  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
   ·
-  <a href="https://lion.js.org/guides/">Guides</a>
+  <a href="https://lion-web.netlify.app/guides/">Guides</a>
   ·
-  <a href="https://lion.js.org/components/">Components</a>
+  <a href="https://lion-web.netlify.app/components/">Components</a>
   ·
-  <a href="https://lion.js.org/blog/">Blog</a>
+  <a href="https://lion-web.netlify.app/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible, and flexible Web Components.**
+**Lion is a set of highly performant, accessible and flexible Web Components.!**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
-- **Modern Code:** Lion is distributed as pure ES modules.
-- **Exposes functions/classes and Web Components:** Ships a functionality in its most appropriate form.
+- **Modern Code:** Lion is distributes as pure es modules.
+- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
 
-> Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
+> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings.
+> 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.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
+  <a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
+## 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.
+- Replace manually all references to assets in all `md` files so that we imply that the path is produced from the directory where the md file is located. F.e. `new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href;` should `new URL('./src/wa-combobox/assets/obama.jpeg', import.meta.url).href;`. Note double dot is replaced with one dot. See [this PR](https://github.com/ing-bank/lion/pull/2125/files#diff-403b1e0ab54d51dcfe54248e847498e492da00383d8b33a4087994ab9035a22c) for the reference.
+- Rename all `*.mjs` files to `*.js` ones if they are used by `mdjs` examples
+
+### Astro how to
+
+- To start in dev mode run `nmm run start`
+- To start in production mode:
+  - Run `npm run build`
+  - Run `npm run preview`
+
+### Issues which are not caused by the migration (not to be fixed now)
+
+- There is a browser console error on [collapsible page](http://localhost:4321/components/collapsible):
+
+  ```
+  __mdjs-stories--use-cases.js:40 Uncaught TypeError: shadowRoot.getElementById is not a function
+  ```
+
+  Note. There is the same error on master. This issue is not caused by the migration
+
+### TODO
+
 ## How to install
 
 ```bash
@@ -113,7 +139,7 @@ You can also use the lion elements directly, although this is likely not a commo
 
 ## Issues
 
-If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additionally adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
+If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
 
 ## Feature requests
 
@@ -158,7 +184,7 @@ This means you only have to apply your own Design System: by delivering styles,
 
 ## Coding guidelines
 
-Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
+Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information.
 
 ## How to contribute
 

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

@@ -2,11 +2,11 @@ import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { LionCombobox } from '@lion/ui/combobox.js';
-import { browserDetection } from '@lion/ui/core.js';
+import { browserDetection, SlotMixin } from '@lion/ui/core.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import sinon from 'sinon';
 import {
   getFilteredOptionValues,
@@ -413,6 +413,54 @@ describe('lion-combobox', () => {
       expect(el.validationStates).to.have.property('error');
       expect(el.validationStates.error).to.have.property('MatchesOption');
     });
+
+    it('keeps slottable provided in `slots` getter as direct host child', async () => {
+      class MyEl extends SlotMixin(LionCombobox) {
+        // @ts-ignore
+        get slots() {
+          return {
+            ...super.slots,
+            _lazyRenderedSlot: () => ({
+              template: this.renderSlot
+                ? html`<span id="lazyRenderedSlotId">(Optional)</span>`
+                : html`${nothing}`,
+              renderAsDirectHostChild: true,
+            }),
+          };
+        }
+
+        _labelTemplate() {
+          return html`
+            <div class="form-field__label">
+              <slot name="label"></slot>
+              <slot name="_lazyRenderedSlot"></slot>
+              <slot></slot>
+            </div>
+          `;
+        }
+
+        constructor() {
+          super();
+          this.renderSlot = false;
+        }
+      }
+      const tagName = defineCE(MyEl);
+      const wrappingTag = unsafeStatic(tagName);
+
+      const el = /** @type {MyEl} */ (
+        await fixture(html`
+          <${wrappingTag} label="my label">
+            <lion-option .choiceValue="${'1'}">${'one'}</lion-option>
+          </${wrappingTag}>
+        `)
+      );
+      await el.registrationComplete;
+
+      el.renderSlot = true;
+      await el.updateComplete;
+      const lazyRenderedSlot = el.querySelector('#lazyRenderedSlotId');
+      expect(lazyRenderedSlot?.parentElement === el).to.be.true;
+    });
   });
 
   describe('Values', () => {

package/components/core/src/SlotMixin.js

@@ -12,6 +12,58 @@ import { render } from 'lit';
  * @typedef {import('lit').LitElement} LitElement
  */
 
+/**
+ * Sometimes, we want to provide best DX (direct slottables) and be accessible
+ * at the same time.
+ * In the first example below, we need to wrap our options in light dom in an element with
+ * [role=listbox]. We could achieve this via the second example, but it would affect our
+ * public api negatively. not allowing us to be forward compatible with the AOM spec:
+ * https://wicg.github.io/aom/explainer.html
+ * With this method, it's possible to watch elements in the default slot and move them
+ * to the desired target (the element with [role=listbox]) in light dom.
+ *
+ * @example
+ * # desired api
+ * <sel-ect>
+ *  <opt-ion></opt-ion>
+ * </sel-ect>
+ * # desired end state
+ * <sel-ect>
+ *  <div role="listbox" slot="lisbox">
+ *    <opt-ion></opt-ion>
+ *  </div>
+ * </sel-ect>
+ *
+ * Note, the function does not move the nodes specified by a subclasser in the `slots` getter
+ * @param {HTMLElement} source host of ShadowRoot with default <slot>
+ * @param {HTMLElement} target the desired target in light dom
+ */
+export function moveUserProvidedDefaultSlottablesToTarget(source, target) {
+  /**
+   * Nodes injected via `slots` getter are going to be added as host's children
+   * starting by a comment node like <!--_start_slot_*-->
+   * and ending by a comment node like <!--_end_slot_*-->
+   * So we ignore everything that comes between those `start_slot` and `end_slot` comments
+   */
+  let isInsideSlotSection = false;
+  Array.from(source.childNodes).forEach((/** @type {* & Element} */ c) => {
+    const isNamedSlottable = c.hasAttribute && c.hasAttribute('slot');
+    const isComment = c.nodeType === Node.COMMENT_NODE;
+    if (isComment && !isInsideSlotSection) {
+      isInsideSlotSection = c.textContent.includes('_start_slot_');
+    }
+    if (isInsideSlotSection) {
+      if (c.textContent.includes('_end_slot_')) {
+        isInsideSlotSection = false;
+      }
+      return;
+    }
+    if (!isNamedSlottable) {
+      target.appendChild(c);
+    }
+  });
+}
+
 /**
  * @param {SlotFunctionResult} slotFunctionResult
  * @returns {'template-result'|'node'|'slot-rerender-object'|null}

package/components/core/test/SlotMixin.test.js

@@ -2,6 +2,7 @@ import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@ope
 import { SlotMixin } from '@lion/ui/core.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
+import { moveUserProvidedDefaultSlottablesToTarget } from '../src/SlotMixin.js';
 
 import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
 import { isActiveElement } from '../test-helpers/isActiveElement.js';
@@ -134,6 +135,90 @@ describe('SlotMixin', () => {
     expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
   });
 
+  it('should move default slots to target', async () => {
+    const target = document.createElement('div');
+    const source = document.createElement('div');
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     _nothing: () => ({
+     *       template: html`${nothing}`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const variableNothing = `
+      <!--_start_slot_lit-el-->
+      <!-- {lit-el} -->
+      <!--_end_slot_lit-el-->`;
+
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     '': () => ({
+     *       template: html`<div>text<div>`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const defaultSlottableProvidedViaSlotsGetter = `
+      <!--_start_slot_-->
+      <div>text</div>
+      <!--_end_slot_-->
+    `;
+
+    /**
+     * Exmple of usage:
+     * get slots() {
+     *   return {
+     *     label: () => ({
+     *       template: html`<div>text<div>`,
+     *       renderAsDirectHostChild: true,
+     *     }),
+     *   }
+     * }
+     */
+    const namedSlottable = `
+      <!--_start_slot_label-->
+      <div slot="label">text</div>
+      <!--_end_slot_label-->
+    `;
+
+    /**
+     * Here we assume .test1, .test2 and .test3 are the ones provided as content projection f.e.:
+     * <my-comp>
+     *  <div class="test1"><div>
+     *  <div class="test2"><div>
+     *  <div class="test3"><div>
+     * </my-comp>
+     *
+     * And the rest of content is added via `slots` getter by SlotMixin
+     * The function should move only content projection and ignore the rest
+     * */
+
+    source.innerHTML = `
+      <div class="test1"></div>
+      ${variableNothing}
+      <div class="test2"></div>
+      ${defaultSlottableProvidedViaSlotsGetter}
+      <div class="test3"></div>
+      ${namedSlottable}
+    `;
+
+    moveUserProvidedDefaultSlottablesToTarget(source, target);
+    expect(target.children.length).to.equal(3);
+    const test1Element = target.querySelector('.test1');
+    const test2Element = target.querySelector('.test2');
+    const test3Element = target.querySelector('.test3');
+    expect(test1Element?.parentElement === target).to.equal(true);
+    expect(test2Element?.parentElement === target).to.equal(true);
+    expect(test3Element?.parentElement === target).to.equal(true);
+  });
+
   describe('Rerender', () => {
     it('supports rerender when SlotRerenderObject provided', async () => {
       const tag = defineCE(

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/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',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Toutes les devises',
+  selectCurrency: 'Sélectionner une devise',
+  suggestedCurrencies: 'Devises préférées',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Minden pénznem',
+  selectCurrency: 'Pénznem kiválasztása',
+  suggestedCurrencies: 'Előnyben részesített pénznemek',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Semua mata uang',
+  selectCurrency: 'Pilih mata uang',
+  suggestedCurrencies: 'Mata uang pilihan',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Tutte le valute',
+  selectCurrency: 'Seleziona valuta',
+  suggestedCurrencies: 'Valute preferite',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: "Alle valuta's",
+  selectCurrency: 'Selecteer valuta',
+  suggestedCurrencies: "Voorkeurs valuta's",
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Wszystkie waluty',
+  selectCurrency: 'Wybierz walutę',
+  suggestedCurrencies: 'Preferowane waluty',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Toate valutele',
+  selectCurrency: 'Selectare valută',
+  suggestedCurrencies: 'Valute preferate',
+};

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

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

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Všetky meny',
+  selectCurrency: 'Zvoliť menu',
+  suggestedCurrencies: 'Uprednostňované meny',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: 'Усі валюти',
+  selectCurrency: 'Вибрати валюту',
+  suggestedCurrencies: 'Обрані валюти',
+};

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

@@ -0,0 +1,5 @@
+export default {
+  allCurrencies: '所有货币',
+  selectCurrency: '选择货币',
+  suggestedCurrencies: '首选货币',
+};