@aurodesignsystem/auro-formkit 2.0.0-beta.32 → 2.0.0-beta.33

package/components/form/demo/api.min.js

@@ -155,6 +155,8 @@ class AuroForm extends r {
     // Bind listeners
     this.reset = this.reset.bind(this);
     this.submit = this.submit.bind(this);
+    this.sharedInputListener = this.sharedInputListener.bind(this);
+    this.sharedValidationListener = this.sharedValidationListener.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -164,7 +166,12 @@ class AuroForm extends r {
       'auro-input',
       'auro-select',
       'auro-datepicker',
+      'auro-combobox',
+      // checkbox and radio are grouped elements
       'auro-checkbox-group',
+      'auro-radio-group',
+      // while counter is groupable, the group is for min/max values and not for grouped values
+      'auro-counter-group'
     ];
   }
 
@@ -199,6 +206,18 @@ class AuroForm extends r {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
+  /**
+   * Validates if an event is from a valid form element with a name.
+   * @param {Event} event - The event to validate.
+   * @returns {boolean} - True if event is valid for processing.
+   * @private
+   */
+  _eventIsValidFormEvent(event) {
+    const targetName = event.target.getAttribute("name");
+    return this.isFormElement(event.target) && targetName;
+  }
+
+
   static get buttonElementTags() {
     return [
       'button',
@@ -358,7 +377,7 @@ class AuroForm extends r {
     }
 
     this.formState[targetName] = {
-      value: element.getAttribute('value'),
+      value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
       // element
@@ -466,48 +485,69 @@ class AuroForm extends r {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
+  /**
+   * Shared input listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedInputListener(event) {
+    const targetName = event.target.getAttribute("name");
 
-    const slot = this.shadowRoot.querySelector('slot');
+    // This should only happen if some bubble-up event is fired from inside a form element.
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    // Update the form state when a form element is detected
-    slot.addEventListener('input', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    // Occasionally, a form element will emit their event before the form can read data about the form element.
+    if (!this.formState[targetName] && this.isFormElement(event.target)) {
+      this._addElementToState(event.target);
+    }
 
-      // Occasionally, a form element will emit their event before the form can read data about the form element.
-      if (!this.formState[targetName] && this.isFormElement(event.target)) {
-        this._addElementToState(event.target);
-      }
+    // Check special input types and handle their edge cases
+    if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+      this.formState[targetName].value = event.target.values;
+      this.requestUpdate('formState');
+    } else {
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
+    }
+  }
 
-      // Check special input types and handle their edge cases
-      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
-        this.formState[targetName].value = event.target.values;
-        this.requestUpdate('formState');
-      } else {
-        this.formState[targetName].value = event.target.value;
-        this.requestUpdate('formState');
-      }
-    });
+  /**
+   * Shared validation listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedValidationListener(event) {
+    const targetName = event.target.getAttribute("name");
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    slot.addEventListener('auroFormElement-validated', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    if (!this.formState[targetName]) {
+      this._addElementToState(event.target);
+    }
 
-      if (!this.formState[targetName]) {
-        this._addElementToState(event.target);
-      }
+    this.formState[targetName].validity = event.detail.validity;
+    this._calculateValidity();
+  }
 
-      this.formState[targetName].validity = event.detail.validity;
-      this._calculateValidity();
+  _attachEventListeners() {
+    this.queryAuroElements().forEach((element) => {
+      // remove any existing event listeners (in case of re-initialization)
+      element.removeEventListener('input', this.sharedInputListener);
+      element.removeEventListener('auroFormElement-validated', this.sharedValidationListener);
+
+      // add new event listeners
+      element.addEventListener('input', this.sharedInputListener);
+      element.addEventListener('auroFormElement-validated', this.sharedValidationListener);
     });
   }
 
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    this._attachEventListeners();
+  }
+
   updated(_changedProperties) {
     super.updated(_changedProperties);
 
@@ -525,6 +565,8 @@ class AuroForm extends r {
 
   onSlotChange() {
     this.initializeState();
+    // Safe to call as we remove and re-add event listeners
+    this._attachEventListeners();
   }
 
   // function that renders the HTML and CSS into the scope of the component

package/components/form/demo/index.min.js

@@ -155,6 +155,8 @@ class AuroForm extends r {
     // Bind listeners
     this.reset = this.reset.bind(this);
     this.submit = this.submit.bind(this);
+    this.sharedInputListener = this.sharedInputListener.bind(this);
+    this.sharedValidationListener = this.sharedValidationListener.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -164,7 +166,12 @@ class AuroForm extends r {
       'auro-input',
       'auro-select',
       'auro-datepicker',
+      'auro-combobox',
+      // checkbox and radio are grouped elements
       'auro-checkbox-group',
+      'auro-radio-group',
+      // while counter is groupable, the group is for min/max values and not for grouped values
+      'auro-counter-group'
     ];
   }
 
@@ -199,6 +206,18 @@ class AuroForm extends r {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
+  /**
+   * Validates if an event is from a valid form element with a name.
+   * @param {Event} event - The event to validate.
+   * @returns {boolean} - True if event is valid for processing.
+   * @private
+   */
+  _eventIsValidFormEvent(event) {
+    const targetName = event.target.getAttribute("name");
+    return this.isFormElement(event.target) && targetName;
+  }
+
+
   static get buttonElementTags() {
     return [
       'button',
@@ -358,7 +377,7 @@ class AuroForm extends r {
     }
 
     this.formState[targetName] = {
-      value: element.getAttribute('value'),
+      value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
       // element
@@ -466,48 +485,69 @@ class AuroForm extends r {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
+  /**
+   * Shared input listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedInputListener(event) {
+    const targetName = event.target.getAttribute("name");
 
-    const slot = this.shadowRoot.querySelector('slot');
+    // This should only happen if some bubble-up event is fired from inside a form element.
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    // Update the form state when a form element is detected
-    slot.addEventListener('input', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    // Occasionally, a form element will emit their event before the form can read data about the form element.
+    if (!this.formState[targetName] && this.isFormElement(event.target)) {
+      this._addElementToState(event.target);
+    }
 
-      // Occasionally, a form element will emit their event before the form can read data about the form element.
-      if (!this.formState[targetName] && this.isFormElement(event.target)) {
-        this._addElementToState(event.target);
-      }
+    // Check special input types and handle their edge cases
+    if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+      this.formState[targetName].value = event.target.values;
+      this.requestUpdate('formState');
+    } else {
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
+    }
+  }
 
-      // Check special input types and handle their edge cases
-      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
-        this.formState[targetName].value = event.target.values;
-        this.requestUpdate('formState');
-      } else {
-        this.formState[targetName].value = event.target.value;
-        this.requestUpdate('formState');
-      }
-    });
+  /**
+   * Shared validation listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedValidationListener(event) {
+    const targetName = event.target.getAttribute("name");
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    slot.addEventListener('auroFormElement-validated', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    if (!this.formState[targetName]) {
+      this._addElementToState(event.target);
+    }
 
-      if (!this.formState[targetName]) {
-        this._addElementToState(event.target);
-      }
+    this.formState[targetName].validity = event.detail.validity;
+    this._calculateValidity();
+  }
 
-      this.formState[targetName].validity = event.detail.validity;
-      this._calculateValidity();
+  _attachEventListeners() {
+    this.queryAuroElements().forEach((element) => {
+      // remove any existing event listeners (in case of re-initialization)
+      element.removeEventListener('input', this.sharedInputListener);
+      element.removeEventListener('auroFormElement-validated', this.sharedValidationListener);
+
+      // add new event listeners
+      element.addEventListener('input', this.sharedInputListener);
+      element.addEventListener('auroFormElement-validated', this.sharedValidationListener);
     });
   }
 
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    this._attachEventListeners();
+  }
+
   updated(_changedProperties) {
     super.updated(_changedProperties);
 
@@ -525,6 +565,8 @@ class AuroForm extends r {
 
   onSlotChange() {
     this.initializeState();
+    // Safe to call as we remove and re-add event listeners
+    this._attachEventListeners();
   }
 
   // function that renders the HTML and CSS into the scope of the component

package/components/form/demo/registerDemoDeps.js

@@ -1,6 +1,19 @@
 import {AuroInput} from "@aurodesignsystem/auro-input";
 import {AuroDatePicker} from "@aurodesignsystem/auro-datepicker";
+import {AuroCounter, AuroCounterGroup} from "@aurodesignsystem/auro-counter";
+import {AuroCheckbox, AuroCheckboxGroup} from "@aurodesignsystem/auro-checkbox";
+import {AuroCombobox} from "@aurodesignsystem/auro-combobox";
+import {AuroMenu, AuroMenuOption} from "@aurodesignsystem/auro-menu";
+import {AuroSelect} from "@aurodesignsystem/auro-select";
 
 AuroInput.register();
 AuroInput.register('auro-input-two');
 AuroDatePicker.register();
+AuroCounter.register();
+AuroCounterGroup.register();
+AuroCheckbox.register();
+AuroCheckboxGroup.register();
+AuroCombobox.register();
+AuroMenu.register();
+AuroMenuOption.register();
+AuroSelect.register();

package/components/form/dist/auro-form.d.ts

@@ -68,6 +68,16 @@ export class AuroForm extends LitElement {
      * Submit fires an event called `submit` - just as you would expect from a normal form.
      */
     submit(): void;
+    /**
+     * Shared input listener for all form elements.
+     * @param {Event} event - The event that is fired from the form element.
+     */
+    sharedInputListener(event: Event): void;
+    /**
+     * Shared validation listener for all form elements.
+     * @param {Event} event - The event that is fired from the form element.
+     */
+    sharedValidationListener(event: Event): void;
     /**
      * Compare tag name with element to identify it (for API purposes).
      * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
@@ -90,6 +100,13 @@ export class AuroForm extends LitElement {
      * @returns {boolean}
      */
     isFormElement(element: HTMLElement): boolean;
+    /**
+     * Validates if an event is from a valid form element with a name.
+     * @param {Event} event - The event to validate.
+     * @returns {boolean} - True if event is valid for processing.
+     * @private
+     */
+    private _eventIsValidFormEvent;
     /**
      * Check if the tag name is a button element.
      * @param {HTMLElement} element - The element to check.
@@ -148,6 +165,7 @@ export class AuroForm extends LitElement {
      * Initialize (or reinitialize) the form state.
      */
     initializeState(): void;
+    _attachEventListeners(): void;
     firstUpdated(_changedProperties: any): void;
     updated(_changedProperties: any): void;
     onSlotChange(): void;

package/components/form/dist/auro-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IA6OD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAxUC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA4P1B;;OAEG;IACH,cAuBC;IAED;;OAEG;IACH,eAmBC;IA5RD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,sBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,qBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAO/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;;;OAIG;IACH,2BAcC;IAED;;OAEG;IACH,wBA8BC;IAkED,4CAwCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlba,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}
+{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA8BD,uCAYC;IA6CD,yCAKC;IAWD,+CAEC;IA6OD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA3VC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA+Q1B;;OAEG;IACH,cAuBC;IAED;;OAEG;IACH,eAmBC;IAcD;;;OAGG;IACH,2BAFW,KAAK,QAuBf;IAED;;;OAGG;IACH,gCAFW,KAAK,QAcf;IAjWD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IAED;;;;;OAKG;IACH,+BAGC;IAUD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,sBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,qBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAO/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;;;OAIG;IACH,2BAcC;IAED;;OAEG;IACH,wBA8BC;IA+GD,8BAUC;IAED,4CAIC;IAED,uCAaC;IAED,qBAIC;IAGD,+CAMC;CACF;;;;;;;;WA5da,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}

package/components/form/dist/index.js

@@ -155,6 +155,8 @@ class AuroForm extends r {
     // Bind listeners
     this.reset = this.reset.bind(this);
     this.submit = this.submit.bind(this);
+    this.sharedInputListener = this.sharedInputListener.bind(this);
+    this.sharedValidationListener = this.sharedValidationListener.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -164,7 +166,12 @@ class AuroForm extends r {
       'auro-input',
       'auro-select',
       'auro-datepicker',
+      'auro-combobox',
+      // checkbox and radio are grouped elements
       'auro-checkbox-group',
+      'auro-radio-group',
+      // while counter is groupable, the group is for min/max values and not for grouped values
+      'auro-counter-group'
     ];
   }
 
@@ -199,6 +206,18 @@ class AuroForm extends r {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
+  /**
+   * Validates if an event is from a valid form element with a name.
+   * @param {Event} event - The event to validate.
+   * @returns {boolean} - True if event is valid for processing.
+   * @private
+   */
+  _eventIsValidFormEvent(event) {
+    const targetName = event.target.getAttribute("name");
+    return this.isFormElement(event.target) && targetName;
+  }
+
+
   static get buttonElementTags() {
     return [
       'button',
@@ -358,7 +377,7 @@ class AuroForm extends r {
     }
 
     this.formState[targetName] = {
-      value: element.getAttribute('value'),
+      value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
       // element
@@ -466,48 +485,69 @@ class AuroForm extends r {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
+  /**
+   * Shared input listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedInputListener(event) {
+    const targetName = event.target.getAttribute("name");
 
-    const slot = this.shadowRoot.querySelector('slot');
+    // This should only happen if some bubble-up event is fired from inside a form element.
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    // Update the form state when a form element is detected
-    slot.addEventListener('input', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    // Occasionally, a form element will emit their event before the form can read data about the form element.
+    if (!this.formState[targetName] && this.isFormElement(event.target)) {
+      this._addElementToState(event.target);
+    }
 
-      // Occasionally, a form element will emit their event before the form can read data about the form element.
-      if (!this.formState[targetName] && this.isFormElement(event.target)) {
-        this._addElementToState(event.target);
-      }
+    // Check special input types and handle their edge cases
+    if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
+      this.formState[targetName].value = event.target.values;
+      this.requestUpdate('formState');
+    } else {
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
+    }
+  }
 
-      // Check special input types and handle their edge cases
-      if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
-        this.formState[targetName].value = event.target.values;
-        this.requestUpdate('formState');
-      } else {
-        this.formState[targetName].value = event.target.value;
-        this.requestUpdate('formState');
-      }
-    });
+  /**
+   * Shared validation listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedValidationListener(event) {
+    const targetName = event.target.getAttribute("name");
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    slot.addEventListener('auroFormElement-validated', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    if (!this.formState[targetName]) {
+      this._addElementToState(event.target);
+    }
 
-      if (!this.formState[targetName]) {
-        this._addElementToState(event.target);
-      }
+    this.formState[targetName].validity = event.detail.validity;
+    this._calculateValidity();
+  }
 
-      this.formState[targetName].validity = event.detail.validity;
-      this._calculateValidity();
+  _attachEventListeners() {
+    this.queryAuroElements().forEach((element) => {
+      // remove any existing event listeners (in case of re-initialization)
+      element.removeEventListener('input', this.sharedInputListener);
+      element.removeEventListener('auroFormElement-validated', this.sharedValidationListener);
+
+      // add new event listeners
+      element.addEventListener('input', this.sharedInputListener);
+      element.addEventListener('auroFormElement-validated', this.sharedValidationListener);
     });
   }
 
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    this._attachEventListeners();
+  }
+
   updated(_changedProperties) {
     super.updated(_changedProperties);
 
@@ -525,6 +565,8 @@ class AuroForm extends r {
 
   onSlotChange() {
     this.initializeState();
+    // Safe to call as we remove and re-add event listeners
+    this._attachEventListeners();
   }
 
   // function that renders the HTML and CSS into the scope of the component