@lion/ui 0.6.0 → 0.7.0

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -100,6 +100,7 @@ export class LionInputTelDropdown extends LionInputTel {
             localizeManager.msg('lion-input-tel:suggestedCountries'),
         },
       },
+      input: this._inputNode,
     };
 
     return {
@@ -180,6 +181,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
+          renderAsDirectHostChild: Boolean,
         };
       },
     };
@@ -356,19 +358,6 @@ export class LionInputTelDropdown extends LionInputTel {
         }
       }
     }
-
-    // Put focus on text box
-    //
-    // A LionSelectRich with interactionMode set on windows/linux
-    // will set each item on arrow key up/down to activeElement
-    // which causes the focus to jump every time to the inputNode
-    const overlayController = dropdownElement._overlayCtrl;
-    // @ts-ignore interactionMode only exists on LionSelectRich not on HTMLSelectElement
-    if (overlayController?.isShown && dropdownElement.interactionMode !== 'windows/linux') {
-      setTimeout(() => {
-        this._inputNode.focus();
-      });
-    }
   }
 
   /**

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -152,6 +152,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
                 props: { style: 'height: 100%;' },
                 ref: { value: dropdownNode },
               },
+              // @ts-expect-error [allow-protected]
+              input: el._inputNode,
             },
           }),
         );
@@ -215,7 +217,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
       it('renders to prefix slot in light dom', async () => {
         const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
         const prefixSlot = /** @type {HTMLElement} */ (
-          /** @type {HTMLElement} */ (el.refs.dropdown.value).parentElement
+          /** @type {HTMLElement} */ (el.refs.dropdown.value)
         );
         expect(prefixSlot.getAttribute('slot')).to.equal('prefix');
         expect(prefixSlot.slot).to.equal('prefix');

package/components/input-tel-dropdown/types/index.ts

@@ -36,6 +36,7 @@ export type TemplateDataForDropdownInputTel = {
       };
       labels: { selectCountry: string };
     };
+    input: HTMLInputElement;
   };
   data: {
     activeRegion: string | undefined;

package/components/localize/src/number/formatNumber.js

@@ -26,7 +26,7 @@ export function formatNumber(number, options = /** @type {FormatOptions} */ ({})
   }
   let printNumberOfParts = '';
   // update numberOfParts because there may be some parts added
-  const numberOfParts = formattedToParts && formattedToParts.length;
+  const numberOfParts = formattedToParts ? formattedToParts.length : 0;
   for (let i = 0; i < numberOfParts; i += 1) {
     const part = /** @type {FormatNumberPart} */ (formattedToParts[i]);
     printNumberOfParts += part.value;

package/components/localize/test/number/formatNumber.test.js

@@ -246,6 +246,15 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     });
   });
 
+  // TODO: make it work with big numbers, e.g. make use of BigInt
+  it.skip('can handle big numbers', async () => {
+    expect(formatNumber(1e21)).to.equal('1,000,000,000,000,000,000,000');
+    // eslint-disable-next-line no-loss-of-precision
+    expect(formatNumber(999999999999999999999.42)).to.equal('999,999,999,999,999,999,999.42');
+    // eslint-disable-next-line no-loss-of-precision
+    expect(formatNumber(12345678987654321.42)).to.equal('12,345,678,987,654,321.42');
+  });
+
   describe('normalization', () => {
     describe('en-GB', () => {
       it('supports basics', () => {

package/components/overlays/test/local-positioning.test.js

@@ -75,7 +75,7 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div role="button" style="width: 20px; height: 10px; background: orange;"></div>
+            <div role="button" style="width: 20px; height: 10px; background: orange;">Button</div>
           `)
         ),
       });
@@ -104,11 +104,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
       });
@@ -129,11 +127,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {
@@ -185,11 +181,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {
@@ -257,11 +251,9 @@ describe('Local Positioning', () => {
         ),
         invokerNode: /** @type {HTMLElement} */ (
           fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
+            <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
+              Button
+            </div>
           `)
         ),
         popperConfig: {

package/components/overlays/test/utils-tests/contain-focus.test.js

@@ -25,7 +25,7 @@ function simulateTabInWindow(elToRecieveFocus) {
 
 const interactionElementsNode = renderLitAsNode(html`
   <div>
-    <button id="el1"></button>
+    <button id="el1">Button</button>
     <a id="el2" href="#">foo</a>
     <div id="el3" tabindex="0"></div>
     <input id="el4" />
@@ -50,7 +50,7 @@ const lightDomAutofocusTemplate = html`
     <button id="outside-1">outside 1</button>
 
     <div id="rootElement">
-      <button id="el1"></button>
+      <button id="el1">Button</button>
       <a id="el2" href="#">foo</a>
       <div id="el3" tabindex="0"></div>
       <input id="el4" autofocus />

package/components/overlays/test/utils-tests/deep-contains.test.js

@@ -17,7 +17,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );
@@ -65,7 +65,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement} ${shadowElement2}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );
@@ -101,7 +101,7 @@ describe('deepContains()', () => {
       await fixture(html`
         <div id="light">
           ${shadowElement}
-          <button id="light-el-1"></button>
+          <button id="light-el-1">Button</button>
         </div>
       `)
     );

package/components/overlays/test/utils-tests/get-focusable-elements.test.js

@@ -135,7 +135,7 @@ describe('getFocusableElements()', () => {
       class extends LitElement {
         render() {
           return html`
-            <button id="el-a-1"></button>
+            <button id="el-a-1">Button</button>
 
             <element-b marker="marker-1"></element-b>
 

package/components/select-rich/src/LionSelectRich.js

@@ -477,7 +477,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   // TODO: rename to _onKeyUp in v1
   __onKeyUp(ev) {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       return;
     }
 

package/components/select-rich/test/lion-select-rich-interaction.test.js

@@ -7,6 +7,7 @@ import '@lion/ui/define/lion-option.js';
 
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
+import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
 
 /**
  * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich
@@ -23,32 +24,6 @@ function mimicKeyPress(el, key, code = '') {
   el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
 }
 
-/**
- * @param {LionSelectRich} lionSelectEl
- */
-function getNodes(lionSelectEl) {
-  const {
-    // @ts-ignore protected members allowed in test
-    _invokerNode: invoker,
-    // @ts-ignore protected members allowed in test
-    _feedbackNode: feedback,
-    // @ts-ignore protected members allowed in test
-    _labelNode: label,
-    // @ts-ignore protected members allowed in test
-    _helpTextNode: helpText,
-    // @ts-ignore protected members allowed in test
-    _listboxNode: listbox,
-    // @ts-ignore protected members allowed in test
-  } = lionSelectEl;
-  return {
-    invoker,
-    feedback,
-    label,
-    helpText,
-    listbox,
-  };
-}
-
 describe('lion-select-rich interactions', () => {
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
@@ -187,8 +162,8 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      expect(invoker.tabIndex).to.equal(-1);
+      const { _invokerNode } = getSelectRichMembers(el);
+      expect(_invokerNode.tabIndex).to.equal(-1);
     });
 
     it('cannot be opened via click if disabled', async () => {
@@ -199,8 +174,9 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      invoker.click();
+      const { _invokerNode, _overlayCtrl } = getSelectRichMembers(el);
+      _invokerNode.click();
+      await _overlayCtrl._showComplete;
       expect(el.opened).to.be.false;
     });
 
@@ -212,11 +188,11 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
-      expect(invoker.hasAttribute('disabled')).to.be.true;
+      const { _invokerNode } = getSelectRichMembers(el);
+      expect(_invokerNode.hasAttribute('disabled')).to.be.true;
       el.removeAttribute('disabled');
       await el.updateComplete;
-      expect(invoker.hasAttribute('disabled')).to.be.false;
+      expect(_invokerNode.hasAttribute('disabled')).to.be.false;
     });
   });
 
@@ -232,10 +208,10 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
+      const { _invokerNode } = getSelectRichMembers(el);
       expect(el.touched).to.be.false;
-      await triggerFocusFor(invoker);
-      await triggerBlurFor(invoker);
+      await triggerFocusFor(_invokerNode);
+      await triggerBlurFor(_invokerNode);
       expect(el.touched).to.be.true;
     });
   });
@@ -252,21 +228,21 @@ describe('lion-select-rich interactions', () => {
           </lion-select-rich>
         `)
       );
-      const { invoker } = getNodes(el);
+      const { _invokerNode } = getSelectRichMembers(el);
       const options = el.formElements;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('false');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false');
 
       options[0].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('true');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('true');
 
       options[1].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;
-      expect(invoker.getAttribute('aria-invalid')).to.equal('false');
+      expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false');
     });
   });
 });

package/components/select-rich/test/lion-select-rich.test.js

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LionOption } from '@lion/ui/listbox.js';
-import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
 import { OverlayController } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import { LionSelectInvoker, LionSelectRich } from '@lion/ui/select-rich.js';
@@ -17,6 +16,7 @@ import {
   nextFrame,
   unsafeStatic,
 } from '@open-wc/testing';
+import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
 
 /**
  * @typedef {import('../../listbox/src/LionOptions.js').LionOptions} LionOptions
@@ -24,19 +24,6 @@ import {
  * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  */
 
-/**
- * @param { LionSelectRich } el
- */
-function getSelectRichMembers(el) {
-  const obj = getListboxMembers(el);
-  // eslint-disable-next-line no-return-assign
-  return {
-    ...obj,
-    // @ts-ignore [allow-protected] in test
-    ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl },
-  };
-}
-
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
@@ -329,6 +316,21 @@ describe('lion-select-rich', () => {
       expect(elSingleoption.opened).to.be.false;
     });
 
+    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => {
+      const elReadOnly = await fixture(html`
+        <lion-select-rich readonly>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+
+      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      expect(elReadOnly.opened).to.be.false;
+
+      elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      expect(elReadOnly.opened).to.be.false;
+    });
+
     it('sets inheritsReferenceWidth to min by default', async () => {
       const el = await fixture(html`
         <lion-select-rich name="favoriteColor" label="Favorite color">

package/components/select-rich/test-helpers/getSelectRichMembers.js

@@ -0,0 +1,18 @@
+import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+
+/**
+ * @typedef {import('../src/LionSelectRich.js').LionSelectRich} LionSelectRich
+ */
+
+/**
+ * @param { LionSelectRich } el
+ */
+export function getSelectRichMembers(el) {
+  const obj = getListboxMembers(el);
+  // eslint-disable-next-line no-return-assign
+  return {
+    ...obj,
+    // @ts-ignore [allow-protected] in test
+    ...{ _invokerNode: el._invokerNode, _overlayCtrl: el._overlayCtrl },
+  };
+}