@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

package/dist/esm/eds-form.entry.js

@@ -1,405 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a71b9a7.js';
-import { s as sendAnalytics } from './analytics-44b1416b.js';
-import { p as parseData } from './sharedUtils-a550989c.js';
-
-// utils/validators.ts
-function 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;
-}
-function validateFieldGroup(name, required, formEl) {
-    // Find all eds-input-field components that contain inputs with the given name.
-    const groupFields = Array.from(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 components.
-    const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
-    // Check if at least one input is checked.
-    const isChecked = groupElements.some((el) => el.checked);
-    const errors = [];
-    if (required && !isChecked) {
-        errors.push(`At least one option in ${name} is required.`);
-    }
-    return errors;
-}
-function validateSingleBox(name, required, formEl) {
-    var _a;
-    const errors = [];
-    // Find the eds-input-field component containing the input with the given name.
-    const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
-    // If no such field is found and it's required, return an error.
-    if (!edsField) {
-        if (required) {
-            errors.push(`${name} is required.`);
-        }
-        return errors;
-    }
-    // Query within the component's shadow root.
-    const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
-    if (required && inputEl && !inputEl.checked) {
-        errors.push(`${name} is required.`);
-    }
-    return errors;
-}
-
-/**
- * Finds the first input element for a given field name inside eds-input-field components.
- */
-function findFieldElement(formEl, name) {
-    const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-    for (const element of elements) {
-        if (element.shadowRoot) {
-            const input = element.shadowRoot.querySelector(`[name="${name}"]`);
-            if (input) {
-                return input;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Validates all fields and returns an object containing the errors and a flag indicating any errors.
- */
-function validateFormFields(parsedFields, formEl, values, 
-// eslint-disable-next-line
-isFieldVisible) {
-    const errors = {};
-    let hasError = false;
-    parsedFields.forEach((field) => {
-        // Only validate fields that are visible.
-        if (!isFieldVisible(field, values)) {
-            // If a field is hidden, clear its error.
-            delete errors[field.name];
-            return;
-        }
-        if (field.type !== 'hidden') {
-            if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
-                // Single checkbox or radio without multiple options
-                const fieldErrors = validateSingleBox(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
-                // Checkbox or radio group with options
-                const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else {
-                // For all other types, find the first matching element.
-                const inputEl = findFieldElement(formEl, field.name);
-                if (inputEl) {
-                    const value = inputEl.value;
-                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
-                    if (fieldErrors.length > 0) {
-                        errors[field.name] = fieldErrors;
-                        hasError = true;
-                    }
-                }
-            }
-        }
-    });
-    return { errors, hasError };
-}
-
-/**
- * Validates a field based on its type and returns an array of error messages.
- * @param field - The field configuration object.
- * @param value - The input value (if applicable).
- * @param formEl - The form element used for DOM queries.
- */
-function validateInputField(field, value, formEl) {
-    if (field.type === 'checkbox' || field.type === 'radio') {
-        if (field.options) {
-            return validateFieldGroup(field.name, field.required, formEl);
-        }
-        return validateSingleBox(field.name, field.required, formEl);
-    }
-    return validateField(field.name, value, field.type, field.required, field.maxlength);
-}
-
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-function getFormInitData({ initData, parsedFields, currentValues, formEl, isFieldVisible }) {
-    // Pass 1: Update state for all fields.
-    const updatedValues = Object.assign({}, currentValues);
-    parsedFields.forEach((field) => {
-        const value = initData[field.name];
-        if (value !== undefined) {
-            updatedValues[field.name] = value;
-        }
-    });
-    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
-    setTimeout(() => {
-        parsedFields.forEach((field) => {
-            // Only update if the field is visible.
-            if (isFieldVisible(field, updatedValues)) {
-                const value = initData[field.name];
-                if (value !== undefined) {
-                    if (field.type === 'checkbox' || field.type === 'radio') {
-                        // Query all eds-input-field components and update matching inputs.
-                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-                        elements.forEach((element) => {
-                            if (element.shadowRoot) {
-                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
-                                // Convert stored comma-separated value into a trimmed array.
-                                const valuesArray = value.split(',').map((v) => v.trim());
-                                inputs.forEach((inputEl) => {
-                                    // eslint-disable-next-line
-                                    inputEl.checked = valuesArray.includes(inputEl.value);
-                                });
-                            }
-                        });
-                    }
-                    else {
-                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
-                        const inputEl = findFieldElement(formEl, field.name);
-                        if (inputEl) {
-                            inputEl.value = value;
-                        }
-                    }
-                }
-            }
-        });
-    }, 50); // A 50ms delay to allow re-render
-    return { updatedValues };
-}
-
-const edsFormCss = ".mt-20{margin-top:1.25rem}";
-const EdsFormStyle0 = edsFormCss;
-
-const EdsForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.form = createEvent(this, "form", 7);
-        this.name = 'eds-form';
-        this.setFormUrl = true;
-        this.formBtn = true;
-        this.formBtnLabel = 'Submit';
-        this.errorMessage = 'Some fields in your form are incorrect.';
-        this.fields = [];
-        this.initData = {};
-        this.values = {};
-        this.isSubmitting = false;
-        this.hasError = false;
-        this.errors = {};
-        this.parsedFields = [];
-    }
-    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);
-        });
-    }
-    componentDidLoad() {
-        if (this.shouldFormProcessInitData) {
-            this.populateFormWithInitData(this.initData);
-        }
-    }
-    get shouldFormProcessInitData() {
-        var _a;
-        return !!((_a = this.initData) === null || _a === void 0 ? void 0 : _a._id);
-    }
-    parseFields(newValue) {
-        this.parsedFields = parseData(newValue);
-    }
-    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;
-    }
-    populateFormWithInitData(initData) {
-        const { updatedValues } = getFormInitData({
-            initData,
-            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() {
-        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);
-        }
-        // 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()
-        });
-    }
-    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;
-    }
-    handleSubmit() {
-        var _a, _b;
-        if (this.isSubmitting) {
-            return;
-        }
-        this.isSubmitting = true;
-        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.formBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/non-validated` || '',
-                action: 'click'
-            });
-            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}`);
-          }
-        });*/
-        this.form.emit({
-            event: 'submit',
-            success: true,
-            validated: true,
-            message: 'Form data validated successfully',
-            data: this.getFormData()
-        });
-        sendAnalytics({
-            category: 'ui-component',
-            parentContext: null,
-            tag: this.el.tagName.toLowerCase(),
-            name: `${(_b = this.formBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/validated` || '',
-            action: 'click'
-        });
-        // Reset form states
-        this.errors = {};
-        this.formEl.reset();
-        this.isSubmitting = false;
-        return;
-    }
-    render() {
-        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
-        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '695438941134ef6a3c43b70008b1904b03700743', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '870ff661aded11c890e4f144a970c5ab5120a61f' }, h("slot", { key: 'b1070ccc8984afe457d28a6bbf52255dcbbc9b33' }), 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.formBtn && (h("div", { key: '80e0af076f3c57124f8a1f6718a0d45cfd45c0cd', class: "mt-20" }, h("eds-button", { key: '51dd28fb2a6610983e50ddb60409b3acf18dba1b', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "fields": ["parseFields"]
-    }; }
-};
-EdsForm.style = EdsFormStyle0;
-
-export { EdsForm as eds_form };