@ebrains/components 0.6.0-alpha.0 → 0.7.0-alpha.0

package/dist/collection/components/eds-form/eds-form.js

@@ -1,6 +1,11 @@
 import { h } from "@stencil/core";
 import { toast } from "../../utils/toastManager";
 import { sendAnalytics } from "../../utils/analytics";
+import { parseData } from "../../utils/sharedUtils";
+import { validateFormFields } from "../../utils/eds-form/formValidators";
+import { validateInputField } from "../../utils/eds-form/validateInput";
+import { getFormDraftData } from "../../utils/eds-form/formUtils";
+import * as api from "../../utils/api";
 /**
  * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
  * error handling, and customizable fields. It offers several options for handling alerts and
@@ -17,129 +22,6 @@ import { sendAnalytics } from "../../utils/analytics";
  */
 export class EdsForm {
     constructor() {
-        this.handleChange = (e, field) => {
-            const target = e.target;
-            // Update the field's value in state.
-            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
-            // Create a copy of the current errors.
-            const newErrors = Object.assign({}, this.errors);
-            // Validate only the changed field.
-            if (field.type === 'checkbox' || field.type === 'radio') {
-                if (field.options) {
-                    // Validate group of checkboxes or radio buttons.
-                    const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
-                    if (fieldErrors.length > 0) {
-                        newErrors[field.name] = fieldErrors;
-                    }
-                    else {
-                        delete newErrors[field.name];
-                    }
-                }
-                else {
-                    // Validate a single checkbox.
-                    const fieldErrors = this.validateSingleBox(field.name, field.required);
-                    if (fieldErrors.length > 0) {
-                        newErrors[field.name] = fieldErrors;
-                    }
-                    else {
-                        delete newErrors[field.name];
-                    }
-                }
-            }
-            else {
-                // Validate standard text (or similar) inputs.
-                const fieldErrors = this.validateField(field.name, target.value, field.type, field.required, field.maxlength);
-                if (fieldErrors.length > 0) {
-                    newErrors[field.name] = fieldErrors;
-                }
-                else {
-                    delete newErrors[field.name];
-                }
-            }
-            // Update the errors state and hasError flag.
-            this.errors = newErrors;
-            this.hasError = Object.keys(newErrors).length > 0;
-        };
-        this.handleSubmit = async (e) => {
-            var _a, _b, _c;
-            e.preventDefault();
-            if (this.isSubmitting) {
-                return;
-            }
-            this.validateForm();
-            if (this.hasError) {
-                sendAnalytics({
-                    category: 'ui-component',
-                    parentContext: null,
-                    tag: this.el.tagName.toLowerCase(),
-                    name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
-                    action: 'click'
-                });
-                this.alertMessage = this.errorMessage;
-                return;
-            }
-            this.isSubmitting = true;
-            this.formSubmitted = false;
-            this.alertMessage = null;
-            this.errors = {};
-            const formData = await this.getFormData();
-            // Log each entry in FormData to see file details
-            /*formData.forEach((value, key) => {
-              if (value instanceof File) {
-                console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
-              } else {
-                console.log(`Field: ${key}, Value: ${value}`);
-              }
-            });*/
-            if (this.setFormUrl && typeof window !== 'undefined') {
-                formData.set('form_url', window.location.href);
-            }
-            if (this.authUser) {
-                formData.set('form_user', (_b = this.authUser) === null || _b === void 0 ? void 0 : _b.email);
-            }
-            /*const formDataObject = Object.fromEntries((formData as any).entries());
-            console.log(JSON.stringify(formDataObject));*/
-            const headers = this.coupleAuth
-                ? { Authorization: `Bearer ${this.authUser.token}` } // Include the Keycloak token
-                : {};
-            try {
-                const response = await fetch(this.endpoint, {
-                    method: 'POST',
-                    body: formData,
-                    headers
-                });
-                // Check if the response status indicates an error
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    this.hasError = true;
-                    toast.show(errorData.error || this.errorMessage, 'error');
-                    //this.alertMessage = errorData.error || this.errorMessage;
-                    return;
-                }
-                const data = await response.json();
-                this.formSubmitted = true;
-                //this.alertMessage = data.message || this.successMessage;
-                toast.show(data.message || this.successMessage, 'success');
-                this.formEl.reset();
-                sendAnalytics({
-                    category: 'ui-component',
-                    parentContext: null,
-                    tag: this.el.tagName.toLowerCase(),
-                    name: `${(_c = this.submitBtnLabel) === null || _c === void 0 ? void 0 : _c.toLowerCase()}/success` || '',
-                    action: 'click'
-                });
-            }
-            catch (err) {
-                this.hasError = true;
-                //when api is unreachable will trigger the error message
-                //this.alertMessage = `${err}`;
-                toast.show(`${err}`, 'error');
-            }
-            finally {
-                this.isSubmitting = false;
-                this.formSubmitting.emit(this.isSubmitting);
-            }
-        };
         this.setFormUrl = true;
         this.submitBtn = true;
         this.submitBtnLabel = 'Submit';
@@ -147,147 +29,112 @@ export class EdsForm {
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
         this.endpoint = undefined;
-        this.name = 'form';
+        this.name = 'eds-form';
         this.fields = [];
-        this.values = {};
         this.coupleAuth = false;
+        this.user = null;
+        this.draft = false;
+        this.draftData = {};
+        this.values = {};
         this.formSubmitted = false;
         this.hasError = false;
         this.errors = {};
         this.isSubmitting = false;
         this.alertMessage = null;
         this.isAuthenticated = false;
-        this.authUser = undefined;
         this.parsedFields = [];
     }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
-        this.authUser = event.detail.user;
-    }
-    componentDidLoad() {
+    async componentWillLoad() {
         this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
-        /*const links = this.el.querySelectorAll('eds-button');
+        const links = this.el.querySelectorAll('eds-button');
         links.forEach((link) => {
-          this.emitContext(link);
-        });*/
+            this.emitContext(link);
+        });
     }
-    /*emitContext(linkElement: HTMLElement) {
-      const event = new CustomEvent<ParentContextDetail>('parentContext', {
-        detail: {
-          componentName: this.el.tagName.toLowerCase(),
-          identifier: null
-        }
-      });
-  
-      linkElement.dispatchEvent(event);
-    }*/
-    // Visibility helper
-    isFieldVisible(field) {
-        if (!field.condition) {
-            return true;
+    async componentDidLoad() {
+        if (this.shouldFormProcessDraft) {
+            this.loadDraft();
         }
-        const parentValue = this.values[field.condition.field];
-        return parentValue === field.condition.value;
     }
-    // Validate individual fields dynamically
-    validateField(name, value, type, required, maxLength) {
-        const errors = [];
-        if (required && !value) {
-            errors.push(`${name} is required.`);
-        }
-        if (maxLength && typeof value === 'string' && value.length > maxLength) {
-            errors.push(`${name} must be at most ${maxLength} characters.`);
-        }
-        if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
-            errors.push('Invalid email format.');
-        }
-        return errors;
+    get shouldFormAcceptDraft() {
+        var _a;
+        return !!(((_a = this.user) === null || _a === void 0 ? void 0 : _a.token) && this.draft);
     }
-    validateFieldGroup(name, _type, required) {
-        // Find all eds-input-field components that contain this specific name
-        const groupFields = Array.from(this.formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
-        // Collect all input elements with the matching name inside those fields
-        const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
-        //console.log(`validateFieldGroup - Found ${groupElements.length} elements for ${name}:`, groupElements);
-        const isChecked = groupElements.some((el) => el.checked);
-        const errors = [];
-        if (required && !isChecked) {
-            errors.push(`At least one option in ${name} is required.`);
-        }
-        return errors;
+    get shouldFormProcessDraft() {
+        var _a;
+        return !!((_a = this.draftData) === null || _a === void 0 ? void 0 : _a._id);
+    }
+    parseFields(newValue) {
+        this.parsedFields = parseData(newValue);
     }
-    validateSingleBox(name, required) {
+    loadDraft() {
         var _a;
-        const errors = [];
-        // Find the eds-input-field that contains the input
-        const edsField = Array.from(this.formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
-        // If not found, handle the error or return early.
-        if (!edsField) {
-            if (required) {
-                errors.push(`${name} is required.`);
-            }
-            return errors;
+        if ((_a = this.draftData) === null || _a === void 0 ? void 0 : _a.completed) {
+            this.formSubmitted = true;
+            toast.show(this.draftData.message, 'success');
+            this.formEl.reset();
+            return;
         }
-        // Now query within the shadow root of the found component.
-        const checkboxElement = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
-        if (required && checkboxElement && !checkboxElement.checked) {
-            errors.push(`${name} is required.`);
+        this.populateFormWithDraftData(this.draftData);
+        return;
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    isFieldVisible(field) {
+        if (!field.condition) {
+            return true;
         }
-        return errors;
+        const parentValue = this.values[field.condition.field];
+        return parentValue === field.condition.value;
     }
     validateForm() {
-        this.errors = {};
-        this.hasError = false;
-        this.parsedFields.forEach((field) => {
-            if (field.type !== 'hidden') {
-                if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
-                    // Single checkbox validation
-                    const fieldErrors = this.validateSingleBox(field.name, field.required);
-                    if (fieldErrors.length > 0) {
-                        this.errors[field.name] = fieldErrors;
-                        this.hasError = true;
-                    }
-                }
-                else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
-                    const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
-                    if (fieldErrors.length > 0) {
-                        this.errors[field.name] = fieldErrors;
-                        this.hasError = true;
-                    }
-                }
-                else {
-                    const fieldElement = this.findFieldElement(field.name);
-                    if (fieldElement) {
-                        const value = fieldElement.value;
-                        const fieldErrors = this.validateField(field.name, value, field.type, field.required, field.maxlength);
-                        if (fieldErrors.length > 0) {
-                            this.errors[field.name] = fieldErrors;
-                            this.hasError = true;
-                        }
-                    }
-                }
+        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
+            if (!field.condition) {
+                return true;
             }
+            const parentValue = values[field.condition.field];
+            return parentValue === field.condition.value;
         });
+        this.errors = errors;
+        this.hasError = hasError;
     }
-    // Helper function to find elements in the shadow DOM
-    findFieldElement(name) {
-        const elements = Array.from(this.formEl.querySelectorAll('eds-input-field')); // Get all elements
-        for (const element of elements) {
-            if (element.shadowRoot) {
-                const shadowField = element.shadowRoot.querySelector(`[name="${name}"]`);
-                if (shadowField) {
-                    return shadowField;
+    populateFormWithDraftData(draftData) {
+        const { updatedValues } = getFormDraftData({
+            draftData,
+            parsedFields: this.parsedFields,
+            currentValues: this.values,
+            formEl: this.formEl,
+            isFieldVisible: (field, values) => {
+                if (!field.condition) {
+                    return true;
                 }
+                const parentValue = values[field.condition.field];
+                return parentValue === field.condition.value;
             }
-        }
-        return null;
+        });
+        this.values = updatedValues;
     }
-    async getFormData() {
+    getFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
+        // Add the form URL
+        if (this.setFormUrl && typeof window !== 'undefined') {
+            formData.set('form_url', window.location.href);
+        }
+        // Add the signed in user if exists
+        if (this.user) {
+            formData.set('form_user', (_a = this.user) === null || _a === void 0 ? void 0 : _a.email);
+        }
         // Get all input elements within `eds-input-field`
         const elements = Array.from(this.formEl.querySelectorAll('eds-input-field'));
         elements.forEach((element) => {
@@ -322,38 +169,156 @@ export class EdsForm {
         });
         return formData;
     }
-    parseFields(newValue) {
+    handleChange(e, field) {
+        const target = e.target;
+        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        // Emit an input event with message and current form values
+        this.form.emit({
+            event: 'change',
+            field: field.name,
+            value: target.value,
+            message: `${field.name} updated`,
+            data: this.getFormData()
+        });
+        if (this.shouldFormAcceptDraft) {
+            this.postFormDataWithoutValidation();
+        }
+    }
+    handleInput(e, field) {
+        const target = e.target;
+        // Update the field's value in state.
+        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        // Create a copy of the current errors.
+        const newErrors = Object.assign({}, this.errors);
+        // Use the utility to validate the field.
+        const fieldErrors = validateInputField(field, target.value, this.formEl);
+        if (fieldErrors.length > 0) {
+            newErrors[field.name] = fieldErrors;
+        }
+        else {
+            delete newErrors[field.name];
+        }
+        // Update the errors state and the hasError flag.
+        this.errors = newErrors;
+        this.hasError = Object.keys(newErrors).length > 0;
+    }
+    async handleSubmit(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.isSubmitting) {
+            return;
+        }
+        this.validateForm();
+        if (this.hasError) {
+            this.form.emit({
+                event: 'submit',
+                validated: false,
+                success: false,
+                message: this.errorMessage,
+                data: this.getFormData()
+            }); // Emit form status submit false validation error
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
+                action: 'click'
+            });
+            this.alertMessage = this.errorMessage;
+            return;
+        }
+        this.isSubmitting = true;
+        this.formSubmitted = false;
+        this.alertMessage = null;
+        this.errors = {};
+        const formData = await this.getFormData();
+        formData.set('draft', 'false');
+        formData.set('completed', 'true');
+        // If no endpoint is provided, just emit the data and stop here.
+        if (!this.endpoint) {
+            // Successful submission, since there’s no server to reject it.
+            this.form.emit({
+                event: 'submit',
+                success: true,
+                validated: true,
+                message: 'Form data validated successfully',
+                data: formData
+            });
+            // Reset form states
+            this.formSubmitted = true;
+            this.formEl.reset();
+            this.isSubmitting = false;
+            return;
+        }
+        // Log each entry in FormData to see file details
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
+        // Build headers based on auth settings.
+        const headers = { Authorization: `Bearer ${this.user.token}` };
         try {
-            if (typeof newValue === 'string') {
-                this.parsedFields = JSON.parse(newValue);
-            }
-            else if (Array.isArray(newValue)) {
-                this.parsedFields = newValue;
-            }
-            else if (newValue && typeof newValue === 'object') {
-                // In case a single object is passed, wrap it in an array.
-                this.parsedFields = newValue;
-            }
-            else {
-                this.parsedFields = [];
-            }
+            // Use the API utility to post the form data.
+            const data = await api.post(this.endpoint, formData, { headers });
+            this.form.emit({
+                event: 'submit',
+                success: true,
+                validated: true,
+                message: data.message,
+                data: formData
+            }); // Emit form status submit true
+            this.formSubmitted = true;
+            this.formEl.reset();
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: `${(_b = this.submitBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/success` || '',
+                action: 'click'
+            });
+        }
+        catch (err) {
+            this.hasError = true;
+            this.form.emit({
+                event: 'submit',
+                success: false,
+                validated: true,
+                message: err,
+                data: formData
+            }); // Emit form status submit error
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    async postFormDataWithoutValidation() {
+        var _a;
+        if (!this.endpoint) {
+            return;
+        }
+        const formData = await this.getFormData();
+        formData.set('draft', this.draft.toString());
+        const headers = { Authorization: `Bearer ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.token}` };
+        try {
+            await api.post(this.endpoint, formData, { headers });
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Error parsing fields prop:', error);
-            this.parsedFields = [];
+            throw error;
         }
     }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '3d4ae34d48c0551f9de6dacb50ceee15b487b5de', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '344c56dcba3de5a1b55255d794a78fb0f19d04b5' }, h("slot", { key: '3ca6d203458d67fa66840fac55f94d71acc2ee4d' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '7ea50f19b8810fb0294bc8527d1c86e74dfc2b69', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '29e821a2eb706c51fa303b1abf645baeea5ae9d4' }, h("slot", { key: 'b45d74e9a147ab1a932891210c7813d3bd118b07' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (h("div", { key: '22915285f3522f6d260e358eea964c59a9557a55', class: "mt-20" }, h("eds-button", { key: '9e2191ba8cc49d7ac2a6588c0fa468214773c791', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '8045c3dff26286a6735157b82afd56ec9001ba14', class: "mt-20" }, h("eds-alert", { key: 'dc8c8f74e8aada9023f110bb862afee1fb629601', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.submitBtn && (h("div", { key: '0a9b9027fc235cd099cc40903bd6711873b9868b', class: "mt-20" }, h("eds-button", { key: 'f7181c19d04a117817f556753cc95c1f49c9fa1c', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated) || this.formSubmitted, loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: 'b999356ec8fc57fc85c2f672a94e95f834d153ea', class: "mt-20" }, h("eds-alert", { key: '5a743b01991fb5d8f5358abc44639e790f5264ea', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     static get is() { return "eds-form"; }
     static get originalStyleUrls() {
@@ -509,7 +474,7 @@ export class EdsForm {
                 },
                 "attribute": "name",
                 "reflect": false,
-                "defaultValue": "'form'"
+                "defaultValue": "'eds-form'"
             },
             "fields": {
                 "type": "string",
@@ -546,6 +511,61 @@ export class EdsForm {
                 "attribute": "couple-auth",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "user": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "User",
+                    "resolved": "User",
+                    "references": {
+                        "User": {
+                            "location": "global",
+                            "id": "global::User"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The user object containing user information.\nThis is populated after a successful authentication."
+                },
+                "defaultValue": "null"
+            },
+            "draft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the form is in draft mode.\nMeaning it will attempt to post each input change invalidated."
+                },
+                "attribute": "draft",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "draftData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: any }",
+                    "resolved": "{ [key: string]: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The draft data the form will attempt to populate in the provided fields."
+                },
+                "defaultValue": "{}"
             }
         };
     }
@@ -558,24 +578,23 @@ export class EdsForm {
             "isSubmitting": {},
             "alertMessage": {},
             "isAuthenticated": {},
-            "authUser": {},
             "parsedFields": {}
         };
     }
     static get events() {
         return [{
-                "method": "formSubmitting",
-                "name": "formSubmitting",
+                "method": "form",
+                "name": "form",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event when the form's submission state changes."
+                    "text": ""
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n    data: any;\n  }",
+                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; data: any; }",
                     "references": {}
                 }
             }];
@@ -587,13 +606,4 @@ export class EdsForm {
                 "methodName": "parseFields"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "authStatusChanged",
-                "method": "onAuthStatusChanged",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }