@ebrains/components 0.9.1-beta → 0.9.2-beta

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

@@ -1,77 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * `EdsUser` is a user component for managing and displaying
- * the user's auth information. Displays a user dropdown menu when authenticated.
- *
- * This component is ideal for embedding into any layout requiring user authentication.
- */
-export class EdsUser {
-    constructor() {
-        this.user = undefined;
-    }
-    /**
-     * Helper getter to ensure we work with a User object.
-     */
-    get parsedUser() {
-        if (typeof this.user === 'string') {
-            try {
-                return JSON.parse(this.user);
-            }
-            catch (error) {
-                //console.error('Failed to parse user JSON:', error);
-                return {};
-            }
-        }
-        return this.user;
-    }
-    async componentWillLoad() { }
-    get initials() {
-        var _a, _b, _c, _d;
-        const user = this.parsedUser;
-        const initials = `${((_a = user.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)) || ''}${((_b = user.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}`.toUpperCase();
-        return initials || ((_d = (_c = user.name) === null || _c === void 0 ? void 0 : _c.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '';
-    }
-    render() {
-        const user = this.parsedUser;
-        return (h("div", { key: '099427eda976cd3fffcd201a2629d9db752f427d', class: "block" }, h("div", { key: '33e8e4a2aca3fa48420abbd9304ed1d681dbad60', class: "flex items-center" }, h("eds-dropdown", { key: '6f25836fbe49e6cb08e7fe8f057a094e21271784', label: `Welcome, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '143b3561a2b0484f60df993882d1c9e74e413859', class: "min-w-[280px] p-8" }, h("div", { key: '5f178c0ce2a4b08a4bef0e2a2348b5372fc1a723', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '6ee2187e673738f3ac5e8bbd5ef56b4df69a51f5', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '73a58dfadc56f71e75f14d7edf4385682d45126a', class: "max-w-full" }, user.name && h("p", { key: '17d87baf2254d8b1667eb2ba196acc783f66a5d7', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'cc8c94e020735521b046805067c1ecef86ccb4bf', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '70989c3cc79d174f3ad99dc40db7b69a22f14d34', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'f028bde937b98a01c2f9d5028bdd5038003193a0', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("slot", { key: '3f6d7c1c540f93c9a35e6c6fa30c68bf06fa1a92' })))))));
-    }
-    static get is() { return "eds-user"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-user.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-user.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "user": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | User",
-                    "resolved": "User | string",
-                    "references": {
-                        "User": {
-                            "location": "global",
-                            "id": "global::User"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The user object containing user information, or a JSON string to be parsed."
-                },
-                "attribute": "user",
-                "reflect": false
-            }
-        };
-    }
-    static get elementRef() { return "hostEl"; }
-}

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

@@ -1,45 +0,0 @@
-export default {
-    title: 'Shared Ui/User',
-    component: 'eds-user',
-    argTypes: {
-        user: {
-            control: 'object',
-            description: 'User object containing authentication information'
-        }
-    },
-    args: {
-        user: {
-            given_name: 'John',
-            family_name: 'Doe',
-            preferred_username: 'johndoe',
-            name: 'John Doe',
-            email: 'john.doe@example.com'
-        }
-    }
-};
-export const Default = {
-    render: (args) => {
-        // Create a container element
-        const container = document.createElement('div');
-        container.innerHTML = `
-        <eds-header>
-          <div class="px-16">
-            <eds-user></eds-user>
-          </div>
-        </eds-header>
-      `;
-        // Grab the eds-user element and assign the user property
-        const edsUser = container.querySelector('eds-user');
-        edsUser.user = args.user;
-        return container;
-    },
-    args: {
-        user: {
-            given_name: 'John',
-            family_name: 'Doe',
-            preferred_username: 'johndoe',
-            name: 'John Doe',
-            email: 'john.doe@example.com'
-        }
-    }
-};

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -1,39 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @internal
- */
-export class EdsAppRoot {
-    constructor() {
-        this.isAuthenticated = false;
-    }
-    componentWillLoad() {
-        // Create a promise for the initKeycloak event.
-        const initKeycloakPromise = new Promise((resolve) => {
-            document.addEventListener('initKeycloak', (event) => {
-                //console.log('initKeycloak event received:', event.detail);
-                resolve(event.detail);
-            }, { once: true });
-        });
-        // Create a promise for the authStatusChanged event.
-        const authStatusPromise = new Promise((resolve) => {
-            document.addEventListener('authStatusChanged', (event) => {
-                var _a;
-                this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
-                //console.log('authStatusChanged event received:', event.detail);
-                resolve(event.detail);
-            }, { once: true });
-        });
-        // Combine both promises. The splash screen will hide only when both have resolved.
-        this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
-    }
-    render() {
-        return (h("div", { key: '7b0b74c02f9fa25dc3d3e5a0fd10d8b4c3a59ffe' }, h("eds-splash-screen", { key: 'e1fabb47903b011c397af3a8da59130e8455280f', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '30d8ca5116c5b8a18972df9c55bd4a947226d682', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '16ead78b24f561049fb12609b23bff028262d9d5' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
-    }
-    static get is() { return "eds-app-root"; }
-    static get encapsulation() { return "shadow"; }
-    static get states() {
-        return {
-            "isAuthenticated": {}
-        };
-    }
-}

package/dist/collection/utils/api.js

@@ -1,27 +0,0 @@
-// utils/api.ts
-async function checkResponse(response) {
-    const data = await response.json().catch(() => ({}));
-    if (!response.ok) {
-        // Optionally, throw an error or return a structured error object.
-        //throw new Error(data.error || `HTTP error! Status: ${response.status}`);
-        return null;
-    }
-    return data;
-}
-export async function get(url, options = {}) {
-    const response = await fetch(url, {
-        method: 'GET',
-        headers: options.headers
-    });
-    return checkResponse(response);
-}
-export async function post(url, body, options = {}) {
-    // If the body is FormData, omit the 'Content-Type' header so the browser sets it correctly.
-    const headers = body instanceof FormData ? options.headers || {} : Object.assign({ 'Content-Type': 'application/json' }, options.headers);
-    const response = await fetch(url, {
-        method: 'POST',
-        headers,
-        body: body instanceof FormData ? body : JSON.stringify(body)
-    });
-    return checkResponse(response);
-}

package/dist/collection/utils/color.js

@@ -1,129 +0,0 @@
-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/eds-form/formUtils.js

@@ -1,65 +0,0 @@
-import { findFieldElement } from "./formValidators";
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-export function getFormInitData({ initData, parsedFields, currentValues
-//formEl,
-//isFieldVisible
- }) {
-    // Pass 1: Update state for all fields.
-    const updatedValues = Object.assign({}, currentValues);
-    parsedFields.forEach((field) => {
-        const value = initData[field.name];
-        if (value !== undefined) {
-            updatedValues[field.name] = value;
-        }
-    });
-    return { updatedValues };
-}
-/**
- * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
- */
-export function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }) {
-    // Pass 1: Update state for all fields.
-    const updatedValues = Object.assign({}, currentValues);
-    parsedFields.forEach((field) => {
-        const value = draftData[field.name];
-        if (value !== undefined) {
-            updatedValues[field.name] = value;
-        }
-    });
-    // Pass 2: Delay DOM updates to ensure nested fields are rendered.
-    setTimeout(() => {
-        parsedFields.forEach((field) => {
-            // Only update if the field is visible.
-            if (isFieldVisible(field, updatedValues)) {
-                const value = draftData[field.name];
-                if (value !== undefined) {
-                    if (field.type === 'checkbox' || field.type === 'radio') {
-                        // Query all eds-input-field components and update matching inputs.
-                        const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-                        elements.forEach((element) => {
-                            if (element.shadowRoot) {
-                                const inputs = Array.from(element.shadowRoot.querySelectorAll(`[name="${field.name}"]`));
-                                // Convert stored comma-separated value into a trimmed array.
-                                const valuesArray = value.split(',').map((v) => v.trim());
-                                inputs.forEach((inputEl) => {
-                                    // eslint-disable-next-line
-                                    inputEl.checked = valuesArray.includes(inputEl.value);
-                                });
-                            }
-                        });
-                    }
-                    else {
-                        // For non-checkbox/radio inputs, update the first matching element using findFieldElement.
-                        const inputEl = findFieldElement(formEl, field.name);
-                        if (inputEl) {
-                            inputEl.value = value;
-                        }
-                    }
-                }
-            }
-        });
-    }, 50); // A 50ms delay to allow re-render
-    return { updatedValues };
-}

package/dist/collection/utils/eds-form/formValidators.js

@@ -1,64 +0,0 @@
-import { validateField, validateFieldGroup, validateSingleBox } from "./individualValidator";
-/**
- * Finds the first input element for a given field name inside eds-input-field components.
- */
-export function findFieldElement(formEl, name) {
-    const elements = Array.from(formEl.querySelectorAll('eds-input-field'));
-    for (const element of elements) {
-        if (element.shadowRoot) {
-            const input = element.shadowRoot.querySelector(`[name="${name}"]`);
-            if (input) {
-                return input;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Validates all fields and returns an object containing the errors and a flag indicating any errors.
- */
-export function validateFormFields(parsedFields, formEl, values, 
-// eslint-disable-next-line
-isFieldVisible) {
-    const errors = {};
-    let hasError = false;
-    parsedFields.forEach((field) => {
-        // Only validate fields that are visible.
-        if (!isFieldVisible(field, values)) {
-            // If a field is hidden, clear its error.
-            delete errors[field.name];
-            return;
-        }
-        if (field.type !== 'hidden') {
-            if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
-                // Single checkbox or radio without multiple options
-                const fieldErrors = validateSingleBox(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else if (field.options && (field.type === 'checkbox' || field.type === 'radio')) {
-                // Checkbox or radio group with options
-                const fieldErrors = validateFieldGroup(field.name, field.required, formEl);
-                if (fieldErrors.length > 0) {
-                    errors[field.name] = fieldErrors;
-                    hasError = true;
-                }
-            }
-            else {
-                // For all other types, find the first matching element.
-                const inputEl = findFieldElement(formEl, field.name);
-                if (inputEl) {
-                    const value = inputEl.value;
-                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
-                    if (fieldErrors.length > 0) {
-                        errors[field.name] = fieldErrors;
-                        hasError = true;
-                    }
-                }
-            }
-        }
-    });
-    return { errors, hasError };
-}

package/dist/collection/utils/eds-form/individualValidator.js

@@ -1,46 +0,0 @@
-// utils/validators.ts
-export function validateField(name, value, type, required, maxLength) {
-    const errors = [];
-    if (required && !value) {
-        errors.push(`${name} is required.`);
-    }
-    if (maxLength && typeof value === 'string' && value.length > maxLength) {
-        errors.push(`${name} must be at most ${maxLength} characters.`);
-    }
-    if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
-        errors.push('Invalid email format.');
-    }
-    return errors;
-}
-export function validateFieldGroup(name, required, formEl) {
-    // Find all eds-input-field components that contain inputs with the given name.
-    const groupFields = Array.from(formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
-    // Collect all input elements with the matching name inside those components.
-    const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
-    // Check if at least one input is checked.
-    const isChecked = groupElements.some((el) => el.checked);
-    const errors = [];
-    if (required && !isChecked) {
-        errors.push(`At least one option in ${name} is required.`);
-    }
-    return errors;
-}
-export function validateSingleBox(name, required, formEl) {
-    var _a;
-    const errors = [];
-    // Find the eds-input-field component containing the input with the given name.
-    const edsField = Array.from(formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
-    // If no such field is found and it's required, return an error.
-    if (!edsField) {
-        if (required) {
-            errors.push(`${name} is required.`);
-        }
-        return errors;
-    }
-    // Query within the component's shadow root.
-    const inputEl = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
-    if (required && inputEl && !inputEl.checked) {
-        errors.push(`${name} is required.`);
-    }
-    return errors;
-}

package/dist/collection/utils/eds-form/validateInput.js

@@ -1,23 +0,0 @@
-import { validateField, validateFieldGroup, validateSingleBox } from "./individualValidator"; // your existing text/email validator
-/**
- * Validates a field based on its type and returns an array of error messages.
- * @param field - The field configuration object.
- * @param value - The input value (if applicable).
- * @param formEl - The form element used for DOM queries.
- */
-export function validateInputField(field, value, formEl) {
-    if (field.type === 'checkbox' || field.type === 'radio') {
-        if (field.options) {
-            return validateFieldGroup(field.name, field.required, formEl);
-        }
-        return validateSingleBox(field.name, field.required, formEl);
-    }
-    return validateField(field.name, value, field.type, field.required, field.maxlength);
-}
-export function isFieldVisible(field, values) {
-    if (!field.condition) {
-        return true;
-    }
-    const parentValue = values[field.condition.field];
-    return parentValue === field.condition.value;
-}

package/dist/collection/utils/global.js

@@ -1,8 +0,0 @@
-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,85 +0,0 @@
-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,
-            realm: config.realm,
-            clientId: config.clientId
-        });
-    }
-    keycloakInitPromise = keycloak
-        .init({
-        onLoad: silentCheck ? 'check-sso' : 'login-required',
-        checkLoginIframe: false
-        //silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`, // Ensure this file is set up
-    })
-        .then((authenticated) => authenticated)
-        .catch((error) => {
-        // eslint-disable-next-line
-        console.error('Failed to initialize Keycloak:', error);
-        return false;
-    });
-    return keycloakInitPromise;
-}
-// Get the username of the authenticated user
-export function getUsername() {
-    if (keycloak && keycloak.tokenParsed) {
-        return keycloak.tokenParsed.preferred_username || 'Unknown';
-    }
-    return 'Unknown';
-}
-export function getUser() {
-    if ((keycloak === null || keycloak === void 0 ? void 0 : keycloak.authenticated) && (keycloak === null || keycloak === void 0 ? void 0 : keycloak.idTokenParsed)) {
-        return {
-            fullname: keycloak.idTokenParsed.name,
-            email: keycloak.idTokenParsed.email,
-            lastname: keycloak.idTokenParsed.family_name,
-            firstname: keycloak.idTokenParsed.given_name,
-            username: keycloak.idTokenParsed.preferred_username,
-            background: 'grey', // Optional custom value
-            token: keycloak.token,
-            sub: keycloak.idTokenParsed.sub
-        };
-    }
-    return {};
-}
-// Log in the user
-export function login() {
-    if (keycloak) {
-        keycloak.login();
-    }
-    else {
-        throw new Error('Keycloak is not initialized.');
-    }
-}
-// Log out the user
-export function logout() {
-    if (keycloak) {
-        keycloak.logout();
-    }
-    else {
-        throw new Error('Keycloak is not initialized.');
-    }
-}
-// Check if the user is authenticated
-export function isAuthenticated() {
-    return !!(keycloak === null || keycloak === void 0 ? void 0 : keycloak.authenticated);
-}
-export async function checkServerAvailability(url) {
-    try {
-        const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
-        return response.ok || response.type === 'opaque';
-    }
-    catch (_a) {
-        return false;
-    }
-}

package/dist/collection/utils/sharedUtils.js

@@ -1,17 +0,0 @@
-export function parseData(input) {
-    if (typeof input === 'string') {
-        try {
-            const parsed = JSON.parse(input);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch (e) {
-            // eslint-disable-next-line
-            console.error('Error parsing data:', e);
-            return [];
-        }
-    }
-    else if (Array.isArray(input)) {
-        return input;
-    }
-    return [];
-}

package/dist/collection/utils/toastManager.js

@@ -1,29 +0,0 @@
-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
-export const toast = new ToastManager();