@aurodesignsystem/auro-formkit 2.0.0-beta.17 → 2.0.0-beta.18

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

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-underscore-dangle,max-lines */
 
 // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -37,7 +37,12 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 export class AuroForm extends LitElement {
   static get properties() {
     return {
-      _formState: { attribute: false },
+      formState: { attribute: false },
+      _validity: { attribute: false },
+      _isInitialState: { attribute: false },
+      _elements: { attribute: false },
+      _submitElements: { attribute: false },
+      _resetElements: { attribute: false },
     };
   }
 
@@ -45,7 +50,24 @@ export class AuroForm extends LitElement {
     super();
 
     /** @type {FormState} */
-    this._formState = {};
+    this.formState = {};
+
+    /** @type {"valid" | "invalid" | null} */
+    this._validity = null;
+    this._isInitialState = true;
+
+    /** @type {(HTMLElement & {reset: () => void})[]} */
+    this._elements = [];
+
+    /** @type {HTMLButtonElement[]} */
+    this._submitelements = [];
+
+    /** @type {HTMLButtonElement[]} */
+    this._resetElements = [];
+
+    // 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
@@ -79,7 +101,7 @@ export class AuroForm extends LitElement {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
-  static get submitElementTags() {
+  static get buttonElementTags() {
     return [
       'button',
       'auro-button',
@@ -87,12 +109,12 @@ export class AuroForm extends LitElement {
   }
 
   /**
-   * Check if the tag name is a submit element.
+   * Check if the tag name is a button element.
    * @param {HTMLElement} element - The element to check.
    * @returns {boolean}
    */
-  isSubmitElement(element) {
-    return this._isInElementCollection(AuroForm.submitElementTags, element);
+  isButtonElement(element) {
+    return this._isInElementCollection(AuroForm.buttonElementTags, element);
   }
 
   static get styles() {
@@ -109,45 +131,76 @@ export class AuroForm extends LitElement {
    * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
    */
   get value() {
-    return Object.keys(this._formState).reduce((acc, key) => {
-      acc[key] = this._formState[key].value;
+    return Object.keys(this.formState).reduce((acc, key) => {
+      acc[key] = this.formState[key].value;
       return acc;
     }, {});
   }
 
+  /**
+   * Infer validity status based on current formState.
+   * @private
+   */
+  _calculateValidity() {
+    if (this.isInitialState) {
+      this._validity = null;
+    } else {
+      // go through validity states and return the first invalid state (if any)
+      const invalidKey = Object.keys(this.formState).
+        find((key) => {
+          const formKey = this.formState[key];
+          // these are NOT extra parens
+          // eslint-disable-next-line no-extra-parens
+          return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
+        });
+      this._validity = invalidKey ? 'invalid' : 'valid';
+    }
+  }
+
+  /**
+   * Current validity state of the form, based on form element events.
+   * @returns {"valid" | "invalid"}
+   */
   get validity() {
-    // go through validity states and return the first invalid state (if any)
-    const invalidKey = Object.keys(this._formState).
-      find((key) => {
-        const formKey = this._formState[key];
-
-        // these are NOT extra :(
-        // eslint-disable-next-line no-extra-parens
-        return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
-      });
+    return this._validity;
+  }
+
+  _setInitialState() {
+    const anyTainted = Object.keys(this.formState).some((key) => this.formState[key].validity !== null || this.formState[key].value !== null);
 
-    return invalidKey ? 'invalid' : 'valid';
+    this._isInitialState = !anyTainted;
+
+    this._resetElements.forEach((resetElement) => {
+      if (resetElement.hasAttribute("disabled")) {
+        resetElement.removeAttribute("disabled");
+      }
+    });
   }
 
-  // Below is not implemented yet
+  /**
+   * Mostly internal way to determine if a form is in the initial state.
+   * @returns {boolean}
+   */
   get isInitialState() {
-    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
-
-    return !anyTainted;
+    return this._isInitialState;
   }
 
-  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();
+  setDisabledStateOnButtons() {
+    this._resetElements.forEach((element) => {
+      if (this.isInitialState) {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
 
-      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");
+      }
+    });
   }
 
   /**
@@ -155,16 +208,111 @@ export class AuroForm extends LitElement {
    * @returns {NodeList}
    */
   queryAuroElements() {
-    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
-    const submitterQuery = AuroForm.submitElementTags.map((tag) => `${tag}[type=submit]`).join(',');
+    const queries = [
+      [
+        AuroForm.formElementTags,
+        '[name]'
+      ],
+      [
+        AuroForm.buttonElementTags,
+        '[type=submit]'
+      ],
+      [
+        AuroForm.buttonElementTags,
+        '[type=reset]'
+      ]
+    ];
+
+    return this.querySelectorAll(queries.flatMap(([
+      tags,
+      extraAttributes
+    ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
+  }
 
-    // Alternatively, for renamed components...
-    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
-    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+  /**
+   * Initialize (or reinitialize) the form state.
+   */
+  initializeState() {
+    this.formState = {};
+    this._submitelements = [];
+    this._resetElements = [];
+    this._elements = [];
+
+    this.queryAuroElements().forEach((element) => {
+      if (this.isFormElement(element)) {
+        this.formState[element.getAttribute('name')] = {
+          value: element.getAttribute('value'),
+          validity: element.getAttribute('validity'),
+          required: element.hasAttribute('required'),
+          // element
+        };
 
-    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+        this._elements.push(element);
+      }
 
-    return this.querySelectorAll(unifiedElementQuery);
+      if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
+        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);
+      }
+
+      if (this.isButtonElement(element) && element.getAttribute('type') === 'reset') {
+        // Keep record of this element, so we can enable/disable as needed
+        element.removeEventListener('click', this.reset);
+        element.addEventListener('click', this.reset);
+
+        this._resetElements.push(element);
+      }
+    });
+
+    // Set enabled/disabled states on buttons
+    this.setDisabledStateOnButtons();
+  }
+
+  reset() {
+    this._elements.forEach((element) => element.reset());
+
+    this.updateComplete.then(() => {
+      this.initializeState();
+      // Initial state must come first - validity can only be null if initial state is true
+      this._setInitialState();
+      this._calculateValidity();
+
+      // Wait for the above changes to run through, then disable submit/reset
+      this.updateComplete.then(() => {
+        this.setDisabledStateOnButtons();
+      });
+    });
+  }
+
+  /**
+   * 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
+      }
+    }));
   }
 
   /**
@@ -186,49 +334,49 @@ export class AuroForm extends LitElement {
 
     // Update the form state when a form element is detected
     slot.addEventListener('input', (event) => {
-
-      /** @type {HTMLInputElement} */
-      const eventTarget = event.target;
-      if (this.isFormElement(eventTarget)) {
-        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      const targetName = event.target.getAttribute("name");
+      if (!this.isFormElement(event.target) || !targetName) {
+        return;
       }
+
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {
-      const oldValue = this._formState;
+      const targetName = event.target.getAttribute("name");
+      if (!this.isFormElement(event.target) || !targetName) {
+        return;
+      }
 
-      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
-      this.requestUpdate('formState', oldValue);
+      this.formState[targetName].validity = event.detail.validity;
+      this._calculateValidity();
     });
   }
 
-  onSlotChange() {
-    this._formState = {};
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
 
-    this.queryAuroElements().forEach((element) => {
-      if (this.isFormElement(element)) {
-        this._formState[element.getAttribute('name')] = {
-          value: element.getAttribute('value'),
-          validity: element.getAttribute('validity'),
-          required: element.hasAttribute('required'),
-          element
-        };
-      }
+    if (_changedProperties.has("formState")) {
+      this._setInitialState();
 
-      if (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
-        element.removeEventListener('click', this.getSubmitFunction());
-        element.addEventListener('click', this.getSubmitFunction());
-      }
-    });
+      // Automatically infer disabled state now
+      this.setDisabledStateOnButtons();
+    }
+
+    if (_changedProperties.has("_validity")) {
+      this._setInitialState();
+    }
+  }
+
+  onSlotChange() {
+    this.initializeState();
   }
 
   // function that renders the HTML and CSS into the scope of the component
   render() {
     return html`
         <form>
-          <p>Value: ${JSON.stringify(this.value)}</p>
-          <p>Validity: ${this.validity}</p>
-          <h3>Auro form example</h3>
           <slot @slotchange="${this.onSlotChange}"></slot>
         </form>
     `;

package/components/form/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}:host form{display:block;width:100%;padding:1rem;border:1px solid #2a2a2a;border-radius:1rem}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;

package/components/form/src/styles/style.css

@@ -34,11 +34,3 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
-
-:host form {
-  display: block;
-  width: 100%;
-  padding: 1rem;
-  border: 1px solid #2a2a2a;
-  border-radius: 1rem;
-}

package/components/form/src/styles/style.scss

@@ -35,13 +35,3 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
-
-:host {
-  form {
-    display: block;
-    width: 100%;
-    padding: 1rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
-  }
-}

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

@@ -216,10 +216,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
 created ./demo/ in 1s

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

@@ -10,4 +10,4 @@
 created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 967ms
+created ./demo/ in 894ms

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.16/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.17/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 873ms
+created dist in 602ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 417ms
+created ./demo/ in 453ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 456ms
+created ./demo/ in 285ms
 
 > @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 1s
+created dist in 892ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 824ms
+created ./demo/ in 808ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 571ms
+created ./demo/ in 533ms

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.16/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.17/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 753ms
+created dist in 480ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 406ms
+created ./demo/ in 334ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 504ms
+created ./demo/ in 447ms
 
 > @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/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 624ms
+created dist in 661ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 522ms
+created ./demo/ in 471ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 571ms
+created ./demo/ in 552ms

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.16/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.17/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 988ms
+created dist in 739ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 719ms
+created ./demo/ in 714ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 587ms
+created ./demo/ in 558ms
 
 > @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.16/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.16/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.16/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.17/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.17/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.17/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.17",
+  "version": "2.0.0-beta.18",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/02ee016619902665-meta.json

@@ -1 +0,0 @@
-{"hash":"02ee016619902665","duration":6139}

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

@@ -1 +0,0 @@
-{"hash":"1e855b2163b7c980","duration":2131}

package/.turbo/cache/3c8718d2ba6d3fe5-meta.json

@@ -1 +0,0 @@
-{"hash":"3c8718d2ba6d3fe5","duration":2364}

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

@@ -1 +0,0 @@
-{"hash":"8fcce3ba8357be57","duration":740}

package/.turbo/cache/9b5868be65819fdf-meta.json

@@ -1 +0,0 @@
-{"hash":"9b5868be65819fdf","duration":2376}

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

@@ -1 +0,0 @@
-{"hash":"c3b2cc1b044a4135","duration":3469}

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

@@ -1 +0,0 @@
-{"hash":"e392fe0927e4af23","duration":4898}