@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.31

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

@@ -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,27 @@
  */
 export class AuroForm extends LitElement {
     static get properties(): {
-        cssClass: {
-            type: StringConstructor;
+        formState: {
+            attribute: boolean;
+        };
+        _validity: {
+            attribute: boolean;
+        };
+        _isInitialState: {
+            attribute: boolean;
+        };
+        _elements: {
+            attribute: boolean;
+        };
+        _submitElements: {
+            attribute: boolean;
+        };
+        _resetElements: {
+            attribute: boolean;
         };
     };
+    static get formElementTags(): string[];
+    static get buttonElementTags(): string[];
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
@@ -20,7 +47,138 @@ export class AuroForm extends LitElement {
      *
      */
     static register(name?: string): void;
+    /** @type {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 fires an event called `reset` - just as you would expect from a normal form.
+     */
+    reset(): void;
+    /**
+     * Submit fires an event called `submit` - just as you would expect from a normal form.
+     */
+    submit(): void;
+    /**
+     * Compare tag name with element to identify it (for API purposes).
+     * @param {string} elementTag - The HTML tag name like `auro-datepicker`.
+     * @param {HTMLElement} element - The actual HTML element to compare.
+     * @returns {boolean}
+     * @private
+     */
+    private _isElementTag;
+    /**
+     * 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 button element.
+     * @param {HTMLElement} element - The element to check.
+     * @returns {boolean}
+     */
+    isButtonElement(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>;
+    /**
+     * Getter for internal _submitElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get submitElements(): HTMLButtonElement[];
+    /**
+     * Getter for internal _resetElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get resetElements(): HTMLButtonElement[];
+    /**
+     * 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;
+    setDisabledStateOnButtons(): void;
+    /**
+     * Construct the query strings from elements, append them together, execute, and return the NodeList.
+     * @returns {NodeList}
+     */
+    queryAuroElements(): NodeList;
+    /**
+     * Store an element in state and on the _elements array.
+     * @param {HTMLElement} element - The element to add to our state.
+     * @private
+     */
+    private _addElementToState;
+    /**
+     * Initialize (or reinitialize) the form state.
+     */
+    initializeState(): void;
+    firstUpdated(_changedProperties: any): void;
+    updated(_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

@@ -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"}
+{"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;IAiCD,yCAKC;IAWD,+CAEC;IA6OD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAxUC,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;IA4P1B;;OAEG;IACH,cAuBC;IAED;;OAEG;IACH,eAmBC;IA5RD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;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,sBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,qBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAO/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;;;OAIG;IACH,2BAcC;IAED;;OAEG;IACH,wBA8BC;IAkED,4CAwCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlba,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}