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

package/{keycloak-d502ec16.esm.js → eds-login_2.entry.esm.js}

@@ -1,3 +1,9 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index.esm2.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
 /*
  * Copyright 2016 Red Hat, Inc. and/or its affiliates
  * and other contributors as indicated by the @author tags.
@@ -1641,5 +1647,170 @@ async function checkServerAvailability(url) {
     return false;
   }
 }
+const EdsLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.keycloak = createEvent(this, "keycloak", 7);
+    this.auth = 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) {
+          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.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) {
+      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) {
+      toast.show(error.message, 'error');
+    }
+  }
+  render() {
+    return h("div", {
+      key: 'dace7b16af2f945e4981c9ef139f4c2ae94e130c',
+      class: "block"
+    }, !this.authenticated && h("eds-button", {
+      key: 'a8d0bd545e8ae4a159b5977d50d05ae27dec7df3',
+      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) {
+    registerInstance(this, hostRef);
+    this.splash = 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 h(Host, null, h("div", {
+      class: "splash-overlay",
+      style: {
+        background: this.inverse ? 'black' : 'var(--grey-200)'
+      }
+    }, h("div", {
+      class: "logo-container"
+    }, this.inverse ? h("eds-logo", {
+      orientation: "vertical",
+      type: "color-white"
+    }) : h("eds-logo", {
+      orientation: "vertical",
+      type: "color"
+    })), h("div", {
+      class: "content-container"
+    }, h("eds-spinner", {
+      size: "1rem",
+      thickness: "3px",
+      "border-color": "var(--grey-400)",
+      "bottom-color": "var(--grey-900)",
+      background: "none",
+      fullscreen: false
+    }))));
+  }
+};
+EdsSplashScreen.style = EdsSplashScreenStyle0;
 
-export { logout as a, isAuthenticated as b, checkServerAvailability as c, getUser as g, initKeycloak as i, login as l };
+export { EdsLogin as eds_login, EdsSplashScreen as eds_splash_screen };

package/eds-logo-variations.entry.esm.js

@@ -20,7 +20,7 @@ const EdsLogoVariations = class {
   }
   render() {
     return h("div", {
-      key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc',
+      key: '31bd93b3412b859adc59f6a4fe67018bf9c13336',
       class: "container"
     }, this.renderContent());
   }

package/eds-modal.entry.esm.js

@@ -73,6 +73,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.
    */
@@ -85,39 +97,40 @@ const EdsModal = class {
     // Generate a unique id for the title so we can reference it for aria-labelledby.
     const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
     return h("div", {
-      key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7',
+      key: '456972d43bddeec93053c1518ca35dff028f0416',
+      id: "eds-modal",
       class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId
     }, this.isOpen && h("div", {
-      key: '40a2febed5d0ec15d5370183c97cfd05abd72007',
+      key: 'f3b84d1086f70f7863691835fe8984a4ff091b8f',
       class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
       ,
 
       onClick: () => this.close()
     }), 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`
+      key: '5038d3564881f4580e63a1afd883affa0aee8750',
+      class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center`
     }, h("div", {
-      key: 'e1cba5879bc488a99b896c48c8a780336b2195e7',
+      key: '4ce4d6f11afc552579a35f23901bc79e2ae19274',
       class: "flex justify-between items-center border-b-2 border-softer pb-8"
     }, h("span", {
-      key: '8f018e3d2890346d23e7dcb115676051048bcacb',
+      key: 'a9475d9cdcd4d3a1d68bce973f672621a30c53d4',
       id: titleId,
       class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
     }, this.title), h("eds-button", {
-      key: '4ae4013dd45573648817ac95ee4370ed615aa6a0',
+      key: 'c1e32fb266333856de6f0e63757fca02778330a9',
       intent: "tertiary",
       icon: "close",
       "aria-label": "Close modal",
       onClick: () => this.close(),
       "extra-class": "ml-8"
     })), h("div", {
-      key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2',
+      key: '58b1d9a3228516a1de31a81c6cd3a2696c65ce5f',
       class: "pt-8"
     }, h("slot", {
-      key: '60917e9f750bfd7948e580acc817cffe6424608a'
+      key: '0d81e88fcaa138bd746cc894543f264e4a3afb2f'
     }))));
   }
   get el() {

package/eds-pagination_2.entry.esm.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
 import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -160,7 +161,7 @@ const EdsPagination = class {
       this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
         current: parseInt(link.label) === newPage
       }) : link);
-      const pageChangeEvent = new CustomEvent('pageChange', {
+      const pageChangeEvent = new CustomEvent('page', {
         detail: newPage,
         bubbles: true,
         composed: true
@@ -171,12 +172,12 @@ const EdsPagination = class {
   }
   render() {
     return h("div", {
-      key: '8c8418eec263acc153a928b752775458f897504f'
+      key: '4ebae5738982b21456e2852babeef2f5e2b4b1e0'
     }, this.total > 0 && this.mode === 'default' && h("p", {
-      key: '02a5a69772a4812f10b29e8df117b72df210614d',
+      key: '9c18413928a471adb2b6964c78ea3339f251c81b',
       class: "f-ui-03 text-lightest mb-28 w-full text-center"
     }, h("span", {
-      key: 'ef9804843100c722643c24e31a05f86f2d55efa0',
+      key: '3d9d08eaaf7944ef1a6aba9b0912b7d9ebb58e28',
       class: "sr-only"
     }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
       "aria-label": "Pagination"
@@ -263,6 +264,9 @@ const EdsTableStyle0 = edsTableCss;
 const EdsTable = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.handleResize = () => {
+      this.updateContainerWidth();
+    };
     this.data = null;
     this.endpoint = null;
     this.config = {};
@@ -271,12 +275,13 @@ const EdsTable = class {
     this.searchEnabled = false;
     this.hostWidth = undefined;
     this.columnSize = 'default';
-    this.tableData = [];
+    this.tbData = [];
     this.columns = [];
     this.currentPage = 1;
     this.parsedConfig = {};
     this.totalRows = 0;
     this.searchQuery = '';
+    this.containerWidth = 0;
   }
   handleDataChange() {
     this.parseData();
@@ -289,25 +294,42 @@ const EdsTable = class {
     this.data ? this.parseData() : this.endpoint && this.fetchData();
   }
   componentDidLoad() {
+    this.updateContainerWidth();
+    window.addEventListener('resize', this.handleResize);
     this.setupPaginationListener();
   }
   componentDidUpdate() {
     this.setupPaginationListener();
   }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  updateContainerWidth() {
+    // Use hostWidth prop if provided; otherwise, measure parent element
+    if (this.hostWidth && this.hostWidth.trim() !== '') {
+      this.containerWidth = Number(this.hostWidth);
+    } else if (this.hostEl.parentElement instanceof HTMLElement) {
+      this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+    } else {
+      this.containerWidth = 400;
+    }
+  }
   parseData() {
     try {
-      this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
-      this.totalRows = this.tableData.length;
+      this.tbData = parseData(this.data);
+      //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+      this.totalRows = this.tbData.length;
       this.updateColumns();
       this.currentPage = 1;
     } catch (error) {
       // eslint-disable-next-line
       console.error('Failed to parse data:', error);
-      this.tableData = [];
+      this.tbData = [];
     }
   }
   parseConfig() {
     try {
+      //this.parsedConfig = parseData(this.config);
       this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
     } catch (error) {
       // eslint-disable-next-line
@@ -331,12 +353,12 @@ const EdsTable = class {
     }
     const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
     if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-      paginationEl.addEventListener('pageChange', event => this.handlePageChange(event.detail));
+      paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
       paginationEl.setAttribute('listener-attached', 'true');
     }
   }
   getFilteredRows() {
-    return this.tableData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+    return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
   }
   getPaginatedRows() {
     const filteredRows = this.getFilteredRows();
@@ -376,7 +398,7 @@ const EdsTable = class {
     return this.paginationEnabled && this.totalRows > this.rowsPerPage;
   }
   updateColumns() {
-    this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+    this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
   }
   getVisibleColumnsCount() {
     return this.columns.filter(column => {
@@ -394,18 +416,17 @@ const EdsTable = class {
     return divisionFactor;
   }
   render() {
-    // Get the paginated rows and calculate the last page.
+    // Use containerWidth state that is updated on resize.
+    const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+    // Calculate the number of visible columns and the column width.
+    const visibleColumnsCount = this.getVisibleColumnsCount();
+    const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
     const paginatedRows = this.getPaginatedRows();
     const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-    // Determine the number of visible columns (i.e., those not hidden via config)
-    const visibleColumnsCount = this.getVisibleColumnsCount();
-    /// Calculate container width based on the optional prop or parent's measured width.
-    const containerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.hostEl.parentElement instanceof HTMLElement ? this.hostEl.parentElement.getBoundingClientRect().width : this.hostEl.getRootNode().host instanceof HTMLElement ? this.hostEl.getRootNode().host.getBoundingClientRect().width : 400;
-    const columnWidth = visibleColumnsCount > 0 ? Math.floor(containerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
     return h("div", {
-      key: '66ca59804bc8054655ed0d942104516fe4cd259b'
+      key: 'a9df6351c49bb17abebfaf3640c71a7c7d15cb61'
     }, this.searchEnabled && h("div", {
-      key: 'df7267fc443da042e4b6ff81ded5800a2213bd73'
+      key: 'feb5708050593e791835456e6d2244332cee6062'
     }, h("eds-input-field", {
       key: 1,
       name: "search",
@@ -415,26 +436,26 @@ const EdsTable = class {
       // @ts-ignore
       onInput: event => this.handleSearch(event)
     })), h("div", {
-      key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36',
+      key: '88dcb3d9e984a77f54735fa352c811dbf4745838',
       class: "mt-20"
     }, h("table", {
-      key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca',
+      key: '32ff7b76066a96bce51f885e8339c258fdecd0c6',
       class: "block overflow-x-auto mt-6 p-0"
     }, h("thead", {
-      key: '8b844806cfef10d1a59da54a385ee8ed6c167050'
+      key: '9f4bbf0725c618c8c2f8a3b90d6d2f2a7f9c0186'
     }, h("tr", {
-      key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a',
+      key: 'd8f24a31aad07b667ae9cc06257ddddf529f8e31',
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
       var _a;
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
         class: "m-0 py-8 border border-softer f-ui-02 break-words",
         style: {
-          minWidth: `${columnWidth - 5}px`
+          minWidth: `${columnWidth - 4}px`
         }
       }, column);
     }))), h("tbody", {
-      key: '93dfd3abd196779c288f85bb6a357ad3e9c01418'
+      key: '932e2f9cbd51d1115eef42f8b1acb7bb58ccdab7'
     }, paginatedRows.map(row => h("tr", {
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
@@ -442,14 +463,14 @@ const EdsTable = class {
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
         class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
         style: {
-          minWidth: `${columnWidth - 5}px`
+          minWidth: `${columnWidth - 4}px`
         }
       }, this.renderCell(row[column], column));
     })))))), this.shouldEnablePagination() && h("div", {
-      key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58',
+      key: '6368d38cec298dc8efa1a790d6b0cb93357f0ae5',
       class: "mt-20"
     }, h("eds-pagination", {
-      key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7',
+      key: '2183eb4a6861a0e42538706bd0c9fe10a1e5d8bd',
       currentPage: this.currentPage,
       lastPage: lastPage,
       perPage: this.rowsPerPage,

package/eds-progress-bar.entry.esm.js

@@ -20,7 +20,7 @@ const EdsProgressBar = class {
   render() {
     const progressValue = this.value;
     return h("div", {
-      key: '0f47fedbf9d44887f65b399e184215f0937b1df1',
+      key: '259c247cbf6269d1118b652c70cc45e6ea9192b5',
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -28,7 +28,7 @@ const EdsProgressBar = class {
       "aria-valuetext": `${progressValue}%`,
       class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
     }, h("div", {
-      key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390',
+      key: 'e6141a6aa1eb8d1f9562028d95f6dfffc2777b11',
       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}%`

package/eds-rating.entry.esm.js

@@ -1,34 +1,42 @@
-import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-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) {
     registerInstance(this, hostRef);
-    this.ratingChange = createEvent(this, "ratingChange", 7);
-    this.stars = 5;
-    this.label = 'Rate your experience';
-    this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+    this.rating = 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.
@@ -36,42 +44,34 @@ const EdsRating = class {
    */
   handleClick(rating) {
     this.selectedRating = rating;
-    this.ratingChange.emit(rating);
+    this.rating.emit(rating);
   }
   render() {
     return h("div", {
-      key: 'b613863ad54ae9b381a5741bce4b188eff806ef0',
-      class: "relative w-full flex flex-col"
-    }, h("span", {
-      key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837',
-      class: "f-heading-05"
-    }, this.label), h("div", {
-      key: '37082eb4bbadf5c211c197f3f81501d0b0e61404',
+      key: '34344f12d4ca8a80fe7c96537d417c199421e139',
       role: "radiogroup",
-      "aria-label": this.label,
-      class: "stars flex space-x-2"
+      class: "stars flex space-x-1 my-8"
     }, Array.from({
-      length: this.stars
+      length: this.ratingCount
     }, (_, index) => {
       const starRating = index + 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 h("eds-button", {
-        label: "\u2605",
+        icon: this.ratingType,
         role: "radio",
         "aria-checked": isSelected ? 'true' : 'false',
-        "aria-label": mappingText,
+        "aria-label": this.ratingType,
         onClick: () => this.handleClick(starRating),
         tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
         intent: isSelected ? 'primary' : 'ghost',
-        size: "small",
+        size: "large",
         "extra-class": "p-2" // Optional padding or styling for the star button
       });
-    })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
-      key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6',
-      class: "f-ui-04 text-lighter mt-4"
-    }, this.parsedMappings[this.selectedRating - 1]));
+    }));
+  }
+  get el() {
+    return getElement(this);
   }
 };
 EdsRating.style = EdsRatingStyle0;

package/eds-section-core_2.entry.esm.js

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac'
+      key: '81d5d6f6010c56bb217b32fa520fdaf96e1c7adc'
     }, h("eds-section-heading", {
-      key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769',
+      key: 'c47dda41c2f553ef87f432109ead4bd0debcd99c',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7'
+      key: '9276798e2c581440c46ff9914809e87203a86b1b'
     }));
   }
 };
@@ -52,15 +52,15 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb',
+      key: '6741f5bbede7d44109c5e60f92290d4b2eda4d42',
       class: {
-        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
         container: this.withContainer,
         'pt-48': this.spacingLarge,
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92',
+      key: 'cc65df919db1dc1d5725116ce1ab473319185901',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }