@lion/ui 0.23.0 → 0.25.0

package/components/form-core/src/validate/Validator.js

@@ -80,7 +80,7 @@ export class Validator extends EventTarget {
    */
   // eslint-disable-next-line no-unused-vars, class-methods-use-this
   execute(modelValue, param, config) {
-    const ctor = /** @type {typeof Validator} */ (this.constructor);
+    const ctor = /** @type {typeof Validator} */ this.constructor;
     if (!ctor.validatorName) {
       throw new Error(
         'A validator needs to have a name! Please set it via "static get validatorName() { return \'IsCat\'; }"',
@@ -111,7 +111,6 @@ export class Validator extends EventTarget {
      */
     this.dispatchEvent(new Event('param-changed'));
   }
-
   get param() {
     return this.__param;
   }
@@ -139,7 +138,6 @@ export class Validator extends EventTarget {
      */
     this.dispatchEvent(new Event('config-changed'));
   }
-
   get config() {
     return this.__config;
   }
@@ -171,7 +169,7 @@ export class Validator extends EventTarget {
    * @protected
    */
   async _getMessage(data) {
-    const ctor = /** @type {typeof Validator} */ (this.constructor);
+    const ctor = /** @type {typeof Validator} */ this.constructor;
     const composedData = {
       name: ctor.validatorName,
       type: this.type,
@@ -184,8 +182,7 @@ export class Validator extends EventTarget {
         return this.config.getMessage(composedData);
       }
       throw new Error(
-        `You must provide a value for getMessage of type 'function', you provided a value of type: ${typeof this
-          .config.getMessage}`,
+        `You must provide a value for getMessage of type 'function', you provided a value of type: ${typeof this.config.getMessage}`,
       );
     }
     return ctor.getMessage(composedData);

package/components/form-core/src/validate/resultValidators/DefaultSuccess.js

@@ -23,11 +23,10 @@ export class DefaultSuccess extends ResultValidator {
    */
   // eslint-disable-next-line class-methods-use-this
   executeOnResults({ regularValidationResult, prevShownValidationResult }) {
-    const errorOrWarning = /** @param {Validator} v */ v =>
+    const errorOrWarning = /** @param {Validator} v */ (v) =>
       v.type === 'error' || v.type === 'warning';
     const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
     const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
-
     return !hasErrorOrWarning && hasShownErrorOrWarning;
   }
 }

package/components/form-core/src/validate/validators/DateValidators.js

@@ -11,7 +11,6 @@ function isDate(value) {
     Object.prototype.toString.call(value) === '[object Date]' && !Number.isNaN(value.getTime())
   );
 }
-
 export class IsDate extends Validator {
   static get validatorName() {
     return 'IsDate';
@@ -29,7 +28,6 @@ export class IsDate extends Validator {
     return hasError;
   }
 }
-
 export class MinDate extends Validator {
   static get validatorName() {
     return 'MinDate';
@@ -46,7 +44,6 @@ export class MinDate extends Validator {
     return hasError;
   }
 }
-
 export class MaxDate extends Validator {
   static get validatorName() {
     return 'MaxDate';
@@ -63,7 +60,6 @@ export class MaxDate extends Validator {
     return hasError;
   }
 }
-
 export class MinMaxDate extends Validator {
   static get validatorName() {
     return 'MinMaxDate';
@@ -84,7 +80,6 @@ export class MinMaxDate extends Validator {
     return hasError;
   }
 }
-
 export class IsDateDisabled extends Validator {
   static get validatorName() {
     return 'IsDateDisabled';

package/components/form-core/src/validate/validators/NumberValidators.js

@@ -6,10 +6,9 @@ import { Validator } from '../Validator.js';
  *
  * @param {number} value to check
  */
-const isNumber = value =>
+const isNumber = (value) =>
   // eslint-disable-next-line no-self-compare
   value === value && typeof value === 'number';
-
 export class IsNumber extends Validator {
   static get validatorName() {
     return 'IsNumber';
@@ -27,7 +26,6 @@ export class IsNumber extends Validator {
     return isEnabled;
   }
 }
-
 export class MinNumber extends Validator {
   static get validatorName() {
     return 'MinNumber';
@@ -44,7 +42,6 @@ export class MinNumber extends Validator {
     return isEnabled;
   }
 }
-
 export class MaxNumber extends Validator {
   static get validatorName() {
     return 'MaxNumber';
@@ -61,7 +58,6 @@ export class MaxNumber extends Validator {
     return isEnabled;
   }
 }
-
 export class MinMaxNumber extends Validator {
   static get validatorName() {
     return 'MinMaxNumber';

package/components/form-core/src/validate/validators/Required.js

@@ -52,7 +52,7 @@ export class Required extends Validator {
     if (inputNode) {
       const role = inputNode.getAttribute('role') || '';
       const elementTagName = inputNode.tagName.toLowerCase();
-      const ctor = /** @type {typeof Required} */ (this.constructor);
+      const ctor = /** @type {typeof Required} */ this.constructor;
       if (ctor._compatibleRoles.includes(role) || ctor._compatibleTags.includes(elementTagName)) {
         inputNode.setAttribute('aria-required', 'true');
       }

package/components/form-core/src/validate/validators/StringValidators.js

@@ -4,8 +4,7 @@ import { Validator } from '../Validator.js';
 /**
  * @param {any} value
  */
-const isString = value => typeof value === 'string';
-
+const isString = (value) => typeof value === 'string';
 export class IsString extends Validator {
   static get validatorName() {
     return 'IsString';
@@ -23,7 +22,6 @@ export class IsString extends Validator {
     return hasError;
   }
 }
-
 export class EqualsLength extends Validator {
   static get validatorName() {
     return 'EqualsLength';
@@ -40,7 +38,6 @@ export class EqualsLength extends Validator {
     return hasError;
   }
 }
-
 export class MinLength extends Validator {
   static get validatorName() {
     return 'MinLength';
@@ -57,7 +54,6 @@ export class MinLength extends Validator {
     return hasError;
   }
 }
-
 export class MaxLength extends Validator {
   static get validatorName() {
     return 'MaxLength';
@@ -74,7 +70,6 @@ export class MaxLength extends Validator {
     return hasError;
   }
 }
-
 export class MinMaxLength extends Validator {
   static get validatorName() {
     return 'MinMaxLength';
@@ -91,7 +86,6 @@ export class MinMaxLength extends Validator {
     return hasError;
   }
 }
-
 const isEmailRegex =
   /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export class IsEmail extends Validator {
@@ -136,7 +130,6 @@ export class Pattern extends Validator {
     if (!isString(value) || !hasPattern(value, pattern)) {
       hasError = true;
     }
-
     return hasError;
   }
 }

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

@@ -2,11 +2,9 @@ import { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-w
 import { FocusMixin } from '@lion/ui/form-core.js';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
-
 const windowWithOptionalPolyfill =
-  /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window);
+  /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ window;
 
 /**
  * Checks two things:
@@ -28,19 +26,18 @@ function mockFocusVisible(focusableEl, { phase, hasKeyboardInteraction }) {
   const originalMatches = focusableEl.matches;
   if (typeof windowWithOptionalPolyfill.applyFocusVisiblePolyfill !== 'function') {
     // eslint-disable-next-line no-param-reassign
-    focusableEl.matches = /** @type {typeof focusableEl.matches} */ (
+    focusableEl.matches =
+      /** @type {typeof focusableEl.matches} */
       /** @param {string} selector */
-      selector => selector === ':focus-visible' || originalMatches.call(focusableEl, selector)
-    );
+      (selector) => selector === ':focus-visible' || originalMatches.call(focusableEl, selector);
     return () => {
       // eslint-disable-next-line no-param-reassign
       focusableEl.matches = originalMatches;
     };
   }
-
   const originalHasAttribute = focusableEl.hasAttribute;
   // eslint-disable-next-line no-param-reassign
-  focusableEl.hasAttribute = attr =>
+  focusableEl.hasAttribute = (attr) =>
     attr === 'data-focus-visible-added' || originalHasAttribute.call(focusableEl, attr);
   return () => {
     // eslint-disable-next-line no-param-reassign
@@ -60,7 +57,6 @@ function mockPolyfill() {
     window.applyFocusVisiblePolyfill = originalApplyFocusVisiblePolyfill;
   };
 }
-
 describe('FocusMixin', () => {
   class Focusable extends FocusMixin(LitElement) {
     render() {
@@ -71,73 +67,63 @@ describe('FocusMixin', () => {
      * @configure FocusMixin
      */
     get _focusableNode() {
-      return /** @type {HTMLInputElement} */ (this.querySelector('input'));
+      return /** @type {HTMLInputElement} */ this.querySelector('input');
     }
   }
-
   const tagString = defineCE(Focusable);
   const tag = unsafeStatic(tagString);
-
   it('focuses/blurs the underlaying native element on .focus()/.blur()', async () => {
-    const el = /** @type {Focusable} */ (
+    const el =
+      /** @type {Focusable} */
       await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-    );
+    `);
     // @ts-ignore [allow-protected] in test
     const { _focusableNode } = el;
-
     el.focus();
     expect(isActiveElement(_focusableNode)).to.be.true;
     el.blur();
     expect(isActiveElement(_focusableNode)).to.be.false;
   });
-
   it('has an attribute focused when focused', async () => {
-    const el = /** @type {Focusable} */ (
+    const el =
+      /** @type {Focusable} */
       await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-    );
-
+    `);
     el.focus();
     await el.updateComplete;
     expect(el.hasAttribute('focused')).to.be.true;
-
     el.blur();
     await el.updateComplete;
     expect(el.hasAttribute('focused')).to.be.false;
   });
-
   it('becomes focused/blurred if the native element gets focused/blurred', async () => {
-    const el = /** @type {Focusable} */ (
+    const el =
+      /** @type {Focusable} */
       await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-    );
+    `);
     // @ts-ignore [allow-protected] in test
     const { _focusableNode } = el;
-
     expect(el.focused).to.be.false;
     _focusableNode?.focus();
     expect(el.focused).to.be.true;
     _focusableNode?.blur();
     expect(el.focused).to.be.false;
   });
-
   it('dispatches [focus, blur] events', async () => {
-    const el = /** @type {Focusable} */ (
+    const el =
+      /** @type {Focusable} */
       await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-    );
+    `);
     setTimeout(() => el.focus());
     const focusEv = await oneEvent(el, 'focus');
     expect(focusEv).to.be.instanceOf(Event);
     expect(focusEv.target).to.equal(el);
     expect(focusEv.bubbles).to.be.false;
     expect(focusEv.composed).to.be.false;
-
     setTimeout(() => {
       el.focus();
       el.blur();
@@ -148,20 +134,18 @@ describe('FocusMixin', () => {
     expect(blurEv.bubbles).to.be.false;
     expect(blurEv.composed).to.be.false;
   });
-
   it('dispatches [focusin, focusout] events with { bubbles: true, composed: true }', async () => {
-    const el = /** @type {Focusable} */ (
+    const el =
+      /** @type {Focusable} */
       await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-    );
+    `);
     setTimeout(() => el.focus());
     const focusinEv = await oneEvent(el, 'focusin');
     expect(focusinEv).to.be.instanceOf(Event);
     expect(focusinEv.target).to.equal(el);
     expect(focusinEv.bubbles).to.be.true;
     expect(focusinEv.composed).to.be.true;
-
     setTimeout(() => {
       el.focus();
       el.blur();
@@ -172,77 +156,99 @@ describe('FocusMixin', () => {
     expect(focusoutEv.bubbles).to.be.true;
     expect(focusoutEv.composed).to.be.true;
   });
-
   describe('Having :focus-visible within', () => {
     it('sets focusedVisible to true when focusable element matches :focus-visible', async () => {
-      const el = /** @type {Focusable} */ (
+      const el =
+        /** @type {Focusable} */
         await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-      );
+    `);
       // @ts-ignore [allow-protected] in test
       const { _focusableNode } = el;
-
       const restoreMock1 = mockFocusVisible(_focusableNode, {
         phase: 'focusout',
         hasKeyboardInteraction: true,
       });
-      _focusableNode.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusout', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.focusedVisible).to.be.false;
       restoreMock1();
-
       const restoreMock2 = mockFocusVisible(_focusableNode, {
         phase: 'focusin',
         hasKeyboardInteraction: false,
       });
-      _focusableNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusin', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.focusedVisible).to.be.false;
       restoreMock2();
-
       const restoreMock3 = mockFocusVisible(_focusableNode, {
         phase: 'focusout',
         hasKeyboardInteraction: false,
       });
-      _focusableNode.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusout', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.focusedVisible).to.be.false;
       restoreMock3();
-
       const restoreMock4 = mockFocusVisible(_focusableNode, {
         phase: 'focusin',
         hasKeyboardInteraction: true,
       });
-      _focusableNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusin', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.focusedVisible).to.be.true;
       restoreMock4();
     });
-
     it('has an attribute focused-visible when focusedVisible is true', async () => {
-      const el = /** @type {Focusable} */ (
+      const el =
+        /** @type {Focusable} */
         await fixture(html`
       <${tag}><input slot="input"></${tag}>
-    `)
-      );
+    `);
       // @ts-ignore [allow-protected] in test
       const { _focusableNode } = el;
-
       const restoreMock1 = mockFocusVisible(_focusableNode, {
         phase: 'focusout',
         hasKeyboardInteraction: true,
       });
-      _focusableNode.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusout', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.hasAttribute('focused-visible')).to.be.false;
       restoreMock1();
-
       const restoreMock2 = mockFocusVisible(_focusableNode, {
         phase: 'focusin',
         hasKeyboardInteraction: true,
       });
-      _focusableNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      _focusableNode.dispatchEvent(
+        new Event('focusin', {
+          bubbles: true,
+          composed: true,
+        }),
+      );
       await el.updateComplete;
       expect(el.hasAttribute('focused-visible')).to.be.true;
       restoreMock2();
@@ -254,7 +260,6 @@ describe('FocusMixin', () => {
       after(() => {
         restoreMockPolyfill();
       });
-
       it('calls polyfill once per node', async () => {
         class UniqueHost extends LitElement {
           render() {
@@ -263,100 +268,109 @@ describe('FocusMixin', () => {
         }
         const hostTagString = defineCE(UniqueHost);
         const hostTag = unsafeStatic(hostTagString);
-
         const polySpy = sinon.spy(windowWithOptionalPolyfill, 'applyFocusVisiblePolyfill');
         await fixture(html`<${hostTag}></${hostTag}>`);
         expect(polySpy).to.have.been.calledOnce;
       });
-
       it('sets focusedVisible to true when focusable element if :focus-visible polyfill is loaded', async () => {
-        const el = /** @type {Focusable} */ (
+        const el =
+          /** @type {Focusable} */
           await fixture(html`
         <${tag}><input slot="input"></${tag}>
-      `)
-        );
+      `);
 
         // @ts-ignore [allow-protected] in test
         const { _focusableNode } = el;
-
         const restoreMock1 = mockFocusVisible(_focusableNode, {
           phase: 'focusout',
           hasKeyboardInteraction: true,
         });
         const spy1 = sinon.spy(_focusableNode, 'hasAttribute');
-        _focusableNode.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
+        _focusableNode.dispatchEvent(
+          new Event('focusout', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
         await el.updateComplete;
         expect(el.focusedVisible).to.be.false;
         expect(spy1).to.not.have.been.calledWith('data-focus-visible-added');
         spy1.restore();
         restoreMock1();
-
         const restoreMock2 = mockFocusVisible(_focusableNode, {
           phase: 'focusin',
           hasKeyboardInteraction: false,
         });
         const spy2 = sinon.spy(_focusableNode, 'hasAttribute');
-        _focusableNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+        _focusableNode.dispatchEvent(
+          new Event('focusin', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
         await el.updateComplete;
         expect(el.focusedVisible).to.be.false;
         expect(spy2).to.have.been.calledWith('data-focus-visible-added');
         spy2.restore();
         restoreMock2();
-
         const restoreMock3 = mockFocusVisible(_focusableNode, {
           phase: 'focusout',
           hasKeyboardInteraction: false,
         });
         const spy3 = sinon.spy(_focusableNode, 'hasAttribute');
-        _focusableNode.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
+        _focusableNode.dispatchEvent(
+          new Event('focusout', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
         await el.updateComplete;
         expect(el.focusedVisible).to.be.false;
         expect(spy3).to.not.have.been.calledWith('data-focus-visible-added');
         spy3.restore();
         restoreMock3();
-
         const restoreMock4 = mockFocusVisible(_focusableNode, {
           phase: 'focusin',
           hasKeyboardInteraction: true,
         });
         const spy4 = sinon.spy(_focusableNode, 'hasAttribute');
-        _focusableNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+        _focusableNode.dispatchEvent(
+          new Event('focusin', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
         await el.updateComplete;
         expect(el.focusedVisible).to.be.true;
         expect(spy4).to.have.been.called;
         spy4.restore();
         restoreMock4();
       });
-
       it('has mirrors syncs autofocus on the focusable element when autofocus changes', async () => {
-        const el = /** @type {Focusable} */ (
+        const el =
+          /** @type {Focusable} */
           await fixture(html`
           <${tag}><input slot="input"></${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore [allow-protected] in test
         const { _focusableNode } = el;
-
         el.setAttribute('autofocus', '');
         await el.updateComplete;
         expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
-
         el.removeAttribute('autofocus');
         await el.updateComplete;
         expect(_focusableNode.hasAttribute('autofocus')).not.to.be.true;
       });
-
       it('has mirrors syncs autofocus on the focusable element when autofocus was set on render', async () => {
-        const el = /** @type {Focusable} */ (
+        const el =
+          /** @type {Focusable} */
           await fixture(html`
           <${tag} autofocus><input slot="input"></${tag}>
-        `)
-        );
+        `);
 
         // @ts-ignore [allow-protected] in test
         const { _focusableNode } = el;
-
         expect(el.hasAttribute('autofocus')).to.be.true;
         expect(_focusableNode.hasAttribute('autofocus')).to.be.true;
       });