@lion/ui 0.0.9 → 0.0.10

package/components/core/src/SlotMixin.js

@@ -196,7 +196,8 @@ const SlotMixinImplementation = superclass =>
           this.__slotsThatNeedRerender.add(slotName);
         } else {
           throw new Error(
-            'Please provide a function inside "get slots()" returning TemplateResult | Node | {template:TemplateResult, afterRender?:function} | undefined',
+            `Slot "${slotName}" configured inside "get slots()" (in prototype) of ${this.constructor.name} may return these types: TemplateResult | Node | {template:TemplateResult, afterRender?:function} | undefined.
+            You provided: ${slotFunctionResult}`,
           );
         }
       }

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

@@ -12,7 +12,7 @@ describe('lion-dialog', () => {
   // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
   // Not sure why this "bug" happens...
   beforeEach(() => {
-    const globalRootNode = document.querySelector('.global-overlays');
+    const globalRootNode = document.querySelector('.overlays');
     if (globalRootNode) {
       globalRootNode.innerHTML = '';
     }
@@ -57,15 +57,11 @@ describe('lion-dialog', () => {
         </lion-dialog>
       `);
 
-      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
+      // @ts-expect-error [allow-protected] in tests
       el._overlayInvokerNode.click();
       expect(el.opened).to.be.true;
 
-      const overlaysContainer = /** @type {HTMLElement} */ (
-        document.querySelector('.global-overlays')
-      );
-      const wrapperNode = Array.from(overlaysContainer.children)[1];
-      const nestedDialog = /** @type {LionDialog} */ (wrapperNode.querySelector('lion-dialog'));
+      const nestedDialog = /** @type {LionDialog} */ (el.querySelector('lion-dialog'));
       // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
       nestedDialog?._overlayInvokerNode.click();
       expect(nestedDialog.opened).to.be.true;

package/components/form-integrations/test/form-group-methods.test.js

@@ -96,15 +96,13 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
   it('pressing submit button of a form should make submitted true for all fields', async () => {
     const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
     await el.updateComplete;
+    await el.waitForAllChildrenUpdates();
+
     const formEl = el._lionFormNode;
 
     const allElements = getAllFieldsAndFormGroups(formEl);
 
     allElements.forEach((/** @type {LionField} */ field) => {
-      if (field.tagName === 'LION-SWITCH') {
-        // TODO: remove this when this is fixed: https://github.com/ing-bank/lion/issues/1204
-        return;
-      }
       // TODO: prefer submitted 'false' over 'undefined'
       expect(Boolean(field.submitted)).to.be.false;
     });
@@ -122,6 +120,8 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
         html`<umbrella-form .serializedValue="${fullyPrefilledSerializedValue}"></umbrella-form>`,
       )
     );
+    await el.waitForAllChildrenUpdates();
+
     await el.updateComplete;
     const formEl = el._lionFormNode;
 
@@ -168,6 +168,8 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
         html`<umbrella-form .serializedValue="${fullyPrefilledSerializedValue}"></umbrella-form>`,
       )
     );
+    await el.waitForAllChildrenUpdates();
+
     await el.updateComplete;
     const formEl = el._lionFormNode;
 

package/components/form-integrations/test/form-integrations.test.js

@@ -25,6 +25,7 @@ describe('Form Integrations', () => {
   it('".serializedValue" returns all non disabled fields based on form structure', async () => {
     const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
     await el.updateComplete;
+    await el.waitForAllChildrenUpdates();
     const formEl = el._lionFormNode;
 
     expect(formEl.serializedValue).to.eql({
@@ -46,7 +47,7 @@ describe('Form Integrations', () => {
       notifications: { value: '', checked: false },
       rsvp: '',
       tel: '',
-      'tel-dropdown': '',
+      'tel-dropdown': '+44',
       comments: '',
     });
   });
@@ -110,6 +111,7 @@ describe('Form Integrations', () => {
           ></umbrella-form>`,
         )
       );
+      await el.waitForAllChildrenUpdates();
 
       await el._lionFormNode.initComplete;
       expect(el._lionFormNode.dirty).to.be.false;
@@ -162,9 +164,10 @@ describe('Form Integrations', () => {
     ];
 
     it('successfully registers all form components', async () => {
-      const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
-      // @ts-ignore
-      const formEl = /** @type {LionForm} */ (el._lionFormNode);
+      const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
+      await el.waitForAllChildrenUpdates();
+
+      const formEl = el._lionFormNode;
       await formEl.registrationComplete;
       const registeredEls = getAllTagNames(formEl);
 
@@ -172,8 +175,10 @@ describe('Form Integrations', () => {
     });
 
     it('successfully unregisters all form components', async () => {
-      const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
+      const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
       const offlineContainer = document.createElement('div');
+      await el.waitForAllChildrenUpdates();
+
       // @ts-ignore
       const formEl = /** @type {LionForm} */ (el._lionFormNode);
       await formEl.registrationComplete;

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -11,10 +11,13 @@ import '@lion/ui/define/lion-input-email.js';
 import '@lion/ui/define/lion-input-tel.js';
 import '@lion/ui/define/lion-input-tel-dropdown.js';
 import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
 import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-select-rich.js';
 import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-input-range.js';
 import '@lion/ui/define/lion-textarea.js';
@@ -36,6 +39,13 @@ export class UmbrellaForm extends LitElement {
     this.__serializedValue = v;
   }
 
+  /**
+   * Prevents errors outside test from being thrown
+   */
+  async waitForAllChildrenUpdates() {
+    return Promise.all(this._lionFormNode.formElements.map(child => child.updateComplete));
+  }
+
   render() {
     return html`
       <lion-form .serializedValue="${this.__serializedValue}">

package/components/form-integrations/test/model-value-consistency.test.js

@@ -11,23 +11,19 @@ import '@lion/ui/define/lion-input-email.js';
 import '@lion/ui/define/lion-input-iban.js';
 import '@lion/ui/define/lion-input-range.js';
 import '@lion/ui/define/lion-input-stepper.js';
-
+import '@lion/ui/define/lion-input-tel.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
 import '@lion/ui/define/lion-textarea.js';
-
 import '@lion/ui/define/lion-checkbox.js';
 import '@lion/ui/define/lion-checkbox-group.js';
-
 import '@lion/ui/define/lion-radio.js';
 import '@lion/ui/define/lion-radio-group.js';
 import '@lion/ui/define/lion-switch.js';
-
 import '@lion/ui/define/lion-select.js';
 import '@lion/ui/define/lion-option.js';
-
 import '@lion/ui/define/lion-combobox.js';
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
-
 import '@lion/ui/define/lion-fieldset.js';
 import '@lion/ui/define/lion-form.js';
 import '@lion/ui/define/lion-field.js';
@@ -344,7 +340,6 @@ describe('lion-fieldset', () => {
 
 describe('detail.isTriggeredByUser', () => {
   const allFormControls = [
-    'switch', // TODO: move back below when scoped-elements (polyfill) fixed side effects
     // 1) Fields
     'field',
     // 1a) Input Fields
@@ -356,12 +351,14 @@ describe('detail.isTriggeredByUser', () => {
     'input-iban',
     'input-range',
     'input-stepper',
+    'input-tel',
+    'input-tel-dropdown',
     'textarea',
     // 1b) Choice Fields
     'option',
     'checkbox',
     'radio',
-    // 'switch',
+    'switch',
     // 1c) Choice Group Fields
     'select',
     'listbox',
@@ -423,9 +420,10 @@ describe('detail.isTriggeredByUser', () => {
   /**
    * @param {FormControl & {value: string;}} el
    * @param {string} newViewValue
-   * @param {{ triggerType?: string, labelInsteadOfInput?: boolean }} [optionals]
+   * @param {{ triggerType?: string, labelInsteadOfInput?: boolean, parent?: HTMLElement }} options
    */
-  function mimicUserInput(el, newViewValue, optionals) {
+  function mimicUserInput(el, newViewValue, options = {}) {
+    // @ts-ignore
     const { _inputNode, _labelNode } = getFormControlMembers(el);
     const type = detectType(el);
     let userInputEv;
@@ -434,15 +432,15 @@ describe('detail.isTriggeredByUser', () => {
       el.value = newViewValue; // eslint-disable-line no-param-reassign
       _inputNode.dispatchEvent(new Event(userInputEv, { bubbles: true }));
     } else if (type === 'ChoiceField') {
-      if (optionals?.labelInsteadOfInput) {
+      if (options?.labelInsteadOfInput) {
         _labelNode.click();
       } else {
         _inputNode.click();
       }
     } else if (type === 'OptionChoiceField') {
-      if (!optionals?.triggerType) {
+      if (!options?.triggerType) {
         el.dispatchEvent(new Event('click', { bubbles: true }));
-      } else if (optionals?.triggerType === 'keypress') {
+      } else if (options?.triggerType === 'keypress') {
         el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
         el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true }));
         el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
@@ -503,9 +501,12 @@ describe('detail.isTriggeredByUser', () => {
 
       /**
        * @param {FormControl & {value: string;}} formControl
-       * @param {boolean | undefined} [testKeyboardBehavior]
+       * @param {{parent?: FormControl; testKeyboardBehavior?: boolean}} moreOpts
        */
-      async function expectCorrectEventMetaChoiceField(formControl, testKeyboardBehavior) {
+      async function expectCorrectEventMetaChoiceField(
+        formControl,
+        { parent, testKeyboardBehavior } = {},
+      ) {
         const type = detectType(formControl);
 
         await resetChoiceFieldToForceRepropagation(formControl);
@@ -526,14 +527,19 @@ describe('detail.isTriggeredByUser', () => {
         formControl.modelValue = { value: 'programmaticValue', checked: false };
         expect(spy.secondCall.args[0].detail.isTriggeredByUser).to.be.false;
 
-        if (type === 'OptionChoiceField' && testKeyboardBehavior) {
+        if (
+          type === 'OptionChoiceField' &&
+          testKeyboardBehavior &&
+          parent?.constructor.name !== 'LionCombobox' // modelValue only changeable via click or textbox
+        ) {
           await resetChoiceFieldToForceRepropagation(formControl);
-          mimicUserInput(formControl, 'userValue', { triggerType: 'keypress' });
-          // TODO: get rid of try/catch (?)...
+          mimicUserInput(formControl, 'userValue', { triggerType: 'keypress', parent });
           try {
             expect(spy.firstCall.args[0].detail.isTriggeredByUser).to.be.true;
           } catch (e) {
-            console.log(formControl);
+            throw new Error(
+              `model-value-changed of ${formControl.constructor.name} with parent ${parent?.constructor.name} not caught`,
+            );
           }
         }
       }
@@ -556,7 +562,10 @@ describe('detail.isTriggeredByUser', () => {
         );
         el.appendChild(childrenEls);
         await el.registrationComplete;
-        await expectCorrectEventMetaChoiceField(el.formElements[0], true);
+        await expectCorrectEventMetaChoiceField(el.formElements[0], {
+          testKeyboardBehavior: true,
+          parent: el,
+        });
       } else if (type === 'FormOrFieldset') {
         const childrenEls = await fixture(
           html`<div><lion-input name="one"></lion-input><lion-input name="two"></lion-input></div>`,

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionCalendar } from '@lion/ui/calendar.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html, render } from 'lit';
+import { html, css } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LionInputDate } from '@lion/ui/input-date.js';
 import {
@@ -10,7 +10,8 @@ import {
   withModalDialogConfig,
   ArrowMixin,
 } from '@lion/ui/overlays.js';
-import { LionCalendarOverlayFrame } from './LionCalendarOverlayFrame.js';
+import { LocalizeMixin } from '@lion/ui/localize.js';
+import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**
  * @typedef {import('../../form-core/src/validate/Validator.js').Validator} Validator
@@ -21,16 +22,49 @@ import { LionCalendarOverlayFrame } from './LionCalendarOverlayFrame.js';
  * @customElement lion-input-datepicker
  */
 export class LionInputDatepicker extends ScopedElementsMixin(
-  ArrowMixin(OverlayMixin(LionInputDate)),
+  ArrowMixin(OverlayMixin(LocalizeMixin(LionInputDate))),
 ) {
   static get scopedElements() {
     return {
       ...super.scopedElements,
       'lion-calendar': LionCalendar,
-      'lion-calendar-overlay-frame': LionCalendarOverlayFrame,
     };
   }
 
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        .calendar__overlay-frame {
+          display: inline-block;
+          background: white;
+          position: relative;
+        }
+
+        .calendar-overlay__header {
+          display: flex;
+        }
+
+        .calendar-overlay__heading {
+          padding: 16px 16px 8px;
+          flex: 1;
+        }
+
+        .calendar-overlay__heading > .calendar-overlay__close-button {
+          flex: none;
+        }
+
+        .calendar-overlay__close-button {
+          min-width: 40px;
+          min-height: 32px;
+          border-width: 0;
+          padding: 0;
+          font-size: 24px;
+        }
+      `,
+    ];
+  }
+
   /** @type {any} */
   static get properties() {
     return {
@@ -68,101 +102,12 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   get slots() {
     return {
       ...super.slots,
-      [this._calendarInvokerSlot]: () => {
-        const renderParent = document.createElement('div');
-        render(
-          this._invokerTemplate(),
-          renderParent,
-          /** @type {RenderOptions} */ ({
-            scopeName: this.localName,
-            eventContext: this,
-          }),
-        );
-        return /** @type {HTMLElement} */ (renderParent.firstElementChild);
-      },
+      [this._calendarInvokerSlot]: () => this._invokerTemplate(),
     };
   }
 
   static get localizeNamespaces() {
-    return [
-      {
-        'lion-input-datepicker': /** @param {string} locale */ locale => {
-          switch (locale) {
-            case 'bg-BG':
-              return import('@lion/ui/input-datepicker-translations/bg-BG.js');
-            case 'bg':
-              return import('@lion/ui/input-datepicker-translations/bg.js');
-            case 'cs-CZ':
-              return import('@lion/ui/input-datepicker-translations/cs-CZ.js');
-            case 'cs':
-              return import('@lion/ui/input-datepicker-translations/cs.js');
-            case 'de-DE':
-              return import('@lion/ui/input-datepicker-translations/de-DE.js');
-            case 'de':
-              return import('@lion/ui/input-datepicker-translations/de.js');
-            case 'en-AU':
-              return import('@lion/ui/input-datepicker-translations/en-AU.js');
-            case 'en-GB':
-              return import('@lion/ui/input-datepicker-translations/en-GB.js');
-            case 'en-US':
-              return import('@lion/ui/input-datepicker-translations/en-US.js');
-            case 'en-PH':
-            case 'en':
-              return import('@lion/ui/input-datepicker-translations/en.js');
-            case 'es-ES':
-              return import('@lion/ui/input-datepicker-translations/es-ES.js');
-            case 'es':
-              return import('@lion/ui/input-datepicker-translations/es.js');
-            case 'fr-FR':
-              return import('@lion/ui/input-datepicker-translations/fr-FR.js');
-            case 'fr-BE':
-              return import('@lion/ui/input-datepicker-translations/fr-BE.js');
-            case 'fr':
-              return import('@lion/ui/input-datepicker-translations/fr.js');
-            case 'hu-HU':
-              return import('@lion/ui/input-datepicker-translations/hu-HU.js');
-            case 'hu':
-              return import('@lion/ui/input-datepicker-translations/hu.js');
-            case 'it-IT':
-              return import('@lion/ui/input-datepicker-translations/it-IT.js');
-            case 'it':
-              return import('@lion/ui/input-datepicker-translations/it.js');
-            case 'nl-BE':
-              return import('@lion/ui/input-datepicker-translations/nl-BE.js');
-            case 'nl-NL':
-              return import('@lion/ui/input-datepicker-translations/nl-NL.js');
-            case 'nl':
-              return import('@lion/ui/input-datepicker-translations/nl.js');
-            case 'pl-PL':
-              return import('@lion/ui/input-datepicker-translations/pl-PL.js');
-            case 'pl':
-              return import('@lion/ui/input-datepicker-translations/pl.js');
-            case 'ro-RO':
-              return import('@lion/ui/input-datepicker-translations/ro-RO.js');
-            case 'ro':
-              return import('@lion/ui/input-datepicker-translations/ro.js');
-            case 'ru-RU':
-              return import('@lion/ui/input-datepicker-translations/ru-RU.js');
-            case 'ru':
-              return import('@lion/ui/input-datepicker-translations/ru.js');
-            case 'sk-SK':
-              return import('@lion/ui/input-datepicker-translations/sk-SK.js');
-            case 'sk':
-              return import('@lion/ui/input-datepicker-translations/sk.js');
-            case 'uk-UA':
-              return import('@lion/ui/input-datepicker-translations/uk-UA.js');
-            case 'uk':
-              return import('@lion/ui/input-datepicker-translations/uk.js');
-            case 'zh-CN':
-            case 'zh':
-              return import('@lion/ui/input-datepicker-translations/zh.js');
-            default:
-              return import('@lion/ui/input-datepicker-translations/en.js');
-          }
-        },
-      },
-      ...super.localizeNamespaces,
-    ];
+    return [{ 'lion-input-datepicker': localizeNamespaceLoader }, ...super.localizeNamespaces];
   }
 
   /**
@@ -262,11 +207,29 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     // This would make first paint quicker
     return html`
       <div id="overlay-content-node-wrapper">
-        <lion-calendar-overlay-frame class="calendar__overlay-frame">
-          <span slot="heading">${this.calendarHeading}</span>
-          ${this._calendarTemplate()}
-        </lion-calendar-overlay-frame>
-        ${this._arrowNodeTemplate()}
+        ${this._overlayFrameTemplate()} ${this._arrowNodeTemplate()}
+      </div>
+    `;
+  }
+
+  _overlayFrameTemplate() {
+    return html`
+      <div class="calendar__overlay-frame">
+        <div class="calendar-overlay">
+          <div class="calendar-overlay__header">
+            <h1 class="calendar-overlay__heading">${this.calendarHeading}</h1>
+            <button
+              @click="${() => this._overlayCtrl.hide()}"
+              id="close-button"
+              title="${this.msgLit('lion-input-datepicker:close')}"
+              aria-label="${this.msgLit('lion-input-datepicker:close')}"
+              class="calendar-overlay__close-button"
+            >
+              <slot name="close-icon">&times;</slot>
+            </button>
+          </div>
+          <div>${this._calendarTemplate()}</div>
+        </div>
       </div>
     `;
   }
@@ -466,6 +429,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     this._cachedOverlayContentNode = /** @type {HTMLElement} */ (
       /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.calendar__overlay-frame')
     );
+
     return this._cachedOverlayContentNode;
   }
 }