@lion/ui 0.23.0 → 0.25.0

package/components/form-core/test/FormatMixin.test.js

@@ -1,5 +1,4 @@
 import { runFormatMixinSuite } from '../test-suites/FormatMixin.suite.js';
-
 runFormatMixinSuite({
   tagString: null,
   modelValueType: String,

package/components/form-core/test/InteractionStateMixin.test.js

@@ -1,3 +1,2 @@
 import { runInteractionStateMixinSuite } from '../test-suites/InteractionStateMixin.suite.js';
-
 runInteractionStateMixinSuite();

package/components/form-core/test/NativeTextFieldMixin.test.js

@@ -1,3 +1,2 @@
 import { runNativeTextFieldMixinSuite } from '../test-suites/NativeTextFieldMixin.suite.js';
-
 runNativeTextFieldMixinSuite();

package/components/form-core/test/choice-group/ChoiceGroupMixin.test.js

@@ -1,3 +1,2 @@
 import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
-
 runChoiceGroupMixinSuite();

package/components/form-core/test/choice-group/ChoiceInputMixin.test.js

@@ -1,3 +1,2 @@
 import { runChoiceInputMixinSuite } from '../../test-suites/choice-group/ChoiceInputMixin.suite.js';
-
 runChoiceInputMixinSuite();

package/components/form-core/test/choice-group/CustomChoiceGroupMixin.integrations.test.js

@@ -6,13 +6,10 @@ import '@lion/ui/define/lion-checkbox.js';
 import { FormGroupMixin, ChoiceInputMixin } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
 import { CustomChoiceGroupMixin } from '../../src/choice-group/CustomChoiceGroupMixin.js';
-
 class CustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {}
 customElements.define('custom-choice-input-group', CustomChoiceGroup);
-
 class ChoiceInput extends ChoiceInputMixin(LionInput) {}
 customElements.define('custom-choice-input', ChoiceInput);
-
 class CustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {
   constructor() {
     super();
@@ -20,7 +17,6 @@ class CustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin(FormGroupMixin
   }
 }
 customElements.define('allow-custom-choice-input-group', CustomChoiceGroupAllowCustom);
-
 class MultipleCustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {
   constructor() {
     super();
@@ -28,7 +24,6 @@ class MultipleCustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(Li
   }
 }
 customElements.define('multiple-custom-choice-input-group', MultipleCustomChoiceGroup);
-
 class MultipleCustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin(
   FormGroupMixin(LitElement),
 ) {
@@ -42,13 +37,16 @@ customElements.define(
   'multiple-allow-custom-choice-input-group',
   MultipleCustomChoiceGroupAllowCustom,
 );
-
-runChoiceGroupMixinSuite({ parentTagString: 'custom-choice-input-group' });
+runChoiceGroupMixinSuite({
+  parentTagString: 'custom-choice-input-group',
+});
 runChoiceGroupMixinSuite({
   parentTagString: 'multiple-custom-choice-input-group',
   choiceType: 'multiple',
 });
-runChoiceGroupMixinSuite({ parentTagString: 'allow-custom-choice-input-group' });
+runChoiceGroupMixinSuite({
+  parentTagString: 'allow-custom-choice-input-group',
+});
 runChoiceGroupMixinSuite({
   parentTagString: 'multiple-allow-custom-choice-input-group',
   choiceType: 'multiple',

package/components/form-core/test/choice-group/CustomChoiceGroupMixin.test.js

@@ -6,11 +6,8 @@ import '@lion/ui/define/lion-checkbox-group.js';
 import '@lion/ui/define/lion-checkbox.js';
 import { CustomChoiceGroupMixin } from '../../src/choice-group/CustomChoiceGroupMixin.js';
 import { runCustomChoiceGroupMixinSuite } from '../../test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
-
 export class CustomChoiceGroup extends CustomChoiceGroupMixin(FormGroupMixin(LitElement)) {}
 customElements.define('custom-choice-input-group', CustomChoiceGroup);
-
 class ChoiceInput extends ChoiceInputMixin(LionInput) {}
 customElements.define('custom-choice-input', ChoiceInput);
-
 runCustomChoiceGroupMixinSuite();

package/components/form-core/test/form-group/FormGroupMixin.test.js

@@ -1,3 +1,2 @@
 import { runFormGroupMixinSuite } from '../../test-suites/form-group/FormGroupMixin.suite.js';
-
 runFormGroupMixinSuite();

package/components/form-core/test/lion-field.test.js

@@ -13,7 +13,6 @@ import {
   expect,
   html,
 } from '@open-wc/testing';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
@@ -34,11 +33,13 @@ const inputSlot = unsafeHTML(inputSlotString);
  */
 function mimicUserInput(formControl, newViewValue) {
   const { _inputNode } = getFormControlMembers(formControl);
-
   formControl.value = newViewValue; // eslint-disable-line no-param-reassign
-  _inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+  _inputNode.dispatchEvent(
+    new CustomEvent('input', {
+      bubbles: true,
+    }),
+  );
 }
-
 beforeEach(() => {
   localizeTearDown();
 });
@@ -48,54 +49,45 @@ beforeEach(() => {
  * @param {string} slot
  */
 function getSlot(el, slot) {
-  const children = /** @type {any[]} */ (Array.from(el.children));
-  return children.find(child => child.slot === slot);
+  const children = /** @type {any[]} */ Array.from(el.children);
+  return children.find((child) => child.slot === slot);
 }
-
 describe('<lion-field>', () => {
   const localizeManager = getLocalizeManager();
-
   it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => {
-    const el = /** @type {LionField} */ (await fixture(html`<${tag}>${inputSlot}</${tag}>`));
+    const el = /** @type {LionField} */ await fixture(html`<${tag}>${inputSlot}</${tag}>`);
     // @ts-ignore allow protected accessors in tests
     const inputId = el._inputId;
     expect(getSlot(el, 'input').id).to.equal(inputId);
   });
-
   it(`has a fieldName based on the label`, async () => {
-    const el1 = /** @type {LionField} */ (
-      await fixture(html`<${tag} label="foo">${inputSlot}</${tag}>`)
-    );
+    const el1 =
+      /** @type {LionField} */
+      await fixture(html`<${tag} label="foo">${inputSlot}</${tag}>`);
     const { _labelNode: _labelNode1 } = getFormControlMembers(el1);
-
     expect(el1.fieldName).to.equal(_labelNode1.textContent);
-
-    const el2 = /** @type {LionField} */ (
-      await fixture(html`<${tag}><label slot="label">bar</label>${inputSlot}</${tag}>`)
-    );
+    const el2 =
+      /** @type {LionField} */
+      await fixture(html`<${tag}><label slot="label">bar</label>${inputSlot}</${tag}>`);
     const { _labelNode: _labelNode2 } = getFormControlMembers(el2);
     expect(el2.fieldName).to.equal(_labelNode2.textContent);
   });
-
   it(`has a fieldName based on the name if no label exists`, async () => {
-    const el = /** @type {LionField} */ (
-      await fixture(html`<${tag} name="foo">${inputSlot}</${tag}>`)
-    );
+    const el =
+      /** @type {LionField} */
+      await fixture(html`<${tag} name="foo">${inputSlot}</${tag}>`);
     expect(el.fieldName).to.equal(el.name);
   });
-
   it(`can override fieldName`, async () => {
-    const el = /** @type {LionField} */ (
-      await fixture(html`<${tag} label="foo" .fieldName="${'bar'}">${inputSlot}</${tag}>`)
-    );
+    const el =
+      /** @type {LionField} */
+      await fixture(html`<${tag} label="foo" .fieldName="${'bar'}">${inputSlot}</${tag}>`);
     // @ts-ignore [allow-protected] in test
     expect(el.__fieldName).to.equal(el.fieldName);
   });
-
   it('fires focus/blur event on host and native input if focused/blurred', async () => {
-    const el = /** @type {LionField} */ (await fixture(html`<${tag}>${inputSlot}</${tag}>`));
+    const el = /** @type {LionField} */ await fixture(html`<${tag}>${inputSlot}</${tag}>`);
     const { _inputNode } = getFormControlMembers(el);
-
     const cbFocusHost = sinon.spy();
     el.addEventListener('focus', cbFocusHost);
     const cbFocusNativeInput = sinon.spy();
@@ -104,42 +96,35 @@ describe('<lion-field>', () => {
     el.addEventListener('blur', cbBlurHost);
     const cbBlurNativeInput = sinon.spy();
     _inputNode.addEventListener('blur', cbBlurNativeInput);
-
     await triggerFocusFor(el);
-
     expect(isActiveElement(_inputNode)).to.be.true;
     expect(cbFocusHost.callCount).to.equal(1);
     expect(cbFocusNativeInput.callCount).to.equal(1);
     expect(cbBlurHost.callCount).to.equal(0);
     expect(cbBlurNativeInput.callCount).to.equal(0);
-
     await triggerBlurFor(el);
     expect(cbBlurHost.callCount).to.equal(1);
     expect(cbBlurNativeInput.callCount).to.equal(1);
-
     await triggerFocusFor(el);
     expect(isActiveElement(_inputNode)).to.be.true;
     expect(cbFocusHost.callCount).to.equal(2);
     expect(cbFocusNativeInput.callCount).to.equal(2);
-
     await triggerBlurFor(el);
     expect(cbBlurHost.callCount).to.equal(2);
     expect(cbBlurNativeInput.callCount).to.equal(2);
   });
-
   it('offers simple getter "this.focused" returning true/false for the current focus state', async () => {
-    const el = /** @type {LionField} */ (await fixture(html`<${tag}>${inputSlot}</${tag}>`));
+    const el = /** @type {LionField} */ await fixture(html`<${tag}>${inputSlot}</${tag}>`);
     expect(el.focused).to.equal(false);
     await triggerFocusFor(el);
     expect(el.focused).to.equal(true);
     await triggerBlurFor(el);
     expect(el.focused).to.equal(false);
   });
-
   it('can be cleared which erases value, validation and interaction states', async () => {
-    const el = /** @type {LionField} */ (
-      await fixture(html`<${tag} value="Some value from attribute">${inputSlot}</${tag}>`)
-    );
+    const el =
+      /** @type {LionField} */
+      await fixture(html`<${tag} value="Some value from attribute">${inputSlot}</${tag}>`);
     el.clear();
     expect(el.modelValue).to.equal('');
     el.modelValue = 'Some value from property';
@@ -147,20 +132,18 @@ describe('<lion-field>', () => {
     el.clear();
     expect(el.modelValue).to.equal('');
   });
-
   it('can be reset which restores original modelValue', async () => {
-    const el = /** @type {LionField} */ (
+    const el =
+      /** @type {LionField} */
       await fixture(html`
       <${tag} .modelValue="${'foo'}">
         ${inputSlot}
-      </${tag}>`)
-    );
+      </${tag}>`);
     expect(el._initialModelValue).to.equal('foo');
     el.modelValue = 'bar';
     el.reset();
     expect(el.modelValue).to.equal('foo');
   });
-
   describe('Accessibility', () => {
     it(`by setting corresponding aria-labelledby (for label) and aria-describedby (for helpText, feedback)
       ~~~
@@ -176,15 +159,15 @@ describe('<lion-field>', () => {
         <div   slot="feedback"   id="feedback-[id]">[feedback] </span>
       </lion-field>
       ~~~`, async () => {
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`<${tag}>
             <label slot="label">My Name</label>
             ${inputSlot}
             <span slot="help-text">Enter your Name</span>
             <span slot="feedback">No name entered</span>
           </${tag}>
-        `)
-      );
+        `);
       const nativeInput = getSlot(el, 'input');
       // @ts-ignore allow protected accessors in tests
       const inputId = el._inputId;
@@ -192,10 +175,10 @@ describe('<lion-field>', () => {
       expect(nativeInput.getAttribute('aria-describedby')).to.contain(`help-text-${inputId}`);
       expect(nativeInput.getAttribute('aria-describedby')).to.contain(`feedback-${inputId}`);
     });
-
     it(`allows additional slots (prefix, suffix, before, after) to be included in labelledby
     (via attribute data-label) and in describedby (via attribute data-description)`, async () => {
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`<${tag}>
             ${inputSlot}
             <span slot="before" data-label>[before]</span>
@@ -203,9 +186,7 @@ describe('<lion-field>', () => {
             <span slot="prefix" data-description>[prefix]</span>
             <span slot="suffix" data-description>[suffix]</span>
           </${tag}>
-        `)
-      );
-
+        `);
       const nativeInput = getSlot(el, 'input');
       // @ts-ignore allow protected accessors in tests
       const inputId = el._inputId;
@@ -217,7 +198,6 @@ describe('<lion-field>', () => {
       );
     });
   });
-
   describe(`Validation`, () => {
     beforeEach(() => {
       // Reset and preload validation translations
@@ -228,7 +208,6 @@ describe('<lion-field>', () => {
         },
       });
     });
-
     it('should conditionally show error', async () => {
       const HasX = class extends Validator {
         static get validatorName() {
@@ -243,7 +222,8 @@ describe('<lion-field>', () => {
           return result;
         }
       };
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}
           .validators=${[new HasX()]}
@@ -251,8 +231,7 @@ describe('<lion-field>', () => {
         >
           ${inputSlot}
         </${tag}>
-      `)
-      );
+      `);
 
       /**
        * @param {LionField} _sceneEl
@@ -265,38 +244,58 @@ describe('<lion-field>', () => {
         sceneEl.dirty = scenario.el.dirty;
         sceneEl.prefilled = scenario.el.prefilled;
         sceneEl.submitted = scenario.el.submitted;
-
         await sceneEl.updateComplete;
         await sceneEl.feedbackComplete;
         expect(sceneEl.showsFeedbackFor).to.deep.equal(scenario.wantedShowsFeedbackFor);
       };
-
       await executeScenario(el, {
         index: 0,
-        el: { touched: true, dirty: true, prefilled: false, submitted: false },
+        el: {
+          touched: true,
+          dirty: true,
+          prefilled: false,
+          submitted: false,
+        },
         wantedShowsFeedbackFor: ['error'],
       });
       await executeScenario(el, {
         index: 1,
-        el: { touched: false, dirty: false, prefilled: true, submitted: false },
+        el: {
+          touched: false,
+          dirty: false,
+          prefilled: true,
+          submitted: false,
+        },
         wantedShowsFeedbackFor: ['error'],
       });
-
       await executeScenario(el, {
         index: 2,
-        el: { touched: false, dirty: false, prefilled: false, submitted: true },
+        el: {
+          touched: false,
+          dirty: false,
+          prefilled: false,
+          submitted: true,
+        },
         wantedShowsFeedbackFor: ['error'],
       });
-
       await executeScenario(el, {
         index: 3,
-        el: { touched: false, dirty: true, prefilled: false, submitted: false },
+        el: {
+          touched: false,
+          dirty: true,
+          prefilled: false,
+          submitted: false,
+        },
         wantedShowsFeedbackFor: [],
       });
-
       await executeScenario(el, {
         index: 4,
-        el: { touched: true, dirty: false, prefilled: false, submitted: false },
+        el: {
+          touched: true,
+          dirty: false,
+          prefilled: false,
+          submitted: false,
+        },
         wantedShowsFeedbackFor: [],
       });
     });
@@ -314,7 +313,8 @@ describe('<lion-field>', () => {
           return result;
         }
       };
-      const disabledEl = /** @type {LionField} */ (
+      const disabledEl =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}
           disabled
@@ -323,9 +323,9 @@ describe('<lion-field>', () => {
         >
           ${inputSlot}
         </${tag}>
-      `)
-      );
-      const el = /** @type {LionField} */ (
+      `);
+      const el =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}
           .validators=${[new HasX()]}
@@ -333,33 +333,28 @@ describe('<lion-field>', () => {
         >
           ${inputSlot}
         </${tag}>
-      `)
-      );
-
+      `);
       expect(el.hasFeedbackFor).to.deep.equal(['error']);
       expect(el.validationStates.error.HasX).to.exist;
-
       expect(disabledEl.hasFeedbackFor).to.deep.equal([]);
       expect(disabledEl.validationStates.error).to.deep.equal({});
     });
-
     it('can be required', async () => {
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}
           .validators=${[new Required()]}
         >${inputSlot}</${tag}>
-      `)
-      );
+      `);
       expect(el.hasFeedbackFor).to.deep.equal(['error']);
       expect(el.validationStates.error.Required).to.exist;
       el.modelValue = 'cat';
       expect(el.hasFeedbackFor).to.deep.equal([]);
       expect(el.validationStates.error.Required).to.not.exist;
     });
-
     it('will only update formattedValue when valid on `user-input-changed`', async () => {
-      const formatterSpy = sinon.spy(value => `foo: ${value}`);
+      const formatterSpy = sinon.spy((value) => `foo: ${value}`);
       const Bar = class extends Validator {
         static get validatorName() {
           return 'Bar';
@@ -373,32 +368,29 @@ describe('<lion-field>', () => {
           return hasError;
         }
       };
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}
           .modelValue=${'init-string'}
           .formatter=${formatterSpy}
           .validators=${[new Bar()]}
         >${inputSlot}</${tag}>
-      `)
-      );
-
+      `);
       expect(formatterSpy.callCount).to.equal(0);
       expect(el.formattedValue).to.equal('init-string');
-
       el.modelValue = 'bar';
       expect(formatterSpy.callCount).to.equal(1);
       expect(el.formattedValue).to.equal('foo: bar');
-
       mimicUserInput(el, 'foo');
       expect(formatterSpy.callCount).to.equal(1);
       expect(el.value).to.equal('foo');
     });
   });
-
   describe(`Content projection`, () => {
     it('renders correctly all slot elements in light DOM', async () => {
-      const el = /** @type {LionField} */ (
+      const el =
+        /** @type {LionField} */
         await fixture(html`
         <${tag}>
           <label slot="label">[label]</label>
@@ -410,9 +402,7 @@ describe('<lion-field>', () => {
           <span slot="suffix">[suffix]</span>
           <span slot="feedback">[feedback]</span>
         </${tag}>
-      `)
-      );
-
+      `);
       const names = [
         'label',
         'input',
@@ -423,12 +413,12 @@ describe('<lion-field>', () => {
         'suffix',
         'feedback',
       ];
-      names.forEach(slotName => {
-        const slotLight = /** @type {HTMLElement} */ (el.querySelector(`[slot="${slotName}"]`));
+      names.forEach((slotName) => {
+        const slotLight = /** @type {HTMLElement} */ el.querySelector(`[slot="${slotName}"]`);
         slotLight.setAttribute('test-me', 'ok');
-        const slot = /** @type {ShadowHTMLElement} */ (
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`slot[name="${slotName}"]`)
-        );
+        const slot =
+          /** @type {ShadowHTMLElement} */
+          /** @type {ShadowRoot} */ el.shadowRoot.querySelector(`slot[name="${slotName}"]`);
         const assignedNodes = slot.assignedNodes();
         expect(assignedNodes.length).to.equal(1);
         expect(assignedNodes[0].getAttribute('test-me')).to.equal('ok');