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

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

@@ -24,7 +24,7 @@ const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createH
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=undefined;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss = i$3`*,*: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}`;
+var styleCss = i$3`*,*: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)}`;
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -96,7 +96,7 @@ class AuroLibraryRuntimeUtils {
   }
 }
 
-/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-underscore-dangle,max-lines */
 
 
 /**
@@ -124,7 +124,12 @@ class AuroLibraryRuntimeUtils {
 class AuroForm extends r {
   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 },
     };
   }
 
@@ -132,7 +137,24 @@ class AuroForm extends r {
     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
@@ -166,7 +188,7 @@ class AuroForm extends r {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
-  static get submitElementTags() {
+  static get buttonElementTags() {
     return [
       'button',
       'auro-button',
@@ -174,12 +196,12 @@ class AuroForm extends r {
   }
 
   /**
-   * 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() {
@@ -196,45 +218,76 @@ class AuroForm extends r {
    * @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();
-
-      this.dispatchEvent(new CustomEvent('submit', {
-        detail: {
-          value: this.value
-        }
-      }));
-    };
+  setDisabledStateOnButtons() {
+    this._resetElements.forEach((element) => {
+      if (this.isInitialState) {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
+
+    this._submitelements.forEach((element) => {
+      if (this.isInitialState || this.validity !== "valid") {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
   }
 
   /**
@@ -242,16 +295,111 @@ class AuroForm extends r {
    * @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]'
+      ]
+    ];
 
-    // Alternatively, for renamed components...
-    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
-    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+    return this.querySelectorAll(queries.flatMap(([
+      tags,
+      extraAttributes
+    ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
+  }
 
-    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+  /**
+   * 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
+        };
+
+        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
+      }
+    }));
   }
 
   /**
@@ -273,49 +421,49 @@ class AuroForm extends r {
 
     // 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 x`
         <form>
-          <p>Value: ${JSON.stringify(this.value)}</p>
-          <p>Validity: ${this.validity}</p>
-          <h3>Auro form example</h3>
           <slot @slotchange="${this.onSlotChange}"></slot>
         </form>
     `;