@ebrains/components 0.4.0-alpha.0 → 0.5.0-alpha.0

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

@@ -3,69 +3,88 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const keycloak = require('./keycloak-5aaa21af.js');
+const keycloak = require('./keycloak-93fc0315.js');
+const toastManager = require('./toastManager-4e9535f3.js');
 
 const EdsLogin = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.authStatusChanged = index.createEvent(this, "authStatusChanged", 7);
-        // Method to handle user logout
-        this.handleLogout = () => {
-            keycloak.logout();
-            this.authenticated = false; // Reset authentication state after logout
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await keycloak.login();
+                    toastManager.toast.show('You are authenticated', 'success');
+                }
+                catch (error) {
+                    toastManager.toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await keycloak.logout();
+            }
+            catch (error) {
+                toastManager.toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
         };
-        this.keycloakUrl = '';
-        this.keycloakRealm = '';
-        this.keycloakClientId = '';
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
         this.authenticated = false;
         this.user = null;
     }
-    // Lifecycle method to check authentication status before the component loads
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
     async componentWillLoad() {
-        await this.checkAuthentication();
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        await this.initAuth();
     }
-    // Method to initialize Keycloak and check if the user is authenticated
-    async checkAuthentication() {
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
         try {
-            const keycloakConfig = {
+            await keycloak.initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await keycloak.initKeycloak(keycloakConfig);
-            // eslint-disable-next-line
-            // Set authentication state and fetch user data if authenticated
-            this.authenticated = keycloak.isAuthenticated();
-            if (this.authenticated) {
+            }, true);
+            if (keycloak.isAuthenticated()) {
                 this.user = keycloak.getUser();
-            }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization or login check failed:', error);
-        }
-    }
-    // Method to handle user login
-    async handleLogin() {
-        try {
-            if (!this.authenticated) {
-                keycloak.login(); // Start the Keycloak login process
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Login failed:', error);
+            toastManager.toast.show(error.message, 'error');
         }
     }
-    getBtnLabel() {
-        return this.authenticated ? 'Logout' : 'Login';
-    }
     render() {
-        return (index.h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
+        return (index.h("div", { key: 'cd30a135920ae77959330a43a8544bb9c231986e', class: "block" }, !this.authenticated && (index.h("eds-button", { key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
 };
 

package/dist/cjs/eds-logo-variations.cjs.entry.js

@@ -20,7 +20,7 @@ const EdsLogoVariations = class {
         }
     }
     render() {
-        return index.h("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+        return index.h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
     }
 };
 

package/dist/cjs/eds-matomo-notice.cjs.entry.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
 const toastManager = require('./toastManager-4e9535f3.js');
-const color = require('./color-88793e49.js');
-require('./index-ab9fbefe.js');
+const analytics = require('./analytics-223ea8e5.js');
 
 const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-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))}.md\\:-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))}}";
 const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
@@ -65,7 +64,7 @@ const EdsMatomoNotice = class {
      * Calls the `matomoOptIn` utility and shows a success toast notification.
      */
     optInAnalytics() {
-        color.matomoOptIn();
+        analytics.matomoOptIn();
         toastManager.toast.show('You have opted in to analytics.', 'success');
         this.hideNotice();
     }

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

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+const analytics = require('./analytics-223ea8e5.js');
+
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const EdsModalStyle0 = edsModalCss;
+
+const EdsModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.title = '';
+        this.truncate = true;
+        this.truncateLines = '1';
+        this.position = 'middle';
+    }
+    getTruncateClass() {
+        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+    }
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    getModalPositionClasses() {
+        switch (this.position) {
+            case 'top':
+                return 'left-1/2 top-20 -translate-x-1/2';
+            case 'bottom':
+                return 'left-1/2 bottom-20 -translate-x-1/2';
+            case 'left':
+                return 'left-20 top-1/2 -translate-y-1/2';
+            case 'right':
+                return 'right-20 top-1/2 -translate-y-1/2';
+            case 'middle':
+            default:
+                return 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+        }
+    }
+    /**
+     * Opens the modal.
+     */
+    async open() {
+        var _a;
+        this.isOpen = true;
+        analytics.sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'opened'
+        });
+    }
+    /**
+     * Closes the modal.
+     */
+    async close() {
+        var _a;
+        this.isOpen = false;
+        analytics.sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'closed'
+        });
+    }
+    /**
+     * Toggles the modal open or closed.
+     */
+    async toggle() {
+        this.isOpen = !this.isOpen;
+    }
+    /**
+     * Closes the modal when the Escape key is pressed.
+     */
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    render() {
+        // Generate a unique id for the title so we can reference it for aria-labelledby.
+        const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
+        return (index.h("div", { key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (index.h("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+            ,
+            onClick: () => this.close() })), index.h("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, index.h("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, index.h("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), index.h("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), index.h("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, index.h("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsModal.style = EdsModalStyle0;
+
+exports.eds_modal = EdsModal;

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

@@ -35,7 +35,7 @@ const EdsNavigator = class {
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (index.h("ul", { key: '1ab60197bbc9ee86d77134138744dce39df2aaa7', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (index.h("eds-link", { key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, index.h("eds-icon-wrapper", { key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (index.h("eds-link", { key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, index.h("eds-icon-wrapper", { key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352', icon: "chevron-right", class: "w-20 h-20" })))));
+        return (index.h("ul", { key: '712287e683436cc98c2d6ef195501add1929522e', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (index.h("eds-link", { key: '4fda36ce37897284d7062f88133f147831d96a6f', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, index.h("eds-icon-wrapper", { key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (index.h("eds-link", { key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, index.h("eds-icon-wrapper", { key: '44ebd4dcce0e367df7d9035bb445e49fde35e913', icon: "chevron-right", class: "w-20 h-20" })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const color = require('./color-88793e49.js');
-require('./index-ab9fbefe.js');
+const analytics = require('./analytics-223ea8e5.js');
 
 const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 const EdsPaginationStyle0 = edsPaginationCss;
@@ -174,7 +173,7 @@ const EdsPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '584e0918b070eac25a7c4bfceff59b000b60076c' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: 'c688bd8e1f1d15904fc274454093f03213f59e38', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, index.h("span", { key: 'c2472919bad41f76e26d518da27509e545ed9db6', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination" }, index.h("ul", { class: "flex items-center justify-center gap-x-8" }, index.h("li", { class: "mr-auto" }, index.h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (index.h("div", { key: '8c8418eec263acc153a928b752775458f897504f' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: '02a5a69772a4812f10b29e8df117b72df210614d', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, index.h("span", { key: 'ef9804843100c722643c24e31a05f86f2d55efa0', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination" }, index.h("ul", { class: "flex items-center justify-center gap-x-8" }, index.h("li", { class: "mr-auto" }, index.h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'
@@ -307,7 +306,7 @@ const EdsTable = class {
     }
     handlePageChange(newPage) {
         this.currentPage = newPage;
-        color.sendAnalytics({
+        analytics.sendAnalytics({
             category: 'ui-component',
             parentContext: null,
             tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
@@ -365,15 +364,15 @@ const EdsTable = class {
                     ? this.hostEl.getRootNode().host.getBoundingClientRect().width
                     : 400;
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        return (index.h("div", { key: '69fd87330d2049eeb91751c781c7aa753fa89883' }, this.searchEnabled && (index.h("div", { key: '2f9680dd17b852b140fe560f7979e1dd58236c5a' }, index.h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (index.h("div", { key: '66ca59804bc8054655ed0d942104516fe4cd259b' }, this.searchEnabled && (index.h("div", { key: 'df7267fc443da042e4b6ff81ded5800a2213bd73' }, index.h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), index.h("div", { key: 'd67edb24308e526a3e860a90250d58cf8bfee9c8', class: "mt-20" }, index.h("table", { key: '9a2ef219110e459ac670a0f9c2e62c600f6b5acd', class: "block overflow-x-auto mt-6 p-0" }, index.h("thead", { key: '81bae222447e805d06642dda19903d5bf99f2b01' }, index.h("tr", { key: '582d7ea661823b81ccdf3adc9769fe53cf56f04c', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), index.h("div", { key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36', class: "mt-20" }, index.h("table", { key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca', class: "block overflow-x-auto mt-6 p-0" }, index.h("thead", { key: '8b844806cfef10d1a59da54a385ee8ed6c167050' }, index.h("tr", { key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth}px` } }, column));
-        }))), index.h("tbody", { key: 'ce7f87e665c394c5e9f2201ef2658e888ea07948' }, paginatedRows.map((row) => (index.h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 5}px` } }, column));
+        }))), index.h("tbody", { key: '93dfd3abd196779c288f85bb6a357ad3e9c01418' }, paginatedRows.map((row) => (index.h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (index.h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (index.h("div", { key: '0fe6aed0d03c3aa491cd1bb17cd3bdc1e35372a0', class: "mt-20" }, index.h("eds-pagination", { key: '5192f3f4b2ee93d5864d1afed3341a122c826d97', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (index.h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 5}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (index.h("div", { key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58', class: "mt-20" }, index.h("eds-pagination", { key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/eds-progress-bar.cjs.entry.js

@@ -21,7 +21,7 @@ const EdsProgressBar = class {
     }
     render() {
         const progressValue = this.value;
-        return (index.h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, index.h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (index.h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, index.h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
 };
 EdsProgressBar.style = EdsProgressBarStyle0;

package/dist/cjs/eds-section-core_2.cjs.entry.js

@@ -16,7 +16,7 @@ const EdsSectionCore = class {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (index.h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, index.h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+        return (index.h(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, index.h("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
     }
 };
 EdsSectionCore.style = EdsSectionCoreStyle0;
@@ -46,12 +46,12 @@ const EdsSectionHeading = class {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (index.h(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+        return (index.h(TagType, { key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, index.h(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 

package/dist/cjs/eds-svg-repository.cjs.entry.js

@@ -318,7 +318,7 @@ const EdsSvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (index.h("eds-table", { key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        return (index.h("eds-table", { key: 'a7d7fa426da72e174880a300202390c1016b74df', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     get hostEl() { return index.getElement(this); }
 };

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

@@ -33,7 +33,7 @@ const EdsTab = class {
         this.ariaLabel = undefined;
     }
     render() {
-        return (index.h("a", { key: 'ba4c995637d8d305249f018a0451775f45907716', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
+        return (index.h("a", { key: 'a55be2a07e554ab13a0d7e913710382d6126da57', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
     }
 };
 

package/dist/cjs/eds-tabs-content.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const color = require('./color-88793e49.js');
+const analytics = require('./analytics-223ea8e5.js');
 const index$1 = require('./index-ab9fbefe.js');
 
 const EdsTabsContent = class {
@@ -110,7 +110,7 @@ const EdsTabsContent = class {
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tabContentChange.emit({ index: index, name: tabLabel });
-        color.sendAnalytics({
+        analytics.sendAnalytics({
             category: 'ui-component',
             tag: this.el.tagName.toLowerCase(),
             name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
@@ -118,11 +118,11 @@ const EdsTabsContent = class {
         });
     }
     render() {
-        return (index.h("div", { key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("div", { key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, index.h("nav", { key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'aa94a55d3ae658797df6ae75724238a17a80a169', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("div", { key: '0e38c695467c272198a605efdb2705b14239756e', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, index.h("nav", { key: '525f56d02b41e236d3b713fb972b6803e3f908d5', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index$1);
             return (index.h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index$1 === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index$1, tab.label) })));
-        })), index.h("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
+        })), index.h("slot", { key: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const color = require('./color-88793e49.js');
+const analytics = require('./analytics-223ea8e5.js');
 const index$1 = require('./index-ab9fbefe.js');
 
 const edsTabsCss = "";
@@ -120,7 +120,7 @@ const EdsTabs = class {
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tabChange.emit({ tabId: this.id, index: index, name: tabLabel });
-        color.sendAnalytics({
+        analytics.sendAnalytics({
             category: 'ui-component',
             tag: this.el.tagName.toLowerCase(),
             name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
@@ -128,7 +128,7 @@ const EdsTabs = class {
         });
     }
     render() {
-        return (index.h("div", { key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("div", { key: 'f0266d39c943b82725ded757cce0b35fb85fa874', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, index.h("nav", { key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'f5c9e076fc1fb95b57e0148d85865ce62c14fbe7', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("div", { key: '7d382167fb62999e39b784ce8bfba24267c87a64', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, index.h("nav", { key: '99bbfabd817bada1984ddf87a274bf9304a1e6a0', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index$1);
             return (index.h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index$1 === this.activeIndex, onClick: () => this.handleTabClick(index$1, tab.label) })));

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

@@ -62,7 +62,7 @@ const EdsTimeline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '994cc7af75950a0f09d108804efff796602aeb93', class: "relative" }, index.h("div", { key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.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
+        return (index.h("div", { key: '1ba4a93ce518b52f5821af75ae0587c44db92c6d', class: "max-w-sidebar mx-auto px-4 py-8" }, index.h("div", { key: '3e019420ddd4bfab7800567c7130299ea47205c6', class: "relative" }, index.h("div", { key: 'df99ce8fb08232c46449d7485dd7cffcd04b64d6', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), index.h("div", { key: '1b52694d2e8c3656910c02680aa8ce2e78b02997', class: "space-y-16" }, this.parsedEvents.map((event, index$1) => (index.h("div", { class: "relative flex" }, index.h("div", { class: `w-1/2 ${index$1 % 2 === 0 ? 'pr-4' : ''}` }, index$1 % 2 === 0 && (index.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) }))), index.h("div", { class: "flex items-center justify-center relative" }, event.completed ? (index.h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (index.h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), index.h("div", { class: `w-1/2 ${index$1 % 2 !== 0 ? 'pl-4' : ''}` }, index$1 % 2 !== 0 && (index.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' }]

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const color = require('./color-88793e49.js');
-require('./index-ab9fbefe.js');
+const analytics = require('./analytics-223ea8e5.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;
@@ -26,7 +25,7 @@ const EdsTooltip = class {
         await this.updateTooltipPosition();
         this.isPositioned = true;
         this.isVisible = true;
-        color.sendAnalytics({
+        analytics.sendAnalytics({
             category: 'ui-component',
             parentContext: null,
             tag: this.el.tagName.toLowerCase(),
@@ -97,7 +96,7 @@ const EdsTooltip = class {
         }
     }
     render() {
-        return (index.h("div", { key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018', class: "relative" }, index.h("slot", { key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d' }), this.isVisible && this.isPositioned && this.content && (index.h("div", { key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (index.h("div", { key: '1635b034319df4827a62ed58267d81db277ad19d', class: "relative" }, index.h("slot", { key: '6cdfd0f6d456b984464c5091a2829cdba69ba895' }), this.isVisible && this.isPositioned && this.content && (index.h("div", { key: '7e736731dc700e0273fdfe15202426d2db086aef', 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

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

@@ -44,7 +44,7 @@ const EdsTrl = class {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (index.h("div", { key: '868a7c45e6495d7a2ed8a4ad2974ac31f74535a6', class: "container mx-auto px-4 py-8" }, index.h("eds-table", { key: 'ed3e2a949d0e1d66a5e80018fa5fcac9bbe64620', 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: 'a329a001d6275fcfe7df9bddf83bd289effe4151', class: "container mx-auto px-4 py-8" }, index.h("eds-table", { key: '93aebfd840b16416789b15eec0daa16d9126aa9f', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 };
 

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

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+const keycloak = require('./keycloak-93fc0315.js');
+const toastManager = require('./toastManager-4e9535f3.js');
+
+const EdsUser = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.authStatusChanged = index.createEvent(this, "authStatusChanged", 7);
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = () => {
+            if (!this.authenticated) {
+                try {
+                    keycloak.login();
+                }
+                catch (error) {
+                    toastManager.toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await keycloak.logout();
+            }
+            catch (error) {
+                toastManager.toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
+        };
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
+        this.user = null;
+        this.authenticated = false;
+        this.username = '';
+        this.serverAvailable = false;
+    }
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
+    async componentWillLoad() {
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        this.serverAvailable = await keycloak.checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+        if (!this.serverAvailable) {
+            toastManager.toast.show('Keycloak server is unavailable.', 'error');
+            return; // Do not proceed further
+        }
+        await this.initAuth();
+    }
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
+        try {
+            await keycloak.initKeycloak({
+                url: this.keycloakUrl,
+                realm: this.keycloakRealm,
+                clientId: this.keycloakClientId
+            }, true);
+            if (keycloak.isAuthenticated()) {
+                this.user = keycloak.getUser();
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
+            }
+        }
+        catch (error) {
+            toastManager.toast.show(error.message, 'error');
+        }
+    }
+    render() {
+        var _a;
+        return (index.h("div", { key: '22ee744979511dd2f8a1e1a15bb99215eadd535b', class: "block" }, !this.authenticated ? (index.h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (index.h("div", { class: "flex items-center" }, index.h("eds-dropdown", { label: `Welcome, ${(_a = this.user) === null || _a === void 0 ? void 0 : _a.username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, index.h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+    }
+    get hostEl() { return index.getElement(this); }
+};
+
+exports.eds_user = EdsUser;