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

package/components/form/demo/index.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>
     `;

package/components/form/demo/registerDemoDeps.js

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

package/components/form/demo/working.html

@@ -40,6 +40,14 @@
     .datepickerBlock {
       margin-top: 1rem;
     }
+
+    auro-form {
+      display: block;
+      width: 100%;
+      padding: 1rem;
+      border: 1px solid #2a2a2a;
+      border-radius: 1rem;
+    }
   </style>
 
   <h2>auro-form testing</h2>
@@ -60,6 +68,10 @@
       </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>
@@ -75,10 +87,20 @@
   </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>

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

@@ -16,12 +16,27 @@
  */
 export class AuroForm extends LitElement {
     static get properties(): {
-        _formState: {
+        formState: {
+            attribute: boolean;
+        };
+        _validity: {
+            attribute: boolean;
+        };
+        _isInitialState: {
+            attribute: boolean;
+        };
+        _elements: {
+            attribute: boolean;
+        };
+        _submitElements: {
+            attribute: boolean;
+        };
+        _resetElements: {
             attribute: boolean;
         };
     };
     static get formElementTags(): string[];
-    static get submitElementTags(): string[];
+    static get buttonElementTags(): string[];
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
@@ -33,7 +48,27 @@ export class AuroForm extends LitElement {
      */
     static register(name?: string): void;
     /** @type {FormState} */
-    _formState: FormState;
+    formState: FormState;
+    /** @type {"valid" | "invalid" | null} */
+    _validity: "valid" | "invalid" | null;
+    _isInitialState: boolean;
+    /** @type {(HTMLElement & {reset: () => void})[]} */
+    _elements: (HTMLElement & {
+        reset: () => void;
+    })[];
+    /** @type {HTMLButtonElement[]} */
+    _submitelements: HTMLButtonElement[];
+    /** @type {HTMLButtonElement[]} */
+    _resetElements: HTMLButtonElement[];
+    reset(): void;
+    /**
+     * Submit fires an event called `submit` - just as you would expect from a normal form.
+     *
+     * @example ```
+     * const form = document.querySelector('auro-
+     * ```
+     */
+    submit(): void;
     /**
      * Shared code for determining if an element is something we care about (submit, form element, etc.).
      * @param {string[]} collection - The array to use for tag name search.
@@ -49,11 +84,11 @@ export class AuroForm extends LitElement {
      */
     isFormElement(element: HTMLElement): boolean;
     /**
-     * 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: HTMLElement): boolean;
+    isButtonElement(element: HTMLElement): boolean;
     /**
      * Reduce the form value into a key-value pair.
      *
@@ -64,15 +99,34 @@ export class AuroForm extends LitElement {
      * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
      */
     get value(): Record<string, string | number | boolean | string[] | null>;
+    /**
+     * Infer validity status based on current formState.
+     * @private
+     */
+    private _calculateValidity;
+    /**
+     * Current validity state of the form, based on form element events.
+     * @returns {"valid" | "invalid"}
+     */
     get validity(): "valid" | "invalid";
+    _setInitialState(): void;
+    /**
+     * Mostly internal way to determine if a form is in the initial state.
+     * @returns {boolean}
+     */
     get isInitialState(): boolean;
-    getSubmitFunction(): (event: any) => void;
+    setDisabledStateOnButtons(): void;
     /**
      * Construct the query strings from elements, append them together, execute, and return the NodeList.
      * @returns {NodeList}
      */
     queryAuroElements(): NodeList;
+    /**
+     * Initialize (or reinitialize) the form state.
+     */
+    initializeState(): void;
     firstUpdated(_changedProperties: any): void;
+    updated(_changedProperties: any): void;
     onSlotChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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;;;;MAIC;IAWD,uCAOC;IAsBD,yCAKC;IAWD,+CAEC;IAsED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArIC,wBAAwB;IACxB,YADW,SAAS,CACA;IActB;;;;;;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,oCAYC;IAGD,8BAIC;IAED,0CAYC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAapB;IAcD,4CAqBC;IAED,qBAkBC;IAGD,+CASC;CACF;;;;;;;;WA3Na,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;IA4BD,uCAOC;IAsBD,yCAKC;IAWD,+CAEC;IAoMD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApRC,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;IAgN1B,cAcC;IAED;;;;;;OAMG;IACH,eAmBC;IAxOD;;;;;;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,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAI/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;OAEG;IACH,wBAqCC;IA0DD,4CAyBC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WA/Wa,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}