@ebrains/components 0.9.2-beta → 1.0.0

package/dist/components/eds-timeline.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+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 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$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 this; }
+    static get watchers() { return {
+        "events": ["parseEvents"]
+    }; }
+    static get style() { return EdsTimelineStyle0; }
+}, [1, "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.d.ts

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

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

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './eds-button2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-toast2.js';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 this; }
+    static get style() { return EdsToastManagerStyle0; }
+}, [1, "eds-toast-manager", {
+        "toasts": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-toast-manager", "eds-button", "eds-icon-wrapper", "eds-toast"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-toast-manager":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsToastManager$1);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-toast":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsToastManager = EdsToastManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsToastManager, defineCustomElement };

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

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

package/dist/components/eds-toast.js

@@ -0,0 +1,6 @@
+import { E as EdsToast$1, d as defineCustomElement$1 } from './eds-toast2.js';
+
+const EdsToast = EdsToast$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsToast, defineCustomElement };

package/dist/components/eds-toast2.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+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';
+
+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 = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * 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 this; }
+    static get style() { return EdsToastStyle0; }
+}, [1, "eds-toast", {
+        "message": [1],
+        "intent": [1],
+        "duration": [2],
+        "visible": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-toast", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-toast":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsToast);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsToast as E, defineCustomElement as d };

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

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

package/dist/components/eds-tooltip.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.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}.left-1\\/2{left:50%}.z-10{z-index:10}.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))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.bottom-full{bottom:100%}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}";
+const EdsTooltipStyle0 = edsTooltipCss;
+
+const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.content = undefined;
+    }
+    /** fire analytics on every hover */
+    handleHover() {
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: this.content.toLowerCase(),
+            action: 'hover'
+        });
+    }
+    render() {
+        return (h("div", { key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6', class: "relative inline-block group" }, h("slot", { key: '7a41d90940fff4e8b887ec4a3240371466f219a5' }), h("div", { key: 'ccf06592f4c977030b0cf54cce48d13889c059f3', class: "absolute bottom-full left-1/2 \n            transform -translate-x-1/2 mb-2\n            rounded-xs bg-strongest text-inverse \n            f-ui-03-light pointer-events-none \n            z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n            group-hover:opacity-100", role: "tooltip" }, this.content)));
+    }
+    get el() { return this; }
+    static get style() { return EdsTooltipStyle0; }
+}, [1, "eds-tooltip", {
+        "content": [1]
+    }, [[1, "mouseenter", "handleHover"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTooltip$1);
+            }
+            break;
+    } });
+}
+
+const EdsTooltip = EdsTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTooltip, defineCustomElement };

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,138 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$d } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$c } from './eds-input2.js';
+import { d as defineCustomElement$b } from './eds-input-field2.js';
+import { d as defineCustomElement$a } from './eds-input-footer2.js';
+import { d as defineCustomElement$9 } from './eds-input-label2.js';
+import { d as defineCustomElement$8 } from './eds-input-range2.js';
+import { d as defineCustomElement$7 } from './eds-input-search2.js';
+import { d as defineCustomElement$6 } from './eds-input-select2.js';
+import { d as defineCustomElement$5 } from './eds-link2.js';
+import { d as defineCustomElement$4 } from './eds-pagination2.js';
+import { d as defineCustomElement$3 } from './eds-progress-bar2.js';
+import { d as defineCustomElement$2 } from './eds-table2.js';
+
+const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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" })));
+    }
+}, [0, "eds-trl", {
+        "applications": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-trl", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination", "eds-progress-bar", "eds-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-trl":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTrl$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "eds-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "eds-input-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "eds-input-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "eds-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsTrl = EdsTrl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTrl, defineCustomElement };

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

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