@lion/ui 0.22.0 → 0.24.0

package/components/form-core/translations/bg-BG.js

@@ -1,5 +1,4 @@
 import bg from './bg.js';
-
 export default {
   ...bg,
 };

package/components/form-core/translations/cs-CZ.js

@@ -1,5 +1,4 @@
 import cs from './cs.js';
-
 export default {
   ...cs,
 };

package/components/form-core/translations/de-DE.js

@@ -1,5 +1,4 @@
 import de from './de.js';
-
 export default {
   ...de,
 };

package/components/form-core/translations/en-AU.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/form-core/translations/en-GB.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/form-core/translations/en-US.js

@@ -1,5 +1,4 @@
 import en from './en.js';
-
 export default {
   ...en,
 };

package/components/form-core/translations/es-ES.js

@@ -1,5 +1,4 @@
 import es from './es.js';
-
 export default {
   ...es,
 };

package/components/form-core/translations/fr-BE.js

@@ -1,5 +1,4 @@
 import fr from './fr.js';
-
 export default {
   ...fr,
 };

package/components/form-core/translations/fr-FR.js

@@ -1,5 +1,4 @@
 import fr from './fr.js';
-
 export default {
   ...fr,
 };

package/components/form-core/translations/hu-HU.js

@@ -1,5 +1,4 @@
 import hu from './hu.js';
-
 export default {
   ...hu,
 };

package/components/form-core/translations/it-IT.js

@@ -1,5 +1,4 @@
 import it from './it.js';
-
 export default {
   ...it,
 };

package/components/form-core/translations/nl-BE.js

@@ -1,5 +1,4 @@
 import nl from './nl.js';
-
 export default {
   ...nl,
 };

package/components/form-core/translations/nl-NL.js

@@ -1,5 +1,4 @@
 import nl from './nl.js';
-
 export default {
   ...nl,
 };

package/components/form-core/translations/pl-PL.js

@@ -1,5 +1,4 @@
 import pl from './pl.js';
-
 export default {
   ...pl,
 };

package/components/form-core/translations/ro-RO.js

@@ -1,5 +1,4 @@
 import ro from './ro.js';
-
 export default {
   ...ro,
 };

package/components/form-core/translations/ru-RU.js

@@ -1,5 +1,4 @@
 import ru from './ru.js';
-
 export default {
   ...ru,
 };

package/components/form-core/translations/sk-SK.js

@@ -1,5 +1,4 @@
 import sk from './sk.js';
-
 export default {
   ...sk,
 };

package/components/form-core/translations/tr-TR.js

@@ -1,5 +1,4 @@
 import tr from './tr.js';
-
 export default {
   ...tr,
 };

package/components/form-core/translations/uk-UA.js

@@ -1,5 +1,4 @@
 import uk from './uk.js';
-
 export default {
   ...uk,
 };

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -7,6 +7,11 @@ import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
 import { ChoiceInputHost } from './ChoiceInputMixinTypes.js';
 
 export declare class ChoiceGroupHost extends FormControlHost {
+  /**
+   * TODO: rename to `multiple` (the platform name, `<select multiple>`), non-breaking: keep this
+   * property and the `multiple-choice` attribute as a deprecated alias for a release before removing
+   * them in a major. See the TODO in src/choice-group/ChoiceGroupMixin.js.
+   */
   multipleChoice: boolean;
   get serializedValue(): string;
   set serializedValue(value: string);

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

@@ -5,7 +5,6 @@ import '@lion/ui/define/lion-dialog.js';
 import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-radio.js';
 import { html } from 'lit';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { getAllTagNames } from './helpers/helpers.js';
 import './helpers/umbrella-form.js';
@@ -28,11 +27,10 @@ describe('Form inside dialog Integrations', () => {
 
     // @ts-expect-error [allow-protected-in-tests]
     const umbrellaEl = el._overlayCtrl.contentNode;
-    const formEl = /** @type {LionForm} */ (umbrellaEl._lionFormNode);
+    const formEl = /** @type {LionForm} */ umbrellaEl._lionFormNode;
     await formEl.registrationComplete;
     const registeredEls = getAllTagNames(formEl);
     await umbrellaEl.waitForAllChildrenUpdates();
-
     expect(registeredEls).to.eql([
       'lion-fieldset',
       '  lion-input',
@@ -78,7 +76,6 @@ describe('Form inside dialog Integrations', () => {
       'lion-textarea',
     ]);
   });
-
   it('sets focus on first focusable element with autofocus', async () => {
     const el = /** @type {LionDialog} */ await fixture(html`
       <lion-dialog>

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

@@ -9,14 +9,16 @@ import './helpers/umbrella-form.js';
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  */
 
-const file = /** @type {InputFile} */ (
+const file =
+  /** @type {InputFile} */
   new File(['foo'], 'foo.txt', {
     type: 'text/plain',
-  })
-);
-
+  });
 const fullyPrefilledSerializedValue = {
-  fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
+  fullName: {
+    firstName: 'Lorem',
+    lastName: 'Ipsum',
+  },
   date: '2000-12-12',
   datepicker: '2020-12-12',
   bio: 'Lorem',
@@ -39,9 +41,11 @@ const fullyPrefilledSerializedValue = {
   terms: ['agreed'],
   comments: 'Lorem',
 };
-
 const fullyChangedSerializedValue = {
-  fullName: { firstName: 'LoremChanged', lastName: 'IpsumChanged' },
+  fullName: {
+    firstName: 'LoremChanged',
+    lastName: 'IpsumChanged',
+  },
   date: '1999-12-12',
   datepicker: '1986-12-12',
   bio: 'LoremChanged',
@@ -64,66 +68,58 @@ const fullyChangedSerializedValue = {
   terms: [],
   comments: 'LoremChanged',
 };
-
 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>`));
+    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) => {
       // TODO: prefer submitted 'false' over 'undefined'
       expect(Boolean(field.submitted)).to.be.false;
     });
-    /** @type {LionButton} */ (formEl.querySelector('#submit_button')).click();
+    /** @type {LionButton} */
+    formEl.querySelector('#submit_button').click();
     await elementUpdated(formEl);
     await el.updateComplete;
     allElements.forEach((/** @type {LionField} */ field) => {
       expect(field.submitted).to.be.true;
     });
   });
-
   it('calling resetGroup() should reset all metadata (interaction states and initial values)', async () => {
-    const el = /** @type {UmbrellaForm} */ (
+    const el =
+      /** @type {UmbrellaForm} */
       await fixture(
         html`<umbrella-form .serializedValue="${fullyPrefilledSerializedValue}"></umbrella-form>`,
-      )
-    );
+      );
     await el.waitForAllChildrenUpdates();
-
     await el.updateComplete;
     const formEl = el._lionFormNode;
 
-    /** @type {LionButton} */ (formEl.querySelector('#submit_button')).click();
+    /** @type {LionButton} */
+    formEl.querySelector('#submit_button').click();
     await elementUpdated(formEl);
     await formEl.updateComplete;
-
     const allElements = getAllFieldsAndFormGroups(formEl);
-
     allElements.forEach((/** @type {LionField} */ field) => {
       // eslint-disable-next-line no-param-reassign
       field.touched = true;
       // eslint-disable-next-line no-param-reassign
       field.dirty = true;
     });
-
     formEl.serializedValue = fullyChangedSerializedValue;
-
     allElements.forEach((/** @type {LionField} */ field) => {
       expect(field.submitted).to.be.true;
       expect(field.touched).to.be.true;
       expect(field.dirty).to.be.true;
     });
 
-    /** @type {LionButton} */ (formEl.querySelector('#reset_button')).click();
+    /** @type {LionButton} */
+    formEl.querySelector('#reset_button').click();
     await elementUpdated(formEl);
     await formEl.updateComplete;
     expect(formEl.submitted).to.be.false;
-
     allElements.forEach((/** @type {LionField} */ field) => {
       expect(field.submitted).to.be.false;
       expect(field.touched).to.be.false;
@@ -136,21 +132,22 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
 
   // Wait till ListboxMixin properly clears
   it('calling clearGroup() should clear all fields', async () => {
-    const el = /** @type {UmbrellaForm} */ (
+    const el =
+      /** @type {UmbrellaForm} */
       await fixture(
         html`<umbrella-form .serializedValue="${fullyPrefilledSerializedValue}"></umbrella-form>`,
-      )
-    );
+      );
     await el.waitForAllChildrenUpdates();
-
     await el.updateComplete;
     const formEl = el._lionFormNode;
-
     formEl.clearGroup();
     await elementUpdated(formEl);
     await formEl.updateComplete;
     expect(formEl.serializedValue).to.eql({
-      fullName: { firstName: '', lastName: '' },
+      fullName: {
+        firstName: '',
+        lastName: '',
+      },
       date: '',
       datepicker: '',
       bio: '',

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

@@ -4,7 +4,6 @@ import { html } from 'lit/static-html.js';
 import { PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { getAllTagNames } from './helpers/helpers.js';
 import './helpers/umbrella-form.js';
-
 import '@lion/ui/define/lion-input-tel-dropdown.js';
 import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-checkbox.js';
@@ -21,15 +20,16 @@ describe('Form Integrations', () => {
     // Wait till PhoneUtilManager has been loaded
     await PhoneUtilManager.loadComplete;
   });
-
   it('".serializedValue" returns all non disabled fields based on form structure', async () => {
-    const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
+    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({
-      fullName: { firstName: '', lastName: '' },
+      fullName: {
+        firstName: '',
+        lastName: '',
+      },
       date: '2000-12-12',
       datepicker: '2020-12-12',
       bio: '',
@@ -45,25 +45,29 @@ describe('Form Integrations', () => {
       lyrics: '1',
       range: 2.3,
       terms: [],
-      notifications: { value: '', checked: false },
+      notifications: {
+        value: '',
+        checked: false,
+      },
       rsvp: '',
       tel: '',
       'tel-dropdown': '',
       comments: '',
     });
   });
-
   it('".formattedValue" returns all non disabled fields based on form structure', async () => {
-    const el = /** @type {UmbrellaForm} */ (await fixture(html`<umbrella-form></umbrella-form>`));
+    const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
     await el.updateComplete;
     const formEl = el._lionFormNode;
-    const inputTelDropdownEl = /** @type {LionInputTelDropdown} */ (
-      formEl.querySelector('lion-input-tel-dropdown')
-    );
+    const inputTelDropdownEl =
+      /** @type {LionInputTelDropdown} */
+      formEl.querySelector('lion-input-tel-dropdown');
     await inputTelDropdownEl?.updateComplete;
-
     expect(formEl.formattedValue).to.eql({
-      fullName: { firstName: '', lastName: '' },
+      fullName: {
+        firstName: '',
+        lastName: '',
+      },
       date: '12/12/2000',
       datepicker: '12/12/2020',
       bio: '',
@@ -86,14 +90,17 @@ describe('Form Integrations', () => {
       comments: '',
     });
   });
-
   describe('Form Integrations', () => {
     it('does not become dirty when elements are prefilled', async () => {
-      const el = /** @type {UmbrellaForm} */ (
+      const el =
+        /** @type {UmbrellaForm} */
         await fixture(
           html`<umbrella-form
             .serializedValue="${{
-              fullName: { firstName: '', lastName: '' },
+              fullName: {
+                firstName: '',
+                lastName: '',
+              },
               date: '2000-12-12',
               datepicker: '2020-12-12',
               bio: '',
@@ -112,15 +119,12 @@ describe('Form Integrations', () => {
               comments: '',
             }}"
           ></umbrella-form>`,
-        )
-      );
+        );
       await el.waitForAllChildrenUpdates();
-
       await el._lionFormNode.initComplete;
       expect(el._lionFormNode.dirty).to.be.false;
     });
   });
-
   describe('Registering', () => {
     const registerTagsResult = [
       'lion-fieldset',
@@ -166,27 +170,22 @@ describe('Form Integrations', () => {
       'lion-input-stepper',
       'lion-textarea',
     ];
-
     it('successfully registers 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>`);
       await el.waitForAllChildrenUpdates();
-
       const formEl = el._lionFormNode;
       await formEl.registrationComplete;
       const registeredEls = getAllTagNames(formEl);
-
       expect(registeredEls).to.eql(registerTagsResult);
     });
-
     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);
+      const formEl = /** @type {LionForm} */ el._lionFormNode;
       await formEl.registrationComplete;
-
       for (const child of formEl.formElements) {
         const spy = sinon.spy(child, '__unregisterFormElement');
         offlineContainer.appendChild(child);

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

@@ -5,14 +5,12 @@ import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
-
 describe('Form Validation Integrations', () => {
   const localizeManager = getLocalizeManager();
   const lightDom = '';
   before(() => {
     loadDefaultFeedbackMessages();
   });
-
   describe('DefaultSuccess', () => {
     it('does not show success feedback if the user is not recovering from a shown error/warning feedback', async () => {
       class WarnValidator extends Validator {
@@ -35,7 +33,6 @@ describe('Form Validation Integrations', () => {
           return hasError;
         }
       }
-
       class ValidateElementCustomTypes extends LionInput {
         static get validationTypes() {
           return ['error', 'warning', 'success'];
@@ -43,36 +40,35 @@ describe('Form Validation Integrations', () => {
       }
       const elTagString = defineCE(ValidateElementCustomTypes);
       const elTag = unsafeStatic(elTagString);
-      const el = /** @type {ValidateElementCustomTypes} */ (
+      const el =
+        /** @type {ValidateElementCustomTypes} */
         await fixture(html`
         <${elTag}
           .validators=${[
-            new Required(null, { getMessage: async () => 'error' }),
-            new WarnValidator(null, { getMessage: () => 'warning' }),
+            new Required(null, {
+              getMessage: async () => 'error',
+            }),
+            new WarnValidator(null, {
+              getMessage: () => 'warning',
+            }),
             new DefaultSuccess(),
           ]}
         >${lightDom}</${elTag}>
-      `)
-      );
+      `);
       const { _feedbackNode } = getFormControlMembers(el);
-
       expect(_feedbackNode.feedbackData?.length).to.equal(0);
-
       el.modelValue = 'w';
       el.touched = true;
       await el.updateComplete;
       await el.feedbackComplete;
       expect(el.showsFeedbackFor).to.eql([]);
-
       el.modelValue = 'warn';
       await el.updateComplete;
       await el.feedbackComplete;
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('warning');
-
       el.modelValue = 'war';
       await el.updateComplete;
       await el.feedbackComplete;
-
       expect([
         'Okay',
         'Correct',
@@ -83,18 +79,15 @@ describe('Form Validation Integrations', () => {
         'Ok, correct.',
       ]).to.include(
         /** @type {{  message: string ;type: string; validator?: Validator | undefined;}[]} */
-        (_feedbackNode.feedbackData)[0].message,
+        _feedbackNode.feedbackData[0].message,
       );
-
       el.modelValue = '';
       await el.updateComplete;
       await el.feedbackComplete;
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('error');
-
       el.modelValue = 'war';
       await el.updateComplete;
       await el.feedbackComplete;
-
       expect([
         'Okay',
         'Correct',
@@ -105,7 +98,7 @@ describe('Form Validation Integrations', () => {
         'Ok, correct.',
       ]).to.include(
         /** @type {{  message: string ;type: string; validator?: Validator | undefined;}[]} */
-        (_feedbackNode.feedbackData)[0].message,
+        _feedbackNode.feedbackData[0].message,
       );
 
       // Check that change in focused or other interaction states does not refresh the success message
@@ -118,26 +111,27 @@ describe('Form Validation Integrations', () => {
       await el.feedbackComplete;
       expect(spy.called).to.be.false;
     });
-
     it('correctly renders localized fieldName (label), even on locale changes', async () => {
       class DefaultLabelInput extends LionInput {
         constructor() {
           super();
           this.setDefaultLabel();
         }
-
         async updateLabel() {
           this.label = localizeManager.msg('test-default-label:label');
         }
-
         async setDefaultLabel() {
           localizeManager.loadNamespace({
-            'test-default-label': /** @param {string} locale */ async locale => {
+            'test-default-label': /** @param {string} locale */ async (locale) => {
               switch (locale) {
                 case 'nl-NL':
-                  return { label: 'Tekst' };
+                  return {
+                    label: 'Tekst',
+                  };
                 default:
-                  return { label: 'Text' };
+                  return {
+                    label: 'Text',
+                  };
               }
             },
           });
@@ -154,27 +148,25 @@ describe('Form Validation Integrations', () => {
       }
       const elTagString = defineCE(DefaultLabelInput);
       const elTag = unsafeStatic(elTagString);
-      const el = /** @type {LionInput} */ (
+      const el =
+        /** @type {LionInput} */
         await fixture(html`
         <${elTag}
           .validators=${[new Required()]}
         >${lightDom}</${elTag}>
-      `)
-      );
+      `);
       el.touched = true;
       el.dirty = true;
       await el.updateComplete;
       await el.feedbackComplete;
       const { _feedbackNode } = getFormControlMembers(el);
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Please enter a(n) Text.');
-
       localizeManager.locale = 'nl-NL';
       await localizeManager.loadingComplete;
       await el.updateComplete;
       await el.feedbackComplete;
       expect(el.label).to.equal('Tekst');
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Vul een Tekst in.');
-
       localizeManager.locale = 'en-GB';
       await localizeManager.loadingComplete;
       await el.updateComplete;

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

@@ -26,11 +26,10 @@ import '@lion/ui/define/lion-switch.js';
 import '@lion/ui/define/lion-textarea.js';
 import { MinLength, Required } from '@lion/ui/form-core.js';
 import { html, LitElement } from 'lit';
-
 export class UmbrellaForm extends LitElement {
   get _lionFormNode() {
-    return /** @type {import('../../../form/src/LionForm.js').LionForm} */ (
-      this.shadowRoot?.querySelector('lion-form')
+    return /** @type {import('../../../form/src/LionForm.js').LionForm} */ this.shadowRoot?.querySelector(
+      'lion-form',
     );
   }
 
@@ -45,9 +44,8 @@ export class UmbrellaForm extends LitElement {
    * Prevents errors outside test from being thrown
    */
   async waitForAllChildrenUpdates() {
-    return Promise.all(this._lionFormNode.formElements.map(child => child.updateComplete));
+    return Promise.all(this._lionFormNode.formElements.map((child) => child.updateComplete));
   }
-
   render() {
     return html`
       <lion-form .serializedValue="${this.__serializedValue}">