@ebrains/react 0.7.0-alpha.0 → 0.8.0-alpha.0

package/eds-dropdown.entry.esm.js

@@ -1,156 +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 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsDropdownCss = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";
-const EdsDropdownStyle0 = edsDropdownCss;
-const EdsDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dropdown = createEvent(this, "dropdown", 7);
-    this.focusableItems = [];
-    /**
-     * Toggles the visibility of the dropdown and manages focus.
-     */
-    this.handleClick = () => {
-      var _a;
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.focusIndex = 0;
-        this.focusItem();
-      } else {
-        this.closeDropdown();
-      }
-      this.dropdown.emit({
-        expanded: this.isOpen
-      });
-      sendAnalytics({
-        category: 'ui-component',
-        parentContext: null,
-        tag: this.host.tagName.toLowerCase(),
-        name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-        action: this.isOpen ? 'expanded' : 'collapsed'
-      });
-    };
-    this.icon = 'chevron-down';
-    this.label = undefined;
-    this.rounded = false;
-    this.ariaLabel = 'Open dropdown';
-    this.asNav = true;
-    this.dropdownPos = 'left';
-    this.dropdownOffset = true;
-    this.intent = 'tertiary';
-    this.isOpen = false;
-    this.focusIndex = -1;
-  }
-  /**
-   * Closes the dropdown when a click occurs outside of it.
-   * @param {Event} e - The click event.
-   */
-  handleWindowClick(e) {
-    if (!this.host.contains(e.target)) {
-      this.closeDropdown();
-      this.dropdown.emit({
-        expanded: false
-      });
-    }
-  }
-  /**
-   * Handles keyboard navigation and accessibility within the dropdown.
-   * @param {KeyboardEvent} event - The keyboard event.
-   */
-  handleKeyDown(event) {
-    if (this.isOpen) {
-      const key = event.key;
-      switch (key) {
-        case 'Tab':
-          this.closeDropdown();
-          this.dropdown.emit({
-            expanded: false
-          });
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length;
-          this.focusItem();
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
-          this.focusItem();
-          break;
-      }
-    }
-  }
-  /**
-   * Closes the dropdown and resets focus.
-   */
-  closeDropdown() {
-    this.isOpen = false;
-    this.focusIndex = -1;
-    this.dropdown.emit({
-      expanded: false
-    });
-  }
-  /**
-   * Sets focus on the currently selected item in the dropdown.
-   */
-  focusItem() {
-    var _a;
-    (_a = this.focusableItems[this.focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  /**
-   * Lifecycle method that runs after the component has been added to the DOM.
-   * Initializes focusable items within the dropdown.
-   */
-  componentDidLoad() {
-    var _a;
-    this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
-  }
-  /**
-   * Renders the dropdown component and displays its content when open.
-   * @returns {JSX.Element} The rendered dropdown component.
-   */
-  render() {
-    return h("div", {
-      key: '3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0',
-      class: "z-focus relative",
-      ref: el => this.dropdownContent = el
-    }, h("eds-button", {
-      key: '7c69acb6d6213af2cec8c1e00c68d83a5d23d676',
-      label: this.label,
-      "aria-label": this.ariaLabel,
-      icon: this.icon,
-      intent: this.intent,
-      onClick: this.handleClick,
-      "aria-expanded": this.isOpen.toString(),
-      "aria-haspopup": "menu"
-    }), h("nav", {
-      key: '5048b1c3cb42418736d471c2331330afef49cbc5',
-      role: "menu",
-      class: {
-        'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
-        'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
-        'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
-        'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
-        'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
-        'rounded-lg': this.rounded
-      },
-      style: {
-        display: this.isOpen ? 'block' : 'none'
-      },
-      "aria-label": "Dropdown",
-      "aria-hidden": !this.isOpen
-    }, h("slot", {
-      key: '842f316e9a7910aa8b34823e883c54c1979668d1'
-    })));
-  }
-  get host() {
-    return getElement(this);
-  }
-};
-EdsDropdown.style = EdsDropdownStyle0;
-
-export { EdsDropdown as eds_dropdown };

package/eds-steps.entry.esm.js

@@ -1,89 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
-import { p as parseData } from './sharedUtils-a550989c.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
-const EdsStepsStyle0 = edsStepsCss;
-const EdsSteps = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.step = createEvent(this, "step", 7);
-    this.handleNext = () => {
-      this.activeStep = this.activeStep + 1;
-      if (this.activeStep < this.parsedSteps.length) {
-        this.step.emit(this.activeStep);
-      }
-    };
-    this.handleBack = () => {
-      if (this.activeStep > 0) {
-        this.activeStep = this.activeStep - 1;
-        this.step.emit(this.activeStep);
-      }
-    };
-    this.steps = [];
-    this.type = 'static';
-    this.activeStep = 0;
-  }
-  handleStepClick(index) {
-    this.step.emit(index);
-    // In linear mode, update the active step on header click.
-    if (this.type === 'linear') {
-      this.activeStep = index;
-    }
-  }
-  /**
-   * Parse the JSON string into an array of steps.
-   */
-  get parsedSteps() {
-    return parseData(this.steps);
-  }
-  render() {
-    const steps = this.parsedSteps;
-    if (this.type === 'linear') {
-      return h("div", null, h("div", {
-        class: "steps"
-      }, steps.map((step, index) => h("div", {
-        class: "step mb-28",
-        key: index
-      }, h("h3", {
-        onClick: () => this.handleStepClick(index)
-      }, step.title), this.activeStep === index && h("div", {
-        class: "content"
-      }, h("div", {
-        class: "f-body-02 text-lighter my-16"
-      }, step.content), h("eds-button", {
-        label: index === steps.length - 1 ? 'Finish' : 'Continue',
-        intent: "primary",
-        class: "next-btn",
-        onClick: this.handleNext
-      }), h("eds-button", {
-        label: "Back",
-        intent: "ghostInverse",
-        onClick: this.handleBack,
-        disabled: index === 0,
-        "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
-      }))))), this.activeStep === steps.length && h("div", {
-        class: "completed"
-      }, h("eds-alert", {
-        intent: "success",
-        message: "All steps completed - you're finished!"
-      })));
-    }
-    // Static mode: show all steps with their content, no navigation buttons.
-    return h("div", {
-      class: "steps"
-    }, steps.map((step, index) => h("div", {
-      class: "step mb-28",
-      key: index
-    }, h("h3", null, step.title), h("div", {
-      class: "content"
-    }, h("div", {
-      class: "f-body-02 text-lighter my-16"
-    }, step.content)))));
-  }
-};
-EdsSteps.style = EdsStepsStyle0;
-
-export { EdsSteps as eds_steps };

package/eds-user.entry.esm.js

@@ -1,95 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const EdsUser = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.user = undefined;
-  }
-  /**
-   * Lifecycle method that runs when the component is about to load.
-   * It initializes authentication by calling the `initAuth` method.
-   */
-  async componentWillLoad() {}
-  get initials() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const initials = `${((_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.given_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
-    return initials || ((_g = (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f;
-    return h("div", {
-      key: '68bc37b43d006a35e088a647d41b2257fbef25a7',
-      class: "block"
-    }, h("div", {
-      key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d',
-      class: "flex items-center"
-    }, h("eds-dropdown", {
-      key: '7f065f82c5845fd0ebc9c6b465ac56a695a99b77',
-      label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.preferred_username}`,
-      intent: "tertiary",
-      "aria-label": "User Menu",
-      "dropdown-pos": "right",
-      "dropdown-offset": "false",
-      icon: "chevron-down",
-      class: "text-default"
-    }, h("div", {
-      key: '2b1e9279c8d4feae16bf64c15837b61b945af447',
-      class: "min-w-[280px] p-8"
-    }, h("div", {
-      key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b',
-      class: "flex gap-x-16 pb-16 border-b-2 border-softer"
-    }, h("eds-avatar", {
-      key: '2b78a6768ecb101138ab742d812d407e1b4fdd89',
-      "first-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.given_name,
-      "last-name": (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name,
-      initials: this.initials,
-      color: "grey",
-      rounded: true,
-      "initials-strong": true
-    }), h("div", {
-      key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a',
-      class: "max-w-full"
-    }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && h("p", {
-      key: 'a644c3cdda0ce7bf2f62438a3866692f4222efeb',
-      class: "f-ui-01 text-default w-full text-ellipsis"
-    }, this.user.name), ((_e = this.user) === null || _e === void 0 ? void 0 : _e.preferred_username) && h("p", {
-      key: '2a6cf5f0324d27ebdfd2b331e5f232c23e544ad5',
-      class: "f-ui-03-light text-light mt-4"
-    }, this.user.preferred_username), ((_f = this.user) === null || _f === void 0 ? void 0 : _f.email) && h("p", {
-      key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a',
-      class: "f-ui-03-light text-light mt-4"
-    }, this.user.email))), h("div", {
-      key: '3a68427dc603f0a3fb2652bfbea292eb718046dd',
-      class: "text-default mt-16 flex w-full flex-col gap-y-8"
-    }, h("div", {
-      key: '3f3f617385efc57502794f78079b8486b6801425',
-      class: "border-softer mb-10 border-b-2 pb-16"
-    }, h("eds-link", {
-      key: '62fbc143f710605c7d840277dc90054a1162831d',
-      label: "My EBRAINS",
-      "aria-label": "My EBRAINS",
-      url: "https://www.ebrains.eu/dashboard",
-      intent: "primary",
-      "extra-class": "w-full",
-      external: true
-    })), h("eds-link", {
-      key: 1,
-      label: "Account Settings",
-      url: "https://iam.ebrains.eu/auth/realms/hbp/account/",
-      intent: "secondary",
-      icon: "arrow-diagonal",
-      external: true,
-      "extra-class": "w-full"
-    }), h("slot", {
-      key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7'
-    }))))));
-  }
-  get hostEl() {
-    return getElement(this);
-  }
-};
-
-export { EdsUser as eds_user };

package/eds-vertical-stepper.entry.esm.js

@@ -1,81 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsVerticalStepperCss = ":host{display:block}.stepper-container{margin:0 auto}.stepper{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.step{margin-bottom:24px}.step-label{counter-increment:step;font-size:1.25rem;font-weight:600;position:relative;margin-top:1em;margin-bottom:1em}.step-label::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.optional{font-size:0.8rem;color:#888;margin-left:8px}.step-content{margin-top:8px}.step-buttons{margin-top:12px}.step-buttons button{margin-right:8px;padding:6px 12px;font-size:0.875rem}.completed{padding:16px;border:1px solid #ddd;margin-top:16px;text-align:center}";
-const EdsVerticalStepperStyle0 = edsVerticalStepperCss;
-const EdsVerticalStepper = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.handleNext = () => {
-      if (this.activeStep < this.parsedSteps.length) {
-        this.activeStep = this.activeStep + 1;
-      }
-    };
-    this.handleBack = () => {
-      if (this.activeStep > 0) {
-        this.activeStep = this.activeStep - 1;
-      }
-    };
-    this.handleReset = () => {
-      this.activeStep = 0;
-    };
-    this.steps = '[]';
-    this.activeStep = 0;
-  }
-  get parsedSteps() {
-    try {
-      return JSON.parse(this.steps);
-    } catch (error) {
-      //console.error('Invalid steps JSON', error);
-      return [];
-    }
-  }
-  render() {
-    const steps = this.parsedSteps;
-    return h("div", {
-      key: '89344ad340f9eb8d20f463d3990ec4832cbdc900',
-      class: "stepper-container"
-    }, h("div", {
-      key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383',
-      class: "stepper"
-    }, steps.map((step, index) => h("div", {
-      class: "step",
-      key: index
-    }, h("div", {
-      class: "step-label"
-    }, h("span", null, step.label), index === steps.length - 1 && h("span", {
-      class: "f-ui-03 text-lightest ml-4"
-    }, "(Last step)")), this.activeStep === index && h("div", {
-      class: "step-content"
-    }, h("p", null, step.description), h("div", {
-      class: "step-buttons"
-    }, h("eds-button", {
-      label: index === steps.length - 1 ? 'Finish' : 'Continue',
-      class: "next-btn",
-      onClick: this.handleNext
-    }), h("eds-button", {
-      label: "Back",
-      intent: "ghostInverse",
-      onClick: this.handleBack,
-      disabled: index === 0,
-      "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
-    })))))), this.activeStep === steps.length && h("div", {
-      key: '1e3272723281d9a10603b4d1e79badfdd6591cc5',
-      class: ""
-    }, h("eds-alert", {
-      key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4',
-      intent: "success",
-      message: "All steps completed - you're finished!"
-    }), h("eds-button", {
-      key: 'a4d68698fa7831c7e2b6afae435979ccac46a726',
-      label: "Start again",
-      onClick: this.handleReset,
-      "extra-class": "mt-4"
-    })));
-  }
-};
-EdsVerticalStepper.style = EdsVerticalStepperStyle0;
-
-export { EdsVerticalStepper as eds_vertical_stepper };

package/formUtils-ac68474d.esm.js

@@ -1,247 +0,0 @@
-// 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
-  };
-}
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-function getFormDraftData({
-  draftData,
-  parsedFields,
-  currentValues,
-  formEl,
-  isFieldVisible
-}) {
-  // Pass 1: Update state for all fields.
-  const updatedValues = Object.assign({}, currentValues);
-  parsedFields.forEach(field => {
-    const value = draftData[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 = draftData[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
-  };
-}
-
-export { validateInputField as a, getFormDraftData as b, getFormInitData as g, validateFormFields as v };