@ebrains/components 0.9.3-beta → 1.1.0

package/dist/cjs/eds-toast-manager.cjs.entry.js

@@ -2,8 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
-const toastManager = require('./toastManager-4e9535f3.js');
+const index = require('./index-88c8039f.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;
@@ -16,7 +45,7 @@ const EdsToastManager = class {
     }
     connectedCallback() {
         // Initialize the ToastManager singleton with this element
-        toastManager.toast.init(this.hostElement);
+        toast.init(this.hostElement);
         // Listen for custom events
         this.hostElement.addEventListener('show-toast', (event) => {
             const { message, intent } = event.detail;
@@ -37,7 +66,7 @@ const EdsToastManager = class {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (index.h("div", { key: 'cc2aa94e01507dc8c27e82dfa550af5da6eaba3e', class: "toast-container" }, this.toasts.map((t) => (index.h("div", { key: t.id }, index.h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (index.h("div", { key: 'b86b71e71fa88b56acab6d7060e7b05beec344e1', class: "toast-container" }, this.toasts.map((t) => (index.h("div", { key: t.id }, index.h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/eds-toast.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 const index$1 = require('./index-ab9fbefe.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)}";
@@ -32,7 +32,7 @@ const EdsToast = class {
         };
         this.message = undefined;
         this.intent = 'default';
-        this.duration = 5000;
+        this.duration = undefined;
         this.visible = true;
     }
     componentDidLoad() {
@@ -55,8 +55,9 @@ const EdsToast = class {
         btnElement.dispatchEvent(event);
     }
     connectedCallback() {
-        // Auto-dismiss the toast after the specified duration
-        this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+        if (this.duration && this.duration > 0) {
+            this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+        }
     }
     disconnectedCallback() {
         // Clear the timeout when the component is removed

package/dist/cjs/eds-tooltip.cjs.entry.js

@@ -2,105 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
-const analytics = require('./analytics-d8fb3fdd.js');
+const index = require('./index-88c8039f.js');
+const analytics = require('./analytics-28713bf7.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 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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         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;
+    /** fire analytics on every hover */
+    handleHover() {
         analytics.sendAnalytics({
             category: 'ui-component',
-            parentContext: null,
             tag: this.el.tagName.toLowerCase(),
-            name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            name: this.content.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 (index.h("div", { key: '7bc92c002eaf263a2d10a2391f356f40e23d5998', class: "relative" }, index.h("slot", { key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a' }), this.isVisible && this.isPositioned && this.content && (index.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))));
+        return (index.h("div", { key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6', class: "relative inline-block group" }, index.h("slot", { key: '7a41d90940fff4e8b887ec4a3240371466f219a5' }), index.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 index.getElement(this); }
 };

package/dist/cjs/eds-trl.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 
 const EdsTrl = class {
     constructor(hostRef) {
@@ -44,7 +44,7 @@ const EdsTrl = class {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (index.h("div", { key: '7f2775e107e053cf1e8091f97915e6bc372c3954', class: "container mx-auto px-4 py-8" }, index.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" })));
+        return (index.h("div", { key: '8a798c644632d3168af51aa8a0775b7455ab5b52', class: "container mx-auto px-4 py-8" }, index.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" })));
     }
 };
 

package/dist/cjs/incorrect-use-of-colors.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 
 const primary = [
     {
@@ -43,7 +43,7 @@ const IncorrectUseOfColors = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '1cfc3c78012371498476886214e85fbf6e387626', class: "container" }, index.h("eds-alert", { key: '33449eeae0bca270a82d32de75d5d7c54d8b8c6c', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), index.h("div", { key: 'd436f34bf074c175c6308b822c820604a5e272bc', class: "flex" }, index.h("div", { key: '5f839c0f214b774f13af1499fe3e5f8485f959c5', class: "w-full" }, index.h("ul", { key: '5cbb81288c0e61431aed523d77f2c6d231c8ce7e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: '3622c7c8376208843d3e59c6548e41d9ca8c2b21', class: "w-full" }, index.h("ul", { key: 'd74e34f45e1d377be5f1087a345dee219b1fc5a3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (index.h("div", { key: '3503dcc0e2d3f5b08eec400e74484e5725d7b4af', class: "container" }, index.h("div", { key: '657857e8826e60c498450326306234c59b4e770b', class: "mb-8" }, index.h("eds-alert", { key: '88512240affc65314593f8573b3a13f58fb2806d', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), index.h("div", { key: '8614d445187d2614e5833b8c89c66b178762574e', class: "flex" }, index.h("div", { key: '1b36d52dbcbb65e1edb4513899ec898d691193c0', class: "w-full" }, index.h("ul", { key: '13fb2eaca0ad3fb93487f6c0c976142a18870b4d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), index.h("div", { key: 'adec93113e4c02168906e1da65f48c20e9b2c7dc', class: "w-full" }, index.h("ul", { key: 'd0b43589866f53c92084b270afb3571ed2723fc8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };