diff --git a/.changeset/cuddly-windows-fail.md b/.changeset/cuddly-windows-fail.md
new file mode 100644
index 000000000..0ec2b7c4d
--- /dev/null
+++ b/.changeset/cuddly-windows-fail.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[combobox] add translations
diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js
index a606f1329..c79b2045d 100644
--- a/packages/ui/components/combobox/src/LionCombobox.js
+++ b/packages/ui/components/combobox/src/LionCombobox.js
@@ -1,5 +1,6 @@
import { browserDetection } from '@lion/ui/core.js';
import { LionListbox } from '@lion/ui/listbox.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
import { css, html } from 'lit';
import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js';
@@ -24,7 +25,7 @@ const matchA11ySpanReverseFns = new WeakMap();
* LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
* FormControl
*/
-export class LionCombobox extends OverlayMixin(LionListbox) {
+export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
/** @type {any} */
static get properties() {
return {
@@ -75,6 +76,71 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
];
}
+ static get localizeNamespaces() {
+ return [
+ {
+ 'lion-combobox': /** @param {string} locale */ locale => {
+ switch (locale) {
+ case 'bg-BG':
+ case 'bg':
+ return import('@lion/ui/combobox-translations/bg.js');
+ case 'cs-CZ':
+ case 'cs':
+ return import('@lion/ui/combobox-translations/cs.js');
+ case 'de-AT':
+ case 'de-DE':
+ case 'de':
+ return import('@lion/ui/combobox-translations/de.js');
+ case 'en-AU':
+ case 'en-GB':
+ case 'en-PH':
+ case 'en-US':
+ case 'en':
+ return import('@lion/ui/combobox-translations/en.js');
+ case 'es-ES':
+ case 'es':
+ return import('@lion/ui/combobox-translations/es.js');
+ case 'fr-FR':
+ case 'fr-BE':
+ case 'fr':
+ return import('@lion/ui/combobox-translations/fr.js');
+ case 'hu-HU':
+ case 'hu':
+ return import('@lion/ui/combobox-translations/hu.js');
+ case 'it-IT':
+ case 'it':
+ return import('@lion/ui/combobox-translations/it.js');
+ case 'nl-BE':
+ case 'nl-NL':
+ case 'nl':
+ return import('@lion/ui/combobox-translations/nl.js');
+ case 'pl-PL':
+ case 'pl':
+ return import('@lion/ui/combobox-translations/pl.js');
+ case 'ro-RO':
+ case 'ro':
+ return import('@lion/ui/combobox-translations/ro.js');
+ case 'ru-RU':
+ case 'ru':
+ return import('@lion/ui/combobox-translations/ru.js');
+ case 'sk-SK':
+ case 'sk':
+ return import('@lion/ui/combobox-translations/sk.js');
+ case 'uk-UA':
+ case 'uk':
+ return import('@lion/ui/combobox-translations/uk.js');
+ case 'zh-CN':
+ case 'zh':
+ return import('@lion/ui/combobox-translations/zh.js');
+ default:
+ return import('@lion/ui/combobox-translations/en.js');
+ }
+ },
+ },
+ ...super.localizeNamespaces,
+ ];
+ }
+
/**
* @enhance FormControlMixin - add slot[name=selection-display]
* @protected
@@ -94,9 +160,12 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
*/
// eslint-disable-next-line class-methods-use-this
_overlayListboxTemplate() {
- // TODO: Localize the aria-label
return html`
-
+
diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js
index ee483f41a..ec6391fce 100644
--- a/packages/ui/components/combobox/test/lion-combobox.test.js
+++ b/packages/ui/components/combobox/test/lion-combobox.test.js
@@ -899,8 +899,26 @@ describe('lion-combobox', () => {
expect(el.checkedIndex).to.equal(-1);
await el.feedbackComplete;
- expect(el.hasFeedbackFor).to.include('error');
- expect(el.showsFeedbackFor).to.include('error');
+ expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
+ await el.feedbackComplete;
+ expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
+ });
+
+ it('dropdown has a label', async () => {
+ const el = /** @type {LionCombobox} */ (
+ await fixture(html`
+
+ Artichoke
+ Chard
+ Chicory
+ Victoria Plum
+
+ `)
+ );
+ const { _overlayCtrl } = getComboboxMembers(el);
+ expect(_overlayCtrl.contentWrapperNode.getAttribute('aria-label')).to.equal(
+ 'Combobox options popup',
+ );
});
});
});
@@ -1361,6 +1379,7 @@ describe('lion-combobox', () => {
`)
);
const { _inputNode } = getComboboxMembers(el);
+ await el.updateComplete;
expect(_inputNode.value).to.equal('');
/**
@@ -1375,9 +1394,10 @@ describe('lion-combobox', () => {
await el.updateComplete;
el.autocomplete = autocomplete;
el.setCheckedIndex(index);
+ await el.updateComplete;
el.opened = false;
await el.updateComplete;
- expect(_inputNode.value).to.equal(valueOnClose);
+ expect(_inputNode.value).to.equal(valueOnClose, autocomplete);
}
await performChecks('none', 0, 'Artichoke');
@@ -2049,6 +2069,8 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el);
async function performChecks() {
+ await el.updateComplete;
+
el.formElements[0].click();
await el.updateComplete;
diff --git a/packages/ui/components/combobox/translations/bg.js b/packages/ui/components/combobox/translations/bg.js
new file mode 100644
index 000000000..6ac0b5d8e
--- /dev/null
+++ b/packages/ui/components/combobox/translations/bg.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Изскачащ прозорец за опции за комбинирано поле',
+};
diff --git a/packages/ui/components/combobox/translations/cs.js b/packages/ui/components/combobox/translations/cs.js
new file mode 100644
index 000000000..780446f8c
--- /dev/null
+++ b/packages/ui/components/combobox/translations/cs.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Vyskakovací okno možností ComboBox',
+};
diff --git a/packages/ui/components/combobox/translations/de.js b/packages/ui/components/combobox/translations/de.js
new file mode 100644
index 000000000..3e0e10832
--- /dev/null
+++ b/packages/ui/components/combobox/translations/de.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Popup-Fenster für Kombibox-Optionen',
+};
diff --git a/packages/ui/components/combobox/translations/en.js b/packages/ui/components/combobox/translations/en.js
new file mode 100644
index 000000000..d3d8c47cf
--- /dev/null
+++ b/packages/ui/components/combobox/translations/en.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Combobox options popup',
+};
diff --git a/packages/ui/components/combobox/translations/es.js b/packages/ui/components/combobox/translations/es.js
new file mode 100644
index 000000000..23d6661c6
--- /dev/null
+++ b/packages/ui/components/combobox/translations/es.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Ventana emergente de opciones de cuadro combinado',
+};
diff --git a/packages/ui/components/combobox/translations/fr.js b/packages/ui/components/combobox/translations/fr.js
new file mode 100644
index 000000000..4fcbae935
--- /dev/null
+++ b/packages/ui/components/combobox/translations/fr.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Fenêtre popup des options de la boîte combinée',
+};
diff --git a/packages/ui/components/combobox/translations/hu.js b/packages/ui/components/combobox/translations/hu.js
new file mode 100644
index 000000000..2381f134d
--- /dev/null
+++ b/packages/ui/components/combobox/translations/hu.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Kombinált lista opcióinak felugró ablaka',
+};
diff --git a/packages/ui/components/combobox/translations/it.js b/packages/ui/components/combobox/translations/it.js
new file mode 100644
index 000000000..5b9e458f7
--- /dev/null
+++ b/packages/ui/components/combobox/translations/it.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Finestra a comparsa opzioni ComboBox',
+};
diff --git a/packages/ui/components/combobox/translations/nl.js b/packages/ui/components/combobox/translations/nl.js
new file mode 100644
index 000000000..53eab5629
--- /dev/null
+++ b/packages/ui/components/combobox/translations/nl.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Pop-up van opties',
+};
diff --git a/packages/ui/components/combobox/translations/pl.js b/packages/ui/components/combobox/translations/pl.js
new file mode 100644
index 000000000..2c6bdb132
--- /dev/null
+++ b/packages/ui/components/combobox/translations/pl.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Wyskakujące okno opcji pola wyboru',
+};
diff --git a/packages/ui/components/combobox/translations/ro.js b/packages/ui/components/combobox/translations/ro.js
new file mode 100644
index 000000000..441db9477
--- /dev/null
+++ b/packages/ui/components/combobox/translations/ro.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Fereastra pop-up cu opţiuni Combobox',
+};
diff --git a/packages/ui/components/combobox/translations/ru.js b/packages/ui/components/combobox/translations/ru.js
new file mode 100644
index 000000000..42bb03933
--- /dev/null
+++ b/packages/ui/components/combobox/translations/ru.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Всплывающее окно параметров поля со списком',
+};
diff --git a/packages/ui/components/combobox/translations/sk.js b/packages/ui/components/combobox/translations/sk.js
new file mode 100644
index 000000000..62e05f73d
--- /dev/null
+++ b/packages/ui/components/combobox/translations/sk.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Vyskakovacie okno možností kombinovaného poľa',
+};
diff --git a/packages/ui/components/combobox/translations/uk.js b/packages/ui/components/combobox/translations/uk.js
new file mode 100644
index 000000000..b49dd0bc7
--- /dev/null
+++ b/packages/ui/components/combobox/translations/uk.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: 'Спливаюче вікно параметрів поля зі списком',
+};
diff --git a/packages/ui/components/combobox/translations/zh.js b/packages/ui/components/combobox/translations/zh.js
new file mode 100644
index 000000000..14f0a3893
--- /dev/null
+++ b/packages/ui/components/combobox/translations/zh.js
@@ -0,0 +1,3 @@
+export default {
+ optionsPopup: '组合框选项弹出框',
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b7173b1dc..34593b60e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,7 @@
"default": "./exports/*"
},
"./calendar-translations/*": "./components/calendar/translations/*",
+ "./combobox-translations/*": "./components/combobox/translations/*",
"./pagination-translations/*": "./components/pagination/translations/*",
"./progress-indicator-translations/*": "./components/progress-indicator/translations/*",
"./input-datepicker-translations/*": "./components/input-datepicker/translations/*",