From 4226a0144c869424d4b3d315fd186e1184638a83 Mon Sep 17 00:00:00 2001
From: gvangeest <gerjan.van.geest@ing.com>
Date: Mon, 27 Feb 2023 14:55:19 +0100
Subject: [PATCH] fix(combobox): add translations

---
 .changeset/cuddly-windows-fail.md             |  5 ++
 .../components/combobox/src/LionCombobox.js   | 75 ++++++++++++++++++-
 .../combobox/test/lion-combobox.test.js       | 28 ++++++-
 .../ui/components/combobox/translations/bg.js |  3 +
 .../ui/components/combobox/translations/cs.js |  3 +
 .../ui/components/combobox/translations/de.js |  3 +
 .../ui/components/combobox/translations/en.js |  3 +
 .../ui/components/combobox/translations/es.js |  3 +
 .../ui/components/combobox/translations/fr.js |  3 +
 .../ui/components/combobox/translations/hu.js |  3 +
 .../ui/components/combobox/translations/it.js |  3 +
 .../ui/components/combobox/translations/nl.js |  3 +
 .../ui/components/combobox/translations/pl.js |  3 +
 .../ui/components/combobox/translations/ro.js |  3 +
 .../ui/components/combobox/translations/ru.js |  3 +
 .../ui/components/combobox/translations/sk.js |  3 +
 .../ui/components/combobox/translations/uk.js |  3 +
 .../ui/components/combobox/translations/zh.js |  3 +
 packages/ui/package.json                      |  1 +
 19 files changed, 148 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cuddly-windows-fail.md
 create mode 100644 packages/ui/components/combobox/translations/bg.js
 create mode 100644 packages/ui/components/combobox/translations/cs.js
 create mode 100644 packages/ui/components/combobox/translations/de.js
 create mode 100644 packages/ui/components/combobox/translations/en.js
 create mode 100644 packages/ui/components/combobox/translations/es.js
 create mode 100644 packages/ui/components/combobox/translations/fr.js
 create mode 100644 packages/ui/components/combobox/translations/hu.js
 create mode 100644 packages/ui/components/combobox/translations/it.js
 create mode 100644 packages/ui/components/combobox/translations/nl.js
 create mode 100644 packages/ui/components/combobox/translations/pl.js
 create mode 100644 packages/ui/components/combobox/translations/ro.js
 create mode 100644 packages/ui/components/combobox/translations/ru.js
 create mode 100644 packages/ui/components/combobox/translations/sk.js
 create mode 100644 packages/ui/components/combobox/translations/uk.js
 create mode 100644 packages/ui/components/combobox/translations/zh.js

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`
-      <div id="overlay-content-node-wrapper" role="dialog" aria-label="Combobox options popup">
+      <div
+        id="overlay-content-node-wrapper"
+        role="dialog"
+        aria-label="${this.msgLit(`lion-combobox:optionsPopup`)}"
+      >
         <slot name="listbox"></slot>
       </div>
       <slot id="options-outlet"></slot>
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`
+            <lion-combobox name="foo" .validators=${[new Required()]}>
+              <lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+          `)
+        );
+        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/*",