@lion/ui 0.11.0 → 0.11.2

package/README.md

@@ -37,15 +37,15 @@
   <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible and flexible Web Components.!**
+**Lion is a set of highly performant, accessible, and flexible Web Components.**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
-- **Modern Code:** Lion is distributes as pure es modules.
-- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
+- **Modern Code:** Lion is distributed as pure es modules.
+- **Exposes functions/classes and Web Components:** Ships a functionality in its most appropriate form.
 
 > Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
 
@@ -113,7 +113,7 @@ You can also use the lion elements directly, although this is likely not a commo
 
 ## Issues
 
-If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
+If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additionally adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
 
 ## Feature requests
 

package/components/checkbox-group/src/LionCheckboxIndeterminate.js

@@ -49,17 +49,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
    * @protected
    */
   get _subCheckboxes() {
-    let checkboxes = [];
-    if (
-      this._checkboxGroupNode &&
-      this._checkboxGroupNode.formElements &&
-      this._checkboxGroupNode.formElements.length > 0
-    ) {
-      checkboxes = this._checkboxGroupNode.formElements.filter(
-        checkbox => checkbox !== this && this.contains(checkbox),
-      );
-    }
-    return /** @type LionCheckbox[] */ (checkboxes);
+    return /** @type LionCheckbox[] */ (this.__subCheckboxes);
   }
 
   _storeIndeterminateState() {
@@ -97,9 +87,14 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         this.indeterminate = false;
         this.checked = false;
         break;
-      default:
+      default: {
         this.indeterminate = true;
-        this.checked = false;
+        const disabledUncheckedElements = subCheckboxes.filter(
+          checkbox => checkbox.disabled && checkbox.checked === false,
+        );
+        this.checked =
+          subCheckboxes.length - checkedElements.length - disabledUncheckedElements.length === 0;
+      }
     }
     this.updateComplete.then(() => {
       this.__settingOwnChecked = false;
@@ -155,13 +150,12 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         subCheckboxes.length > 0 && subCheckboxes.length === checkedElements.length;
       const allDisabled =
         subCheckboxes.length > 0 && subCheckboxes.length === disabledElements.length;
-      const hasDisabledElements = disabledElements.length > 0;
 
       if (allDisabled) {
         this.checked = allChecked;
       }
 
-      if (this.indeterminate && (this.mixedState || hasDisabledElements)) {
+      if (this.indeterminate && this.mixedState) {
         this._subCheckboxes.forEach((checkbox, i) => {
           // eslint-disable-next-line no-param-reassign
           checkbox.checked = this._indeterminateSubStates[i];
@@ -211,6 +205,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (!(/** @type {HTMLElement} */ (ev.target).hasAttribute('role'))) {
       /** @type {HTMLElement} */ (ev.target)?.setAttribute('role', 'listitem');
     }
+    this.__addToSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
     this._setOwnCheckedState();
   }
 
@@ -223,6 +218,26 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (/** @type {HTMLElement} */ (ev.target).getAttribute('role') === 'listitem') {
       /** @type {HTMLElement} */ (ev.target)?.removeAttribute('role');
     }
+    this.__removeFromSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  __addToSubCheckboxes(element) {
+    if (element !== this && this.contains(element)) {
+      this.__subCheckboxes.push(element);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  __removeFromSubCheckboxes(element) {
+    const index = this.__subCheckboxes.indexOf(element);
+    if (index !== -1) {
+      this.__subCheckboxes.splice(index, 1);
+    }
   }
 
   constructor() {
@@ -230,6 +245,8 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     this.indeterminate = false;
     this._onRequestToAddFormElement = this._onRequestToAddFormElement.bind(this);
     this.__onModelValueChanged = this.__onModelValueChanged.bind(this);
+    /** @type {HTMLElement[]} */
+    this.__subCheckboxes = [];
     /** @type {boolean[]} */
     this._indeterminateSubStates = [];
     this.mixedState = false;
@@ -259,7 +276,13 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
   /** @param {import('lit-element').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has('indeterminate')) {
+
+    // When 1. sub checkboxes have disabled elements and 2. some elements are checked while the others are unchecked
+    // both this._inputNode.indeterminate and this.indeterminate are already true.
+    // If user clicks the input node, this._inputNode.indeterminate is turned to false by the browser
+    // while this.indeterminate is still true and the 'indeterminate' is not in the changedProperties
+    // because it hasn't been updated (true -> true) but checked would have been updated (false -> true).
+    if (changedProperties.has('indeterminate') || changedProperties.has('checked')) {
       this._inputNode.indeterminate = this.indeterminate;
     }
   }

package/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js

@@ -205,7 +205,84 @@ export function runCheckboxIndeterminateSuite(customConfig) {
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
-      expect(elIndeterminate?.checked).to.be.false;
+      expect(elIndeterminate?.checked).to.be.true;
+    });
+
+    it('should be checked when all children are prechecked', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon"></${childTag}>
+          <${childTag} checked label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
+    });
+
+    it('should be checked when it has one prechecked child', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
+    });
+
+    it('should be unchecked when it has an disabled checked child and an unchecked child', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} disabled checked label="Archimedes"></${childTag}>
+          <${childTag} label="Francis Bacon"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.false;
+    });
+
+    it('should be indeterminated when some of the children are prechecked', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon"></${childTag}>
+          <${childTag} label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
     });
 
     it('should sync all children when parent is checked (from indeterminate to checked)', async () => {
@@ -384,6 +461,65 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
     });
 
+    it('should sync all prechecked children when parent is indeterminate and some of the children are disabled (from checked to unchecked)', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ (
+        await fixture(html`
+        <${groupTag} name="scientists[]">
+          <${tag} label="Favorite scientists">
+            <${childTag} checked label="Archimedes"></${childTag}>
+            <${childTag} disabled label="Francis Bacon"></${childTag}>
+            <${childTag} checked label="Marie Curie"></${childTag}>
+          </${tag}>
+        </${groupTag}>
+      `)
+      );
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+      // Act
+      _inputNode.click();
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+      expect(_inputNode?.hasAttribute('indeterminate')).to.be.false;
+      expect(_subCheckboxes[0].hasAttribute('checked')).to.be.false;
+      expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
+      expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
+    });
+
+    it('should stay as indeterminated after it is clicked, when it is interminated already and some children are disabled', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ (
+        await fixture(html`
+        <${groupTag} name="scientists[]">
+          <${tag} label="Favorite scientists">
+            <${childTag} checked label="Archimedes"></${childTag}>
+            <${childTag} disabled label="Francis Bacon"></${childTag}>
+            <${childTag} label="Marie Curie"></${childTag}>
+          </${tag}>
+        </${groupTag}>
+      `)
+      );
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+      // Act
+      _inputNode.click();
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+      expect(_inputNode.indeterminate).to.be.true;
+      expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+      expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+    });
+
     it('should work as expected with siblings checkbox-indeterminate', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ (
@@ -450,6 +586,58 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elSecondSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.false;
     });
 
+    it('should work as expected when new checkbox was added', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon" checked></${childTag}>
+          <${childTag} checked label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+
+      // Act
+      const newChild = document.createElement(/** @type {string} */ (cfg.childTagString));
+      elIndeterminate.appendChild(newChild);
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+    });
+
+    it('should work as expected when an existing checkbox was removed', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon" checked></${childTag}>
+          <${childTag} label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+      expect(elIndeterminate.checked).to.be.false;
+
+      // Act
+      elIndeterminate.removeChild(/** @type {ChildNode} */ (elIndeterminate.lastChild));
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+    });
+
     it('should work as expected with nested indeterminate checkboxes', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ (

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

@@ -1,4 +1,4 @@
-import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-wc/testing';
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { LionCombobox } from '@lion/ui/combobox.js';
@@ -48,6 +48,80 @@ async function fruitFixture({ autocomplete, matchMode } = {}) {
 }
 
 describe('lion-combobox', () => {
+  describe('Rendering on API change', () => {
+    it('renders when options changed', async () => {
+      const entries = [
+        {
+          id: '1',
+          label: 'Apple',
+        },
+        {
+          id: '2',
+          label: 'Artichoke',
+        },
+        {
+          id: '3',
+          label: 'Asparagus',
+        },
+        {
+          id: '4',
+          label: 'Banana',
+        },
+        {
+          id: '5',
+          label: 'Pineapple',
+        },
+      ];
+
+      class Wrapper extends LitElement {
+        static properties = {
+          ...super.properties,
+          entries: { type: Array },
+        };
+
+        constructor() {
+          super();
+          this.entries = entries;
+        }
+
+        render() {
+          return html`<lion-combobox name="foo">
+            ${this.entries.map(
+              entry => html`<lion-option .choiceValue="${entry.id}">${entry.label}</lion-option>`,
+            )}
+          </lion-combobox>`;
+        }
+      }
+
+      const tagString = defineCE(Wrapper);
+      const tag = unsafeStatic(tagString);
+      const wrapperElement = /** @type {Wrapper} */ (await fixture(html`<${tag}></${tag}>`));
+      await waitUntil(
+        () =>
+          wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
+            .length === entries.length,
+      );
+
+      wrapperElement.entries = [
+        {
+          id: '4',
+          label: 'Banana',
+        },
+      ];
+
+      await waitUntil(
+        () =>
+          wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
+            .length === wrapperElement.entries.length,
+      );
+
+      const optionElements = wrapperElement.shadowRoot?.querySelectorAll('lion-option');
+      expect(optionElements?.length).to.equal(wrapperElement.entries.length);
+      const optionElement = optionElements?.item(0);
+      expect(optionElement?.textContent).to.equal('Banana');
+    });
+  });
+
   describe('Options visibility', () => {
     it('hides options when text in input node is cleared after typing something by default', async () => {
       const el = /** @type {LionCombobox} */ (

package/components/form-core/src/FocusMixin.js

@@ -198,19 +198,19 @@ const FocusMixinImplementation = superclass =>
      * @private
      */
     __teardownEventsForFocusMixin() {
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focus',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocus),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'blur',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchBlur),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focusin',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusin),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focusout',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusout),
       );

package/components/form-core/src/LionField.js

@@ -44,7 +44,7 @@ export class LionField extends FormControlMixin(
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._inputNode.removeEventListener('change', this._onChange);
+    this._inputNode?.removeEventListener('change', this._onChange);
   }
 
   resetInteractionState() {

package/components/localize/src/date/parseDate.js

@@ -1,6 +1,7 @@
 import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
 import { getLocalizeManager } from '../getLocalizeManager.js';
 import { addLeadingZero } from './utils/addLeadingZero.js';
+import { isCorrectYearFormat } from './utils/checkYearFormat.js';
 
 /**
  * @typedef {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} FormatDateOptions
@@ -63,12 +64,16 @@ export function parseDate(dateString, options) {
   }
 
   const [year, month, day] = parsedString.split('/').map(Number);
+  const [yearString] = parsedString.split('/');
+  if (!isCorrectYearFormat(yearString)) {
+    return undefined;
+  }
   let correctedYear = year;
   if (year < 50) {
     correctedYear = 2000 + year;
   }
 
-  const parsedDate = new Date(new Date(correctedYear, month - 1, day));
+  const parsedDate = new Date(correctedYear, month - 1, day);
   // Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
   if (
     year > 0 &&

package/components/localize/src/date/utils/checkYearFormat.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param {string} year
+ * @returns {boolean}
+ */
+export function isCorrectYearFormat(year) {
+  return /^\d{2}(\d{2})?$/g.test(year);
+}

package/components/localize/test/date/parseDate.test.js

@@ -91,4 +91,10 @@ describe('parseDate()', () => {
     expect(parseDate('02.31.2020')).to.equal(undefined); // non existing date
     expect(parseDate('31.12.2020')).to.equal(undefined); // day & month switched places
   });
+
+  it('returns undefined for incorrect year format', () => {
+    // TODO: we need a `> 0` check for day and month, but maybe consider `>= 0` for year?
+    expect(parseDate('12-12-0000')).to.equal(undefined);
+    expect(parseDate('12-12-999')).to.equal(undefined);
+  });
 });

package/components/localize/types/LocalizeMixinTypes.ts

@@ -67,11 +67,6 @@ export declare class LocalizeMixinHost {
 
   public localizeNamespacesLoaded: Promise<Object> | undefined;
 
-  /**
-   * Hook into LitElement to only render once all translations are loaded
-   */
-  public performUpdate(): Promise<void>;
-
   public onLocaleReady(): void;
   public onLocaleChanged(newLocale: string, oldLocale: string): void;
   public onLocaleUpdated(): void;

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

@@ -491,7 +491,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    */
   // TODO: rename to #invokerOnKeyUp() (and move event listener to the invoker) in v1
   __onKeyUp(ev) {
-    if (this.disabled || this.readOnly) {
+    if (this.disabled || this.readOnly || this.singleOption) {
       return;
     }
 

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

@@ -342,7 +342,7 @@ describe('lion-select-rich', () => {
       expect(elSingleoption.opened).to.be.false;
     });
 
-    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => {
+    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
       const elReadOnly = await fixture(html`
         <lion-select-rich readonly>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
@@ -350,11 +350,23 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
 
+      const elSingleOption = await fixture(html`
+        <lion-select-rich>
+          <lion-option .choiceValue=${10}>Item 1</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;
+
+      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      expect(elSingleOption.opened).to.be.false;
+
+      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      expect(elSingleOption.opened).to.be.false;
     });
 
     it('sets inheritsReferenceWidth to min by default', async () => {