@ebrains/components 0.9.2-beta → 0.9.3-beta

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,80 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as toast } from './toastManager.js';
+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';
+
+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: 'cc2aa94e01507dc8c27e82dfa550af5da6eaba3e', 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,104 @@
+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 = 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 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,129 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+
+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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.content = undefined;
+        this.position = 'above';
+        this.isVisible = false;
+        this.isPositioned = false;
+        this.tooltipStyle = { top: '0px', left: '0px', transform: '' };
+    }
+    /**
+     * Show the tooltip and update its position.
+     */
+    async showTooltip() {
+        var _a;
+        await this.updateTooltipPosition();
+        this.isPositioned = true;
+        this.isVisible = true;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'hover'
+        });
+    }
+    /**
+     * Hide the tooltip.
+     */
+    hideTooltip() {
+        this.isVisible = false;
+        this.isPositioned = false; // Reset positioning when hiding
+    }
+    /**
+     * Hide the tooltip when the `Escape` key is pressed.
+     */
+    handleKeyPress(event) {
+        if (event.key === 'Escape') {
+            this.isVisible = false;
+            this.isPositioned = false; // Reset positioning when hiding
+        }
+    }
+    /**
+     * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
+     */
+    updateTooltipPosition() {
+        var _a, _b;
+        const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slotElement) {
+            return;
+        }
+        const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({ flatten: true })) || [];
+        const targetElement = assignedNodes.find((node) => node instanceof HTMLElement);
+        if (targetElement) {
+            const targetRect = targetElement.getBoundingClientRect();
+            const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
+            if (tooltipElement) {
+                const tooltipWidth = tooltipElement.offsetWidth;
+                const tooltipHeight = tooltipElement.offsetHeight;
+                // Calculate position based on the preferred `position` prop
+                let top = 0;
+                let left = 0;
+                switch (this.position) {
+                    case 'above':
+                        top = window.scrollY - tooltipHeight - 8; // Above with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    case 'below':
+                        top = tooltipHeight - window.scrollY + 18; // Below with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    /*case 'left':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.left - tooltipWidth - 8; // To the left with offset
+                      break;
+                    case 'right':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.right + 8; // To the right with offset
+                      break;*/
+                }
+                this.tooltipStyle = {
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    transform: 'translateX(0)' // No additional horizontal adjustment needed
+                };
+            }
+        }
+    }
+    render() {
+        return (h("div", { key: '7bc92c002eaf263a2d10a2391f356f40e23d5998', class: "relative" }, h("slot", { key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '00d854649ef43b958081bbb336319a537c181574', 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 EdsTooltipStyle0; }
+}, [1, "eds-tooltip", {
+        "content": [1],
+        "position": [1],
+        "isVisible": [32],
+        "isPositioned": [32],
+        "tooltipStyle": [32]
+    }, [[1, "mouseover", "showTooltip"], [1, "mouseout", "hideTooltip"], [8, "keydown", "handleKeyPress"]]]);
+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: '7f2775e107e053cf1e8091f97915e6bc372c3954', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '9576b1c5dc72335ef0f7158fa4eaa44835acd8db', "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;