@ebrains/components 0.9.3-beta → 1.0.0

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

@@ -1,109 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-const analytics = require('./analytics-d8fb3fdd.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;
-
-const EdsTooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        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() {
-        var _a;
-        await this.updateTooltipPosition();
-        this.isPositioned = true;
-        this.isVisible = true;
-        analytics.sendAnalytics({
-            category: 'ui-component',
-            parentContext: null,
-            tag: this.el.tagName.toLowerCase(),
-            name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-            action: 'hover'
-        });
-    }
-    /**
-     * 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 (index.h("div", { key: '7bc92c002eaf263a2d10a2391f356f40e23d5998', class: "relative" }, index.h("slot", { key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a' }), this.isVisible && this.isPositioned && this.content && (index.h("div", { key: '00d854649ef43b958081bbb336319a537c181574', 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 index.getElement(this); }
-};
-EdsTooltip.style = EdsTooltipStyle0;
-
-exports.eds_tooltip = EdsTooltip;

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 };