@lion/ui 0.23.0 → 0.24.0

package/components/form-core/src/registration/FormRegistrarPortalMixin.js

@@ -20,45 +20,39 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @param {import('@open-wc/dedupe-mixin').Constructor<HTMLElement>} superclass
  */
 // prettier-ignore
-const FormRegistrarPortalMixinImplementation = /** @type {FormRegistrarPortalMixin} */ (superclass =>
-  // eslint-disable-next-line no-shadow, no-unused-vars
-  class extends superclass {
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-
-      /**
-       * Registration target: an element, usually in the body of the dom, that captures events
-       * and redispatches them on host
-       * @type {(FormRegistrarPortalHost & HTMLElement) | undefined}
-       */
-      this.registrationTarget = undefined;
-      this.__redispatchEventForFormRegistrarPortalMixin =
-        this.__redispatchEventForFormRegistrarPortalMixin.bind(this);
-      this.addEventListener(
-        'form-element-register',
-        /** @type {EventListenerOrEventListenerObject} */ (
-          this.__redispatchEventForFormRegistrarPortalMixin
-        ),
-      );
-    }
+const FormRegistrarPortalMixinImplementation = /** @type {FormRegistrarPortalMixin} */superclass =>
+// eslint-disable-next-line no-shadow, no-unused-vars
+class extends superclass {
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
 
     /**
-     * @param {CustomEvent} ev
-     * @private
+     * Registration target: an element, usually in the body of the dom, that captures events
+     * and redispatches them on host
+     * @type {(FormRegistrarPortalHost & HTMLElement) | undefined}
      */
-    __redispatchEventForFormRegistrarPortalMixin(ev) {
-      ev.stopPropagation();
-      if (!this.registrationTarget) {
-        throw new Error('A FormRegistrarPortal element requires a .registrationTarget');
-      }
-      this.registrationTarget.dispatchEvent(
-        new CustomEvent('form-element-register', {
-          detail: { element: ev.detail.element },
-          bubbles: true,
-        }),
-      );
-    }
-  });
+    this.registrationTarget = undefined;
+    this.__redispatchEventForFormRegistrarPortalMixin = this.__redispatchEventForFormRegistrarPortalMixin.bind(this);
+    this.addEventListener('form-element-register', /** @type {EventListenerOrEventListenerObject} */
+    this.__redispatchEventForFormRegistrarPortalMixin);
+  }
 
+  /**
+   * @param {CustomEvent} ev
+   * @private
+   */
+  __redispatchEventForFormRegistrarPortalMixin(ev) {
+    ev.stopPropagation();
+    if (!this.registrationTarget) {
+      throw new Error('A FormRegistrarPortal element requires a .registrationTarget');
+    }
+    this.registrationTarget.dispatchEvent(new CustomEvent('form-element-register', {
+      detail: {
+        element: ev.detail.element
+      },
+      bubbles: true
+    }));
+  }
+};
 export const FormRegistrarPortalMixin = dedupeMixin(FormRegistrarPortalMixinImplementation);

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -24,128 +24,117 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const SyncUpdatableMixinImplementation = /** @type {SyncUpdatableMixin} */ (superclass =>
-  class extends superclass {
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-
-      /**
-       * Namespace for this mixin that guarantees naming clashes will not occur...
-       * @type {SyncUpdatableNamespace}
-       */
-      this.__SyncUpdatableNamespace = {};
-    }
+const SyncUpdatableMixinImplementation = /** @type {SyncUpdatableMixin} */superclass => class extends superclass {
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
 
     /**
-     * Empty pending queue in order to guarantee order independence
-     *
-     * @param {import('lit').PropertyValues } changedProperties
+     * Namespace for this mixin that guarantees naming clashes will not occur...
+     * @type {SyncUpdatableNamespace}
      */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
-      this.__syncUpdatableInitialize();
+    this.__SyncUpdatableNamespace = {};
+  }
+
+  /**
+   * Empty pending queue in order to guarantee order independence
+   *
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.__syncUpdatableInitialize();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.__SyncUpdatableNamespace.connected = true;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__SyncUpdatableNamespace.connected = false;
+  }
+
+  /**
+   * // TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  // @ts-expect-error
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
+  /**
+   * Makes the propertyAccessor.`hasChanged` compatible in synchronous updates
+   * @param {string} name
+   * @param {*} newValue
+   * @param {*} oldValue
+   * @returns {boolean}
+   * @private
+   */
+  static __syncUpdatableHasChanged(name, newValue, oldValue) {
+    // @ts-expect-error [external]: accessing private lit property
+    const properties = this.elementProperties;
+    if (properties.get(name) && properties.get(name).hasChanged) {
+      return properties.get(name).hasChanged(newValue, oldValue);
     }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.__SyncUpdatableNamespace.connected = true;
+    return newValue !== oldValue;
+  }
+
+  /** @private */
+  __syncUpdatableInitialize() {
+    const ns = this.__SyncUpdatableNamespace;
+    const ctor = /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes.js').SyncUpdatableHost} */
+    this.constructor;
+    ns.initialized = true;
+    // Empty queue...
+    if (ns.queue) {
+      Array.from(ns.queue).forEach(name => {
+        // @ts-ignore [allow-private] in test
+        if (ctor.__syncUpdatableHasChanged(name, this[name], undefined)) {
+          this.updateSync(name, undefined);
+        }
+      });
     }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.__SyncUpdatableNamespace.connected = false;
+  }
+
+  /**
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
+   */
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (name === undefined) {
+      return;
     }
-
-    /**
-     * // TODO: check if this is a false positive or if we can improve
-     * @configure ReactiveElement
-     */
-    // @ts-expect-error
-    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
-
-    /**
-     * Makes the propertyAccessor.`hasChanged` compatible in synchronous updates
-     * @param {string} name
-     * @param {*} newValue
-     * @param {*} oldValue
-     * @returns {boolean}
-     * @private
-     */
-    static __syncUpdatableHasChanged(name, newValue, oldValue) {
-      // @ts-expect-error [external]: accessing private lit property
-      const properties = this.elementProperties;
-      if (properties.get(name) && properties.get(name).hasChanged) {
-        return properties.get(name).hasChanged(newValue, oldValue);
-      }
-      return newValue !== oldValue;
+    this.__SyncUpdatableNamespace = this.__SyncUpdatableNamespace || {};
+    const ns = this.__SyncUpdatableNamespace;
+    const ctor = /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes.js').SyncUpdatableHost} */
+    this.constructor;
+    // Before connectedCallback: queue
+    if (!ns.initialized) {
+      ns.queue = ns.queue || new Set();
+      // Makes sure that we only initialize one time, with most up to date value
+      ns.queue.add(name);
+    } // After connectedCallback: guarded proxy to updateSync
+    // @ts-ignore [allow-private] in test
+    else if (ctor.__syncUpdatableHasChanged(name, this[name], oldValue)) {
+      this.updateSync(name, oldValue);
     }
-
-    /** @private */
-    __syncUpdatableInitialize() {
-      const ns = this.__SyncUpdatableNamespace;
-      const ctor =
-        /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes.js').SyncUpdatableHost} */ (
-          this.constructor
-        );
-
-      ns.initialized = true;
-      // Empty queue...
-      if (ns.queue) {
-        Array.from(ns.queue).forEach(name => {
-          // @ts-ignore [allow-private] in test
-          if (ctor.__syncUpdatableHasChanged(name, this[name], undefined)) {
-            this.updateSync(name, undefined);
-          }
-        });
-      }
-    }
-
-    /**
-     * @param {string} [name]
-     * @param {unknown} [oldValue]
-     * @param {import('lit').PropertyDeclaration} [options]
-     * @returns {void}
-     */
-    requestUpdate(name, oldValue, options) {
-      super.requestUpdate(name, oldValue, options);
-      if (name === undefined) {
-        return;
-      }
-
-      this.__SyncUpdatableNamespace = this.__SyncUpdatableNamespace || {};
-      const ns = this.__SyncUpdatableNamespace;
-
-      const ctor =
-        /** @type {typeof SyncUpdatableMixin & typeof import('../../types/utils/SyncUpdatableMixinTypes.js').SyncUpdatableHost} */ (
-          this.constructor
-        );
-      // Before connectedCallback: queue
-      if (!ns.initialized) {
-        ns.queue = ns.queue || new Set();
-        // Makes sure that we only initialize one time, with most up to date value
-        ns.queue.add(name);
-      } // After connectedCallback: guarded proxy to updateSync
-      // @ts-ignore [allow-private] in test
-      else if (ctor.__syncUpdatableHasChanged(name, this[name], oldValue)) {
-        this.updateSync(name, oldValue);
-      }
-    }
-
-    /**
-     * An abstraction that has the exact same api as `requestUpdate`, but taking
-     * into account:
-     * - [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence)
-     * - property effects start when all (light) dom has initialized (on firstUpdated)
-     * - property effects don't interrupt the first meaningful paint
-     * - compatible with propertyAccessor.`hasChanged`: no manual checks needed or accidentally
-     * run property effects / events when no change happened
-     * effects when values didn't change
-     * All code previously present in requestUpdate can be placed in this method.
-     * @param {string} name
-     * @param {*} oldValue
-     */
-    updateSync(name, oldValue) {} // eslint-disable-line class-methods-use-this, no-unused-vars
-  });
-
+  }
+
+  /**
+   * An abstraction that has the exact same api as `requestUpdate`, but taking
+   * into account:
+   * - [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence)
+   * - property effects start when all (light) dom has initialized (on firstUpdated)
+   * - property effects don't interrupt the first meaningful paint
+   * - compatible with propertyAccessor.`hasChanged`: no manual checks needed or accidentally
+   * run property effects / events when no change happened
+   * effects when values didn't change
+   * All code previously present in requestUpdate can be placed in this method.
+   * @param {string} name
+   * @param {*} oldValue
+   */
+  updateSync(name, oldValue) {} // eslint-disable-line class-methods-use-this, no-unused-vars
+};
 export const SyncUpdatableMixin = dedupeMixin(SyncUpdatableMixinImplementation);

package/components/form-core/src/utils/getAriaElementsInRightDomOrder.js

@@ -26,8 +26,7 @@ export function getAriaElementsInRightDomOrder(descriptionElements, { reverse }
     const pos = a.compareDocumentPosition(b);
     return moveDownConditions.includes(pos) ? 1 : -1;
   };
-
-  const descriptionEls = descriptionElements.filter(el => el); // filter out null references
+  const descriptionEls = descriptionElements.filter((el) => el); // filter out null references
   descriptionEls.sort(putPrecedingSiblingsAndLocalParentsFirst);
   if (reverse) {
     descriptionEls.reverse();

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

@@ -11,7 +11,7 @@ import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 /**
  * @param {string} string
  */
-const capitalize = string => `${string[0].toUpperCase()}${string.slice(1)}`;
+const capitalize = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
 
 /**
  * @desc Takes care of accessible rendering of error messages
@@ -20,15 +20,17 @@ const capitalize = string => `${string[0].toUpperCase()}${string.slice(1)}`;
 export class LionValidationFeedback extends LocalizeMixin(LitElement) {
   static get properties() {
     return {
-      feedbackData: { attribute: false },
+      feedbackData: {
+        attribute: false,
+      },
     };
   }
-
   static localizeNamespaces = [
-    { 'lion-form-core': localizeNamespaceLoader },
+    {
+      'lion-form-core': localizeNamespaceLoader,
+    },
     ...super.localizeNamespaces,
   ];
-
   static get styles() {
     return [
       css`
@@ -47,7 +49,6 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       `,
     ];
   }
-
   constructor() {
     super();
     /**
@@ -81,7 +82,6 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       this.removeAttribute('type');
     }
   }
-
   render() {
     return html`
       ${this.feedbackData &&
@@ -92,7 +92,11 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
               ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
               : nothing}
           </span>
-          ${this._messageTemplate({ message, type, validator })}
+          ${this._messageTemplate({
+            message,
+            type,
+            validator,
+          })}
         `,
       )}
     `;

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

@@ -28,8 +28,10 @@ export class Unparseable {
      */
     this.viewValue = value;
   }
-
   toString() {
-    return JSON.stringify({ type: this.type, viewValue: this.viewValue });
+    return JSON.stringify({
+      type: this.type,
+      viewValue: this.viewValue,
+    });
   }
 }