@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

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

@@ -1,609 +0,0 @@
-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
- * success/error messages and supports various input types and configurations.
- *
- * Key Features:
- * - Configurable validation for fields, including dynamic field validation.
- * - Customizable success and error messages displayed upon submission.
- * - Optionally includes a submit button, which can display a loading state during submission.
- * - Supports file upload, hidden fields, and dynamic field parsing.
- * - Emits `formSubmitting` event when the form is submitting.
- *
- * This component is ideal for implementing complex forms with specific validation and submission behaviors.
- */
-export class EdsForm {
-    constructor() {
-        this.setFormUrl = true;
-        this.submitBtn = true;
-        this.submitBtnLabel = 'Submit';
-        this.successMessage = 'Your message has been sent.';
-        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 = 'eds-form';
-        this.fields = [];
-        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.parsedFields = [];
-    }
-    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');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    async componentDidLoad() {
-        if (this.shouldFormProcessDraft) {
-            this.loadDraft();
-        }
-    }
-    get shouldFormAcceptDraft() {
-        var _a;
-        return !!(((_a = this.user) === null || _a === void 0 ? void 0 : _a.token) && this.draft);
-    }
-    get shouldFormProcessDraft() {
-        var _a;
-        return !!((_a = this.draftData) === null || _a === void 0 ? void 0 : _a._id);
-    }
-    parseFields(newValue) {
-        this.parsedFields = parseData(newValue);
-    }
-    loadDraft() {
-        var _a;
-        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;
-        }
-        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;
-        }
-        const parentValue = this.values[field.condition.field];
-        return parentValue === field.condition.value;
-    }
-    validateForm() {
-        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;
-    }
-    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;
-            }
-        });
-        this.values = updatedValues;
-    }
-    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) => {
-            if (element.shadowRoot) {
-                // Get input/textarea/select from the shadow DOM
-                const input = element.shadowRoot.querySelector('input, textarea, select');
-                if (input && input.name) {
-                    if (input.type === 'checkbox' || input.type === 'radio') {
-                        // Handle checkboxes and radio buttons
-                        const checkboxes = Array.from(element.shadowRoot.querySelectorAll(`input[name="${input.name}"]:checked`));
-                        const values = checkboxes.map((checkbox) => checkbox.value);
-                        formData.append(input.name, values.join(',')); // Join multiple values with a comma
-                    }
-                    else if (input.type === 'file') {
-                        // Handle file uploads.
-                        const fileInput = input;
-                        if (fileInput.files && fileInput.files.length > 0) {
-                            // If multiple files are allowed, you can append them all.
-                            Array.from(fileInput.files).forEach((file) => {
-                                // You can either append each file under the same name (if your backend expects an array)
-                                // or you can give them unique names. Here we use the same name.
-                                formData.append(fileInput.name, file);
-                            });
-                        }
-                    }
-                    else {
-                        // Handle other input types
-                        formData.append(input.name, input.value);
-                    }
-                }
-            }
-        });
-        return formData;
-    }
-    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 {
-            // 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) {
-            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: '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.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() {
-        return {
-            "$": ["eds-form.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-form.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "setFormUrl": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes the current form URL in the submission data."
-                },
-                "attribute": "set-form-url",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "submitBtn": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes a submit button in the form."
-                },
-                "attribute": "submit-btn",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "submitBtnLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes a submit button in the form."
-                },
-                "attribute": "submit-btn-label",
-                "reflect": false,
-                "defaultValue": "'Submit'"
-            },
-            "successMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The message displayed when the form submission is successful."
-                },
-                "attribute": "success-message",
-                "reflect": false,
-                "defaultValue": "'Your message has been sent.'"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The message displayed when the form submission fails."
-                },
-                "attribute": "error-message",
-                "reflect": false,
-                "defaultValue": "'Some fields in your form are incorrect.'"
-            },
-            "submitBtnHintMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The message displayed when the form submission fails."
-                },
-                "attribute": "submit-btn-hint-message",
-                "reflect": false,
-                "defaultValue": "'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.'"
-            },
-            "endpoint": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The API endpoint where the form data will be submitted."
-                },
-                "attribute": "endpoint",
-                "reflect": false
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the form, used for grouping inputs and identifying the form."
-                },
-                "attribute": "name",
-                "reflect": false,
-                "defaultValue": "'eds-form'"
-            },
-            "fields": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | any[]",
-                    "resolved": "any[] | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
-                },
-                "attribute": "fields",
-                "reflect": false,
-                "defaultValue": "[]"
-            },
-            "coupleAuth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Couping Auth and Submit button state\nSubmit button's state (disabled) is coupled with the Users' auth state - if user auth true then submit btn is enabled\nThis useful when the component is used as Survey and more types."
-                },
-                "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": "{}"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "values": {},
-            "formSubmitted": {},
-            "hasError": {},
-            "errors": {},
-            "isSubmitting": {},
-            "alertMessage": {},
-            "isAuthenticated": {},
-            "parsedFields": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "form",
-                "name": "form",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "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": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "fields",
-                "methodName": "parseFields"
-            }];
-    }
-}