@ebrains/components 0.9.1-beta → 0.9.2-beta

package/dist/collection/components/eds-timeline/eds-timeline.js

@@ -1,93 +0,0 @@
-import { h } from "@stencil/core";
-import { parseData } from "../../utils/sharedUtils";
-export class EdsTimeline {
-    constructor() {
-        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: 'c17be7d774b926cf9010f767e4ba0eb22c127037', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '3e026116855d9468194f6a354776c39f2ce7086d', class: "relative" }, h("div", { key: '5046d3533850cd8a589ddbb24c3ed5c79bf85380', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'e1954f23d1b8f22b954b729c176bce8ba9443647', 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) }))))))))));
-    }
-    static get is() { return "eds-timeline"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-timeline.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-timeline.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "events": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | any[]",
-                    "resolved": "any[] | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Accepts a JSON string or object of timeline events."
-                },
-                "attribute": "events",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedEvent": {},
-            "parsedEvents": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "events",
-                "methodName": "parseEvents"
-            }];
-    }
-}

package/dist/collection/components/eds-timeline/eds-timeline.stories.js

@@ -1,35 +0,0 @@
-export default {
-    title: 'Components/Timeline',
-    component: 'eds-timeline',
-    argTypes: {
-        events: {
-            control: 'object',
-            description: 'List of timeline events as a JSON array'
-        }
-    }
-};
-export const Default = {
-    render: (args) => `
-      <eds-timeline events='${JSON.stringify(args.events)}'></eds-timeline>
-    `,
-    args: {
-        events: [
-            {
-                id: '1',
-                title: 'TRL 1',
-                category: '#1',
-                description: 'Basic research is complete, principles are documented.',
-                fullDescription: 'Initial scientific research umented.',
-                completed: true
-            },
-            {
-                id: '2',
-                title: 'TRL 2',
-                category: '#2',
-                description: 'The technology concept and/or application is formulated.',
-                fullDescription: 'The initial concept and potential applications of the technology have been outlined.',
-                completed: false
-            }
-        ]
-    }
-};

package/dist/collection/components/eds-toast/eds-toast.css

@@ -1,91 +0,0 @@
-.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),
-        0 2px 4px -2px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-        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);
-}

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

@@ -1,138 +0,0 @@
-import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
-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'
-    }
-});
-export class EdsToast {
-    constructor() {
-        /**
-         * 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" }))));
-    }
-    static get is() { return "eds-toast"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-toast.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-toast.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "message": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The main message or text to be displayed in the toast."
-                },
-                "attribute": "message",
-                "reflect": false
-            },
-            "intent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'success' | 'error' | 'warning'",
-                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The visual intent or style of the toast, indicating the toast type."
-                },
-                "attribute": "intent",
-                "reflect": false,
-                "defaultValue": "'default'"
-            },
-            "duration": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines the duration before the toast auto-dismisses (in milliseconds).\nDefaults to 5000ms (5 seconds)."
-                },
-                "attribute": "duration",
-                "reflect": false,
-                "defaultValue": "5000"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "visible": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}

package/dist/collection/components/eds-toast/eds-toast.stories.js

@@ -1,38 +0,0 @@
-export default {
-    title: 'Components/Toast',
-    component: 'eds-toast',
-    argTypes: {
-        message: {
-            control: 'text',
-            description: 'The main message or text to be displayed in the toast.'
-        },
-        intent: {
-            control: 'select',
-            options: ['default', 'success', 'error', 'warning'],
-            description: 'The visual intent or style of the toast.'
-        },
-        duration: {
-            control: 'number',
-            description: 'The duration before the toast auto-dismisses (in milliseconds).'
-        }
-    },
-    args: {
-        message: 'This is a toast message.',
-        intent: 'default',
-        duration: 5000
-    }
-};
-export const Default = {
-    render: (args) => `
-      <eds-toast
-        message="${args.message}"
-        intent="${args.intent}"
-        duration="${args.duration}">
-      </eds-toast>
-    `,
-    args: {
-        message: 'This is a toast message.',
-        intent: 'default',
-        duration: 5000
-    }
-};

package/dist/collection/components/eds-tooltip/eds-tooltip.css

@@ -1,94 +0,0 @@
-.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;
-  }

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -1,179 +0,0 @@
-import { sendAnalytics } from "../../utils/analytics";
-import { h } from "@stencil/core";
-/**
- * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
- */
-export class EdsTooltip {
-    constructor() {
-        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: '61455282a8a27a420e571ddb0abd31b6761d12ff', class: "relative" }, h("slot", { key: '8a29dd5f74c6a497111786fadcad766e410a1e34' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '34e5eef506a0d203e898027275c96f2dc3d3bd92', 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))));
-    }
-    static get is() { return "eds-tooltip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-tooltip.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-tooltip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "content": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The content of the tooltip."
-                },
-                "attribute": "content",
-                "reflect": false
-            },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'above' | 'below'",
-                    "resolved": "\"above\" | \"below\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The preferred position of the tooltip (`above`, `below`, `left`, `right`)."
-                },
-                "attribute": "position",
-                "reflect": false,
-                "defaultValue": "'above'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isVisible": {},
-            "isPositioned": {},
-            "tooltipStyle": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "mouseover",
-                "method": "showTooltip",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "mouseout",
-                "method": "hideTooltip",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keydown",
-                "method": "handleKeyPress",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/eds-tooltip/eds-tooltip.stories.js

@@ -1,21 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Components/Tooltip',
-    component: 'eds-tooltip',
-    argTypes: {
-        content: { control: 'text' }
-    },
-    args: {
-        content: 'This is a tooltip message.'
-    }
-};
-export const Default = {
-    render: (args) => html `
-    <eds-tooltip content="${args.content}">
-      <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
-    </eds-tooltip>
-  `,
-    args: {
-        content: 'This is a tooltip message.'
-    }
-};