@ebrains/components 0.0.1-alpha.0 → 0.2.0-alpha.0

package/dist/components/eds-tab2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as cva } from './index3.js';
+import { c as cva } from './index2.js';
 
 const EdsTab = /*@__PURE__*/ proxyCustomElement(class EdsTab extends HTMLElement {
     constructor() {

package/dist/components/eds-table2.js

@@ -11,6 +11,7 @@ import { d as defineCustomElement$2 } from './eds-link2.js';
 import { d as defineCustomElement$1 } from './eds-pagination2.js';
 
 const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.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)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}";
+const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLElement {
     constructor() {
@@ -144,7 +145,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         "data": ["handleDataChange"],
         "config": ["handleConfigChange"]
     }; }
-    static get style() { return edsTableCss; }
+    static get style() { return EdsTableStyle0; }
 }, [1, "eds-table", {
         "data": [1],
         "endpoint": [1],

package/dist/components/eds-tabs-content.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as sendAnalytics } from './index2.js';
-import { c as cva } from './index3.js';
+import './color.js';
+import { s as sendAnalytics } from './analytics.js';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './eds-tab2.js';
 
 const EdsTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabsContent extends HTMLElement {
@@ -116,11 +117,11 @@ const EdsTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabsContent e
         });
     }
     render() {
-        return (h("div", { key: '6e28a10b490f22edee3516ab1d0ec37248f1216a', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '62300b2980120504a5fc2e32e283552252a36344', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'e0dbe930935f080bec4f2869ec640e89197b541d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: 'b1bfb55fbdee21a10fcc600d4c3ce2842684c519', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '1d1aeb094b6c350355abec1bf74928561a1c0f2d', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '5d5b04ddf5ddb60c2a9b49d19f4efe026cc2557d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '5ba55e25a79886beafa6f25b2e80cc42b5f2abee' }))));
+        })), h("slot", { key: '58e9281516d0a4485ba0779f9b79c0fa5e989166' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-tabs.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as sendAnalytics } from './index2.js';
-import { c as cva } from './index3.js';
+import './color.js';
+import { s as sendAnalytics } from './analytics.js';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './eds-tab2.js';
 
 const edsTabsCss = "";
+const EdsTabsStyle0 = edsTabsCss;
 
 const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLElement {
     constructor() {
@@ -104,7 +106,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
         });
     }
     render() {
-        return (h("div", { key: '826fb378cc685039ef3dad47d927ec0398606c9b', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '7065bfd5e3dad0386af8bf5741a6517c5cf73db4', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '41b08427b7c265c70ad506e87733592b28addeda', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '25078703609dbdaa2025013d0e266b169c880c50', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '8aa1b4ab1f15692c912db3ee39486a59d634c6a5', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '33728823ca0f039e1037a691da90b295cbe3f3ac', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
@@ -114,7 +116,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
     static get watchers() { return {
         "tabs": ["parseTabs"]
     }; }
-    static get style() { return edsTabsCss; }
+    static get style() { return EdsTabsStyle0; }
 }, [0, "eds-tabs", {
         "id": [1],
         "navAriaLabel": [1, "nav-aria-label"],

package/dist/components/eds-tag2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as cva } from './index3.js';
+import { c as cva } from './index2.js';
 
 const edsTagCss = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
+const EdsTagStyle0 = edsTagCss;
 
 // Define the CVA for the tag styles
 const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base classes
@@ -36,7 +37,7 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
         const classes = tagStyles({ intent: this.intent });
         return h("span", { key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3', class: classes }, this.label);
     }
-    static get style() { return edsTagCss; }
+    static get style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {
         "label": [1],
         "intent": [1]

package/dist/components/eds-timeline.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTimeline extends Components.EdsTimeline, HTMLElement {}
+export const EdsTimeline: {
+    prototype: EdsTimeline;
+    new (): EdsTimeline;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-timeline.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './eds-avatar2.js';
+import { d as defineCustomElement$6 } from './eds-card-desc2.js';
+import { d as defineCustomElement$5 } from './eds-card-generic2.js';
+import { d as defineCustomElement$4 } from './eds-card-title2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.selectedEvent = null;
+        this.parsedEvents = [];
+        this.events = undefined;
+    }
+    parseEvents(newValue) {
+        try {
+            const parsed = JSON.parse(newValue);
+            this.parsedEvents = Array.isArray(parsed)
+                ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true // Ensure boolean conversion
+                })))
+                : [];
+        }
+        catch (e) {
+            this.parsedEvents = [];
+        }
+    }
+    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: '8f40212e04ab17cac2688df56b7330041a605a86', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '68421d4fce08e881e2494b5c504bd5db7570e34f', class: "relative" }, h("div", { key: 'e43edd7fba6d30b3dd48ffb2b467ff24b46c8da7', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '56dd7cebb5a2761547a5e24ec76652f7052906b2', 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 this; }
+    static get watchers() { return {
+        "events": ["parseEvents"]
+    }; }
+}, [0, "eds-timeline", {
+        "events": [1],
+        "selectedEvent": [32],
+        "parsedEvents": [32]
+    }, undefined, {
+        "events": ["parseEvents"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-timeline", "eds-avatar", "eds-card-desc", "eds-card-generic", "eds-card-title", "eds-img", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-timeline":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTimeline$1);
+            }
+            break;
+        case "eds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-card-desc":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-card-generic":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsTimeline = EdsTimeline$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTimeline, defineCustomElement };

package/dist/components/eds-toast-manager.js

@@ -5,6 +5,7 @@ import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-toast2.js';
 
 const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;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$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager extends HTMLElement {
     constructor() {
@@ -36,10 +37,10 @@ const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '91104e9dfd85e638a5482d22c70506ce06989bbd', 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) }))))));
+        return (h("div", { key: '8fc238fb8e0b463c286ca21f2525cae8fd738684', 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 this; }
-    static get style() { return edsToastManagerCss; }
+    static get style() { return EdsToastManagerStyle0; }
 }, [0, "eds-toast-manager", {
         "toasts": [32]
     }]);

package/dist/components/eds-toast2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as cva } from './index3.js';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 

package/dist/components/eds-tooltip.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
+const EdsTooltipStyle0 = edsTooltipCss;
 
 const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTMLElement {
     constructor() {
@@ -84,14 +85,14 @@ const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends H
         }
     }
     render() {
-        return (h("div", { key: '79d0f81a61efe0e82be7870259f805c2bc3f47ad', class: "relative" }, h("slot", { key: 'dd923024ced5c206124cf72f395f75362e9df5b1' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '347ed6d492a2926ec3ec3fa407d0d9e3f727c4f1', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (h("div", { key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b', class: "relative" }, h("slot", { key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform
             } }, this.content))));
     }
     get el() { return this; }
-    static get style() { return edsTooltipCss; }
+    static get style() { return EdsTooltipStyle0; }
 }, [1, "eds-tooltip", {
         "content": [1],
         "position": [1],

package/dist/components/eds-trl.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTrl extends Components.EdsTrl, HTMLElement {}
+export const EdsTrl: {
+    prototype: EdsTrl;
+    new (): EdsTrl;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-trl.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-progress-bar2.js';
+
+const edsTrlCss = "";
+const EdsTrlStyle0 = edsTrlCss;
+
+const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.applications = undefined;
+    }
+    getParsedApplications() {
+        try {
+            return JSON.parse(this.applications || '[]');
+        }
+        catch (error) {
+            //console.error('Invalid applications JSON', error);
+            return [];
+        }
+    }
+    calculateProgress(currentTrl) {
+        const maxTrl = 9;
+        return Math.ceil((currentTrl / maxTrl) * 100); // Calculate percentage and round up
+    }
+    render() {
+        const apps = this.getParsedApplications();
+        if (apps.length === 0) {
+            return h("p", null, "No applications to display.");
+        }
+        return (h("div", { class: "container mx-auto px-4 py-8" }, h("table", { class: "table-auto w-full border-collapse border border-gray-200" }, h("thead", null, h("tr", { class: "bg-gray-100" }, h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Application"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Current TRL Stage"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Progress"))), h("tbody", null, apps.map((app) => (h("tr", null, h("td", { class: "border border-gray-300 px-4 py-2" }, app.name), h("td", { class: "border border-gray-300 px-4 py-2" }, "TRL ", app.currentTrl), h("td", { class: "border border-gray-300 px-4 py-2" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))))))));
+    }
+    static get style() { return EdsTrlStyle0; }
+}, [0, "eds-trl", {
+        "applications": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-trl", "eds-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-trl":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTrl$1);
+            }
+            break;
+        case "eds-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsTrl = EdsTrl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTrl, defineCustomElement };

package/dist/components/eds-user-modal2.js

@@ -5,6 +5,7 @@ import { d as defineCustomElement$2 } from './eds-img2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
 const edsUserModalCss = "";
+const EdsUserModalStyle0 = edsUserModalCss;
 
 const EdsUserModal = /*@__PURE__*/ proxyCustomElement(class EdsUserModal extends HTMLElement {
     constructor() {
@@ -36,13 +37,13 @@ const EdsUserModal = /*@__PURE__*/ proxyCustomElement(class EdsUserModal extends
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'c149d74cd31af6f3d670f915f9a8e3e32cf56193', class: "min-w-[280px] p-8" }, h("div", { key: '693c60745fe24e2f40017376d0e866ce67a9f5a5', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '19771e48bb2dbcee1a2229d9797aaa19769954eb', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: 'f1343860a2747394557fd5b8420d2b3ff4f15b36', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '260d65312d9ed1c034973d83072493e0bb130a70', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: 'a1d27ecaf56743991e0822eabad706aa3f46a64f', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: '7a3ed5d4631f33afdc34c80b44ffa907761c4851', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '47e413879079033eeba8ce766d7b4dbf6b144781', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'a4f0cb91d2d488cb33ebae9bb2419f0aa0bc3e27', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '2549cf3f85593f38e340486813e64b5b719ac3d9', 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" }), this.hasLogout && (h("eds-link", { key: '3ed5a3c3f6b3b07aa0c1c70cf7e07e8ffbcd38be', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+        return (h("div", { key: '70a619795f9f0e5ed619cce77c95b7661beb2c63', class: "min-w-[280px] p-8" }, h("div", { key: '01bfe265178130ca0398592087f2420f7509d018', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'fcb0cc8aa22e11763c342bc4247343485f6ded90', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: '70d5c334cc98e9bdc22e0129a7c3c0b8d616cb0d', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: 'f30cccaa393dd1274d156640ed649893de3f2a0b', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: '5256c0bc39ca675b05d654c6d0ad72da948df58e', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: '892a3d85052c62e11cd775c2d91c55f572df745b', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '98e1f6605a8e312a1e7c340d21e0240a1e980e04', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'd4ed22d8dc1bf4d1fd7c64b388e53df2a1e48957', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '98d69c840a87b15d537442ca0c1f2890175532ff', 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" }), this.hasLogout && (h("eds-link", { key: '8c3c341626f0ca5fd217aea8939d44c7cf3e0ed3', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
     }
     static get watchers() { return {
         "user": ["parseUserProp"],
         "links": ["parseLinksProp"]
     }; }
-    static get style() { return edsUserModalCss; }
+    static get style() { return EdsUserModalStyle0; }
 }, [0, "eds-user-modal", {
         "user": [1],
         "links": [1],

package/dist/components/incorrect-use-of-colors.js

@@ -40,7 +40,7 @@ const IncorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class IncorrectU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: '0d81e547f708c168c9d39d5bc8c34f3280020dc2', class: "container" }, h("p", { key: 'b9ef7a75862e18b3c95731df13b1b417a21badf1', class: "f-body-01" }, "Each of the four colour tones cannot be mixed in the same composition."), h("div", { key: '285cc3d54bb73f5177345eb645cbf8b80fa00776', class: "flex" }, h("div", { key: '1650560f538e4ff82fdc9b7d5454a1faedc0b725', class: "w-full" }, h("ul", { key: 'f0526990e1312a1826c510013fb5ad31b08acb08', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '4129fa7047d80be3c22a4e2c5fab1442d540a08b', class: "w-full" }, h("ul", { key: '52544bbf1af41c40f1d2f78ea3b6efacdb7cddab', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '024316623703e89a7d5d226a75c25c145be9b2c6', class: "container" }, h("p", { key: 'c2ddb12f2d87bf1c5bb7f49bcf2b76d42ccfd310', class: "f-body-01" }, "Each of the four colour tones cannot be mixed in the same composition."), h("div", { key: 'c5f1acb20614d5732836240dd65b23a8dd074447', class: "flex" }, h("div", { key: 'cb2fb1c0355b744e53977c573383989be12fe1ad', class: "w-full" }, h("ul", { key: '9ceb752231d8a7764221d45653c4ef73fad4573d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '494eaadc1547f91e11d93655b91424f98de6a635', class: "w-full" }, h("ul", { key: '51de6e25df144ab9014ca95ad645a437b6469441', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 }, [0, "incorrect-use-of-colors"]);
 function defineCustomElement$1() {

package/dist/components/index.esm.js

@@ -1 +0,0 @@
-