@ebrains/components 2.4.1 → 3.1.0

package/dist/types/shared-ui/eds-cookies-preference/eds-cookies-preference.d.ts

@@ -9,7 +9,7 @@ export declare class EdsCookiesPreference {
     /**
      * The visual intent or style of the button.
      */
-    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'blueish';
+    intent?: 'primary' | 'secondary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline';
     /**
      * State to control whether the eds-matomo-notice popup is visible.
      */

package/dist/types/shared-ui/eds-gitlab-contributors/eds-gitlab-contributors.d.ts

@@ -0,0 +1,114 @@
+interface GitLabContributor {
+    name: string;
+    email: string;
+    commits: number;
+    additions: number;
+    deletions: number;
+    web_url?: string;
+}
+interface AggregatedContributor extends GitLabContributor {
+    username: string;
+}
+/**
+ * `EdsGitlabContributors` fetches and displays GitLab project contributors with avatars and contribution stats.
+ *
+ * This component queries the GitLab API to retrieve repository contributors.
+ * It's designed for internal EBRAINS projects requiring authentication.
+ *
+ * Key features:
+ * - Fetches contributors from GitLab API with access token authentication
+ * - Supports multiple projects - provide comma-separated project IDs to aggregate contributions
+ * - Optional path filtering to show contributors for specific directories
+ * - Extracts username from email address (part before @)
+ * - Displays contributor avatars with initials using eds-avatar component
+ * - Shows username and commit statistics (commits, additions, deletions)
+ * - Aggregates duplicate contributors by extracted username across all projects
+ * - Responsive grid layout
+ * - Loading and error states
+ * - Configurable display limits and sorting
+ */
+/**
+ * @internal
+ */
+export declare class EdsGitlabContributors {
+    /**
+     * GitLab personal access token for API authentication (required for internal projects)
+     */
+    accessToken: string;
+    /**
+     * GitLab project ID(s) - single ID or comma-separated IDs for multiple projects
+     * Example: "3360" or "3360,1770" or "ri%2Ftech-hub%2Febrains-ui-ecosystem"
+     */
+    projectId: string;
+    /**
+     * GitLab API base URL
+     */
+    apiUrl: string;
+    /**
+     * Optional path to filter commits (e.g., "apps/live/handbook")
+     * Only applied to project 1505 (monorepo). Other projects fetch all contributors.
+     */
+    path?: string;
+    /**
+     * Maximum number of contributors to display
+     */
+    limit: number;
+    /**
+     * Minimum commits to be included in the list
+     */
+    minCommits: number;
+    /**
+     * Show contribution statistics (commits, additions, deletions)
+     */
+    showStats: boolean;
+    /**
+     * Grid columns for responsive layout
+     * Options: '2', '3', '4', '5'
+     */
+    columns: '2' | '3' | '4' | '5';
+    /**
+     * Sort contributors by commits (desc) or username (asc)
+     */
+    sortBy: 'commits' | 'name';
+    contributors: AggregatedContributor[];
+    loading: boolean;
+    error: string;
+    componentWillLoad(): Promise<void>;
+    /**
+     * Parses projectId prop to handle single or multiple project IDs
+     */
+    private getProjectIds;
+    /**
+     * Fetches commits by path and aggregates by author for a single project
+     */
+    private fetchCommitsByPathForProject;
+    /**
+     * Fetches contributors from a single project
+     * For project 1505 (monorepo), applies path filter if provided
+     * For other projects, fetches all contributors
+     */
+    private fetchContributorsForProject;
+    /**
+     * Fetches contributors from GitLab API (supports multiple projects)
+     */
+    private fetchContributors;
+    /**
+     * Extracts username from email address (part before @)
+     */
+    private extractUsernameFromEmail;
+    /**
+     * Aggregates duplicate contributors by username (extracted from email)
+     * Combines commits, additions, and deletions for the same person
+     */
+    private aggregateContributors;
+    /**
+     * Gets first and last name from full name
+     */
+    private parseName;
+    /**
+     * Format large numbers with K suffix
+     */
+    private formatNumber;
+    render(): any;
+}
+export {};

package/dist/types/shared-ui/eds-global-search/eds-global-search.d.ts

@@ -9,6 +9,7 @@ interface SearchResult {
     source: string;
     snippet: string;
     score: number | null;
+    parent_software?: string;
 }
 export declare class EdsGlobalSearch {
     el: HTMLElement;
@@ -28,6 +29,31 @@ export declare class EdsGlobalSearch {
      * Debounce delay in milliseconds
      */
     debounceDelay: number;
+    /**
+     * Force all results to open in new tab (useful when embedded in external sites)
+     */
+    forceNewTab: boolean;
+    /**
+     * Current site origin (auto-detected if not provided)
+     */
+    currentOrigin: string;
+    /**
+     * Current source identifier (e.g., 'handbook', 'design')
+     * Results matching this source will open in same tab
+     */
+    currentSource: string;
+    /**
+     * Optional authorization token (JWT) to include in requests
+     * When provided, will be sent as "Bearer <token>" in Authorization header
+     */
+    authToken: string;
+    /**
+     * Visual theme of the search pill.
+     * - "gray"  (default): light grey surface (matches the EBRAINS header mockup)
+     * - "white": white surface with a 1px border (use when sitting on a coloured nav)
+     * - "black": brand-black surface with white text (use on dark backgrounds)
+     */
+    variant: 'gray' | 'white' | 'black';
     /**
      * Emitted when a result is selected
      */
@@ -56,10 +82,14 @@ export declare class EdsGlobalSearch {
     private debounceTimer?;
     private dropdownRef?;
     private inputRef?;
+    private cmdKListener?;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleDocumentClick(event: MouseEvent): void;
     handleKeydown(event: KeyboardEvent): void;
+    /** Clear the current query and results; keep focus in the input so the
+     *  user can start typing again without an extra click. */
+    private handleClear;
     private handleInput;
     private runSearch;
     private selectResult;

package/dist/types/shared-ui/eds-kg-learning-resources/eds-kg-learning-resources.d.ts

@@ -0,0 +1,60 @@
+interface LearningResource {
+    name: string;
+    iri?: string;
+    type?: string;
+    educational_level?: string;
+    abstract?: string;
+    learning_outcome?: string;
+    prerequisite?: string;
+    required_time?: string;
+    topic?: string | string[];
+    uuid?: string;
+}
+interface SoftwareEntry {
+    uuid: string;
+    name: string;
+    kg_search_url?: string;
+    learning_resources_count: number;
+    learning_resources_types: string[];
+    learning_resources_levels: string[];
+    learning_resources: LearningResource[];
+}
+interface LearningResourcesResponse {
+    data: SoftwareEntry[];
+    meta?: {
+        total_software: number;
+        total_learning_resources: number;
+        by_type: Record<string, number>;
+        by_level: Record<string, number>;
+    };
+}
+export declare class EdsKgLearningResources {
+    el: HTMLElement;
+    /** API endpoint for fetching learning resources */
+    apiEndpoint: string;
+    /** Whether to resolve software names */
+    resolveNames: boolean;
+    /** Max resources to fetch */
+    size: number;
+    /** Component heading */
+    heading: string;
+    /** Visual variant for accordions and cards */
+    variant: 'default' | 'inverse';
+    loading: boolean;
+    error: string;
+    software: SoftwareEntry[];
+    meta: LearningResourcesResponse['meta'] | null;
+    filterType: string;
+    filterLevel: string;
+    searchQuery: string;
+    componentWillLoad(): void;
+    fetchData(): Promise<void>;
+    private getFilteredSoftware;
+    private getFilteredResources;
+    private getTagIntent;
+    private getLevelTagIntent;
+    private renderAccordionDescription;
+    private renderResources;
+    render(): any;
+}
+export {};

package/dist/types/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface WebService {
+    uuid: string;
+    name: string;
+    short_name: string;
+    homepage?: string;
+    description?: string;
+}
+export declare class EdsKgWebServicesSelect {
+    /**
+     * API endpoint for fetching web services
+     * Defaults to cached endpoint for better performance
+     */
+    apiEndpoint: string;
+    /**
+     * Label for the select field
+     */
+    label: string;
+    /**
+     * Name attribute for the select field
+     */
+    name: string;
+    /**
+     * Placeholder text for the select field
+     */
+    placeholder: string;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled: boolean;
+    /**
+     * Maximum number of services to fetch
+     */
+    size: number;
+    /**
+     * Optional search term to filter results
+     */
+    searchTerm: string;
+    /**
+     * Selected value (web service short_name)
+     */
+    value?: string;
+    /**
+     * Optional hint text
+     */
+    hint?: string;
+    /**
+     * Optional message text
+     */
+    message?: string;
+    /**
+     * Error state
+     */
+    error: boolean;
+    /**
+     * Error message
+     */
+    errorMessage?: string;
+    /**
+     * Emitted when the select field value changes (input event)
+     */
+    edsinput: EventEmitter<{
+        value: string | boolean | string[];
+    }>;
+    /**
+     * Emitted when the select field value changes (change event)
+     */
+    edschange: EventEmitter<{
+        value: string | boolean | string[];
+    }>;
+    /**
+     * Loading state
+     */
+    loading: boolean;
+    /**
+     * Web services data
+     */
+    webServices: WebService[];
+    /**
+     * Error state for API call
+     */
+    fetchError: string;
+    /**
+     * Select options formatted for eds-input-field
+     */
+    selectOptions: {
+        label: string;
+        value: string;
+    }[];
+    componentWillLoad(): void;
+    fetchWebServices(): Promise<void>;
+    render(): any;
+}
+export {};

package/dist/types/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.stories.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        apiEndpoint: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        name: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            description: string;
+        };
+        searchTerm: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: string;
+            description: string;
+        };
+        hint: {
+            control: string;
+            description: string;
+        };
+        message: {
+            control: string;
+            description: string;
+        };
+        error: {
+            control: string;
+            description: string;
+        };
+        errorMessage: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;

package/dist/types/shared-ui/eds-matomo-notice/eds-matomo-notice.stories.d.ts

@@ -10,10 +10,15 @@ declare const _default: {
             control: string;
             description: string;
         };
+        forceShow: {
+            control: string;
+            description: string;
+        };
     };
     args: {
         title: string;
         description: string;
+        forceShow: boolean;
     };
 };
 export default _default;
@@ -24,3 +29,24 @@ export declare const Default: {
         description: string;
     };
 };
+export declare const NotOptedIn: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+    };
+};
+export declare const AlreadyOptedIn: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        optOutMessage: string;
+    };
+};
+export declare const OptedOut: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        optOutMessage: string;
+    };
+};

package/dist/types/shared-ui/eds-search-select/eds-search-select.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface Option {
+    label: string;
+    value: string;
+}
+/**
+ * Searchable, source-agnostic select for HUGE option lists (countries,
+ * currencies, nationalities, …) — the generalised sibling of
+ * eds-kg-web-services-select.
+ *
+ * It never talks to an external API directly. It either filters an inline
+ * `options` array client-side, or queries a VETTED, NAMED `source` through our
+ * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+ * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+ * messy upstream schema is flattened server-side by an adapter — the component
+ * stays dumb.
+ *
+ * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+ * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+ * sources are additionally bounded by the server's page `limit`.
+ */
+export declare class EdsSearchSelect {
+    host: HTMLElement;
+    name: string;
+    label?: string;
+    placeholder: string;
+    required: boolean;
+    disabled: boolean;
+    hint?: string;
+    message?: string;
+    error: boolean;
+    errorMessage?: string;
+    /** Selected value. A single value string in single-select mode, or an array
+        of values in multi-select mode. v-model friendly. */
+    value?: string | string[];
+    /** Allow selecting multiple values — selections render as removable tags. */
+    multiple: boolean;
+    /** Inline options: an array or a JSON string of [{label, value}]. */
+    options?: Option[] | string;
+    /** A vetted registry source key, e.g. "countries" / "currencies". */
+    source?: string;
+    /** Base path for the datasets API. */
+    apiBase: string;
+    /** Query param name the search term is sent as. */
+    searchParam: string;
+    /** Server page size for remote sources. */
+    limit: number;
+    /** Debounce (ms) before a remote search fires. */
+    debounceMs: number;
+    /** Max rows rendered at once (DOM cap). */
+    maxVisible: number;
+    edsinput: EventEmitter<{
+        value: string | boolean | string[];
+    }>;
+    edschange: EventEmitter<{
+        value: string | boolean | string[];
+    }>;
+    open: boolean;
+    query: string;
+    loading: boolean;
+    fetchError: string;
+    items: Option[];
+    total: number;
+    activeIndex: number;
+    selectedLabel: string;
+    private debounceTimer;
+    private inlineOptions;
+    private listboxId;
+    private labelCache;
+    componentWillLoad(): void;
+    onOptionsChange(): void;
+    onValueChange(): void;
+    private parseInlineOptions;
+    private cacheLabels;
+    /** The current selection as a value array (works for single + multi). */
+    private get selectedValues();
+    private labelFor;
+    private emitValue;
+    private get isRemote();
+    private resolveSelectedLabel;
+    private filterInline;
+    private fetchRemote;
+    private runSearch;
+    private get visibleItems();
+    private get hiddenCount();
+    private openMenu;
+    private closeMenu;
+    private onInput;
+    private select;
+    private removeValue;
+    private clear;
+    private onKeyDown;
+    private onDocumentClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+export {};

package/dist/types/shared-ui/eds-search-select/eds-search-select.stories.d.ts

@@ -0,0 +1,81 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        hint: {
+            control: string;
+            description: string;
+        };
+        message: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        error: {
+            control: string;
+            description: string;
+        };
+        errorMessage: {
+            control: string;
+            description: string;
+        };
+        multiple: {
+            control: string;
+            description: string;
+        };
+        options: {
+            control: string;
+            description: string;
+        };
+        source: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        name: string;
+        label: string;
+        placeholder: string;
+        required: boolean;
+        disabled: boolean;
+        error: boolean;
+        multiple: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+    };
+};
+export default _default;
+/** Single-select with inline options (no backend required). */
+export declare const Default: {
+    render: (args: any) => HTMLEdsSearchSelectElement;
+};
+/** Multi-select — selected values render as removable tags. */
+export declare const Multiple: {
+    render: (args: any) => HTMLEdsSearchSelectElement;
+    args: {
+        name: string;
+        label: string;
+        multiple: boolean;
+    };
+};

package/dist/types/shared-ui/eds-trl-badge/ebrains-mark.d.ts

@@ -0,0 +1,7 @@
+/** Gradient <defs> for the mark, namespaced with `uid`. */
+export declare function markDefs(uid: string): string;
+/**
+ * The mark paths wrapped in a positioned, scaled group.
+ * The source artwork lives in a ~201×201 canvas; `size` is the rendered px.
+ */
+export declare function markGroup(uid: string, x: number, y: number, size?: number): string;

package/dist/types/shared-ui/eds-trl-badge/eds-trl-badge.d.ts

@@ -0,0 +1,54 @@
+/**
+ * `EdsTrlBadge` — public EBRAINS TRL badge, aligned with the EBRAINS visual
+ * system (Black `#07140D`, Green `#00FF9D`, Dark Green `#00C87B`, Grey
+ * `#7A7B7A`, IBM Plex Mono) and using the **official EBRAINS sphere mark**.
+ *
+ * Renders a self-contained inline `<svg>` (same markup the server-side
+ * `badge.svg` endpoint emits), so it embeds anywhere and stays crisp.
+ *
+ * Variants:
+ * - `tone`     — CI-style label + value pill (dark or light `theme`).
+ * - `full`     — single bar with the full string.
+ * - `pill`     — compact rounded "TRL 7".
+ * - `outline`  — thin border, transparent fill, mono caps (dark or light).
+ * - `scale`    — nine readiness pips showing position on the 1–9 scale.
+ *
+ * The value/pip colour encodes maturity within the brand palette:
+ * TRL 7–9 → green, 4–6 → dark green, 1–3 → grey.
+ *
+ * @example
+ * <eds-trl-badge level={7} assessed="2026-06" methodology="v8.2"></eds-trl-badge>
+ * <eds-trl-badge level={7} variant="outline" theme="light"></eds-trl-badge>
+ * <eds-trl-badge level={7} variant="scale" size={32}></eds-trl-badge>
+ */
+export declare class EdsTrlBadge {
+    /** TRL level, 1–9. */
+    level: number;
+    /** Assessment month, e.g. "2026-06". */
+    assessed?: string;
+    /** Methodology version, e.g. "v8.2". */
+    methodology?: string;
+    /** Colour theme for the `tone` / `outline` / `scale` variants. */
+    theme: 'dark' | 'light';
+    /** 'tone' | 'full' | 'pill' | 'outline' | 'scale'. */
+    variant: 'tone' | 'full' | 'pill' | 'outline' | 'scale';
+    /** Rendered height in px. Scales the whole badge crisply (viewBox is fixed). */
+    size?: number;
+    /** Left-segment / leading label. */
+    label: string;
+    /** Optional link (methodology or service page). */
+    href?: string;
+    /** Per-instance suffix so the mark's gradient ids never collide. */
+    private uid;
+    private static CW;
+    private esc;
+    /** Maturity tier → value/pip colour (brand palette). */
+    private levelColor;
+    /** Readable value text on a coloured segment (black on green, light on grey). */
+    private valueText;
+    private fullText;
+    /** Build the inner markup + intrinsic dimensions for the chosen variant. */
+    private build;
+    private buildSvg;
+    render(): any;
+}