@lion/ui 0.22.0 → 0.24.0

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

@@ -18,85 +18,86 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @param {import('@open-wc/dedupe-mixin').Constructor<LitElement>} superclass
  */
 // prettier-ignore
-const FormRegisteringMixinImplementation = /** @type {FormRegisteringMixin} */ (superclass =>
-  class extends superclass {
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-      /**
-       * The name the element will be registered with to the .formElements collection
-       * of the parent. Also, it serves as the key of key/value pairs in
-       *  modelValue/serializedValue objects
-       * @type {string}
-       */
-      this.name = '';
-
-      /**
-       * The registrar this FormControl registers to, Usually a descendant of FormGroup or
-       * ChoiceGroup
-       * @type {FormRegistrarHost | undefined}
-       */
-      this._parentFormGroup = undefined;
-      /**
-       * To encourage accessibility best practices, `form-element-register` events
-       * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
-      Use this option if you know what you're doing. It will then be possible to nest FormControls
-      inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
-      */
-      this.allowCrossRootRegistration = false;
-    }
-
+const FormRegisteringMixinImplementation = /** @type {FormRegisteringMixin} */superclass => class extends superclass {
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
     /**
-     * Name attribute for the control.
+     * The name the element will be registered with to the .formElements collection
+     * of the parent. Also, it serves as the key of key/value pairs in
+     *  modelValue/serializedValue objects
      * @type {string}
      */
-    get name() {
-      return this.__name || '';
-    }
+    this.name = '';
 
     /**
-     * Converts values provided for the `name` attribute to string type.
-     * Mimics the native `input` behavior.
-     * @param {string} newName
+     * The registrar this FormControl registers to, Usually a descendant of FormGroup or
+     * ChoiceGroup
+     * @type {FormRegistrarHost | undefined}
      */
-    set name(newName) {
-      const oldName = this.name;
-      this.__name = newName.toString();
-      this.requestUpdate('name', oldName);
-    }
-
-    static get properties() {
-      return {
-        name: { type: String, reflect: true },
-        allowCrossRootRegistration: { type: Boolean, attribute: 'allow-cross-root-registration' },
-      };
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.dispatchEvent(
-        new CustomEvent('form-element-register', {
-          detail: { element: this },
-          bubbles: true,
-          composed: Boolean(this.allowCrossRootRegistration),
-        }),
-      );
-    }
+    this._parentFormGroup = undefined;
+    /**
+     * To encourage accessibility best practices, `form-element-register` events
+     * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
+    Use this option if you know what you're doing. It will then be possible to nest FormControls
+    inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
+    */
+    this.allowCrossRootRegistration = false;
+  }
 
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.__unregisterFormElement();
-    }
+  /**
+   * Name attribute for the control.
+   * @type {string}
+   */
+  get name() {
+    return this.__name || '';
+  }
 
-    /**
-     * Putting this in a separate method makes testing easier
-     * @private
-     */
-    __unregisterFormElement() {
-      if (this._parentFormGroup) {
-        this._parentFormGroup.removeFormElement(/** @type {* & FormRegisteringHost} */ (this));
+  /**
+   * Converts values provided for the `name` attribute to string type.
+   * Mimics the native `input` behavior.
+   * @param {string} newName
+   */
+  set name(newName) {
+    const oldName = this.name;
+    this.__name = newName.toString();
+    this.requestUpdate('name', oldName);
+  }
+  static get properties() {
+    return {
+      name: {
+        type: String,
+        reflect: true
+      },
+      allowCrossRootRegistration: {
+        type: Boolean,
+        attribute: 'allow-cross-root-registration'
       }
-    }
-  });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('form-element-register', {
+      detail: {
+        element: this
+      },
+      bubbles: true,
+      composed: Boolean(this.allowCrossRootRegistration)
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__unregisterFormElement();
+  }
 
+  /**
+   * Putting this in a separate method makes testing easier
+   * @private
+   */
+  __unregisterFormElement() {
+    if (this._parentFormGroup) {
+      this._parentFormGroup.removeFormElement(/** @type {* & FormRegisteringHost} */this);
+    }
+  }
+};
 export const FormRegisteringMixin = dedupeMixin(FormRegisteringMixinImplementation);

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

@@ -24,254 +24,238 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js';
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const FormRegistrarMixinImplementation = /** @type {FormRegistrarMixin} */ (superclass =>
-  // eslint-disable-next-line no-shadow, no-unused-vars
-  class extends FormRegisteringMixin(superclass) {
-    /** @type {any} */
-    static get properties() {
-      return {
-        _isFormOrFieldset: { type: Boolean },
-      };
-    }
-
-    constructor() {
-      super();
-
-      /**
-       * Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
-       * both like an array and an object (based on control/element names).
-       * @type {FormControlsCollection & { [name: string]: any }}
-       */
-      this.formElements = /** @type {any} */ (new FormControlsCollection());
-
-      /**
-       * Flag that determines how ".formElements" should behave.
-       * For a regular fieldset (see LionFieldset) we expect ".formElements"
-       * to be accessible as an object.
-       * In case of a radio-group, a checkbox-group or a select/listbox,
-       * it should act like an array (see ChoiceGroupMixin).
-       * Usually, when false, we deal with a choice-group (radio-group, checkbox-group,
-       * (multi)select)
-       * @type {boolean}
-       * @protected
-       */
-      this._isFormOrFieldset = false;
-
-      this._onRequestToAddFormElement = this._onRequestToAddFormElement.bind(this);
-      this._onRequestToChangeFormElementName = this._onRequestToChangeFormElementName.bind(this);
-
-      this.addEventListener(
-        'form-element-register',
-        /** @type {EventListenerOrEventListenerObject} */ (this._onRequestToAddFormElement),
-      );
-      this.addEventListener(
-        'form-element-name-changed',
-        /** @type {EventListenerOrEventListenerObject} */ (this._onRequestToChangeFormElementName),
-      );
-
-      /**
-       * initComplete resolves after all pending initialization logic
-       * (for instance `<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>`)
-       * is executed
-       * @type {Promise<any>}
-       */
-      this.initComplete = new Promise((resolve, reject) => {
-        this.__resolveInitComplete = resolve;
-        this.__rejectInitComplete = reject;
-      });
+const FormRegistrarMixinImplementation = /** @type {FormRegistrarMixin} */superclass =>
+// eslint-disable-next-line no-shadow, no-unused-vars
+class extends FormRegisteringMixin(superclass) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      _isFormOrFieldset: {
+        type: Boolean
+      }
+    };
+  }
+  constructor() {
+    super();
 
-      /**
-       * registrationComplete waits for all children formElements to have registered
-       * @type {Promise<any> & {done?:boolean}}
-       */
-      this.registrationComplete = new Promise((resolve, reject) => {
-        this.__resolveRegistrationComplete = resolve;
-        this.__rejectRegistrationComplete = reject;
-      });
-      this.registrationComplete.done = false;
-      this.registrationComplete.then(
-        () => {
-          this.registrationComplete.done = true;
-          this.__resolveInitComplete(undefined);
-        },
-        () => {
-          this.registrationComplete.done = true;
-          this.__rejectInitComplete(undefined);
-          throw new Error(
-            'Registration could not finish. Please use await el.registrationComplete;',
-          );
-        },
-      );
-    }
+    /**
+     * Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
+     * both like an array and an object (based on control/element names).
+     * @type {FormControlsCollection & { [name: string]: any }}
+     */
+    this.formElements = /** @type {any} */new FormControlsCollection();
 
-    connectedCallback() {
-      super.connectedCallback();
-      this._completeRegistration();
-    }
+    /**
+     * Flag that determines how ".formElements" should behave.
+     * For a regular fieldset (see LionFieldset) we expect ".formElements"
+     * to be accessible as an object.
+     * In case of a radio-group, a checkbox-group or a select/listbox,
+     * it should act like an array (see ChoiceGroupMixin).
+     * Usually, when false, we deal with a choice-group (radio-group, checkbox-group,
+     * (multi)select)
+     * @type {boolean}
+     * @protected
+     */
+    this._isFormOrFieldset = false;
+    this._onRequestToAddFormElement = this._onRequestToAddFormElement.bind(this);
+    this._onRequestToChangeFormElementName = this._onRequestToChangeFormElementName.bind(this);
+    this.addEventListener('form-element-register', /** @type {EventListenerOrEventListenerObject} */this._onRequestToAddFormElement);
+    this.addEventListener('form-element-name-changed', /** @type {EventListenerOrEventListenerObject} */this._onRequestToChangeFormElementName);
 
     /**
-     * Resolves the registrationComplete promise. Subclassers can delay if needed
-     * @overridable
+     * initComplete resolves after all pending initialization logic
+     * (for instance `<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>`)
+     * is executed
+     * @type {Promise<any>}
      */
-    _completeRegistration() {
-      Promise.resolve().then(() => this.__resolveRegistrationComplete(undefined));
-    }
+    this.initComplete = new Promise((resolve, reject) => {
+      this.__resolveInitComplete = resolve;
+      this.__rejectInitComplete = reject;
+    });
 
-    disconnectedCallback() {
-      super.disconnectedCallback();
+    /**
+     * registrationComplete waits for all children formElements to have registered
+     * @type {Promise<any> & {done?:boolean}}
+     */
+    this.registrationComplete = new Promise((resolve, reject) => {
+      this.__resolveRegistrationComplete = resolve;
+      this.__rejectRegistrationComplete = reject;
+    });
+    this.registrationComplete.done = false;
+    this.registrationComplete.then(() => {
+      this.registrationComplete.done = true;
+      this.__resolveInitComplete(undefined);
+    }, () => {
+      this.registrationComplete.done = true;
+      this.__rejectInitComplete(undefined);
+      throw new Error('Registration could not finish. Please use await el.registrationComplete;');
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._completeRegistration();
+  }
 
-      if (this.registrationComplete.done === false) {
+  /**
+   * Resolves the registrationComplete promise. Subclassers can delay if needed
+   * @overridable
+   */
+  _completeRegistration() {
+    Promise.resolve().then(() => this.__resolveRegistrationComplete(undefined));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.registrationComplete.done === false) {
+      Promise.resolve().then(() => {
         Promise.resolve().then(() => {
-          Promise.resolve().then(() => {
-            this.__rejectRegistrationComplete();
-          });
+          this.__rejectRegistrationComplete();
         });
-      }
+      });
     }
+  }
 
-    /**
-     *
-     * @param {ElementWithParentFormGroup} el
-     */
-    isRegisteredFormElement(el) {
-      return this.formElements.some(exitingEl => exitingEl === el);
-    }
+  /**
+   *
+   * @param {ElementWithParentFormGroup} el
+   */
+  isRegisteredFormElement(el) {
+    return this.formElements.some(exitingEl => exitingEl === el);
+  }
 
-    /**
-     * @param {FormControl} child the child element (field)
-     * @param {number} indexToInsertAt index to insert the form element at
-     */
-    addFormElement(child, indexToInsertAt) {
-      // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
-      // eslint-disable-next-line no-param-reassign
-      child._parentFormGroup = /** @type {* & FormRegistrarHost} */ (this);
+  /**
+   * @param {FormControl} child the child element (field)
+   * @param {number} indexToInsertAt index to insert the form element at
+   */
+  addFormElement(child, indexToInsertAt) {
+    // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
+    // eslint-disable-next-line no-param-reassign
+    child._parentFormGroup = /** @type {* & FormRegistrarHost} */this;
 
-      // 1. Add children as array element
-      if (indexToInsertAt >= 0) {
-        this.formElements.splice(indexToInsertAt, 0, child);
-      } else {
-        this.formElements.push(child);
-      }
+    // 1. Add children as array element
+    if (indexToInsertAt >= 0) {
+      this.formElements.splice(indexToInsertAt, 0, child);
+    } else {
+      this.formElements.push(child);
+    }
 
-      // 2. Add children as object key
-      if (this._isFormOrFieldset) {
-        const { name } = child;
-        if (name === this.name) {
-          console.info('Error Node:', child); // eslint-disable-line no-console
-          throw new TypeError(`You can not have the same name "${name}" as your parent`);
+    // 2. Add children as object key
+    if (this._isFormOrFieldset) {
+      const {
+        name
+      } = child;
+      if (name === this.name) {
+        console.info('Error Node:', child); // eslint-disable-line no-console
+        throw new TypeError(`You can not have the same name "${name}" as your parent`);
+      }
+      if (name.substr(-2) === '[]') {
+        if (!Array.isArray(this.formElements[name])) {
+          this.formElements[name] = new FormControlsCollection();
         }
-
-        if (name.substr(-2) === '[]') {
-          if (!Array.isArray(this.formElements[name])) {
-            this.formElements[name] = new FormControlsCollection();
-          }
-          if (indexToInsertAt > 0) {
-            this.formElements[name].splice(indexToInsertAt, 0, child);
-          } else {
-            this.formElements[name].push(child);
-          }
-        } else if (!this.formElements[name]) {
-          this.formElements[name] = child;
+        if (indexToInsertAt > 0) {
+          this.formElements[name].splice(indexToInsertAt, 0, child);
         } else {
-          console.info('Error Node:', child); // eslint-disable-line no-console
-          throw new TypeError(
-            `Name "${name}" is already registered - if you want an array add [] to the end`,
-          );
+          this.formElements[name].push(child);
         }
+      } else if (!this.formElements[name]) {
+        this.formElements[name] = child;
+      } else {
+        console.info('Error Node:', child); // eslint-disable-line no-console
+        throw new TypeError(`Name "${name}" is already registered - if you want an array add [] to the end`);
       }
     }
+  }
 
-    /**
-     * @param {FormControlHost} child the child element (field)
-     */
-    removeFormElement(child) {
-      // 1. Handle array based children
-      const index = this.formElements.indexOf(child);
-      if (index > -1) {
-        this.formElements.splice(index, 1);
-      }
+  /**
+   * @param {FormControlHost} child the child element (field)
+   */
+  removeFormElement(child) {
+    // 1. Handle array based children
+    const index = this.formElements.indexOf(child);
+    if (index > -1) {
+      this.formElements.splice(index, 1);
+    }
 
-      // 2. Handle name based object keys
-      if (this._isFormOrFieldset) {
-        const { name } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
-        if (name.substr(-2) === '[]' && this.formElements[name]) {
-          const idx = this.formElements[name].indexOf(child);
-          if (idx > -1) {
-            this.formElements[name].splice(idx, 1);
-          }
-        } else if (this.formElements[name]) {
-          delete this.formElements[name];
+    // 2. Handle name based object keys
+    if (this._isFormOrFieldset) {
+      const {
+        name
+      } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
+      if (name.substr(-2) === '[]' && this.formElements[name]) {
+        const idx = this.formElements[name].indexOf(child);
+        if (idx > -1) {
+          this.formElements[name].splice(idx, 1);
         }
+      } else if (this.formElements[name]) {
+        delete this.formElements[name];
       }
     }
+  }
 
-    /**
-     * Hook for Subclassers to perform logic before an element is added
-     * @param {CustomEvent} ev
-     * @protected
-     */
-    _onRequestToAddFormElement(ev) {
-      const child = ev.detail.element;
-      if (child === this) {
-        // as we fire and listen - don't add ourselves
-        return;
-      }
-      if (this.isRegisteredFormElement(child)) {
-        // do not readd already existing elements
-        return;
-      }
-      ev.stopPropagation();
+  /**
+   * Hook for Subclassers to perform logic before an element is added
+   * @param {CustomEvent} ev
+   * @protected
+   */
+  _onRequestToAddFormElement(ev) {
+    const child = ev.detail.element;
+    if (child === this) {
+      // as we fire and listen - don't add ourselves
+      return;
+    }
+    if (this.isRegisteredFormElement(child)) {
+      // do not readd already existing elements
+      return;
+    }
+    ev.stopPropagation();
 
-      // Check for DOM order to determine the right order to insert into formElements
-      // If there is no other element, index is -1 (e.g. add it to the end)
-      let indexToInsertAt = -1;
-      if (this.formElements && Array.isArray(this.formElements)) {
-        // we start comparing from the end of the array as it's the most likely position where the element will be added
-        for (const [i, formElement] of this.formElements.entries()) {
-          // compareDocumentPosition returns a bitmask
-          // eslint-disable-next-line no-bitwise
-          if (formElement.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_FOLLOWING) {
-            // nothing as child is after formElement in DOM
-          } else {
-            // first time child is NOT after formElement in DOM we insert it
-            indexToInsertAt = i;
-            break;
-          }
+    // Check for DOM order to determine the right order to insert into formElements
+    // If there is no other element, index is -1 (e.g. add it to the end)
+    let indexToInsertAt = -1;
+    if (this.formElements && Array.isArray(this.formElements)) {
+      // we start comparing from the end of the array as it's the most likely position where the element will be added
+      for (const [i, formElement] of this.formElements.entries()) {
+        // compareDocumentPosition returns a bitmask
+        // eslint-disable-next-line no-bitwise
+        if (formElement.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_FOLLOWING) {
+          // nothing as child is after formElement in DOM
+        } else {
+          // first time child is NOT after formElement in DOM we insert it
+          indexToInsertAt = i;
+          break;
         }
       }
-      this.addFormElement(child, indexToInsertAt);
     }
+    this.addFormElement(child, indexToInsertAt);
+  }
 
-    /**
-     * @param {CustomEvent} ev
-     * @protected
-     */
-    _onRequestToChangeFormElementName(ev) {
-      const element = this.formElements[ev.detail.oldName];
-      if (element) {
-        this.formElements[ev.detail.newName] = element;
-        delete this.formElements[ev.detail.oldName];
-      }
+  /**
+   * @param {CustomEvent} ev
+   * @protected
+   */
+  _onRequestToChangeFormElementName(ev) {
+    const element = this.formElements[ev.detail.oldName];
+    if (element) {
+      this.formElements[ev.detail.newName] = element;
+      delete this.formElements[ev.detail.oldName];
     }
+  }
 
-    /**
-     * @param {CustomEvent} ev
-     * @protected
-     */
-    _onRequestToRemoveFormElement(ev) {
-      const child = ev.detail.element;
-      if (child === this) {
-        // as we fire and listen - don't remove ourselves
-        return;
-      }
-      if (!this.isRegisteredFormElement(child)) {
-        // do not remove non existing elements
-        return;
-      }
-      ev.stopPropagation();
-
-      this.removeFormElement(child);
+  /**
+   * @param {CustomEvent} ev
+   * @protected
+   */
+  _onRequestToRemoveFormElement(ev) {
+    const child = ev.detail.element;
+    if (child === this) {
+      // as we fire and listen - don't remove ourselves
+      return;
     }
-  });
-
+    if (!this.isRegisteredFormElement(child)) {
+      // do not remove non existing elements
+      return;
+    }
+    ev.stopPropagation();
+    this.removeFormElement(child);
+  }
+};
 export const FormRegistrarMixin = dedupeMixin(FormRegistrarMixinImplementation);