@ebrains/react 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,69 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSectionCoreCss = "";
+const EdsSectionCoreStyle0 = edsSectionCoreCss;
+const EdsSectionCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tag = 'section';
+    this.sectionTitle = '';
+    this.headingLevel = 'h2';
+  }
+  render() {
+    const TagType = this.tag; // Set dynamic tag type (div or section)
+    return h(TagType, {
+      key: 'ff0b28dffb8aca2ad0ac1ee3eea7ebda75078f96'
+    }, h("eds-section-heading", {
+      key: '23e9bb2b084c6b8a534dd310fbe10e0de0211187',
+      headingLevel: this.headingLevel,
+      sectionTitle: this.sectionTitle
+    }), h("slot", {
+      key: '9cae6378bdb5304191d393967025570f94fdcdb2'
+    }));
+  }
+};
+EdsSectionCore.style = EdsSectionCoreStyle0;
+const EdsSectionHeading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sectionTitle = undefined;
+    this.withContainer = true;
+    this.headingLevel = 'h2';
+    this.tag = 'div';
+    this.spacingLarge = false;
+  }
+  getHeadingClass() {
+    // Map heading levels to their respective classes
+    const headingClasses = {
+      h1: 'f-heading-01',
+      h2: 'f-heading-02',
+      h3: 'f-heading-03',
+      h4: 'f-heading-04',
+      h5: 'f-heading-05',
+      h6: 'f-heading-06'
+    };
+    // Return the class based on the heading level
+    return headingClasses[this.headingLevel];
+  }
+  render() {
+    const TagType = this.tag; // Dynamically set tag type for the container
+    const HeadingTag = this.headingLevel; // Dynamically set heading level
+    return h(TagType, {
+      key: 'bb32f87fd944ebf08ebcde3980c18cd4bed18783',
+      class: {
+        '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: '0cd8ea8aada58e30675579c82ba130b40257c7c6',
+      class: this.getHeadingClass()
+    }, this.sectionTitle));
+  }
+};
+
+export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };

package/eds-spinner.entry.esm.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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) {
+    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 h(Host, {
+      key: '214876a56949c147e74c1a7072406234c2fb1a02'
+    }, h("div", {
+      key: 'b75b639fa38aafaf13e1eb727e28c5e67f3edafe',
+      class: "spinner-overlay",
+      style: overlayStyle
+    }, h("span", {
+      key: '87ba2ef7e1e9601ac0ae8132e9c891b4149a20b5',
+      class: "spinner",
+      style: spinnerStyle
+    })));
+  }
+};
+EdsSpinner.style = EdsSpinnerStyle0;
+
+export { EdsSpinner as eds_spinner };

package/eds-splash-screen.entry.esm.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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;
+  }
+  // When the component loads, check if there is a promise.
+  componentWillLoad() {
+    if (this.initPromise) {
+      this.handleInitPromise(this.initPromise);
+    }
+  }
+  // Watch for changes on initPromise.
+  async watchInitPromise(newPromise) {
+    if (newPromise) {
+      this.handleInitPromise(newPromise);
+    }
+  }
+  async handleInitPromise(promise) {
+    try {
+      await promise;
+      //console.log('Promises resolved');
+      this.hideSplash();
+    } catch (error) {
+      //console.error('Initialization error:', error);
+      this.splash.emit({
+        type: 'error',
+        message: error.message || 'Unknown error'
+      });
+    }
+  }
+  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
+    }))));
+  }
+  static get watchers() {
+    return {
+      "initPromise": ["watchInitPromise"]
+    };
+  }
+};
+EdsSplashScreen.style = EdsSplashScreenStyle0;
+
+export { EdsSplashScreen as eds_splash_screen };

package/eds-switch.entry.esm.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}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)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
+const EdsSwitchStyle0 = edsSwitchCss;
+const EdsSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uiswitch = createEvent(this, "uiswitch", 7);
+    this.toggleSwitch = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.uiswitch.emit(this.checked);
+      sendAnalytics({
+        category: 'ui-component',
+        tag: this.el.tagName.toLowerCase(),
+        name: this.checked ? this.labelOn : this.labelOff || '',
+        action: 'checked'
+      });
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.labelOn = '';
+    this.labelOff = '';
+  }
+  render() {
+    // Compute an accessible name based on state.
+    const accessibleLabel = this.labelOn || this.labelOff ? this.checked ? this.labelOn : this.labelOff : 'Toggle switch';
+    return h("div", {
+      key: '442876be1bad7ea8c9e383bc68b192a2744c38f9',
+      class: "switch-container"
+    }, this.labelOff && h("span", {
+      key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35',
+      class: "switch-label switch-label--off mr-8"
+    }, this.labelOff), h("button", {
+      key: 'f56b3762622671acf793568a96567193c38999c7',
+      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
+    }, h("span", {
+      key: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63',
+      class: "switch-handle"
+    })), this.labelOn && h("span", {
+      key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508',
+      class: "switch-label switch-label--on ml-8"
+    }, this.labelOn));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsSwitch.style = EdsSwitchStyle0;
+
+export { EdsSwitch as eds_switch };

package/eds-timeline.entry.esm.js

@@ -0,0 +1,117 @@
+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';
+
+const edsTimelineCss = ".max-w-sidebar{max-width:1224px}.mx-auto{margin-left:auto;margin-right:auto}.px-4{padding-left:0.25rem;padding-right:0.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.relative{position:relative}.absolute{position:absolute}.flex{display:flex}.w-4{width:0.25rem}.pr-4{padding-right:0.25rem}.pl-4{padding-left:0.25rem}.w-1\\/2{width:50%}.left-1\\/2{left:50%}.transform{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-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))}.bg-strong{background-color:var(--grey-700)}.h-full{height:100%}.z-0{z-index:0}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.items-center{align-items:center}.justify-center{justify-content:center}.w-32{width:2rem}.h-32{height:2rem}.bg-accent{background-color:var(--green-500)}.rounded-full{border-radius:9999px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}";
+const EdsTimelineStyle0 = edsTimelineCss;
+const EdsTimeline = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.events = undefined;
+    this.selectedEvent = null;
+    this.parsedEvents = [];
+  }
+  parseEvents(newValue) {
+    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
+    })) : [];
+  }
+  componentWillLoad() {
+    this.parseEvents(this.events);
+  }
+  componentDidLoad() {
+    const cards = this.el.querySelectorAll('eds-card-generic');
+    cards.forEach(card => {
+      this.emitContext(card);
+    });
+  }
+  emitContext(cardElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    cardElement.dispatchEvent(event);
+  }
+  handleEventClick(event) {
+    this.selectedEvent = event;
+    if (this.modalRef && typeof this.modalRef.open === 'function') {
+      this.modalRef.open();
+    }
+  }
+  render() {
+    return h("div", {
+      key: '63ce0ce7e3a632906f664011243abf9f816bc53a',
+      class: "max-w-sidebar mx-auto px-4 py-8"
+    }, h("div", {
+      key: '794d16f6b68d87bb1fb4665cc5ef84b381fb55ea',
+      class: "relative"
+    }, h("div", {
+      key: '2b82b5594a9ed5c056898725f40e56858282412a',
+      class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
+    }), h("div", {
+      key: '6d33b71396649e7b90d050c0858912fa49c309a7',
+      class: "space-y-16"
+    }, this.parsedEvents.map((event, index) => h("div", {
+      class: "relative flex"
+    }, h("div", {
+      class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}`
+    }, index % 2 === 0 && 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)
+    })), h("div", {
+      class: "flex items-center justify-center relative"
+    }, event.completed ? h("div", {
+      class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center"
+    }) : h("div", {
+      class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center"
+    })), h("div", {
+      class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}`
+    }, index % 2 !== 0 && 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)
+    })))))));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "events": ["parseEvents"]
+    };
+  }
+};
+EdsTimeline.style = EdsTimelineStyle0;
+
+export { EdsTimeline as eds_timeline };

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

@@ -0,0 +1,93 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+class ToastManager {
+  constructor() {
+    this.toastManagerElement = null;
+  }
+  /**
+   * Initialize the ToastManager with a reference to the `eds-toast-manager` component.
+   */
+  init(toastManagerElement) {
+    this.toastManagerElement = toastManagerElement;
+  }
+  /**
+   * Display a toast.
+   * @param message - The message to display.
+   * @param intent - The type of the toast ('success', 'error', 'warning', 'default').
+   */
+  show(message, intent = 'default') {
+    if (!this.toastManagerElement) {
+      // eslint-disable-next-line
+      console.error('ToastManager is not initialized. Ensure <eds-toast-manager> is rendered.');
+      return;
+    }
+    const event = new CustomEvent('show-toast', {
+      detail: {
+        message,
+        intent
+      }
+    });
+    this.toastManagerElement.dispatchEvent(event);
+  }
+}
+// Export a singleton instance
+const toast = new ToastManager();
+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: 'b86b71e71fa88b56acab6d7060e7b05beec344e1',
+      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,93 @@
+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 = undefined;
+    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() {
+    if (this.duration && this.duration > 0) {
+      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-trl.entry.esm.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsTrl = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.applications = undefined;
+  }
+  getParsedApplications() {
+    let apps = [];
+    // If applications is a string, attempt to parse it as JSON.
+    if (typeof this.applications === 'string') {
+      try {
+        apps = JSON.parse(this.applications || '[]');
+      } catch (error) {
+        // eslint-disable-next-line
+        console.error('Invalid applications trl JSON', error);
+        apps = [];
+      }
+    }
+    // If applications is already an array, use it directly.
+    else if (Array.isArray(this.applications)) {
+      apps = this.applications;
+    }
+    return apps;
+  }
+  calculateProgress(currentTrl) {
+    const maxTrl = 9;
+    return Math.ceil(currentTrl / maxTrl * 100); // Calculate percentage and round up
+  }
+  render() {
+    const apps = this.getParsedApplications();
+    // Map applications into table-friendly data.
+    const tableData = apps.map(app => ({
+      Application: app.name,
+      'Current TRL Stage': `TRL ${app.currentTrl}`,
+      Progress: h("div", {
+        class: "w-[200px]"
+      }, h("eds-progress-bar", {
+        value: this.calculateProgress(app.currentTrl)
+      }))
+    }));
+    const tableConfig = {
+      Application: {
+        format: 'code'
+      },
+      'Current TRL Stage': {
+        format: 'text'
+      }
+    };
+    return h("div", {
+      key: '8a798c644632d3168af51aa8a0775b7455ab5b52',
+      class: "container mx-auto px-4 py-8"
+    }, h("eds-table", {
+      key: '82a692c0f7e46fe7438a594a7b5c567855c0e308',
+      "table-data": JSON.stringify(tableData),
+      config: JSON.stringify(tableConfig),
+      "rows-per-page": "2",
+      "pagination-enabled": "true",
+      "search-enabled": "true",
+      "column-size": "default"
+    }));
+  }
+};
+
+export { EdsTrl as eds_trl };