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

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

package/components/form/src/auro-form.js

@@ -68,6 +68,8 @@ export class AuroForm extends LitElement {
     // 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
@@ -77,7 +79,12 @@ export class AuroForm extends LitElement {
       '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'
     ];
   }
 
@@ -112,6 +119,18 @@ export class AuroForm extends LitElement {
     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',
@@ -271,7 +290,7 @@ export class AuroForm extends LitElement {
     }
 
     this.formState[targetName] = {
-      value: element.getAttribute('value'),
+      value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
       // element
@@ -379,48 +398,69 @@ export class AuroForm extends LitElement {
     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);
 
@@ -438,6 +478,8 @@ export class AuroForm extends LitElement {
 
   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/helptext/.turbo/turbo-build.log

@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 263ms
+created dist in 171ms
 
 > @aurodesignsystem/auro-helptext@1.0.0 types
 > tsc --project tsconfig.json

package/components/helptext/.turbo/turbo-bundler.log

@@ -4,4 +4,4 @@
 
 
 ./src/index.js → dist...
-created dist in 342ms
+created dist in 279ms

package/components/input/.turbo/turbo-build.log

@@ -206,13 +206,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.4s
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 775ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 725ms
+created ./demo/ in 678ms
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.30/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.32/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 326ms
+created dist in 292ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 485ms
+created ./demo/ in 269ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 383ms
+created ./demo/ in 204ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 549ms
+created dist in 726ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 376ms
+created ./demo/ in 345ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 280ms
+created ./demo/ in 242ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.30/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.32/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

package/components/radio/.turbo/turbo-build.log

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 851ms
+created dist in 815ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 595ms
+created ./demo/ in 741ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 591ms
+created ./demo/ in 503ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/README.md

@@ -90,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.30/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.32/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 965ms
+created dist in 939ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 970ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 776ms
+created ./demo/ in 874ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.30/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.30/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.30/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.32/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.32/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.32/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.33",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/0b59b3b61897d950-meta.json

@@ -1 +0,0 @@
-{"hash":"0b59b3b61897d950","duration":5706}

package/.turbo/cache/1215c5e3dd25e0c3-meta.json

@@ -1 +0,0 @@
-{"hash":"1215c5e3dd25e0c3","duration":4933}

package/.turbo/cache/13ff0d757be18ae9-meta.json

@@ -1 +0,0 @@
-{"hash":"13ff0d757be18ae9","duration":13673}

package/.turbo/cache/1b653bcfa2eef748-meta.json

@@ -1 +0,0 @@
-{"hash":"1b653bcfa2eef748","duration":822}

package/.turbo/cache/24cb18ffa2f611b1-meta.json

@@ -1 +0,0 @@
-{"hash":"24cb18ffa2f611b1","duration":1277}

package/.turbo/cache/4f81392ada08f240-meta.json

@@ -1 +0,0 @@
-{"hash":"4f81392ada08f240","duration":1778}

package/.turbo/cache/59481fd7f6f355ed-meta.json

@@ -1 +0,0 @@
-{"hash":"59481fd7f6f355ed","duration":3037}

package/.turbo/cache/79c16437b6eb7e44-meta.json

@@ -1 +0,0 @@
-{"hash":"79c16437b6eb7e44","duration":13329}

package/.turbo/cache/8388331cc15d7fd2-meta.json

@@ -1 +0,0 @@
-{"hash":"8388331cc15d7fd2","duration":6010}

package/.turbo/cache/8c637a8d4c2166c5-meta.json

@@ -1 +0,0 @@
-{"hash":"8c637a8d4c2166c5","duration":2515}

package/.turbo/cache/8f94ccea023ee254-meta.json

@@ -1 +0,0 @@
-{"hash":"8f94ccea023ee254","duration":14185}

package/.turbo/cache/9337429c745d33f9-meta.json

@@ -1 +0,0 @@
-{"hash":"9337429c745d33f9","duration":25020}

package/.turbo/cache/a5717ca784f036bc-meta.json

@@ -1 +0,0 @@
-{"hash":"a5717ca784f036bc","duration":5937}

package/.turbo/cache/a7dea1f1ae1fdc27-meta.json

@@ -1 +0,0 @@
-{"hash":"a7dea1f1ae1fdc27","duration":1958}

package/.turbo/cache/abfc52db26c84ceb-meta.json

@@ -1 +0,0 @@
-{"hash":"abfc52db26c84ceb","duration":14702}

package/.turbo/cache/b7aefb222b98306d-meta.json

@@ -1 +0,0 @@
-{"hash":"b7aefb222b98306d","duration":819}

package/.turbo/cache/c13e85d809af02f6-meta.json

@@ -1 +0,0 @@
-{"hash":"c13e85d809af02f6","duration":2059}

package/.turbo/cache/c89150633a136dc8-meta.json

@@ -1 +0,0 @@
-{"hash":"c89150633a136dc8","duration":639}

package/.turbo/cache/cdb0e45299352fce-meta.json

@@ -1 +0,0 @@
-{"hash":"cdb0e45299352fce","duration":14196}

package/.turbo/cache/df379f765f10ec9c-meta.json

@@ -1 +0,0 @@
-{"hash":"df379f765f10ec9c","duration":14632}

package/.turbo/cache/e95b9e3b7f35e801-meta.json

@@ -1 +0,0 @@
-{"hash":"e95b9e3b7f35e801","duration":15202}

package/.turbo/cache/fb3845d2ca66fee8-meta.json

@@ -1 +0,0 @@
-{"hash":"fb3845d2ca66fee8","duration":16012}