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

package/dist/cjs/eds-timeline.cjs.entry.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
+const sharedUtils = require('./sharedUtils-8e287250.js');
 
 const EdsTimeline = class {
     constructor(hostRef) {
@@ -12,26 +13,7 @@ const EdsTimeline = class {
         this.parsedEvents = [];
     }
     parseEvents(newValue) {
-        let parsed;
-        // If events is a string, try to parse it
-        if (typeof newValue === 'string') {
-            try {
-                parsed = JSON.parse(newValue);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing timeline events JSON', e);
-                parsed = [];
-            }
-        }
-        // If events is already an array, use it directly
-        else if (Array.isArray(newValue)) {
-            parsed = newValue;
-        }
-        // Otherwise, default to an empty array
-        else {
-            parsed = [];
-        }
+        const parsed = sharedUtils.parseData(newValue);
         // Map over the parsed events to ensure boolean conversion for "completed"
         this.parsedEvents = Array.isArray(parsed)
             ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true })))
@@ -62,7 +44,7 @@ const EdsTimeline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '3e019420ddd4bfab7800567c7130299ea47205c6', class: "relative" }, index.h("div", { key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '1b52694d2e8c3656910c02680aa8ce2e78b02997', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (index.h("div", { key: '6d6eaccb876780be7c9e443a8d8a443fc0b4f779', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '122a6273fbd448a026fee899159872366cc01033', class: "relative" }, index.h("div", { key: 'bbf7359dacf3eb74f096d8c3e59344a6ceb67e8e', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: 'e86895cccaf84f269a4ae0117deb5ef8bfa6e501', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), index.h("div", { class: "flex items-center justify-center relative" }, event.completed ? (index.h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (index.h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), index.h("div", { class: `w-1/2 ${index$1 % 2 !== 0 ? 'pl-4' : ''}` }, index$1 % 2 !== 0 && (index.h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/cjs/eds-toast-manager.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2f63169d.js');
+const toastManager = require('./toastManager-4e9535f3.js');
+
+const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
+const EdsToastManagerStyle0 = edsToastManagerCss;
+
+const EdsToastManager = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toastId = 0;
+        this.toasts = [];
+    }
+    connectedCallback() {
+        // Initialize the ToastManager singleton with this element
+        toastManager.toast.init(this.hostElement);
+        // Listen for custom events
+        this.hostElement.addEventListener('show-toast', (event) => {
+            const { message, intent } = event.detail;
+            this.addToast(message, intent);
+        });
+    }
+    /**
+     * Adds a new toast.
+     */
+    addToast(message, intent) {
+        const id = this.toastId++;
+        this.toasts = [...this.toasts, { id, message, intent }];
+    }
+    /**
+     * Removes a toast by ID.
+     */
+    removeToast(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    render() {
+        return (index.h("div", { key: 'e01e6cf0931155f70153ba5de054c1174e364397', class: "toast-container" }, this.toasts.map((t) => (index.h("div", { key: t.id }, index.h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+EdsToastManager.style = EdsToastManagerStyle0;
+
+exports.eds_toast_manager = EdsToastManager;

package/dist/cjs/eds-toast.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2f63169d.js');
+const index$1 = require('./index-ab9fbefe.js');
+
+const edsToastCss = ".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.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)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n        0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-300)}.bg-success{background-color:var(--green-200)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-700)}.text-current{color:currentColor}.text-default{color:var(--black)}";
+const EdsToastStyle0 = edsToastCss;
+
+const toastStyles = index$1.cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+    variants: {
+        intent: {
+            default: 'bg-dark text-light',
+            success: 'bg-success text-dark',
+            error: 'bg-error text-light',
+            warning: 'bg-warning text-dark'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+const EdsToast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Dismisses the toast.
+         */
+        this.dismissToast = () => {
+            this.visible = false;
+        };
+        this.message = undefined;
+        this.intent = 'default';
+        this.duration = 5000;
+        this.visible = true;
+    }
+    componentDidLoad() {
+        const btn = this.el.shadowRoot.querySelector('eds-button');
+        this.emitContext(btn);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     * This event provides context information about the toast component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    connectedCallback() {
+        // Auto-dismiss the toast after the specified duration
+        this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+    }
+    disconnectedCallback() {
+        // Clear the timeout when the component is removed
+        clearTimeout(this.dismissTimeout);
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const classes = toastStyles({ intent: this.intent });
+        return (index.h("div", { class: classes, role: "alert", "aria-live": "assertive" }, index.h("div", { class: "flex items-center justify-between gap-4" }, index.h("span", { class: "f-ui-01" }, this.message), index.h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsToast.style = EdsToastStyle0;
+
+exports.eds_toast = EdsToast;

package/dist/cjs/eds-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 const analytics = require('./analytics-d8fb3fdd.js');
 
 const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
@@ -96,7 +96,7 @@ const EdsTooltip = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1635b034319df4827a62ed58267d81db277ad19d', class: "relative" }, index.h("slot", { key: '6cdfd0f6d456b984464c5091a2829cdba69ba895' }), this.isVisible && this.isPositioned && this.content && (index.h("div", { key: '7e736731dc700e0273fdfe15202426d2db086aef', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (index.h("div", { key: '0d00052874b171639b9185412d8a3a9f917e6df5', class: "relative" }, index.h("slot", { key: '2cb9cdc51248c3c6cedcaf8ee113530f2675b870' }), this.isVisible && this.isPositioned && this.content && (index.h("div", { key: 'af54333ca0c8cf44dcc2b779a7378a9ecf256877', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform

package/dist/cjs/eds-trl.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 
 const EdsTrl = class {
     constructor(hostRef) {
@@ -44,7 +44,7 @@ const EdsTrl = class {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (index.h("div", { key: 'a329a001d6275fcfe7df9bddf83bd289effe4151', class: "container mx-auto px-4 py-8" }, index.h("eds-table", { key: '93aebfd840b16416789b15eec0daa16d9126aa9f', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (index.h("div", { key: 'bd46e540a0dd3c09a91d1cff266b94a2bf9fba95', class: "container mx-auto px-4 py-8" }, index.h("eds-table", { key: 'd3ef10fc7e5ccd6029d1e62c2bb78765e78c8a13', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 };
 

package/dist/cjs/eds-user.cjs.entry.js

@@ -2,96 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
-const keycloak = require('./keycloak-93fc0315.js');
-const toastManager = require('./toastManager-4e9535f3.js');
+const index = require('./index-2f63169d.js');
 
 const EdsUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.authStatusChanged = index.createEvent(this, "authStatusChanged", 7);
-        /**
-         * 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 {
-                    keycloak.login();
-                }
-                catch (error) {
-                    toastManager.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 keycloak.logout();
-            }
-            catch (error) {
-                toastManager.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 keycloak.checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
-        if (!this.serverAvailable) {
-            toastManager.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 keycloak.initKeycloak({
-                url: this.keycloakUrl,
-                realm: this.keycloakRealm,
-                clientId: this.keycloakClientId
-            }, true);
-            if (keycloak.isAuthenticated()) {
-                this.user = keycloak.getUser();
-                this.authenticated = true;
-                this.authStatusChanged.emit({
-                    authenticated: this.authenticated,
-                    user: this.user
-                }); // Emit auth status change
-            }
-        }
-        catch (error) {
-            toastManager.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 (index.h("div", { key: '8fe0aaf06ed421d8ca6e512247b4d15b092c895f', class: "block" }, !this.authenticated ? (index.h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (index.h("div", { class: "flex items-center" }, index.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" }, index.h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '68bc37b43d006a35e088a647d41b2257fbef25a7', class: "block" }, index.h("div", { key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d', class: "flex items-center" }, index.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" }, index.h("div", { key: '2b1e9279c8d4feae16bf64c15837b61b945af447', class: "min-w-[280px] p-8" }, index.h("div", { key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, index.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 }), index.h("div", { key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a', class: "max-w-full" }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && index.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) && (index.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) && index.h("p", { key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a', class: "f-ui-03-light text-light mt-4" }, this.user.email))), index.h("div", { key: '3a68427dc603f0a3fb2652bfbea292eb718046dd', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, index.h("div", { key: '3f3f617385efc57502794f78079b8486b6801425', class: "border-softer mb-10 border-b-2 pb-16" }, index.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 })), index.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" }), index.h("slot", { key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7' })))))));
     }
     get hostEl() { return index.getElement(this); }
 };

package/dist/cjs/eds-vertical-stepper.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 
 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;
@@ -37,7 +37,7 @@ const EdsVerticalStepper = class {
     }
     render() {
         const steps = this.parsedSteps;
-        return (index.h("div", { key: '08fa2f85c49dbe217b2f9d068bee486e432f5315', class: "stepper-container" }, index.h("div", { key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2', class: "stepper" }, steps.map((step, index$1) => (index.h("div", { class: "step", key: index$1 }, index.h("div", { class: "step-label" }, index.h("span", null, step.label), index$1 === steps.length - 1 && index.h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index$1 && (index.h("div", { class: "step-content" }, index.h("p", null, step.description), index.h("div", { class: "step-buttons" }, index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (index.h("div", { key: '8a5ebfed582b25d828758e1762a063df6c745093', class: "" }, index.h("eds-alert", { key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb', intent: "success", message: "All steps completed - you're finished!" }), index.h("eds-button", { key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+        return (index.h("div", { key: '89344ad340f9eb8d20f463d3990ec4832cbdc900', class: "stepper-container" }, index.h("div", { key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383', class: "stepper" }, steps.map((step, index$1) => (index.h("div", { class: "step", key: index$1 }, index.h("div", { class: "step-label" }, index.h("span", null, step.label), index$1 === steps.length - 1 && index.h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index$1 && (index.h("div", { class: "step-content" }, index.h("p", null, step.description), index.h("div", { class: "step-buttons" }, index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (index.h("div", { key: '1e3272723281d9a10603b4d1e79badfdd6591cc5', class: "" }, index.h("eds-alert", { key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4', intent: "success", message: "All steps completed - you're finished!" }), index.h("eds-button", { key: 'a4d68698fa7831c7e2b6afae435979ccac46a726', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
     }
 };
 EdsVerticalStepper.style = EdsVerticalStepperStyle0;

package/dist/cjs/formUtils-4315a99c.js

@@ -0,0 +1,228 @@
+'use strict';
+
+// 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 };
+}
+
+exports.getFormDraftData = getFormDraftData;
+exports.getFormInitData = getFormInitData;
+exports.validateFormFields = validateFormFields;
+exports.validateInputField = validateInputField;

package/dist/cjs/incorrect-use-of-colors.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 
 const primary = [
     {
@@ -43,7 +43,7 @@ const IncorrectUseOfColors = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'cb22d37293f3b3b5fe3772cfe83234a5d81e1094', class: "container" }, index.h("eds-alert", { key: '9aa7a510440c32f92242b3e09f9e818cd2509b06', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), index.h("div", { key: '4d22cba75b7dd45a5a9a7d2b2eba5404875f1403', class: "flex" }, index.h("div", { key: 'c7f08b3e4ef2692c545edd4185a005ddd6526a23', class: "w-full" }, index.h("ul", { key: '28561abcdc93a4899a5d7481fdd47c439f734ff6', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'f8836d4805fdd416ee75712f749d5cee3f612559', class: "w-full" }, index.h("ul", { key: '5842acd55d3a827355f2814c709d057676fb5d0f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (index.h("div", { key: '6906da67ca0b6e67545b0daac34d476e4c80c75f', class: "container" }, index.h("eds-alert", { key: '0930bacd11792156dd000b14ed7e82a1fa41012f', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), index.h("div", { key: 'da773bedfa3591351b2425e14d084213e5d90fdb', class: "flex" }, index.h("div", { key: '894b7e13066eb40ee1ea19a62bf7a059407313c7', class: "w-full" }, index.h("ul", { key: 'fba6f9c9d34edd373841a9888971de7b08b6450d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'af7e2036fbe979299f2657a7ab3472d7d4196db2', class: "w-full" }, index.h("ul", { key: 'ad46e717be4200796424c6f72f022d6e163975ff', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };