feat(form): add submit connection

Also validates that you can use custom elements, and that they are still included.

components/form/demo/registerDemoDeps.js

@@ -2,4 +2,5 @@ import {AuroInput} from "@aurodesignsystem/auro-input";
 import {AuroDatePicker} from "@aurodesignsystem/auro-datepicker";
 
 AuroInput.register();
+AuroInput.register('auro-input-two');
 AuroDatePicker.register();

components/form/demo/working.html

@@ -68,6 +68,10 @@ <h2>auro-form testing</h2>
       </div>
     </div>
 
+    <auro-input-two id="cool-fact" name="coolFact" required>
+      <span slot="label">Cool Fact</span>
+    </auro-input-two>
+
     <div class="datepickerBlock">
       <h4>Pick a cool date</h4>
       <auro-datepicker id="date-example" name="dateExample" required>
@@ -83,10 +87,20 @@ <h4>Pick a cool date</h4>
   </auro-form>
 </main>
 
-<script type="module" data-demo-script="true" src="./index.js"></script>
+<!-- Form elements MUST be registered BEFORE form if custom names are used -->
 <script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
+<script type="module" data-demo-script="true" src="./index.js"></script>
 <!--<script type="module" data-demo-script="true" src="~@auro-formkit/auro-input/dist/index.min.js"></script>-->
 
+<script>
+  const form = document.querySelector('auro-form');
+  form.addEventListener('submit', (event) => {
+    console.log(event)
+
+    console.log(event.target.value)
+  })
+</script>
+
 <!-- If additional elements are needed for the demo, add them here. -->
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

components/form/src/auro-form.js

@@ -67,6 +67,7 @@ export class AuroForm extends LitElement {
 
     // Bind listeners
     this.reset = this.reset.bind(this);
+    this.submit = this.submit.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -192,39 +193,26 @@ export class AuroForm extends LitElement {
         element.removeAttribute("disabled");
       }
     });
-  }
 
-  getSubmitFunction() {
-    // We return an arrow function here to ensure that the `this` context points at this same AuroForm context.
-    // Otherwise, submission tries to read `this.value` on the button element.
-    return (event) => {
-      event.preventDefault();
-
-      this.dispatchEvent(new CustomEvent('submit', {
-        detail: {
-          value: this.value
-        }
-      }));
-    };
+    this._submitelements.forEach((element) => {
+      if (this.isInitialState || this.validity !== "valid") {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
   }
 
   /**
    * Construct the query strings from elements, append them together, execute, and return the NodeList.
    * @returns {NodeList}
    */
   queryAuroElements() {
-    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
-    const submitterQuery = AuroForm.buttonElementTags.map((tag) => `${tag}[type=submit]`).join(',');
-    const resetButtonQuery = AuroForm.buttonElementTags.map((tag) => `${tag}[type=reset]`).join(',');
-
-    // Alternatively, for renamed components...
-    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
-    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
-    const renamedResetButtonQuery = AuroForm.buttonElementTags.map((tag) => `[${tag}][type=reset]`).join(',');
-
-    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery},${resetButtonQuery},${renamedResetButtonQuery}`;
+    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name], [${tag}][name]`);
+    const submitterQuery = AuroForm.buttonElementTags.map((tag) => `${tag}[type=submit], [${tag}][type=submit]`);
+    const resetButtonQuery = AuroForm.buttonElementTags.map((tag) => `${tag}[type=reset], [${tag}][type=reset]`);
 
-    return this.querySelectorAll(unifiedElementQuery);
+    return this.querySelectorAll(formElementQuery.concat(submitterQuery, resetButtonQuery).join(', '));
   }
 
   /**
@@ -249,8 +237,8 @@ export class AuroForm extends LitElement {
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
-        element.removeEventListener('click', this.getSubmitFunction());
-        element.addEventListener('click', this.getSubmitFunction());
+        element.removeEventListener('click', this.submit);
+        element.addEventListener('click', this.submit);
 
         // Keep record of this element, so we can enable/disable as needed
         this._submitelements.push(element);
@@ -285,6 +273,34 @@ export class AuroForm extends LitElement {
     });
   }
 
+  /**
+   * Submit fires an event called `submit` - just as you would expect from a normal form.
+   *
+   * @example ```
+   * const form = document.querySelector('auro-
+   * ```
+   */
+  submit() {
+    // Steps required to get out of beta:
+    // 1. Submit triggers a forced validation on ALL elements
+    // 2. Wait for validation to complete (this.updateComplete.then or similar)
+    // 3. If still valid, go ahead with submit.
+    this._elements.forEach((element) => {
+      if (element.tagName.toLowerCase() !== "auro-datepicker") {
+        // Next line currently does NOT force
+        element.validate();
+      }
+    });
+
+    this.dispatchEvent(new CustomEvent('submit', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.value
+      }
+    }));
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.