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

package/eds-timeline.entry.esm.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -11,25 +12,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 = 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
@@ -61,16 +44,16 @@ const EdsTimeline = class {
   }
   render() {
     return h("div", {
-      key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d',
+      key: '6d6eaccb876780be7c9e443a8d8a443fc0b4f779',
       class: "max-w-sidebar mx-auto px-4 py-8"
     }, h("div", {
-      key: '3e019420ddd4bfab7800567c7130299ea47205c6',
+      key: '122a6273fbd448a026fee899159872366cc01033',
       class: "relative"
     }, h("div", {
-      key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6',
+      key: 'bbf7359dacf3eb74f096d8c3e59344a6ceb67e8e',
       class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
     }), h("div", {
-      key: '1b52694d2e8c3656910c02680aa8ce2e78b02997',
+      key: 'e86895cccaf84f269a4ae0117deb5ef8bfa6e501',
       class: "space-y-16"
     }, this.parsedEvents.map((event, index) => h("div", {
       class: "relative flex"

package/eds-toast-manager.entry.esm.js

@@ -0,0 +1,62 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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) {
+    registerInstance(this, hostRef);
+    this.toastId = 0;
+    this.toasts = [];
+  }
+  connectedCallback() {
+    // Initialize the ToastManager singleton with this element
+    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 h("div", {
+      key: 'e01e6cf0931155f70153ba5de054c1174e364397',
+      class: "toast-container"
+    }, this.toasts.map(t => h("div", {
+      key: t.id
+    }, h("eds-toast", {
+      message: t.message,
+      intent: t.intent,
+      onClick: () => this.removeToast(t.id)
+    }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+EdsToastManager.style = EdsToastManagerStyle0;
+
+export { EdsToastManager as eds_toast_manager };

package/eds-toast.entry.esm.js

@@ -0,0 +1,92 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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 = 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) {
+    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 h("div", {
+      class: classes,
+      role: "alert",
+      "aria-live": "assertive"
+    }, h("div", {
+      class: "flex items-center justify-between gap-4"
+    }, h("span", {
+      class: "f-ui-01"
+    }, this.message), h("eds-button", {
+      intent: "tertiary",
+      icon: "close",
+      "aria-label": "Close Toast",
+      onClick: () => this.dismissToast(),
+      "extra-class": "ml-8"
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsToast.style = EdsToastStyle0;
+
+export { EdsToast as eds_toast };

package/eds-tooltip.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -101,12 +101,12 @@ const EdsTooltip = class {
   }
   render() {
     return h("div", {
-      key: '1635b034319df4827a62ed58267d81db277ad19d',
+      key: '0d00052874b171639b9185412d8a3a9f917e6df5',
       class: "relative"
     }, h("slot", {
-      key: '6cdfd0f6d456b984464c5091a2829cdba69ba895'
+      key: '2cb9cdc51248c3c6cedcaf8ee113530f2675b870'
     }), this.isVisible && this.isPositioned && this.content && h("div", {
-      key: '7e736731dc700e0273fdfe15202426d2db086aef',
+      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: {

package/eds-trl.entry.esm.js

@@ -51,10 +51,10 @@ const EdsTrl = class {
       }
     };
     return h("div", {
-      key: 'a329a001d6275fcfe7df9bddf83bd289effe4151',
+      key: 'bd46e540a0dd3c09a91d1cff266b94a2bf9fba95',
       class: "container mx-auto px-4 py-8"
     }, h("eds-table", {
-      key: '93aebfd840b16416789b15eec0daa16d9126aa9f',
+      key: 'd3ef10fc7e5ccd6029d1e62c2bb78765e78c8a13',
       data: JSON.stringify(tableData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": "2",

package/eds-user.entry.esm.js

@@ -1,6 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.esm.js';
-import { t as toast } from './toastManager-d9eee791.esm.js';
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -8,107 +6,86 @@ import 'react-dom';
 const EdsUser = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.authStatusChanged = 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 {
-          login();
-        } catch (error) {
-          toast.show(error.message, 'error');
-        }
-      }
-    };
-    /**
-     * Handles user logout by invoking the Keycloak `logout` function.
-     * Resets the `authenticated` state to `false` after logout.
-     */
-    this.handleLogout = async () => {
-      try {
-        await logout();
-      } catch (error) {
-        toast.show(error.message, 'error');
-      }
-      this.authenticated = false;
-      this.user = null;
-    };
-    this.keycloakUrl = undefined;
-    this.keycloakRealm = undefined;
-    this.keycloakClientId = undefined;
-    this.user = null;
-    this.authenticated = false;
-    this.username = '';
-    this.serverAvailable = false;
+    this.user = undefined;
   }
   /**
    * Lifecycle method that runs when the component is about to load.
    * It initializes authentication by calling the `initAuth` method.
    */
-  async componentWillLoad() {
-    // Check if required props are provided (optional check)
-    if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
-      // eslint-disable-next-line
-      console.error('Keycloak configuration props are missing.');
-      return;
-    }
-    this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
-    if (!this.serverAvailable) {
-      toast.show('Keycloak server is unavailable.', 'error');
-      return; // Do not proceed further
-    }
-    await this.initAuth();
-  }
-  /**
-   * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-   * Sets the `authenticated` state and `user` data if the user is authenticated.
-   * Emits `authStatusChanged` event with the authentication status.
-   */
-  async initAuth() {
-    try {
-      await initKeycloak({
-        url: this.keycloakUrl,
-        realm: this.keycloakRealm,
-        clientId: this.keycloakClientId
-      }, true);
-      if (isAuthenticated()) {
-        this.user = getUser();
-        this.authenticated = true;
-        this.authStatusChanged.emit({
-          authenticated: this.authenticated,
-          user: this.user
-        }); // Emit auth status change
-      }
-    } catch (error) {
-      toast.show(error.message, 'error');
-    }
+  async componentWillLoad() {}
+  get initials() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const initials = `${((_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.given_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+    return initials || ((_g = (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
   }
   render() {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     return h("div", {
-      key: '22ee744979511dd2f8a1e1a15bb99215eadd535b',
+      key: '68bc37b43d006a35e088a647d41b2257fbef25a7',
       class: "block"
-    }, !this.authenticated ? h("eds-button", {
-      label: "Login",
-      intent: "primary",
-      onClick: this.handleLogin,
-      "extra-class": "text-default"
-    }) : h("div", {
+    }, h("div", {
+      key: '3f4badcb645238de9ac8aaad78e1c132407f5b0d',
       class: "flex items-center"
     }, h("eds-dropdown", {
-      label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`,
+      key: '7f065f82c5845fd0ebc9c6b465ac56a695a99b77',
+      label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.preferred_username}`,
       intent: "tertiary",
       "aria-label": "User Menu",
       "dropdown-pos": "right",
       "dropdown-offset": "false",
       icon: "chevron-down",
       class: "text-default"
-    }, h("eds-user-modal", {
-      user: JSON.stringify(this.user),
-      onLogout: this.handleLogout.bind(this)
-    }))));
+    }, h("div", {
+      key: '2b1e9279c8d4feae16bf64c15837b61b945af447',
+      class: "min-w-[280px] p-8"
+    }, h("div", {
+      key: 'efa9aef50bc1eb4961e53a89f6e07cc5ff78d67b',
+      class: "flex gap-x-16 pb-16 border-b-2 border-softer"
+    }, h("eds-avatar", {
+      key: '2b78a6768ecb101138ab742d812d407e1b4fdd89',
+      "first-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.given_name,
+      "last-name": (_c = this.user) === null || _c === void 0 ? void 0 : _c.family_name,
+      initials: this.initials,
+      color: "grey",
+      rounded: true,
+      "initials-strong": true
+    }), h("div", {
+      key: 'd538dfe8df5e8af92fa204493b8b59b0d0e9f61a',
+      class: "max-w-full"
+    }, ((_d = this.user) === null || _d === void 0 ? void 0 : _d.name) && h("p", {
+      key: 'a644c3cdda0ce7bf2f62438a3866692f4222efeb',
+      class: "f-ui-01 text-default w-full text-ellipsis"
+    }, this.user.name), ((_e = this.user) === null || _e === void 0 ? void 0 : _e.preferred_username) && h("p", {
+      key: '2a6cf5f0324d27ebdfd2b331e5f232c23e544ad5',
+      class: "f-ui-03-light text-light mt-4"
+    }, this.user.preferred_username), ((_f = this.user) === null || _f === void 0 ? void 0 : _f.email) && h("p", {
+      key: '02b9dd4f2999b68107eabc2c1e2a1bc3bb98f26a',
+      class: "f-ui-03-light text-light mt-4"
+    }, this.user.email))), h("div", {
+      key: '3a68427dc603f0a3fb2652bfbea292eb718046dd',
+      class: "text-default mt-16 flex w-full flex-col gap-y-8"
+    }, h("div", {
+      key: '3f3f617385efc57502794f78079b8486b6801425',
+      class: "border-softer mb-10 border-b-2 pb-16"
+    }, h("eds-link", {
+      key: '62fbc143f710605c7d840277dc90054a1162831d',
+      label: "My EBRAINS",
+      "aria-label": "My EBRAINS",
+      url: "https://www.ebrains.eu/dashboard",
+      intent: "primary",
+      "extra-class": "w-full",
+      external: true
+    })), h("eds-link", {
+      key: 1,
+      label: "Account Settings",
+      url: "https://iam.ebrains.eu/auth/realms/hbp/account/",
+      intent: "secondary",
+      icon: "arrow-diagonal",
+      external: true,
+      "extra-class": "w-full"
+    }), h("slot", {
+      key: 'f48a4c872784b60e421fda6e48f67f4c85b101d7'
+    }))))));
   }
   get hostEl() {
     return getElement(this);

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

@@ -35,10 +35,10 @@ const EdsVerticalStepper = class {
   render() {
     const steps = this.parsedSteps;
     return h("div", {
-      key: '08fa2f85c49dbe217b2f9d068bee486e432f5315',
+      key: '89344ad340f9eb8d20f463d3990ec4832cbdc900',
       class: "stepper-container"
     }, h("div", {
-      key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2',
+      key: 'da8d7fae2b30cfc93d04d5d8c3a61d95ccf91383',
       class: "stepper"
     }, steps.map((step, index) => h("div", {
       class: "step",
@@ -62,14 +62,14 @@ const EdsVerticalStepper = class {
       disabled: index === 0,
       "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
     })))))), this.activeStep === steps.length && h("div", {
-      key: '8a5ebfed582b25d828758e1762a063df6c745093',
+      key: '1e3272723281d9a10603b4d1e79badfdd6591cc5',
       class: ""
     }, h("eds-alert", {
-      key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb',
+      key: '7cc81e7e7097891364ff9894d383fd7bb9f7fce4',
       intent: "success",
       message: "All steps completed - you're finished!"
     }), h("eds-button", {
-      key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2',
+      key: 'a4d68698fa7831c7e2b6afae435979ccac46a726',
       label: "Start again",
       onClick: this.handleReset,
       "extra-class": "mt-4"