@ebrains/components 0.9.3-beta → 1.1.0

package/dist/cjs/toastManager-4e9535f3.js

@@ -1,33 +0,0 @@
-'use strict';
-
-class ToastManager {
-    constructor() {
-        this.toastManagerElement = null;
-    }
-    /**
-     * Initialize the ToastManager with a reference to the `eds-toast-manager` component.
-     */
-    init(toastManagerElement) {
-        this.toastManagerElement = toastManagerElement;
-    }
-    /**
-     * Display a toast.
-     * @param message - The message to display.
-     * @param intent - The type of the toast ('success', 'error', 'warning', 'default').
-     */
-    show(message, intent = 'default') {
-        if (!this.toastManagerElement) {
-            // eslint-disable-next-line
-            console.error('ToastManager is not initialized. Ensure <eds-toast-manager> is rendered.');
-            return;
-        }
-        const event = new CustomEvent('show-toast', {
-            detail: { message, intent }
-        });
-        this.toastManagerElement.dispatchEvent(event);
-    }
-}
-// Export a singleton instance
-const toast = new ToastManager();
-
-exports.toast = toast;

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js

@@ -1,86 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @internal
- */
-export class EdsCardWrapper {
-    constructor() {
-        this.tiny = false;
-        this.withBg = true;
-        this.withHover = true;
-    }
-    hasSlot(name) {
-        if (name) {
-            return !!this.el.querySelector(`[slot="${name}"]`);
-        }
-        return !!this.el.querySelector(':not([slot])');
-    }
-    render() {
-        const articleClasses = [
-            this.tiny ? 'min-h-120' : 'min-h-156',
-            this.withBg ? 'bg-inverse' : 'bg-default',
-            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
-            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
-        ].join(' ');
-        return (h("article", { key: '7a191039487c388e752c964c8fd47fb397943994', class: articleClasses }, h("slot", { key: 'ac497c9f36089467abcb6b52e3e356405616dfd6' }), this.hasSlot('footer') && (h("div", { key: 'eba2425d01514dffa83ec4b4fdfe1878719addd8', class: "mt-auto" }, h("slot", { key: '57f799838be78cdc8b61b9071d68f913b8eef51b', name: "footer" })))));
-    }
-    static get is() { return "eds-card-wrapper"; }
-    static get properties() {
-        return {
-            "tiny": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean that determines whether the card should be displayed with a smaller height.\nIf true, the card will use the 'tiny' height class."
-                },
-                "attribute": "tiny",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "withBg": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean that determines whether the card should have a background color.\nIf true, the card will have a background, otherwise it will not."
-                },
-                "attribute": "with-bg",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "withHover": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean that determines whether the card should display a hover effect.\nIf true, the card will have a shadow effect and change its cursor on hover."
-                },
-                "attribute": "with-hover",
-                "reflect": false,
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}

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

@@ -1,190 +0,0 @@
-import { h } from "@stencil/core";
-import { login, logout, isAuthenticated, getUser, initKeycloak, checkServerAvailability } from "../../utils/keycloak";
-import { toast } from "../../utils/toastManager";
-/**
- * @internal
- */
-export class EdsLogin {
-    constructor() {
-        /**
-         * 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();
-                }
-                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 = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
-        this.authenticated = false;
-        this.user = null;
-        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 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 res = await initKeycloak({
-                url: this.keycloakUrl,
-                realm: this.keycloakRealm,
-                clientId: this.keycloakClientId
-            }, true);
-            this.keycloak.emit({
-                init: res
-            });
-            if (isAuthenticated()) {
-                this.user = getUser();
-                this.authenticated = true;
-                this.auth.emit({
-                    authenticated: this.authenticated,
-                    user: this.user
-                }); // Emit auth status change
-            }
-        }
-        catch (error) {
-            toast.show(error.message, 'error');
-        }
-    }
-    render() {
-        return (h("div", { key: '041846174aaad541acce03588a087793d10daa1e', class: "block" }, !this.authenticated && (h("eds-button", { key: '360a84ec79a15c9293e3898b77df649c469d9529', 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"; }
-    static get properties() {
-        return {
-            "keycloakUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The URL of the Keycloak server.\nThis is the base URL where your Keycloak instance is hosted."
-                },
-                "attribute": "keycloak-url",
-                "reflect": false
-            },
-            "keycloakRealm": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "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
-            },
-            "keycloakClientId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "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
-            }
-        };
-    }
-    static get states() {
-        return {
-            "authenticated": {},
-            "user": {},
-            "serverAvailable": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "keycloak",
-                "name": "keycloak",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted when the initKeycloak status changes."
-                },
-                "complexType": {
-                    "original": "{ init: boolean }",
-                    "resolved": "{ init: boolean; }",
-                    "references": {}
-                }
-            }, {
-                "method": "auth",
-                "name": "auth",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted when the authentication status changes.\nIt emits an object {authenticated, user} indicating the new authentication status and the user's information."
-                },
-                "complexType": {
-                    "original": "{\n    authenticated: boolean;\n    user: any;\n  }",
-                    "resolved": "{ authenticated: boolean; user: any; }",
-                    "references": {}
-                }
-            }];
-    }
-}

package/dist/components/color.js

@@ -1,132 +0,0 @@
-import { c as cva } from './index2.js';
-
-const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
-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
-    }
-});
-
-export { gradientBGColorVariants as g };

package/dist/components/eds-card-wrapper.js

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const EdsCardWrapper$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardWrapper extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tiny = false;
-        this.withBg = true;
-        this.withHover = true;
-    }
-    hasSlot(name) {
-        if (name) {
-            return !!this.el.querySelector(`[slot="${name}"]`);
-        }
-        return !!this.el.querySelector(':not([slot])');
-    }
-    render() {
-        const articleClasses = [
-            this.tiny ? 'min-h-120' : 'min-h-156',
-            this.withBg ? 'bg-inverse' : 'bg-default',
-            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
-            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
-        ].join(' ');
-        return (h("article", { key: '7a191039487c388e752c964c8fd47fb397943994', class: articleClasses }, h("slot", { key: 'ac497c9f36089467abcb6b52e3e356405616dfd6' }), this.hasSlot('footer') && (h("div", { key: 'eba2425d01514dffa83ec4b4fdfe1878719addd8', class: "mt-auto" }, h("slot", { key: '57f799838be78cdc8b61b9071d68f913b8eef51b', name: "footer" })))));
-    }
-    get el() { return this; }
-}, [4, "eds-card-wrapper", {
-        "tiny": [4],
-        "withBg": [4, "with-bg"],
-        "withHover": [4, "with-hover"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-card-wrapper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-card-wrapper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsCardWrapper$1);
-            }
-            break;
-    } });
-}
-
-const EdsCardWrapper = EdsCardWrapper$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { EdsCardWrapper, defineCustomElement };

package/dist/components/eds-login.js

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