@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.20

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

@@ -1,3 +1,5 @@
+/* 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.
 
@@ -6,16 +8,23 @@
 // If using litElement base class
 import { LitElement, html } from "lit";
 
-// If using auroElement base class
-// See instructions for importing auroElement base class https://git.io/JULq4
-// import { LitElement, html } from "lit";
-// import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
-
-// Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
+/**
+ * @typedef {Object} FormStateMember - The form state member.
+ * @property {string | number | boolean | string[] | null} value - The value of the form element.
+ * @property {ValidityState} validity - The validity state of the form element, stored when fired from the form element.
+ * @property {boolean} required - Whether the form element is required or not.
+ * @property {HTMLElement} element - Whether the form element is required or not.
+ */
+
+/**
+ * @typedef {Object.<string, FormStateMember>} FormState - The form state.
+ */
+
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -26,26 +35,286 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 // build the component class
 export class AuroForm extends LitElement {
-  // constructor() {
-  //   super();
-  // }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit.dev/docs/components/properties/
-  // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-
-      // this property is DEMO ONLY! Please delete.
-      cssClass:   { type: String }
+      formState: { attribute: false },
+      _validity: { attribute: false },
+      _isInitialState: { attribute: false },
+      _elements: { attribute: false },
+      _submitElements: { attribute: false },
+      _resetElements: { attribute: false },
     };
   }
 
+  constructor() {
+    super();
+
+    /** @type {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
+  // as it does not have a .value property.
+  static get formElementTags() {
+    return [
+      'auro-input',
+      'auro-select',
+      'auro-datepicker',
+      'auro-checkbox-group',
+    ];
+  }
+
+  /**
+   * 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.
+   * @param {HTMLElement} element - The element to compare against the master list.
+   * @returns boolean
+   * @private
+   */
+  _isInElementCollection(collection, element) {
+    return collection.some((elementTag) => element.tagName.toLowerCase() === elementTag || element.hasAttribute(elementTag.toLowerCase()));
+  }
+
+  /**
+   * Check if the tag name is a form element.
+   * @param {HTMLElement} element - The element to check (attr or tag name).
+   * @returns {boolean}
+   */
+  isFormElement(element) {
+    return this._isInElementCollection(AuroForm.formElementTags, element);
+  }
+
+  static get buttonElementTags() {
+    return [
+      'button',
+      'auro-button',
+    ];
+  }
+
+  /**
+   * Check if the tag name is a button element.
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean}
+   */
+  isButtonElement(element) {
+    return this._isInElementCollection(AuroForm.buttonElementTags, element);
+  }
+
   static get styles() {
     return [styleCss];
   }
 
+  /**
+   * Reduce the form value into a key-value pair.
+   *
+   * NOTE: form keys use `name` first, and `id` second if `name` is not available.
+   * This follows standard HTML5 form behavior - submission uses `name` by default when creating
+   * the FormData object.
+   *
+   * @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 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() {
+    return this._validity;
+  }
+
+  _setInitialState() {
+    const anyTainted = Object.keys(this.formState).some((key) => this.formState[key].validity !== null || this.formState[key].value !== null);
+
+    this._isInitialState = !anyTainted;
+
+    this._resetElements.forEach((resetElement) => {
+      if (resetElement.hasAttribute("disabled")) {
+        resetElement.removeAttribute("disabled");
+      }
+    });
+  }
+
+  /**
+   * Mostly internal way to determine if a form is in the initial state.
+   * @returns {boolean}
+   */
+  get isInitialState() {
+    return this._isInitialState;
+  }
+
+  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");
+      }
+    });
+  }
+
+  /**
+   * Construct the query strings from elements, append them together, execute, and return the NodeList.
+   * @returns {NodeList}
+   */
+  queryAuroElements() {
+    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(', '));
+  }
+
+  /**
+   * 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);
+      }
+
+      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
+      }
+    }));
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.
@@ -58,17 +327,58 @@ export class AuroForm extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  // When using auroElement, use the following attribute and function when hiding content from screen readers.
-  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    const slot = this.shadowRoot.querySelector('slot');
+
+    // 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;
+      }
 
-  // function that renders the HTML and CSS into  the scope of the component
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
+    });
+
+    slot.addEventListener('auroFormElement-validated', (event) => {
+      const targetName = event.target.getAttribute("name");
+      if (!this.isFormElement(event.target) || !targetName) {
+        return;
+      }
+
+      this.formState[targetName].validity = event.detail.validity;
+      this._calculateValidity();
+    });
+  }
+
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+
+    if (_changedProperties.has("formState")) {
+      this._setInitialState();
+
+      // 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`
-
-      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
-      <div class=${this.cssClass} tabindex="0">
-        <slot></slot>
-      </div>
+        <form>
+          <slot @slotchange="${this.onSlotChange}"></slot>
+        </form>
     `;
   }
 }

package/components/input/.turbo/turbo-build$colon$sass.log

@@ -1,8 +1,8 @@
 
-> @auro-formkit/auro-input@4.2.0 build:sass
+> @aurodesignsystem/auro-input@4.2.0 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/borders.scss 3:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -22,7 +22,17 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/borders.scss 4:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/borders.scss 6:9  root stylesheet
+
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -33,7 +43,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
     src/styles/borders.scss 4:9                                     root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -43,7 +53,17 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color.scss 6:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+8 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/color.scss 8:9  root stylesheet
+
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -53,7 +73,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/helpText.scss 1:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -63,7 +83,17 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/input.scss 4:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/input.scss 6:9  root stylesheet
+
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -73,7 +103,17 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/label.scss 1:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+3 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/label.scss 3:9  root stylesheet
+
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -83,7 +123,17 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/notificationIcons.scss 1:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/notificationIcons.scss 2:9  root stylesheet
+
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -93,7 +143,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 22:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -103,7 +153,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 25:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -113,7 +163,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 28:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -123,7 +173,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 30:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -133,10 +183,10 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 31:9  root stylesheet
 
-WARNING: 14 repetitive deprecation warnings omitted.
+WARNING: 18 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 

package/components/input/.turbo/turbo-build$colon$version.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-input@4.2.0 build:version
+> @aurodesignsystem/auro-input@4.2.0 build:version
 > node ./src/scripts/version.mjs
 
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json