@ebrains/components 0.9.3-beta → 1.0.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-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 } })))))))));
     }
 };