@ebrains/react 0.8.0-alpha.0 → 0.9.0-beta

package/eds-form.entry.esm.js

@@ -1,473 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import { p as parseData } from './sharedUtils-a550989c.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-// 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 };