npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.14 → 2.0.0-beta.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/components/form/demo/working.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Auro Web Component Generator | auro-form custom element</title>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+  />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@8.2.0/dist/auro-button__bundled.js" type="module"></script>
+</head>
+<body class="auro-markdown">
+<main>
+  <style>
+    .submitBlock {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: flex-end;
+      gap: 1rem;
+    }
+    .datepickerBlock {
+      margin-top: 1rem;
+    }
+  </style>
+  <h2>auro-form testing</h2>
+  <auro-form>
+    <auro-input id="first-name" name="firstName" required>
+      <span slot="label">First Name</span>
+    </auro-input>
+    <div>
+      <auro-input id="last-name" name="lastName" required>
+        <span slot="label">Last Name</span>
+      </auro-input>
+    </div>
+    <div>
+      <div>
+        <auro-input id="occupation" name="occupation" required>
+          <span slot="label">Occupation</span>
+        </auro-input>
+      </div>
+    </div>
+    <div class="datepickerBlock">
+      <h4>Pick a cool date</h4>
+      <auro-datepicker id="date-example" name="dateExample" required>
+        <span slot="fromLabel">Choose a date</span>
+        <span slot="mobileDateLabel">Choose a date</span>
+      </auro-datepicker>
+    </div>
+    <div class="submitBlock">
+      <auro-button type="reset">Reset</auro-button>
+      <auro-button type="submit">Submit</auro-button>
+    </div>
+  </auro-form>
+</main>
+<script type="module" data-demo-script="true" src="./index.js"></script>
+<script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
+<!--<script type="module" data-demo-script="true" src="~@auro-formkit/auro-input/dist/index.min.js"></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>
+</body>
+</html>

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

@@ -1,3 +1,13 @@
+/**
+ * @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.
+ */
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
  *
@@ -6,10 +16,12 @@
  */
 export class AuroForm extends LitElement {
     static get properties(): {
-        cssClass: {
-            type: StringConstructor;
+        _formState: {
+            attribute: boolean;
         };
     };
+    static get formElementTags(): string[];
+    static get submitElementTags(): string[];
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
@@ -20,7 +32,76 @@ export class AuroForm extends LitElement {
      *
      */
     static register(name?: string): void;
+    /** @type {FormState} */
+    _formState: FormState;
+    /**
+     * 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
+     */
+    private _isInElementCollection;
+    /**
+     * Check if the tag name is a form element.
+     * @param {HTMLElement} element - The element to check (attr or tag name).
+     * @returns {boolean}
+     */
+    isFormElement(element: HTMLElement): boolean;
+    /**
+     * Check if the tag name is a submit element.
+     * @param {HTMLElement} element - The element to check.
+     * @returns {boolean}
+     */
+    isSubmitElement(element: HTMLElement): boolean;
+    /**
+     * 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(): Record<string, string | number | boolean | string[] | null>;
+    get validity(): "valid" | "invalid";
+    get isInitialState(): boolean;
+    getSubmitFunction(): (event: any) => void;
+    /**
+     * Construct the query strings from elements, append them together, execute, and return the NodeList.
+     * @returns {NodeList}
+     */
+    queryAuroElements(): NodeList;
+    firstUpdated(_changedProperties: any): void;
+    onSlotChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+/**
+ * - The form state member.
+ */
+export type FormStateMember = {
+    /**
+     * - The value of the form element.
+     */
+    value: string | number | boolean | string[] | null;
+    /**
+     * - The validity state of the form element, stored when fired from the form element.
+     */
+    validity: ValidityState;
+    /**
+     * - Whether the form element is required or not.
+     */
+    required: boolean;
+    /**
+     * - Whether the form element is required or not.
+     */
+    element: HTMLElement;
+};
+/**
+ * - The form state.
+ */
+export type FormState = {
+    [x: string]: FormStateMember;
+};
 import { LitElement } from "lit";
 //# sourceMappingURL=auro-form.d.ts.map

package/components/form/dist/auro-form.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"~~AAmBA~~;;;;;GAKG;AAGH;~~IAQE~~;;;;~~MAOC~~;~~IAED~~,+CAEC;~~IAED~~;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAMD,+~~CAQC~~;CACF~~;2BAnEgC~~,KAAK"}
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"}

package/components/form/dist/index.js CHANGED Viewed

@@ -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)}`;
+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}`;
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -96,8 +96,20 @@ class AuroLibraryRuntimeUtils {
   }
 }
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+/* eslint-disable no-underscore-dangle */
+/**
+ * @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"
@@ -110,26 +122,138 @@ class AuroLibraryRuntimeUtils {
 // build the component class
 class AuroForm extends r {
-  // 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 },
     };
   }
+  constructor() {
+    super();
+    /** @type {FormState} */
+    this._formState = {};
+  }
+  // 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 submitElementTags() {
+    return [
+      'button',
+      'auro-button',
+    ];
+  }
+  /**
+   * Check if the tag name is a submit element.
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean}
+   */
+  isSubmitElement(element) {
+    return this._isInElementCollection(AuroForm.submitElementTags, 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;
+    }, {});
+  }
+  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 invalidKey ? 'invalid' : 'valid';
+  }
+  // Below is not implemented yet
+  get isInitialState() {
+    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
+    return !anyTainted;
+  }
+  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
+        }
+      }));
+    };
+  }
+  /**
+   * 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.submitElementTags.map((tag) => `${tag}[type=submit]`).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 unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+    return this.querySelectorAll(unifiedElementQuery);
+  }
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-form"] - The name of element that you want to register to.
@@ -142,17 +266,58 @@ class AuroForm extends r {
     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) => {
+      /** @type {HTMLInputElement} */
+      const eventTarget = event.target;
+      if (this.isFormElement(eventTarget)) {
+        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      }
+    });
+    slot.addEventListener('auroFormElement-validated', (event) => {
+      const oldValue = this._formState;
+      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
+      this.requestUpdate('formState', oldValue);
+    });
+  }
+  onSlotChange() {
+    this._formState = {};
-  // function that renders the HTML and CSS into  the scope of the component
+    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 (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
+        element.removeEventListener('click', this.getSubmitFunction());
+        element.addEventListener('click', this.getSubmitFunction());
+      }
+    });
+  }
+  // function that renders the HTML and CSS into the scope of the component
   render() {
     return x`
-      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
-      <div class=${this.cssClass} tabindex="0">
-        <slot></slot>
-      </div>
+        <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/package.json CHANGED Viewed

@@ -26,6 +26,8 @@
     "@auro-formkit/build-tools": "*",
     "@auro-formkit/config": "*",
     "@auro-formkit/typescript": "*",
+    "@aurodesignsystem/auro-datepicker": "*",
+    "@aurodesignsystem/auro-input": "*",
     "@aurodesignsystem/design-tokens": "^4.12.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -58,7 +60,7 @@
     "bundler": "rollup -c node:@auro-formkit/config/rollup",
     "build:docs": "wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form",
     "clean": "rm -rf dist build",
-    "dev": "web-dev-server",
+    "dev": "web-dev-server --node-resolve",
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",