@lion/ui 0.22.0 → 0.24.0

package/components/radio-group/test/lion-radio.test.js

@@ -13,28 +13,42 @@ describe('<lion-radio>', () => {
     `);
     expect(el.getAttribute('type')).to.equal('radio');
   });
-
   it('can be reset when unchecked by default', async () => {
-    const el = /**  @type {LionRadio} */ (
-      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'}></lion-radio> `)
-    );
-    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: false });
+    const el =
+      /**  @type {LionRadio} */
+      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'}></lion-radio> `);
+    expect(el._initialModelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
     el.checked = true;
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
-
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
     el.reset();
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
   });
-
   it('can be reset when checked by default', async () => {
-    const el = /**  @type {LionRadio} */ (
-      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'} checked></lion-radio> `)
-    );
-    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: true });
+    const el =
+      /**  @type {LionRadio} */
+      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'} checked></lion-radio> `);
+    expect(el._initialModelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
     el.checked = false;
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
-
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: false,
+    });
     el.reset();
-    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
+    expect(el.modelValue).to.deep.equal({
+      value: 'male',
+      checked: true,
+    });
   });
 });

package/components/select/src/LionSelect.js

@@ -11,9 +11,12 @@ import { LionField } from '@lion/ui/form-core.js';
 class LionFieldWithSelect extends LionField {
   /** @type {any} */
   static get properties() {
-    return { autocomplete: { type: String } };
+    return {
+      autocomplete: {
+        type: String,
+      },
+    };
   }
-
   constructor() {
     super();
 
@@ -28,8 +31,8 @@ class LionFieldWithSelect extends LionField {
    * @returns {HTMLSelectElement}
    */
   get _inputNode() {
-    return /** @type {HTMLSelectElement} */ (
-      Array.from(this.children).find(el => el.slot === 'input')
+    return /** @type {HTMLSelectElement} */ Array.from(this.children).find(
+      (el) => el.slot === 'input',
     );
   }
 }
@@ -65,19 +68,18 @@ export class LionSelect extends LionFieldWithSelect {
   get operationMode() {
     return 'select';
   }
-
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);
-
     this.__selectObserver = new MutationObserver(() => {
       this._syncValueUpwards();
       // We need to force computation of other values in case model didn't change
       // This can happen when options are loaded asynchronously so the modelValue doesn't change
       // The MutationObserver detects this and makes sure the modelValue is updated
-      this._calculateValues({ source: 'model' });
+      this._calculateValues({
+        source: 'model',
+      });
     });
-
     this.__selectObserver.observe(this._inputNode, {
       attributes: true,
       childList: true,
@@ -92,18 +94,15 @@ export class LionSelect extends LionFieldWithSelect {
       this._inputNode.disabled = this.disabled;
       this.validate();
     }
-
     if (changedProperties.has('name')) {
       this._inputNode.name = this.name;
     }
-
     if (changedProperties.has('autocomplete')) {
       // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
       // cast keeps this valid on both compilers without widening the public type
-      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
+      this._inputNode.autocomplete = /** @type {any} */ this.autocomplete;
     }
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._proxyChangeEvent);
@@ -118,7 +117,7 @@ export class LionSelect extends LionFieldWithSelect {
    */
   formatter(v) {
     // The selectedIndex is not yet updated
-    const found = Array.from(this._inputNode.options).find(option => option.value === v);
+    const found = Array.from(this._inputNode.options).find((option) => option.value === v);
     return found ? found.text : '';
   }
 

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

@@ -19,9 +19,9 @@ describe('lion-select', () => {
     `);
     expect(lionSelect.querySelector('select')?.value).to.equal('nr2');
   });
-
   it('sets the values correctly based on the option value and view value', async () => {
-    const lionSelect = /** @type {LionSelect} */ (
+    const lionSelect =
+      /** @type {LionSelect} */
       await fixture(html`
         <lion-select label="Foo item" .modelValue="${'nr2'}">
           <select slot="input">
@@ -30,8 +30,7 @@ describe('lion-select', () => {
             <option value="nr3"></option>
           </select>
         </lion-select>
-      `)
-    );
+      `);
     expect(lionSelect.serializedValue).to.equal('nr2');
     expect(lionSelect.formattedValue).to.equal('Item 2');
     lionSelect.modelValue = 'nr1';
@@ -43,9 +42,9 @@ describe('lion-select', () => {
     expect(lionSelect.serializedValue).to.equal('nr3');
     expect(lionSelect.formattedValue).to.equal('');
   });
-
   it('updates the formattedValue correctly when the value for the selected option is updated', async () => {
-    const lionSelect = /** @type {LionSelect} */ (
+    const lionSelect =
+      /** @type {LionSelect} */
       await fixture(html`
         <lion-select label="Foo item" .modelValue="${'nr2'}">
           <select slot="input">
@@ -54,21 +53,17 @@ describe('lion-select', () => {
             <option value="nr3"></option>
           </select>
         </lion-select>
-      `)
-    );
+      `);
     expect(lionSelect.serializedValue).to.equal('nr2');
     expect(lionSelect.formattedValue).to.equal('');
-
     const select = /** @type {HTMLSlotElement} */ (
-      /** @type {ShadowRoot} */ (lionSelect.shadowRoot).querySelector('slot[name=input]')
+      /** @type {ShadowRoot} */ lionSelect.shadowRoot.querySelector('slot[name=input]')
     ).assignedElements()[0];
     const options = select.querySelectorAll('option');
     options[1].textContent = 'Item 2';
-
     await aTimeout;
     expect(lionSelect.formattedValue).to.equal('Item 2');
   });
-
   it('is accessible', async () => {
     const lionSelect = await fixture(html`
       <lion-select .modelValue="${'nr2'}">

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

@@ -35,13 +35,24 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
   /** @type {any} */
   static get properties() {
     return {
-      selectedElement: { type: Object },
-      hostElement: { type: Object },
-      readOnly: { type: Boolean, reflect: true, attribute: 'readonly' },
-      singleOption: { type: Boolean, reflect: true, attribute: 'single-option' },
+      selectedElement: {
+        type: Object,
+      },
+      hostElement: {
+        type: Object,
+      },
+      readOnly: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'readonly',
+      },
+      singleOption: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'single-option',
+      },
     };
   }
-
   get slots() {
     return {
       ...super.slots,
@@ -59,9 +70,8 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
    * @configure OverlayMixin
    */
   get _contentWrapperNode() {
-    return /** @type {ShadowRoot} */ (this.shadowRoot).getElementById('content-wrapper');
+    return /** @type {ShadowRoot} */ this.shadowRoot.getElementById('content-wrapper');
   }
-
   constructor() {
     super();
 
@@ -100,12 +110,10 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
       /* no default */
     }
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('keydown', this.__handleKeydown);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('keydown', this.__handleKeydown);
@@ -119,13 +127,12 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
     if (this.selectedElement) {
       const labelNodes = Array.from(this.selectedElement.childNodes);
       if (labelNodes.length > 0) {
-        return labelNodes.map(node => node.cloneNode(true));
+        return labelNodes.map((node) => node.cloneNode(true));
       }
       return this.selectedElement.textContent;
     }
     return this._noSelectionTemplate();
   }
-
   render() {
     return html` ${this._beforeTemplate()} ${super.render()} ${this._afterTemplate()} `;
   }

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

@@ -83,8 +83,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @type {LionSelectInvoker}
    */
   get _invokerNode() {
-    return /** @type {LionSelectInvoker} */ (
-      Array.from(this.children).find(child => child.slot === 'invoker')
+    return /** @type {LionSelectInvoker} */ Array.from(this.children).find(
+      (child) => child.slot === 'invoker',
     );
   }
 
@@ -102,15 +102,26 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   get _scrollTargetNode() {
     // TODO: should this be defined here or in extension layer?
-    return /** @type {HTMLElement} */ (
-      /** @type {HTMLElement & {_scrollTargetNode?: HTMLElement}} */ (this._overlayContentNode)
-        ._scrollTargetNode || this._overlayContentNode
+    return (
+      /** @type {HTMLElement} */ /** @type {HTMLElement & {_scrollTargetNode?: HTMLElement}} */ this
+        ._overlayContentNode._scrollTargetNode || this._overlayContentNode
     );
   }
 
+  /**
+   * @configure ListboxMixin
+   * @param {HTMLElement} el
+   * @param {HTMLElement} [scrollTargetEl]
+   * @protected
+   */
+  _scrollIntoView(el, scrollTargetEl) {
+    if (this.opened) {
+      super._scrollIntoView(el, scrollTargetEl);
+    }
+  }
+
   /** @protected */
   _arrowWidth;
-
   constructor() {
     super();
 
@@ -126,7 +137,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
      * @type {'windows/linux'|'mac'|'auto'}
      */
     this.interactionMode = 'auto';
-
     this.singleOption = false;
     this._arrowWidth = 28;
 
@@ -145,21 +155,17 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     /** @protected */
     this._listboxOnClick = this._listboxOnClick.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.registrationComplete.then(() => {
       this._invokerNode.selectedElement =
-        this.formElements[/**  @type {number} */ (this.checkedIndex)];
+        this.formElements[/**  @type {number} */ this.checkedIndex];
     });
-
     this._invokerNode.hostElement = this;
-
     this.__setupInvokerNode();
     this.__toggleInvokerDisabled();
     this.addEventListener('keyup', this.__onKeyUp);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.__teardownInvokerNode();
@@ -182,7 +188,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         this.navigateWithinInvoker = Boolean(this.interactionMode === 'windows/linux');
       }
     }
-
     if (name === 'disabled' || name === 'readOnly') {
       this.__toggleInvokerDisabled();
     }
@@ -193,7 +198,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (changedProperties.has('disabled')) {
       if (this.disabled) {
         this._invokerNode.makeRequestToBeDisabled();
@@ -201,7 +205,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         this._invokerNode.retractRequestToBeDisabled();
       }
     }
-
     if (changedProperties.has('singleOption')) {
       if (this.singleOption) {
         this._invokerNode.removeAttribute('role');
@@ -213,7 +216,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
       }
     }
-
     if (this._inputNode && this._invokerNode) {
       if (changedProperties.has('_ariaLabelledNodes')) {
         this._invokerNode.setAttribute(
@@ -221,20 +223,17 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
           `${this._inputNode.getAttribute('aria-labelledby')} ${this._invokerNode.id}`,
         );
       }
-
       if (changedProperties.has('_ariaDescribedNodes')) {
         this._invokerNode.setAttribute(
           'aria-describedby',
-          /** @type {string} */ (this._inputNode.getAttribute('aria-describedby')),
+          /** @type {string} */ this._inputNode.getAttribute('aria-describedby'),
         );
       }
-
       if (changedProperties.has('showsFeedbackFor')) {
         // The ValidateMixin sets aria-invalid on the inputNode, but in this component we also need it on the invoker
         this._invokerNode.setAttribute('aria-invalid', `${this._hasFeedbackVisibleFor('error')}`);
       }
     }
-
     if (changedProperties.has('modelValue')) {
       this.__syncInvokerElement();
     }
@@ -260,7 +259,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       this.__hasInitialSelectedFormElement = true;
     }
     this._alignInvokerWidth();
-
     this._onFormElementsChanged();
   }
 
@@ -281,7 +279,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    */
   _getCheckedElements() {
-    return this.formElements.filter(el => el.checked);
+    return this.formElements.filter((el) => el.checked);
   }
 
   /** @protected */
@@ -308,7 +306,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     // sync to invoker
     if (this._invokerNode) {
       this._invokerNode.selectedElement =
-        this.formElements[/**  @type {number} */ (this.checkedIndex)];
+        this.formElements[/**  @type {number} */ this.checkedIndex];
       /**
        * Manually update this, as the node reference may be the same, but the modelValue might not.
        * This would mean that it won't pass the LitElement dirty check.
@@ -323,7 +321,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   __setupInvokerNode() {
     this._invokerNode.id = `invoker-${this._inputId}`;
     this._invokerNode.setAttribute('aria-haspopup', 'listbox');
-
     this.__setupInvokerNodeEventListener();
   }
 
@@ -342,7 +339,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   /** @private */
   __setupInvokerNodeEventListener() {
     this._invokerNode.addEventListener('click', this.__invokerOnClick);
-
     this._invokerNode.addEventListener('blur', this.__invokerOnBlur);
   }
 
@@ -374,7 +370,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   _noDefaultSelectedInheritsWidth() {
     if (this.checkedIndex === -1) {
-      this._overlayCtrl.updateConfig({ inheritsReferenceWidth: 'min' });
+      this._overlayCtrl.updateConfig({
+        inheritsReferenceWidth: 'min',
+      });
     } else {
       this._overlayCtrl.updateConfig({
         inheritsReferenceWidth: this._initialInheritsReferenceWidth,
@@ -397,7 +395,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   /** @private */
   __overlayOnShow() {
     if (this.checkedIndex != null) {
-      this.activeIndex = /**  @type {number} */ (this.checkedIndex);
+      this.activeIndex = /**  @type {number} */ this.checkedIndex;
     }
     this._listboxNode.focus();
   }
@@ -416,10 +414,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     super._setupOverlayCtrl();
     this._initialInheritsReferenceWidth = this._overlayCtrl.inheritsReferenceWidth;
     this._alignInvokerWidth();
-
     this._overlayCtrl.addEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.addEventListener('show', this.__overlayOnShow);
-
     this._overlayCtrl.addEventListener('hide', this.__overlayOnHide);
   }
 
@@ -429,11 +425,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
-
     if (!this._overlayCtrl) {
       return;
     }
-
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -446,11 +440,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   async _alignInvokerWidth() {
     await this.updateComplete;
-
     if (!this._overlayCtrl?.content) {
       return;
     }
-
     const initContentDisplay = this._overlayCtrl.content.style.display;
     const initContentMinWidth = this._overlayCtrl.contentWrapperNode.style.minWidth;
     const initContentWidth = this._overlayCtrl.contentWrapperNode.style.width;
@@ -509,22 +501,19 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     if (this.opened) {
       return;
     }
-
     this._isHandlingUserInput = true;
     setTimeout(() => {
       // Since we can't control when subclasses are done handling keyboard input, we
       // schedule a timeout to reset _isHandlingUserInput
       this._isHandlingUserInput = false;
     });
-
     const { key } = ev;
     switch (key) {
       case 'ArrowUp':
         ev.preventDefault();
-
         if (this.navigateWithinInvoker) {
           this.setCheckedIndex(
-            this._getPreviousEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+            this._getPreviousEnabledOption(/**  @type {number} */ this.checkedIndex),
           );
         } else {
           this.opened = true;
@@ -534,7 +523,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         ev.preventDefault();
         if (this.navigateWithinInvoker) {
           this.setCheckedIndex(
-            this._getNextEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+            this._getNextEnabledOption(/**  @type {number} */ this.checkedIndex),
           );
         } else {
           this.opened = true;
@@ -544,7 +533,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         ev.preventDefault();
         if (this.navigateWithinInvoker) {
           this.setCheckedIndex(
-            this._getPreviousEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+            this._getPreviousEnabledOption(/**  @type {number} */ this.checkedIndex),
           );
         }
         break;
@@ -552,13 +541,15 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
         ev.preventDefault();
         if (this.navigateWithinInvoker) {
           this.setCheckedIndex(
-            this._getNextEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+            this._getNextEnabledOption(/**  @type {number} */ this.checkedIndex),
           );
         }
         break;
       default:
         if (!this._noTypeAhead) {
-          this._handleTypeAhead(ev, { setAsChecked: true });
+          this._handleTypeAhead(ev, {
+            setAsChecked: true,
+          });
         }
     }
   }
@@ -573,12 +564,10 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   _listboxOnKeyDown(ev) {
     super._listboxOnKeyDown(ev);
-
     if (this.disabled) {
       return;
     }
     const { key } = ev;
-
     switch (key) {
       case 'Tab':
         // Tab can only be caught in keydown

package/components/select-rich/test/demos.screenshots-test.js

@@ -2,12 +2,15 @@
 /* globals capture getStoryPage */
 
 const selector = 'lion-select-rich';
-
 describe('forms-select-rich', () => {
   it('main', async () => {
     const id = `forms-select-rich--main`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('main-opened', async () => {
     const id = `forms-select-rich--main`;
@@ -27,7 +30,11 @@ describe('forms-select-rich', () => {
   it('options-with-html', async () => {
     const id = `forms-select-rich--options-with-html`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('options-with-html-opened', async () => {
     const id = `forms-select-rich--options-with-html`;
@@ -62,12 +69,20 @@ describe('forms-select-rich', () => {
   it('read-only-prefilled', async () => {
     const id = `forms-select-rich--read-only-prefilled`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('disabled-select', async () => {
     const id = `forms-select-rich--disabled-select`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('disabled-option-opened', async () => {
     const id = `forms-select-rich--disabled-option`;
@@ -95,12 +110,20 @@ describe('forms-select-rich', () => {
         el.dirty = true;
       });
     });
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('render-options', async () => {
     const id = `forms-select-rich--render-options`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('interaction-mode-mac', async () => {
     const id = `forms-select-rich--interaction-mode`;
@@ -127,11 +150,19 @@ describe('forms-select-rich', () => {
   it('no-default-selection', async () => {
     const id = `forms-select-rich--no-default-selection`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
   it('single-option', async () => {
     const id = `forms-select-rich--single-option`;
     const page = await getStoryPage(id);
-    await capture({ selector, id, page });
+    await capture({
+      selector,
+      id,
+      page,
+    });
   });
 });