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

package/dist/collection/shared-ui/eds-login/eds-login.js

@@ -1,72 +1,83 @@
 import { h } from "@stencil/core";
-import { initKeycloak, login, logout, isAuthenticated, getUser } from "../../utils/keycloak";
-/**
- * `EdsLogin` is a login component that integrates Keycloak authentication,
- * allowing users to log in and out and manage authentication states.
- * This component is used to handle user login, logout, and authentication status display.
- *
- * This component is ideal for applications that require Keycloak-based authentication,
- * providing a simple login/logout interface and managing user session states.
- */
+import { login, logout, isAuthenticated, getUser, initKeycloak } from "../../utils/keycloak";
+import { toast } from "../../utils/toastManager";
 export class EdsLogin {
     constructor() {
-        // Method to handle user logout
-        this.handleLogout = () => {
-            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 login();
+                    toast.show('You are authenticated', 'success');
+                }
+                catch (error) {
+                    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 logout();
+            }
+            catch (error) {
+                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 initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig);
-            // eslint-disable-next-line
-            // Set authentication state and fetch user data if authenticated
-            this.authenticated = isAuthenticated();
-            if (this.authenticated) {
+            }, true);
+            if (isAuthenticated()) {
                 this.user = getUser();
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
-            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) {
-                login(); // Start the Keycloak login process
-            }
+            toast.show(error.message, 'error');
         }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Login failed:', error);
-        }
-    }
-    getBtnLabel() {
-        return this.authenticated ? 'Logout' : 'Login';
     }
     render() {
-        return (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 (h("div", { key: 'cd30a135920ae77959330a43a8544bb9c231986e', class: "block" }, !this.authenticated && (h("eds-button", { key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
     static get is() { return "eds-login"; }
     static get encapsulation() { return "shadow"; }
@@ -84,11 +95,10 @@ export class EdsLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL of the Keycloak server.\nThis is the base URL where your Keycloak instance is hosted,"
+                    "text": "The URL of the Keycloak server.\nThis is the base URL where your Keycloak instance is hosted."
                 },
                 "attribute": "keycloak-url",
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": false
             },
             "keycloakRealm": {
                 "type": "string",
@@ -105,8 +115,7 @@ export class EdsLogin {
                     "text": "The Keycloak Realm.\nA realm in Keycloak is a space where you manage a set of users, roles,\ngroups, and credentials."
                 },
                 "attribute": "keycloak-realm",
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": false
             },
             "keycloakClientId": {
                 "type": "string",
@@ -123,8 +132,7 @@ export class EdsLogin {
                     "text": "The Keycloak Client ID.\nThe client ID represents the client application that Keycloak protects.\nIt's configured in the Keycloak admin console and used to identify the app\nrequesting authentication.\nExample: `my-client-app`"
                 },
                 "attribute": "keycloak-client-id",
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": false
             }
         };
     }
@@ -143,10 +151,10 @@ export class EdsLogin {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the authentication status changes.\nIt emits a boolean value indicating the new authentication status."
+                    "text": "Event emitted when the authentication status changes."
                 },
                 "complexType": {
-                    "original": "{\n    authenticated: boolean;\n    user: any;\n  }",
+                    "original": "{ authenticated: boolean; user: any }",
                     "resolved": "{ authenticated: boolean; user: any; }",
                     "references": {}
                 }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { toast } from "../../utils/toastManager";
-import { matomoOptIn } from "../../../../../../../packages/utils/src/index";
+import { matomoOptIn } from "../../utils/analytics";
 /**
  * A Stencil component for displaying a Matomo analytics consent notice.
  * Provides users with the option to opt in or opt out of anonymous analytics.

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: 'a6a3e2084eb01def71f6fee67ebe8c5f4f613c89' }, h("p", { key: '43b92e9c33f8abef6070a6a3cd77f7573e2ab454', class: "f-ui-02" }, this.title), h("ul", { key: 'c0e0dfdeff373885f62250c8bf4385268410406c', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: '615a7cb2c26060d2d4cde875291a081b7de12e19' }, h("p", { key: '9e19ad59fcc94508cb60cd4aafa87c3878fb2ebc', class: "f-ui-02" }, this.title), h("ul", { key: 'a4811d16447ab148a7c129f188405f3f7050df70', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -1,4 +1,4 @@
-import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 /**
@@ -127,7 +127,7 @@ export class EdsTabs {
         });
     }
     render() {
-        return (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-['']" }, 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" }, h("nav", { key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (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-['']" }, 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" }, h("nav", { key: '99bbfabd817bada1984ddf87a274bf9304a1e6a0', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));

package/dist/collection/shared-ui/eds-tabs-content/eds-tabs-content.js

@@ -1,4 +1,4 @@
-import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 /**
@@ -114,11 +114,11 @@ export class EdsTabsContent {
         });
     }
     render() {
-        return (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-['']" }, 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" }, h("nav", { key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (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-['']" }, 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" }, h("nav", { key: '525f56d02b41e236d3b713fb972b6803e3f908d5', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
+        })), h("slot", { key: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f' }))));
     }
     static get is() { return "eds-tabs-content"; }
     static get properties() {

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -28,7 +28,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '459148404380e386117387f42183e24a069b2de6', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '22cb79fd617ca1701fba63d3d4bf04f73ce1ac77', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-user/eds-user.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { initKeycloak, isAuthenticated, getUser, login, logout, checkServerAvailability } from "../../utils/keycloak";
+import { isAuthenticated, getUser, login, logout, checkServerAvailability, initKeycloak } from "../../utils/keycloak";
+import { toast } from "../../utils/toastManager";
 /**
  * `EdsUser` is a user authentication component for managing and displaying
  * the user's authentication state using Keycloak. It provides login and logout
@@ -16,15 +17,25 @@ export class EdsUser {
          */
         this.handleLogin = () => {
             if (!this.authenticated) {
-                login();
+                try {
+                    login();
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
             }
         };
         /**
          * Handles user logout by invoking the Keycloak `logout` function.
          * Resets the `authenticated` state to `false` after logout.
          */
-        this.handleLogout = () => {
-            logout();
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
             this.authenticated = false;
             this.user = null;
         };
@@ -33,8 +44,8 @@ export class EdsUser {
         this.keycloakClientId = undefined;
         this.user = null;
         this.authenticated = false;
-        this.serverAvailable = false;
         this.username = '';
+        this.serverAvailable = false;
     }
     /**
      * Lifecycle method that runs when the component is about to load.
@@ -49,7 +60,7 @@ export class EdsUser {
         }
         this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
         if (!this.serverAvailable) {
-            //toast.show('Keycloak server is unavailable.', 'error');
+            toast.show('Keycloak server is unavailable.', 'error');
             return; // Do not proceed further
         }
         await this.initAuth();
@@ -61,35 +72,27 @@ export class EdsUser {
      */
     async initAuth() {
         try {
-            const keycloakConfig = {
+            await initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig, true);
-            // Set authentication state and fetch user data if authenticated
-            //this.authenticated = isAuthenticated();
+            }, true);
             if (isAuthenticated()) {
                 this.user = getUser();
                 this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization failed:', error);
+            toast.show(error.message, 'error');
         }
     }
     render() {
         var _a;
-        // If the server is unavailable, render null
-        if (!this.serverAvailable) {
-            return null;
-        }
-        return (h("div", { class: "block" }, !this.authenticated ? (h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (h("div", { class: "flex items-center" }, 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" }, h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
+        return (h("div", { key: '22ee744979511dd2f8a1e1a15bb99215eadd535b', class: "block" }, !this.authenticated ? (h("eds-button", { label: "Login", intent: "primary", onClick: this.handleLogin, "extra-class": "text-default" })) : (h("div", { class: "flex items-center" }, 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" }, h("eds-user-modal", { user: JSON.stringify(this.user), onLogout: this.handleLogout.bind(this) }))))));
     }
     static get is() { return "eds-user"; }
     static get properties() {
@@ -151,8 +154,8 @@ export class EdsUser {
         return {
             "user": {},
             "authenticated": {},
-            "serverAvailable": {},
-            "username": {}
+            "username": {},
+            "serverAvailable": {}
         };
     }
     static get events() {

package/dist/collection/shared-ui/eds-user-modal/eds-user-modal.js

@@ -30,7 +30,7 @@ export class EdsUserModal {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: 'ad99ddd7c2710ef90840a5571ab6a161178cacc0', class: "min-w-[280px] p-8" }, h("div", { key: 'd1da12f3a965fa7503fb3e00566db0796b803352', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'c3d3ca80a9d23cc88f8ee6801b29995138c9b7c6', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: '4efe378b3a9ce76d35e642db150be13d0434db72', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '1068082a2894e3c3e3f77d1eea923f9c39d8766c', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: 'b86e08b806a37c9957bca7f9ee268303e7ace134', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: 'b3514920e1eb4906cb7f7705bfbc986166e84946', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '61941fa0a19a19087da886a73d85d7e438d2c0b0', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: '5ad2be1763726c9d794b78a2593106fd8ba1dc7b', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: 'dbe3a9de56bf5ccc26426ddb831f2d1a27a0e6ff', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (h("eds-link", { key: '642890827e2fa6735bc616e680dbda481c2c0053', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+        return (h("div", { key: '4a80335b6a59b9653130ca75a6e42c04fce68f4f', class: "min-w-[280px] p-8" }, h("div", { key: '9c97f6be46216587692d4852174cecfaacb70593', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: '7f453546c9cc54597069abb3e4b50312fe7bf364', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '34e080ef159535820c09378701de0e6f4fd96009', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: '002dec51e979c29f2343f55e004449e4cee4075c', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '740b78c504257fb755ba7ba04dd25f023d37ed33', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (h("eds-link", { key: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
     }
     static get is() { return "eds-user-modal"; }
     static get properties() {

package/dist/collection/utils/analytics.js

@@ -0,0 +1,85 @@
+// Helper function to check if Matomo is initialized
+function isMatomoAvailable() {
+    return typeof window !== 'undefined' && typeof window._paq !== 'undefined';
+}
+// General function to push data to Matomo
+function pushToMatomo(action, ...args) {
+    //console.log('Pushing Matomo')
+    if (isMatomoAvailable()) {
+        window._paq.push([action, ...args]);
+    }
+    else {
+        // eslint-disable-next-line
+        console.warn('Matomo is not available or not initialized.');
+    }
+}
+// Function to send analytics data
+export function sendAnalytics(eventData) {
+    var _a;
+    if (!isMatomoAvailable()) {
+        // eslint-disable-next-line
+        console.warn('Matomo is not available or not initialized.');
+        // eslint-disable-next-line
+        console.log(Object.assign({}, eventData));
+        return;
+    }
+    // Conditionally build the name field
+    const nameParts = [];
+    if ((_a = eventData.parentContext) === null || _a === void 0 ? void 0 : _a.componentName) {
+        nameParts.push(eventData.parentContext.componentName);
+    }
+    nameParts.push(eventData.tag || 'unknown-tag');
+    nameParts.push(eventData.name || 'unknown-name');
+    const name = nameParts.join('/');
+    //console.log('trackEvent', eventData.category, eventData.action, name)
+    pushToMatomo('trackEvent', eventData.category, eventData.action, name);
+    // eslint-disable-next-line
+    console.log(Object.assign({}, eventData));
+}
+// Function to opt-in the user
+export function matomoOptIn() {
+    if (isMatomoAvailable()) {
+        window._paq.push(['rememberConsentGiven']);
+        // eslint-disable-next-line
+        console.log('User has opted in to tracking');
+    }
+}
+// Function to opt-out the user
+export function matomoOptOut() {
+    if (isMatomoAvailable()) {
+        window._paq.push(['forgetConsentGiven']);
+        // eslint-disable-next-line
+        console.log('User has opted out of tracking');
+    }
+}
+// Check if consent was already given
+export function isUserOptedIn() {
+    if (isMatomoAvailable()) {
+        return window._paq.push(['hasConsent']);
+    }
+    return null;
+}
+// Check if the user has opted out
+export function isUserOptedOut() {
+    if (isMatomoAvailable()) {
+        return window._paq.push(['hasRememberedConsent']);
+    }
+    return null;
+}
+/**
+ * Emits a custom event called `parentContext` for a given link element.
+ * This event provides context information about the breadcrumb component.
+ *
+ * @param linkElement - The link element to which the event will be dispatched.
+ */
+export function emitContext(linkElement, componentName, identifier) {
+    const event = new CustomEvent('parentContext', {
+        detail: {
+            componentName: componentName.toLowerCase(),
+            identifier: identifier || null
+        },
+        bubbles: true, // Allow the event to propagate up the DOM
+        cancelable: true
+    });
+    linkElement.dispatchEvent(event);
+}

package/dist/collection/utils/color.js

@@ -0,0 +1,129 @@
+import { cva } from "class-variance-authority";
+export const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
+export const gradientBGColorVariants = cva([], {
+    variants: {
+        color: GRADIANT_TOKENS.reduce((acc, token) => (Object.assign(Object.assign({}, acc), { [token]: '' })), {}),
+        direction: {
+            top: '',
+            bottom: ''
+        },
+        pseudo: {
+            true: 'before:effect-opacity effect-bg-behind',
+            false: ''
+        },
+        hover: {
+            true: 'before:opacity-0 hover:before:opacity-100',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // region GREEN
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: true,
+            className: 'before:bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: true,
+            direction: 'bottom',
+            className: 'before:bg-gradient-01-bottom'
+        },
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: false,
+            className: 'bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: false,
+            direction: 'bottom',
+            className: 'bg-gradient-01-bottom'
+        },
+        // endregion
+        // region YELLOW
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: true,
+            className: 'before:bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: true,
+            className: 'before:bg-gradient-02-bottom'
+        },
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: false,
+            className: 'bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: false,
+            className: 'bg-gradient-02-bottom'
+        },
+        // endregion
+        // region PURPLE
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-03-bottom'
+        },
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-03-bottom'
+        },
+        // endregion
+        // region AMONG-BLUE
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-04-bottom'
+        },
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-04-bottom'
+        }
+        // endregion
+    ],
+    defaultVariants: {
+        direction: 'top',
+        pseudo: true
+    }
+});

package/dist/collection/utils/global.js

@@ -0,0 +1,8 @@
+import { initKeycloak } from "./keycloak";
+const keycloakConfig = {
+    url: 'http://localhost:8080',
+    realm: 'nigeor-realm',
+    clientId: 'stencil-app'
+};
+// Initialize Keycloak and then trigger the login process.
+initKeycloak(keycloakConfig);

package/dist/collection/utils/keycloak.js

@@ -1,7 +1,14 @@
 import Keycloak from "keycloak-js/lib/keycloak";
 let keycloak = null;
+let keycloakInitPromise = null;
 // Initialize Keycloak with an optional silent check
 export function initKeycloak(config, silentCheck = true) {
+    // If already initializing or initialized, return the cached promise
+    if (keycloakInitPromise) {
+        // eslint-disable-next-line
+        console.log('Keycloak already initialized, returning from cache');
+        return keycloakInitPromise;
+    }
     if (!keycloak) {
         keycloak = new Keycloak({
             url: config.url,
@@ -9,7 +16,7 @@ export function initKeycloak(config, silentCheck = true) {
             clientId: config.clientId
         });
     }
-    return keycloak
+    keycloakInitPromise = keycloak
         .init({
         onLoad: silentCheck ? 'check-sso' : 'login-required',
         checkLoginIframe: false
@@ -21,6 +28,7 @@ export function initKeycloak(config, silentCheck = true) {
         console.error('Failed to initialize Keycloak:', error);
         return false;
     });
+    return keycloakInitPromise;
 }
 // Get the username of the authenticated user
 export function getUsername() {
@@ -50,8 +58,7 @@ export function login() {
         keycloak.login();
     }
     else {
-        // eslint-disable-next-line
-        console.error('Keycloak is not initialized.');
+        throw new Error('Keycloak is not initialized.');
     }
 }
 // Log out the user
@@ -60,8 +67,7 @@ export function logout() {
         keycloak.logout();
     }
     else {
-        // eslint-disable-next-line
-        console.error('Keycloak is not initialized.');
+        throw new Error('Keycloak is not initialized.');
     }
 }
 // Check if the user is authenticated