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

package/dist/{components/keycloak.js → cjs/eds-login_2.cjs.entry.js}

@@ -1,3 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2f63169d.js');
+const toastManager = require('./toastManager-4e9535f3.js');
+
 /*
  * Copyright 2016 Red Hat, Inc. and/or its affiliates
  * and other contributors as indicated by the @author tags.
@@ -1945,4 +1952,140 @@ async function checkServerAvailability(url) {
     }
 }
 
-export { logout as a, isAuthenticated as b, checkServerAvailability as c, getUser as g, initKeycloak as i, login as l };
+const EdsLogin = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.keycloak = index.createEvent(this, "keycloak", 7);
+        this.auth = index.createEvent(this, "auth", 7);
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await 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 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.authenticated = false;
+        this.user = null;
+        this.serverAvailable = false;
+    }
+    /**
+     * 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) {
+            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 {
+            const res = await initKeycloak({
+                url: this.keycloakUrl,
+                realm: this.keycloakRealm,
+                clientId: this.keycloakClientId
+            }, true);
+            this.keycloak.emit({
+                init: res
+            });
+            if (isAuthenticated()) {
+                this.user = getUser();
+                this.authenticated = true;
+                this.auth.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
+            }
+        }
+        catch (error) {
+            toastManager.toast.show(error.message, 'error');
+        }
+    }
+    render() {
+        return (index.h("div", { key: '074566b791eeb9ea4a0558b4ed83a96e4b673356', class: "block" }, !this.authenticated && (index.h("eds-button", { key: '3a05ff97a90d73204eb77c5dad0d328294d72d3e', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+    }
+};
+
+const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const EdsSplashScreenStyle0 = edsSplashScreenCss;
+
+const EdsSplashScreen = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.splash = index.createEvent(this, "splash", 7);
+        this.inverse = false;
+        this.initPromise = undefined;
+        this.isVisible = true;
+    }
+    componentWillLoad() {
+        // If an initialization promise is provided, wait for it.
+        if (this.initPromise) {
+            this.initPromise
+                .then(() => {
+                // eslint-disable-next-line
+                console.log('Promises resolved');
+                this.hideSplash();
+            })
+                .catch((error) => {
+                // eslint-disable-next-line
+                console.error('Initialization error:', error);
+                this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
+                //this.hideSplash();
+            });
+        }
+    }
+    handleHideSplash() {
+        this.hideSplash();
+    }
+    hideSplash() {
+        this.isVisible = false;
+        this.splash.emit({ type: 'hidden', message: 'Splash screen hidden successfully' });
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, index.h("div", { class: "logo-container" }, this.inverse ? (index.h("eds-logo", { orientation: "vertical", type: "color-white" })) : (index.h("eds-logo", { orientation: "vertical", type: "color" }))), index.h("div", { class: "content-container" }, index.h("eds-spinner", { size: "1rem", thickness: "3px", "border-color": "var(--grey-400)", "bottom-color": "var(--grey-900)", background: "none", fullscreen: false })))));
+    }
+};
+EdsSplashScreen.style = EdsSplashScreenStyle0;
+
+exports.eds_login = EdsLogin;
+exports.eds_splash_screen = EdsSplashScreen;

package/dist/cjs/eds-logo-variations.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 EdsLogoVariations = class {
     constructor(hostRef) {
@@ -20,7 +20,7 @@ const EdsLogoVariations = class {
         }
     }
     render() {
-        return index.h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
+        return index.h("div", { key: '0b23fee608fcbe7059fce155bd65a0c0a4d16e07', class: "container" }, this.renderContent());
     }
 };
 

package/dist/cjs/eds-modal.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 edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
@@ -75,6 +75,18 @@ const EdsModal = class {
     async toggle() {
         this.isOpen = !this.isOpen;
     }
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    handleGlobalOpen() {
+        this.open();
+    }
+    /**
+     * Listens for global custom events to close the modal.
+     */
+    handleGlobalClose() {
+        this.close();
+    }
     /**
      * Closes the modal when the Escape key is pressed.
      */
@@ -86,9 +98,9 @@ const EdsModal = class {
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (index.h("div", { key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (index.h("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (index.h("div", { key: '980f396b79c32a36005b5f7813cc52b2e97457fa', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (index.h("div", { key: 'a2e4bb022c17c66266809f1a8dd706523a6ff07b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), index.h("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, index.h("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, index.h("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), index.h("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), index.h("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, index.h("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
+            onClick: () => this.close() })), index.h("div", { key: '53c0c2a9559a6a5116f88caa2a7d92810560521e', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, index.h("div", { key: '576b58f6bd78a969436c6a892f4dfec84a486cc4', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, index.h("span", { key: '63e682d4297a346426dc7559cf0d80e21cc51f4c', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), index.h("eds-button", { key: 'eed35b30903d65694f2944431e7f387a8ef3f3e9', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), index.h("div", { key: '6c6e673640ed2ef2ae6139ae1931a4b0a0db9aa9', class: "pt-8" }, index.h("slot", { key: 'eaaf2c17470681dc799b74f5eaebbe2496564c0e' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-progress-bar.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 edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
 const EdsProgressBarStyle0 = edsProgressBarCss;
@@ -21,7 +21,7 @@ const EdsProgressBar = class {
     }
     render() {
         const progressValue = this.value;
-        return (index.h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, index.h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (index.h("div", { key: '9a7fa42058034305b22818d464e7b633d7831d67', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, index.h("div", { key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
 };
 EdsProgressBar.style = EdsProgressBarStyle0;

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

@@ -2,37 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 
-const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";
+const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
 const EdsRatingStyle0 = edsRatingCss;
 
 const EdsRating = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.ratingChange = index.createEvent(this, "ratingChange", 7);
-        this.stars = 5;
-        this.label = 'Rate your experience';
-        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        this.rating = index.createEvent(this, "rating", 7);
+        this.ratingType = 'star';
+        this.ratingCount = 5;
         this.selectedRating = 0;
     }
     /**
-     * Parses the `textMapping` prop into an array of strings.
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
      */
-    get parsedMappings() {
-        if (typeof this.textMapping === 'object') {
-            return this.textMapping;
-        }
-        else if (typeof this.textMapping === 'string') {
-            try {
-                return JSON.parse(this.textMapping);
-            }
-            catch (e) {
-                //console.error('Error parsing textMapping prop:', e);
-                return [];
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb 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: this.selectedRating
             }
-        }
-        return [];
+        });
+        btnElement.dispatchEvent(event);
     }
     /**
      * Handles the click event on a star.
@@ -40,18 +46,18 @@ const EdsRating = class {
      */
     handleClick(rating) {
         this.selectedRating = rating;
-        this.ratingChange.emit(rating);
+        this.rating.emit(rating);
     }
     render() {
-        return (index.h("div", { key: 'b613863ad54ae9b381a5741bce4b188eff806ef0', class: "relative w-full flex flex-col" }, index.h("span", { key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837', class: "f-heading-05" }, this.label), index.h("div", { key: '37082eb4bbadf5c211c197f3f81501d0b0e61404', role: "radiogroup", "aria-label": this.label, class: "stars flex space-x-2" }, Array.from({ length: this.stars }, (_, index$1) => {
+        return (index.h("div", { key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index$1) => {
             const starRating = index$1 + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
-            const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
-            return (index.h("eds-button", { label: "\u2605", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": mappingText, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index$1 === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "small", "extra-class": "p-2" // Optional padding or styling for the star button
+            return (index.h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index$1 === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
             }));
-        })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (index.h("span", { key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6', class: "f-ui-04 text-lighter mt-4" }, this.parsedMappings[this.selectedRating - 1]))));
+        })));
     }
+    get el() { return index.getElement(this); }
 };
 EdsRating.style = EdsRatingStyle0;
 

package/dist/cjs/eds-section-core_2.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 edsSectionCoreCss = "";
 const EdsSectionCoreStyle0 = edsSectionCoreCss;
@@ -16,7 +16,7 @@ const EdsSectionCore = class {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (index.h(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, index.h("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
+        return (index.h(TagType, { key: '39c4280156ca46b83538de499baa9b152360b1b4' }, index.h("eds-section-heading", { key: '34da742e606f0e9bb485faac8aba1519eccc8934', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df' })));
     }
 };
 EdsSectionCore.style = EdsSectionCoreStyle0;
@@ -46,12 +46,12 @@ const EdsSectionHeading = class {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (index.h(TagType, { key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb', class: {
+        return (index.h(TagType, { key: '766d3f317904f2d735b7b531cf6ad582f22084e3', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, index.h(HeadingTag, { key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: '41a9db3f627cf93f58d14cdebf3b991be6a6facf', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2f63169d.js');
+
+const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}";
+const EdsSpinnerStyle0 = edsSpinnerCss;
+
+const EdsSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = '1rem';
+        this.thickness = '10px';
+        this.borderColor = 'var(--grey-400)';
+        this.bottomColor = 'var(--grey-900)';
+        this.background = 'var(--grey-200)';
+        this.fullscreen = false;
+    }
+    render() {
+        const spinnerStyle = Object.assign({ width: this.size, height: this.size, border: `${this.thickness} solid ${this.borderColor}`, borderBottomColor: this.bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
+        // Overlay style: use fixed positioning for fullscreen,
+        // and absolute positioning for inline mode.
+        const overlayStyle = this.fullscreen
+            ? {
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                width: '100vw',
+                height: '100vh',
+                zIndex: '9999999',
+                backgroundColor: this.background,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+            : {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: '100%',
+                zIndex: '1000',
+                backgroundColor: this.background,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            };
+        return (index.h(index.Host, { key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d' }, index.h("div", { key: 'acf09f69d43404f317240c0d24e644ec0d046cd7', class: "spinner-overlay", style: overlayStyle }, index.h("span", { key: '3728629fdff738a0b753cd499dc26052b1e3cb7b', class: "spinner", style: spinnerStyle }))));
+    }
+};
+EdsSpinner.style = EdsSpinnerStyle0;
+
+exports.eds_spinner = EdsSpinner;

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

@@ -2,23 +2,26 @@
 
 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 edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;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 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) {
         index.registerInstance(this, hostRef);
-        this.stepClick = index.createEvent(this, "stepClick", 7);
+        this.step = index.createEvent(this, "step", 7);
         this.handleNext = () => {
+            this.activeStep = this.activeStep + 1;
             if (this.activeStep < this.parsedSteps.length) {
-                this.activeStep = this.activeStep + 1;
+                this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
                 this.activeStep = this.activeStep - 1;
+                this.step.emit(this.activeStep);
             }
         };
         this.steps = [];
@@ -26,7 +29,7 @@ const EdsSteps = class {
         this.activeStep = 0;
     }
     handleStepClick(index) {
-        this.stepClick.emit(index);
+        this.step.emit(index);
         // In linear mode, update the active step on header click.
         if (this.type === 'linear') {
             this.activeStep = index;
@@ -36,21 +39,8 @@ const EdsSteps = class {
      * Parse the JSON string into an array of steps.
      */
     get parsedSteps() {
-        if (typeof this.steps === 'string') {
-            try {
-                const stepsStr = this.steps;
-                return JSON.parse(stepsStr);
-            }
-            catch (error) {
-                //console.error('Invalid steps JSON', error);
-                return [];
-            }
-        }
-        return this.steps;
+        return sharedUtils.parseData(this.steps);
     }
-    /*private handleReset = () => {
-      this.activeStep = 0;
-    };*/
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {

package/dist/cjs/eds-svg-repository.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 eu = require('./eu-b9665157.js');
 const logoColor = require('./logo-color-6c787ac1.js');
 const logoWhiteNoBg = require('./logo-white-no-bg-4a0e0f4b.js');
@@ -28,6 +28,9 @@ const menu = require('./menu-7050a6d1.js');
 const more = require('./more-1d3dd8bc.js');
 const user = require('./user-a3c2230f.js');
 const copy = require('./copy-53102d0c.js');
+const thumbsUp = require('./thumbs-up-411babb8.js');
+const thumbsDown = require('./thumbs-down-714036b1.js');
+const star = require('./star-942eee9f.js');
 
 const color = `  <svg width="20" height="20" viewBox="0 0 36 36">
     <path fill="#e24329" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"></path>
@@ -290,7 +293,10 @@ const svgs = /*#__PURE__*/Object.freeze({
   search: search.search,
   success: success.success,
   warning: warning,
-  unknown: unknown
+  unknown: unknown,
+  thumbsUp: thumbsUp.thumbsUp,
+  thumbsDown: thumbsDown.thumbsDown,
+  star: star.star
 });
 
 const EdsSvgRepository = class {
@@ -318,7 +324,7 @@ const EdsSvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (index.h("eds-table", { key: 'a7d7fa426da72e174880a300202390c1016b74df', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        return (index.h("eds-table", { key: 'e4c454638f02e043a5ad466ee95558be8723d214', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     get hostEl() { return index.getElement(this); }
 };

package/dist/cjs/eds-switch.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 edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}";
 const EdsSwitchStyle0 = edsSwitchCss;
@@ -26,11 +26,11 @@ const EdsSwitch = class {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (index.h("div", { key: 'd4c727cbb562921b2bcba269e84f25c359c7061b', class: "switch-container" }, this.labelOff && index.h("span", { key: '90b18fff27bd21501466deb5879e5fe6ff607043', class: "switch-label switch-label--off" }, this.labelOff), index.h("button", { key: '8675f5d9f972d3932710fa7f9b28f74f95a83003', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (index.h("div", { key: '624776d666ada7b31cb8e84b08380b888451b1a5', class: "switch-container" }, this.labelOff && index.h("span", { key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd', class: "switch-label switch-label--off" }, this.labelOff), index.h("button", { key: '8cb4594687313076f18f30fc26062e1440ae0ab9', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, index.h("span", { key: '26aa30a01b10419c1665b1fd58b5696a02d1504a', class: "switch-handle" })), this.labelOn && index.h("span", { key: '3680d67555e9193a97e129c0639b411263e070a8', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, index.h("span", { key: '88897b4368c337ea2dc4a017a8503171117a2070', class: "switch-handle" })), this.labelOn && index.h("span", { key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e', class: "switch-label switch-label--on" }, this.labelOn)));
     }
 };
 EdsSwitch.style = EdsSwitchStyle0;