@ebrains/components 0.0.1-alpha.0

package/dist/components/eds-tooltip.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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 EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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() {
+        await this.updateTooltipPosition();
+        this.isPositioned = true;
+        this.isVisible = true;
+    }
+    /**
+     * Hide the tooltip.
+     */
+    hideTooltip() {
+        this.isVisible = false;
+        this.isPositioned = false; // Reset positioning when hiding
+    }
+    /**
+     * Hide the tooltip when the `Escape` key is pressed.
+     */
+    handleKeyPress(event) {
+        if (event.key === 'Escape') {
+            this.isVisible = false;
+            this.isPositioned = false; // Reset positioning when hiding
+        }
+    }
+    /**
+     * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
+     */
+    updateTooltipPosition() {
+        var _a, _b;
+        const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slotElement) {
+            return;
+        }
+        const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({ flatten: true })) || [];
+        const targetElement = assignedNodes.find((node) => node instanceof HTMLElement);
+        if (targetElement) {
+            const targetRect = targetElement.getBoundingClientRect();
+            const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
+            if (tooltipElement) {
+                const tooltipWidth = tooltipElement.offsetWidth;
+                const tooltipHeight = tooltipElement.offsetHeight;
+                // Calculate position based on the preferred `position` prop
+                let top = 0;
+                let left = 0;
+                switch (this.position) {
+                    case 'above':
+                        top = window.scrollY - tooltipHeight - 8; // Above with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    case 'below':
+                        top = tooltipHeight - window.scrollY + 18; // Below with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    /*case 'left':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.left - tooltipWidth - 8; // To the left with offset
+                      break;
+                    case 'right':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.right + 8; // To the right with offset
+                      break;*/
+                }
+                this.tooltipStyle = {
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    transform: 'translateX(0)' // No additional horizontal adjustment needed
+                };
+            }
+        }
+    }
+    render() {
+        return (h("div", { key: '79d0f81a61efe0e82be7870259f805c2bc3f47ad', class: "relative" }, h("slot", { key: 'dd923024ced5c206124cf72f395f75362e9df5b1' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '347ed6d492a2926ec3ec3fa407d0d9e3f727c4f1', 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))));
+    }
+    get el() { return this; }
+    static get style() { return edsTooltipCss; }
+}, [1, "eds-tooltip", {
+        "content": [1],
+        "position": [1],
+        "isVisible": [32],
+        "isPositioned": [32],
+        "tooltipStyle": [32]
+    }, [[1, "mouseover", "showTooltip"], [1, "mouseout", "hideTooltip"], [8, "keydown", "handleKeyPress"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTooltip$1);
+            }
+            break;
+    } });
+}
+
+const EdsTooltip = EdsTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTooltip, defineCustomElement };

package/dist/components/eds-user-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsUserModal extends Components.EdsUserModal, HTMLElement {}
+export const EdsUserModal: {
+    prototype: EdsUserModal;
+    new (): EdsUserModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-user-modal.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const edsUserModalCss = "";
+
+const EdsUserModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.user = undefined;
+        this.links = undefined;
+        this.onLogout = undefined;
+        this.parsedUser = {};
+        this.parsedLinks = [];
+    }
+    parseUserProp(newValue) {
+        this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    parseLinksProp(newValue) {
+        this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    componentWillLoad() {
+        this.parseUserProp(this.user);
+        this.parseLinksProp(this.links);
+    }
+    get initials() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
+    }
+    get hasLogout() {
+        return typeof this.onLogout === 'function';
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: 'c149d74cd31af6f3d670f915f9a8e3e32cf56193', class: "min-w-[280px] p-8" }, h("div", { key: '693c60745fe24e2f40017376d0e866ce67a9f5a5', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '19771e48bb2dbcee1a2229d9797aaa19769954eb', "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: 'f1343860a2747394557fd5b8420d2b3ff4f15b36', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '260d65312d9ed1c034973d83072493e0bb130a70', 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: 'a1d27ecaf56743991e0822eabad706aa3f46a64f', 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: '7a3ed5d4631f33afdc34c80b44ffa907761c4851', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '47e413879079033eeba8ce766d7b4dbf6b144781', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'a4f0cb91d2d488cb33ebae9bb2419f0aa0bc3e27', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '2549cf3f85593f38e340486813e64b5b719ac3d9', 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: '3ed5a3c3f6b3b07aa0c1c70cf7e07e8ffbcd38be', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+    }
+    static get watchers() { return {
+        "user": ["parseUserProp"],
+        "links": ["parseLinksProp"]
+    }; }
+};
+EdsUserModal.style = edsUserModalCss;
+
+export { EdsUserModal as eds_user_modal };

package/dist/components/eds-user-modal.js

@@ -0,0 +1,6 @@
+import { E as EdsUserModal$1, d as defineCustomElement$1 } from './eds-user-modal2.js';
+
+const EdsUserModal = EdsUserModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsUserModal, defineCustomElement };

package/dist/components/eds-user-modal2.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './eds-avatar2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-img2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
+
+const edsUserModalCss = "";
+
+const EdsUserModal = /*@__PURE__*/ proxyCustomElement(class EdsUserModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.user = undefined;
+        this.links = undefined;
+        this.onLogout = undefined;
+        this.parsedUser = {};
+        this.parsedLinks = [];
+    }
+    parseUserProp(newValue) {
+        this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    parseLinksProp(newValue) {
+        this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    componentWillLoad() {
+        this.parseUserProp(this.user);
+        this.parseLinksProp(this.links);
+    }
+    get initials() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
+    }
+    get hasLogout() {
+        return typeof this.onLogout === 'function';
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: 'c149d74cd31af6f3d670f915f9a8e3e32cf56193', class: "min-w-[280px] p-8" }, h("div", { key: '693c60745fe24e2f40017376d0e866ce67a9f5a5', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '19771e48bb2dbcee1a2229d9797aaa19769954eb', "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: 'f1343860a2747394557fd5b8420d2b3ff4f15b36', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '260d65312d9ed1c034973d83072493e0bb130a70', 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: 'a1d27ecaf56743991e0822eabad706aa3f46a64f', 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: '7a3ed5d4631f33afdc34c80b44ffa907761c4851', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '47e413879079033eeba8ce766d7b4dbf6b144781', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'a4f0cb91d2d488cb33ebae9bb2419f0aa0bc3e27', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '2549cf3f85593f38e340486813e64b5b719ac3d9', 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: '3ed5a3c3f6b3b07aa0c1c70cf7e07e8ffbcd38be', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+    }
+    static get watchers() { return {
+        "user": ["parseUserProp"],
+        "links": ["parseLinksProp"]
+    }; }
+    static get style() { return edsUserModalCss; }
+}, [0, "eds-user-modal", {
+        "user": [1],
+        "links": [1],
+        "onLogout": [16],
+        "parsedUser": [32],
+        "parsedLinks": [32]
+    }, undefined, {
+        "user": ["parseUserProp"],
+        "links": ["parseLinksProp"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-user-modal", "eds-avatar", "eds-icon-wrapper", "eds-img", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-user-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsUserModal);
+            }
+            break;
+        case "eds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsUserModal as E, defineCustomElement as d };

package/dist/components/eds-user.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsUser extends Components.EdsUser, HTMLElement {}
+export const EdsUser: {
+    prototype: EdsUser;
+    new (): EdsUser;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,86 @@
+import { r as registerInstance, a as createEvent, h, g as getElement } from './index-b384416e.js';
+import { b as login, l as logout, c as checkServerAvailability, i as initKeycloak, a as isAuthenticated, g as getUser } from './keycloak-b647d452.js';
+import { t as toast } from './toastManager-b716afd8.js';
+
+const EdsUser = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.authStatusChanged = 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) {
+                login();
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = () => {
+            logout();
+            this.authenticated = false;
+        };
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
+        this.user = null;
+        this.authenticated = false;
+        this.serverAvailable = false;
+        this.username = '';
+    }
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
+    async componentWillLoad() {
+        this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+        if (!this.serverAvailable) {
+            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 {
+            const keycloakConfig = {
+                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();
+            if (this.authenticated) {
+                this.user = getUser();
+            }
+            this.authStatusChanged.emit({
+                authenticated: this.authenticated,
+                user: this.user
+            }); // Emit auth status change
+            toast.show(`Welcome back, ${this.user.username}`, 'success');
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Keycloak initialization failed:', 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.bind(this), 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) }))))));
+    }
+    get hostEl() { return getElement(this); }
+};
+
+export { EdsUser as eds_user };

package/dist/components/eds-user.js

@@ -0,0 +1,6 @@
+import { E as EdsUser$1, d as defineCustomElement$1 } from './eds-user2.js';
+
+const EdsUser = EdsUser$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsUser, defineCustomElement };

package/dist/components/eds-user2.js

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as login, a as logout, c as checkServerAvailability, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
+import { t as toast } from './toastManager.js';
+import { d as defineCustomElement$7 } from './eds-avatar2.js';
+import { d as defineCustomElement$6 } from './eds-button2.js';
+import { d as defineCustomElement$5 } from './eds-dropdown2.js';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+import { d as defineCustomElement$1 } from './eds-user-modal2.js';
+
+const EdsUser = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.authStatusChanged = 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) {
+                login();
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = () => {
+            logout();
+            this.authenticated = false;
+        };
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
+        this.user = null;
+        this.authenticated = false;
+        this.serverAvailable = false;
+        this.username = '';
+    }
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
+    async componentWillLoad() {
+        this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+        if (!this.serverAvailable) {
+            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 {
+            const keycloakConfig = {
+                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();
+            if (this.authenticated) {
+                this.user = getUser();
+            }
+            this.authStatusChanged.emit({
+                authenticated: this.authenticated,
+                user: this.user
+            }); // Emit auth status change
+            toast.show(`Welcome back, ${this.user.username}`, 'success');
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Keycloak initialization failed:', 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.bind(this), 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) }))))));
+    }
+    get hostEl() { return this; }
+}, [0, "eds-user", {
+        "keycloakUrl": [1, "keycloak-url"],
+        "keycloakRealm": [1, "keycloak-realm"],
+        "keycloakClientId": [1, "keycloak-client-id"],
+        "user": [32],
+        "authenticated": [32],
+        "serverAvailable": [32],
+        "username": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link", "eds-user-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-user":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsUser);
+            }
+            break;
+        case "eds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-user-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsUser as E, defineCustomElement as d };

package/dist/components/eu.js

@@ -0,0 +1,30 @@
+const euSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
+  <defs>
+    <g id="d">
+      <g id="b">
+        <path id="a" d="m0-1-.3 1 .5.1z"/>
+        <use xlink:href="#a" transform="scale(-1 1)"/>
+      </g>
+      <g id="c">
+        <use xlink:href="#b" transform="rotate(72)"/>
+        <use xlink:href="#b" transform="rotate(144)"/>
+      </g>
+      <use xlink:href="#c" transform="scale(-1 1)"/>
+    </g>
+  </defs>
+  <path fill="#039" d="M0 0h640v480H0z"/>
+  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
+    <use xlink:href="#d" width="100%" height="100%" y="-6"/>
+    <use xlink:href="#d" width="100%" height="100%" y="6"/>
+    <g id="e">
+      <use xlink:href="#d" width="100%" height="100%" x="-6"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
+    </g>
+    <use xlink:href="#e" width="100%" height="100%" transform="scale(-1 1)"/>
+  </g>
+</svg>`;
+
+export { euSvg as e };

package/dist/components/facebook.js

@@ -0,0 +1,14 @@
+const facebook = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.9481 19.9556C16.0263 19.4781 20 15.2031 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 14.7129 3.26027 18.6643 7.64847 19.722V12.0931H6V9.36828H7.64847V7.73228C7.64847 5.50935 8.5793 4.1875 11.2239 4.1875H13.4256V6.91266H12.0494C11.0199 6.91266 10.9518 7.29347 10.9518 8.00415L10.9481 9.36797H13.4412L13.1494 12.0928H10.9481V19.9556Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { facebook as f };

package/dist/components/gradient-primary-palette.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GradientPrimaryPalette extends Components.GradientPrimaryPalette, HTMLElement {}
+export const GradientPrimaryPalette: {
+    prototype: GradientPrimaryPalette;
+    new (): GradientPrimaryPalette;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gradient-primary-palette.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const GradientPrimaryPalette = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Gradient primary palette data
+        this.colors = [
+            {
+                rgb: 'R156 G225 B66',
+                cmyk: 'C52 M0 Y98 K0',
+                hex: '#9CE142',
+                pantoneC: 'PANTONE 367 C',
+                pantoneU: 'PANTONE 374 U',
+                background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+            },
+            {
+                rgb: 'R0 G201 B89',
+                cmyk: 'C75 M0 Y80 K0',
+                hex: '#00C959',
+                pantoneC: 'PANTONE 7480 C',
+                pantoneU: 'PANTONE 7481 U',
+                background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+            },
+            {
+                rgb: 'R0 G165 B149',
+                cmyk: 'C78 M8 Y49 K0',
+                hex: '#00A595',
+                pantoneC: 'PANTONE 3272 C',
+                pantoneU: 'PANTONE 3275 U',
+                background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+            }
+        ];
+    }
+    render() {
+        return (h("ul", { key: '95d991a7331f3f75909421db363b0c30646dd9f7', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+                background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
+            } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+    }
+};
+
+export { GradientPrimaryPalette as gradient_primary_palette };

package/dist/components/gradient-primary-palette.js

@@ -0,0 +1,6 @@
+import { G as GradientPrimaryPalette$1, d as defineCustomElement$1 } from './primary2.js';
+
+const GradientPrimaryPalette = GradientPrimaryPalette$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GradientPrimaryPalette, defineCustomElement };

package/dist/components/gradient-secondary-palette.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GradientSecondaryPalette extends Components.GradientSecondaryPalette, HTMLElement {}
+export const GradientSecondaryPalette: {
+    prototype: GradientSecondaryPalette;
+    new (): GradientSecondaryPalette;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;