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

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -1,6 +1,7 @@
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `EdsTabs` is a tabs component that renders a navigational tab bar.
  * Each tab can be configured with various properties such as label, URL, active state, and more.
@@ -49,7 +50,7 @@ export class EdsTabs {
     componentWillLoad() {
         this.parseTabs();
         this.setActiveIndex();
-        this.tabChange.emit({ tabId: this.id, index: 0 });
+        this.tab.emit({ tabId: this.id, index: 0 });
     }
     /**
      * Parses the `links` prop into an array of link objects.
@@ -64,22 +65,7 @@ export class EdsTabs {
      * @returns {any[]} Array of parsed link objects
      */
     parseTabs() {
-        if (Array.isArray(this.tabs)) {
-            this.parsedTabs = this.tabs;
-        }
-        else if (typeof this.tabs === 'string') {
-            try {
-                this.parsedTabs = JSON.parse(this.tabs);
-            }
-            catch (e) {
-                //console.error('Error parsing tabs prop:', e);
-                this.parsedTabs = [];
-            }
-        }
-        else {
-            // If the type is not an array or string, assume an empty array.
-            this.parsedTabs = [];
-        }
+        this.parsedTabs = parseData(this.tabs);
     }
     componentDidLoad() {
         this.scrollToActiveTab();
@@ -118,7 +104,7 @@ export class EdsTabs {
         // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
-        this.tabChange.emit({ tabId: this.id, index: index, name: tabLabel });
+        this.tab.emit({ tabId: this.id, index: index, name: tabLabel });
         sendAnalytics({
             category: 'ui-component',
             tag: this.el.tagName.toLowerCase(),
@@ -127,13 +113,14 @@ export class EdsTabs {
         });
     }
     render() {
-        return (h("div", { key: '5a0c7dbdd059b2a1efdf31e91725dd1d49c88bd4', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '74bb7e66b88d845359caf285430fca079abfab03', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '71ca3465da106b2d1ed59eca28eabfe60a1ac0fc', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            //const TabComponent = tab.active ? 'span' : 'a';
+        return (h("div", { key: '684231fc874298248db4aaf41f7845343b16ab3c', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '4083dc93dae192eb61b12a37864b1b12bdf048a6', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '0d0a707908275bc2e95ebcb0ec07fb24f12664c2', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
-            return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
+            return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
         })))));
     }
     static get is() { return "eds-tabs"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-tabs.css"]
@@ -185,8 +172,8 @@ export class EdsTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | { label: string; url: string; active: boolean; ariaLabel: string }[]",
-                    "resolved": "string | { label: string; url: string; active: boolean; ariaLabel: string; }[]",
+                    "original": "string | { label: string; url: string; active: boolean; ariaLabel?: string }[]",
+                    "resolved": "string | { label: string; url: string; active: boolean; ariaLabel?: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -208,8 +195,8 @@ export class EdsTabs {
     }
     static get events() {
         return [{
-                "method": "tabChange",
-                "name": "tabChange",
+                "method": "tab",
+                "name": "tab",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/shared-ui/eds-tabs/eds-tabs.stories.js

@@ -3,17 +3,12 @@ export default {
     component: 'eds-tabs',
     argTypes: {
         tabs: {
-            control: 'text',
-            defaultValue: JSON.stringify([
-                { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
-                { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
-                {
-                    label: 'Settings',
-                    url: '#',
-                    active: false,
-                    ariaLabel: 'Settings Tab'
-                }
-            ])
+            control: 'object',
+            defaultValue: [
+                { label: 'Home', url: '#', active: true },
+                { label: 'Profile', url: '#', active: false },
+                { label: 'Settings', url: '#', active: false }
+            ]
         }
     }
 };
@@ -22,7 +17,7 @@ const Template = (args) => {
     const container = document.createElement('div');
     // Insert the eds-tabs element and an output element for dynamic updates.
     container.innerHTML = `
-    <eds-tabs tabs='${args.tabs}'></eds-tabs>
+    <eds-tabs tabs='${JSON.stringify(args.tabs)}'></eds-tabs>
     <p id="active-tab-output" style="margin-top: 16px; font-family: sans-serif; font-weight: bold;"></p>
   `;
     // Query the eds-tabs element and the output element after the content is rendered.
@@ -32,9 +27,9 @@ const Template = (args) => {
         const output = container.querySelector('#active-tab-output');
         if (edsTabs) {
             // Listen for the "tabChange" event
-            edsTabs.addEventListener('tabChange', (event) => {
-                // Update the output text dynamically
-                output.textContent = `Active Tab Index: ${event.detail.index}, Tab Name: ${event.detail.name}`;
+            edsTabs.addEventListener('tab', (event) => {
+                const { index, name } = event.detail;
+                output.textContent = `Active Tab Index: ${index}, Tab Name: ${name}`;
             });
         }
     }, 0);
@@ -42,26 +37,18 @@ const Template = (args) => {
 };
 export const Default = Template.bind({});
 Default.args = {
-    tabs: JSON.stringify([
-        { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
-        { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
-};
-export const ProfileActive = Template.bind({});
-ProfileActive.args = {
-    tabs: JSON.stringify([
-        { label: 'Home', url: '#', active: false, ariaLabel: 'Home Tab' },
-        { label: 'Profile', url: '#', active: true, ariaLabel: 'Profile Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
+    tabs: [
+        { label: 'Home', url: '#', active: true },
+        { label: 'Profile', url: '#', active: false },
+        { label: 'Settings', url: '#', active: false }
+    ]
 };
 export const CustomTabs = Template.bind({});
 CustomTabs.args = {
-    tabs: JSON.stringify([
+    tabs: [
         { label: 'Dashboard', url: '#', active: true, ariaLabel: 'Dashboard Tab' },
         { label: 'Reports', url: '#', active: false, ariaLabel: 'Reports Tab' },
         { label: 'Analytics', url: '#', active: false, ariaLabel: 'Analytics Tab' },
         { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
+    ]
 };

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -1,5 +1,8 @@
 import { h } from "@stencil/core";
 import { toast } from "../../utils/toastManager";
+/**
+ * @internal
+ */
 export class EdsToastManager {
     constructor() {
         this.toastId = 0;
@@ -28,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '4e8781d164dd4f8aa47d17bc9f0632c0b49c173a', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: 'e01e6cf0931155f70153ba5de054c1174e364397', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-user/eds-user.js

@@ -1,180 +1,47 @@
 import { h } from "@stencil/core";
-import { isAuthenticated, getUser, login, logout, checkServerAvailability, initKeycloak } from "../../utils/keycloak";
-import { toast } from "../../utils/toastManager";
 /**
- * `EdsUser` is a user authentication component for managing and displaying
- * the user's authentication state using Keycloak. It provides login and logout
- * functionality, displays a user dropdown menu when authenticated, and emits
- * authentication status changes.
+ * `EdsUser` is a user component for managing and displaying
+ * the user's auth information. Displays a user dropdown menu when authenticated.
  *
- * This component is ideal for embedding into any layout requiring secure user authentication, with built-in integration for Keycloak and optional login/logout functionality.
+ * This component is ideal for embedding into any layout requiring user authentication.
  */
 export class EdsUser {
     constructor() {
-        /**
-         * Handles user login by invoking the Keycloak `login` function.
-         * Only triggers login if the user is not already authenticated.
-         */
-        this.handleLogin = () => {
-            if (!this.authenticated) {
-                try {
-                    login();
-                }
-                catch (error) {
-                    toast.show(error.message, 'error');
-                }
-            }
-        };
-        /**
-         * Handles user logout by invoking the Keycloak `logout` function.
-         * Resets the `authenticated` state to `false` after logout.
-         */
-        this.handleLogout = async () => {
-            try {
-                await logout();
-            }
-            catch (error) {
-                toast.show(error.message, 'error');
-            }
-            this.authenticated = false;
-            this.user = null;
-        };
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
-        this.user = null;
-        this.authenticated = false;
-        this.username = '';
-        this.serverAvailable = false;
+        this.user = undefined;
     }
     /**
      * Lifecycle method that runs when the component is about to load.
      * It initializes authentication by calling the `initAuth` method.
      */
-    async componentWillLoad() {
-        // Check if required props are provided (optional check)
-        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
-            // eslint-disable-next-line
-            console.error('Keycloak configuration props are missing.');
-            return;
-        }
-        this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
-        if (!this.serverAvailable) {
-            toast.show('Keycloak server is unavailable.', 'error');
-            return; // Do not proceed further
-        }
-        await this.initAuth();
-    }
-    /**
-     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-     * Sets the `authenticated` state and `user` data if the user is authenticated.
-     * Emits `authStatusChanged` event with the authentication status.
-     */
-    async initAuth() {
-        try {
-            await initKeycloak({
-                url: this.keycloakUrl,
-                realm: this.keycloakRealm,
-                clientId: this.keycloakClientId
-            }, true);
-            if (isAuthenticated()) {
-                this.user = getUser();
-                this.authenticated = true;
-                this.authStatusChanged.emit({
-                    authenticated: this.authenticated,
-                    user: this.user
-                }); // Emit auth status change
-            }
-        }
-        catch (error) {
-            toast.show(error.message, 'error');
-        }
+    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;
-        return (h("div", { key: '8fe0aaf06ed421d8ca6e512247b4d15b092c895f', class: "block" }, !this.authenticated ? (h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (h("div", { class: "flex items-center" }, h("eds-dropdown", { label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+        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' })))))));
     }
     static get is() { return "eds-user"; }
     static get properties() {
         return {
-            "keycloakUrl": {
-                "type": "string",
+            "user": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "{\n    email: string;\n    name: string;\n    given_name: string;\n    family_name: string;\n    preferred_username: string;\n  }",
+                    "resolved": "{ email: string; name: string; given_name: string; family_name: string; preferred_username: string; }",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL of the Keycloak server.\nThis is the base URL where your Keycloak instance is hosted."
-                },
-                "attribute": "keycloak-url",
-                "reflect": false
-            },
-            "keycloakRealm": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The Keycloak Realm.\nA realm in Keycloak is a space where you manage a set of users, roles,\ngroups, and credentials."
-                },
-                "attribute": "keycloak-realm",
-                "reflect": false
-            },
-            "keycloakClientId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The Keycloak Client ID.\nThe client ID represents the client application that Keycloak protects.\nIt's configured in the Keycloak admin console and used to identify the app\nrequesting authentication.\nExample: `my-client-app`"
-                },
-                "attribute": "keycloak-client-id",
-                "reflect": false
+                    "text": "The user object containing user information."
+                }
             }
         };
     }
-    static get states() {
-        return {
-            "user": {},
-            "authenticated": {},
-            "username": {},
-            "serverAvailable": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "authStatusChanged",
-                "name": "authStatusChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted when the authentication status changes.\nIt emits an object {authenticated, user} indicating the new authentication status and the user's information."
-                },
-                "complexType": {
-                    "original": "{\n    authenticated: boolean;\n    user: any;\n  }",
-                    "resolved": "{ authenticated: boolean; user: any; }",
-                    "references": {}
-                }
-            }];
-    }
     static get elementRef() { return "hostEl"; }
 }

package/dist/collection/shared-ui/eds-user/eds-user.stories.js

@@ -0,0 +1,45 @@
+export default {
+    title: 'Shared Ui/EdsUser',
+    component: 'eds-user',
+    argTypes: {
+        user: {
+            control: 'object',
+            description: 'User object containing authentication information'
+        }
+    },
+    args: {
+        user: {
+            given_name: 'John',
+            family_name: 'Doe',
+            preferred_username: 'johndoe',
+            name: 'John Doe',
+            email: 'john.doe@example.com'
+        }
+    }
+};
+export const Default = {
+    render: (args) => {
+        // Create a container element
+        const container = document.createElement('div');
+        container.innerHTML = `
+        <eds-header>
+          <div class="px-16">
+            <eds-user></eds-user>
+          </div>
+        </eds-header>
+      `;
+        // Grab the eds-user element and assign the user property
+        const edsUser = container.querySelector('eds-user');
+        edsUser.user = args.user;
+        return container;
+    },
+    args: {
+        user: {
+            given_name: 'John',
+            family_name: 'Doe',
+            preferred_username: 'johndoe',
+            name: 'John Doe',
+            email: 'john.doe@example.com'
+        }
+    }
+};

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsAppRoot {
+    constructor() {
+        this.isAuthenticated = false;
+    }
+    componentWillLoad() {
+        // Create a promise for the initKeycloak event.
+        const initKeycloakPromise = new Promise((resolve) => {
+            document.addEventListener('initKeycloak', (event) => {
+                //console.log('initKeycloak event received:', event.detail);
+                resolve(event.detail);
+            }, { once: true });
+        });
+        // Create a promise for the authStatusChanged event.
+        const authStatusPromise = new Promise((resolve) => {
+            document.addEventListener('authStatusChanged', (event) => {
+                var _a;
+                this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+                //console.log('authStatusChanged event received:', event.detail);
+                resolve(event.detail);
+            }, { once: true });
+        });
+        // Combine both promises. The splash screen will hide only when both have resolved.
+        this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
+    }
+    render() {
+        return (h("div", { key: 'f7ff644cea84bfc78190afcfa33f1f6d6c6de29a' }, h("eds-splash-screen", { key: '5e04f163eafe8f0d55394b8f508386bac013907e', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '94c9dc0546e48fe8f9e6fc17fde9dcbf75fbe3bc', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '975cfb32924ecf0a4bb7d8f4788792eae500e166' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+    }
+    static get is() { return "eds-app-root"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "isAuthenticated": {}
+        };
+    }
+}

package/dist/collection/utils/api.js

@@ -0,0 +1,27 @@
+// utils/api.ts
+async function checkResponse(response) {
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) {
+        // Optionally, throw an error or return a structured error object.
+        //throw new Error(data.error || `HTTP error! Status: ${response.status}`);
+        return null;
+    }
+    return data;
+}
+export async function get(url, options = {}) {
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: options.headers
+    });
+    return checkResponse(response);
+}
+export async function post(url, body, options = {}) {
+    // If the body is FormData, omit the 'Content-Type' header so the browser sets it correctly.
+    const headers = body instanceof FormData ? options.headers || {} : Object.assign({ 'Content-Type': 'application/json' }, options.headers);
+    const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: body instanceof FormData ? body : JSON.stringify(body)
+    });
+    return checkResponse(response);
+}

package/dist/collection/utils/eds-form/formUtils.js

@@ -0,0 +1,95 @@
+import { findFieldElement } from "./formValidators";
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+export 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.
+ */
+export 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 };
+}