@lion/ui 0.1.3 → 0.1.5

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

@@ -13,6 +13,7 @@ import { LionCombobox } from '@lion/ui/combobox.js';
  * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay
  * @typedef {import('../../listbox/types/ListboxMixinTypes.js').ListboxHost} ListboxHost
  * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('@lion/ui/listbox.js').LionOption} LionOption
  */
 
 /**
@@ -669,6 +670,25 @@ describe('lion-combobox', () => {
       expect(el.checkedIndex).to.equal(-1);
     });
 
+    it('has the correct Overlay Config defined', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" .showAllOnEmpty="${true}">
+            <lion-option .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>
+        `)
+      );
+      // @ts-ignore [allow-protected] in test
+      expect(el._defineOverlayConfig().elementToFocusAfterHide).to.equal(undefined);
+      // @ts-ignore [allow-protected] in test
+      expect(el._defineOverlayConfig().invokerNode).to.equal(el._inputNode);
+      // @ts-ignore [allow-protected] in test
+      expect(el._defineOverlayConfig().visibilityTriggerFunction).to.equal(undefined);
+    });
+
     // NB: If this becomes a suite, move to separate file
     describe('Subclassers', () => {
       it('allows to control overlay visibility via "_showOverlayCondition"', async () => {
@@ -879,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',
+        );
       });
     });
   });
@@ -1341,6 +1379,7 @@ describe('lion-combobox', () => {
         `)
       );
       const { _inputNode } = getComboboxMembers(el);
+      await el.updateComplete;
       expect(_inputNode.value).to.equal('');
 
       /**
@@ -1355,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');
@@ -1632,7 +1672,7 @@ describe('lion-combobox', () => {
       });
     });
 
-    it('highlights matching options', async () => {
+    it('highlights first occcurence of matching option', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo" match-mode="all">
@@ -1645,6 +1685,16 @@ describe('lion-combobox', () => {
       );
       const options = el.formElements;
 
+      mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
+
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
+      expect(options[1]).lightDom.to.equal(`<span aria-label="Chard"><b>C</b>hard</span>`);
+      expect(options[2]).lightDom.to.equal(`<span aria-label="Chicory"><b>C</b>hicory</span>`);
+      expect(options[3]).lightDom.to.equal(
+        `<span aria-label="Victoria Plum">Vi<b>c</b>toria Plum</span>`,
+      );
+
       mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
 
       await el.updateComplete;
@@ -1662,6 +1712,48 @@ describe('lion-combobox', () => {
       expect(options[3]).lightDom.to.equal(`Victoria Plum`);
     });
 
+    it('highlights matching complex options', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" match-mode="all">
+            <lion-option .choiceValue="${'Artichoke'}">
+              <div>Artichoke</div>
+              <small>Cardoon</small>
+            </lion-option>
+            <lion-option .choiceValue="${'Chard'}">
+              <div>Chard</div>
+              <small>Beet</small>
+            </lion-option>
+            <lion-option .choiceValue="${'Chicory'}">
+              <div>Chicory</div>
+              <small>Chicory</small>
+            </lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">
+              <div>Victoria Plum</div>
+              <small>Prunus domestica</small>
+            </lion-option>
+          </lion-combobox>
+        `)
+      );
+      const options = el.formElements;
+
+      mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+
+      await el.updateComplete;
+      expect(options[0]).lightDom.to.equal(
+        `<span aria-label=" Artichoke Cardoon "><div>Arti<b>ch</b>oke</div><small>Cardoon</small>`,
+      );
+      expect(options[1]).lightDom.to.equal(
+        `<span aria-label=" Chard Beet "><div><b>Ch</b>ard</div><small>Beet</small>`,
+      );
+      expect(options[2]).lightDom.to.equal(
+        `<span aria-label=" Chicory Chicory "><div><b>Ch</b>icory</div><small><b>Ch</b>icory</small>`,
+      );
+      expect(options[3]).lightDom.to.equal(
+        `<div>Victoria Plum</div><small>Prunus domestica</small>`,
+      );
+    });
+
     it('synchronizes textbox when autocomplete is "inline" or "both"', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -1977,6 +2069,8 @@ describe('lion-combobox', () => {
           const { _inputNode } = getComboboxMembers(el);
 
           async function performChecks() {
+            await el.updateComplete;
+
             el.formElements[0].click();
             await el.updateComplete;
 
@@ -1999,6 +2093,98 @@ describe('lion-combobox', () => {
           await performChecks();
         });
       });
+
+      it('allows to override "_onFilterMatch" and "_onFilterUmatch"', async () => {
+        class X extends LionCombobox {
+          /**
+           * @overridable
+           * @param {LionOption & {__originalInnerHTML?:string}} option
+           * @param {string} matchingString
+           * @protected
+           */
+          _onFilterMatch(option, matchingString) {
+            Array.from(option.children).forEach(child => {
+              if (child.hasAttribute('data-key')) {
+                this._highlightMatchedOption(child, matchingString);
+              }
+            });
+            // Alternatively, an extension can add an animation here
+            // option.style.display = '';
+          }
+
+          /**
+           * @overridable
+           * @param {LionOption & {__originalInnerHTML?:string}} option
+           * @param {string} [curValue]
+           * @param {string} [prevValue]
+           * @protected
+           */
+          // eslint-disable-next-line no-unused-vars
+          _onFilterUnmatch(option, curValue, prevValue) {
+            Array.from(option.children).forEach(child => {
+              if (child.hasAttribute('data-key')) {
+                this._unhighlightMatchedOption(child);
+              }
+            });
+            // Alternatively, an extension can add an animation here
+            // option.style.display = 'none';
+          }
+        }
+        const tagName = defineCE(X);
+        const tag = unsafeStatic(tagName);
+
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <${tag} name="foo" autocomplete="both">
+              <lion-option .choiceValue="${'Artichoke'}">
+                <div data-key>Artichoke</div>
+                <small>Cardoon</small>
+              </lion-option>
+              <lion-option .choiceValue="${'Chard'}">
+                <div data-key>Chard</div>
+                <small>Beet</small>
+              </lion-option>
+              <lion-option .choiceValue="${'Chicory'}">
+                <div data-key>Chicory</div>
+                <small>Chicory</small>
+              </lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">
+                <div data-key>Victoria Plum</div>
+                <small>Prunus domestica</small>
+              </lion-option>
+            </${tag}>
+          `)
+        );
+        const options = el.formElements;
+
+        mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+
+        await el.updateComplete;
+        expect(options[0]).lightDom.to.equal(
+          `<div data-key><span aria-label="Artichoke">Arti<b>ch</b>oke</span></div><small>Cardoon</small>`,
+        );
+        expect(options[1]).lightDom.to.equal(
+          `<div data-key><span aria-label="Chard"><b>Ch</b>ard</div></span><small>Beet</small>`,
+        );
+        expect(options[2]).lightDom.to.equal(
+          `<div data-key><span aria-label="Chicory"><b>Ch</b>icory</span></div><small>Chicory</small>`,
+        );
+        expect(options[3]).lightDom.to.equal(
+          `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
+        );
+
+        mimicUserTyping(/** @type {LionCombobox} */ (el), 'D');
+
+        await el.updateComplete;
+        expect(options[0]).lightDom.to.equal(`<div data-key>Artichoke</div><small>Cardoon</small>`);
+        expect(options[1]).lightDom.to.equal(
+          `<div data-key><span aria-label="Chard">Char<b>d</b></div></span><small>Beet</small>`,
+        );
+        expect(options[2]).lightDom.to.equal(`<div data-key>Chicory</div><small>Chicory</small>`);
+        expect(options[3]).lightDom.to.equal(
+          `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
+        );
+      });
     });
 
     describe('Active index behavior', () => {
@@ -2278,6 +2464,26 @@ describe('lion-combobox', () => {
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');
       });
+
+      it('adds aria-label to highlighted complex options', async () => {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox name="foo" match-mode="all">
+              <lion-option .choiceValue="${'Artichoke'}">
+                <div>Artichoke</div>
+                <small>Cardoon</small>
+              </lion-option>
+            </lion-combobox>
+          `)
+        );
+        const options = el.formElements;
+
+        mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
+        await el.updateComplete;
+        const labelledElement = options[0].querySelector('span[aria-label=" Artichoke Cardoon "]');
+        expect(labelledElement).to.not.be.null;
+        expect(labelledElement.innerText).to.equal('Artichoke\nCardoon');
+      });
     });
   });
 

package/components/combobox/translations/bg.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Изскачащ прозорец за опции за комбинирано поле',
+};

package/components/combobox/translations/cs.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Vyskakovací okno možností ComboBox',
+};

package/components/combobox/translations/de.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Popup-Fenster für Kombibox-Optionen',
+};

package/components/combobox/translations/en.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Combobox options popup',
+};

package/components/combobox/translations/es.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Ventana emergente de opciones de cuadro combinado',
+};

package/components/combobox/translations/fr.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Fenêtre popup des options de la boîte combinée',
+};

package/components/combobox/translations/hu.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Kombinált lista opcióinak felugró ablaka',
+};

package/components/combobox/translations/it.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Finestra a comparsa opzioni ComboBox',
+};

package/components/combobox/translations/nl.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Pop-up van opties',
+};

package/components/combobox/translations/pl.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Wyskakujące okno opcji pola wyboru',
+};

package/components/combobox/translations/ro.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Fereastra pop-up cu opţiuni Combobox',
+};

package/components/combobox/translations/ru.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Всплывающее окно параметров поля со списком',
+};

package/components/combobox/translations/sk.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Vyskakovacie okno možností kombinovaného poľa',
+};

package/components/combobox/translations/uk.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Спливаюче вікно параметрів поля зі списком',
+};

package/components/combobox/translations/zh.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: '组合框选项弹出框',
+};