@ebrains/components 3.0.0 → 3.1.0

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;
@@ -46,6 +47,13 @@ export declare class EdsGlobalSearch {
      * 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
      */
@@ -74,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-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;
+}

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

@@ -0,0 +1,112 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        level: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        assessed: {
+            control: string;
+            description: string;
+        };
+        methodology: {
+            control: string;
+            description: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        href: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        level: number;
+        assessed: string;
+        methodology: string;
+        theme: string;
+        variant: string;
+        size: any;
+        href: string;
+        label: string;
+    };
+};
+export default _default;
+export declare const ToneDark: {
+    render: (args: any) => string;
+};
+export declare const ToneLight: {
+    args: {
+        theme: string;
+    };
+    render: (args: any) => string;
+};
+export declare const FullMetadata: {
+    args: {
+        variant: string;
+    };
+    render: (args: any) => string;
+};
+export declare const Pill: {
+    args: {
+        variant: string;
+    };
+    render: (args: any) => string;
+};
+export declare const OutlineDark: {
+    args: {
+        variant: string;
+    };
+    render: (args: any) => string;
+};
+export declare const OutlineLight: {
+    args: {
+        variant: string;
+        theme: string;
+    };
+    render: (args: any) => string;
+};
+export declare const ReadinessScale: {
+    args: {
+        variant: string;
+    };
+    render: (args: any) => string;
+};
+export declare const Sized: {
+    args: {
+        variant: string;
+        size: number;
+    };
+    render: (args: any) => string;
+};
+export declare const MaturityTiers: {
+    render: () => string;
+};
+export declare const AllStories: {
+    render: () => string;
+};

package/dist/types/utils/eds-form/safeFormat.d.ts

@@ -0,0 +1,21 @@
+/**
+ * safeInlineFormat — the single, audited text→HTML formatter used everywhere a
+ * form renders author-supplied text via innerHTML (form/step description, Text
+ * Blocks, and field messages).
+ *
+ * SECURITY: escape-first, then a tiny whitelisted inline subset. Because all of
+ * &, <, >, " are turned into entities BEFORE any markup is generated, author
+ * text can never inject a tag or attribute — the only HTML produced is the
+ * <strong>, <a> and <br> emitted here. Links are restricted to http/https/mailto
+ * (others fall back to plain text), URLs cannot contain whitespace or a quote,
+ * and external links get rel="noopener noreferrer".
+ *
+ * DO NOT reorder: escaping MUST happen before tag generation, or the guarantee
+ * breaks. Keep this in sync with the JS mirror in
+ * apps/live/forms-app/src/utils/descriptionFormat.ts.
+ *
+ *   **bold**       → <strong>bold</strong>
+ *   [label](url)   → <a href="url" …>label</a>   (http/https/mailto only)
+ *   newline        → <br>
+ */
+export declare function safeInlineFormat(text: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/components/p-18e852e1.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-271c61ff.js";const a={"1x1":"1/1","21x9":"21/9","16x9":"16/9","3x2":"3/2","4x3":"4/3","4x5":"4/5"},s=class{constructor(t){e(this,t)}render(){return t("section",{key:"9ab666342a801e51b3a75c979bceadccf4d9736e",class:"w-full"},t("eds-section-core",{key:"4eea7a8b3b8e3b0404108345756d11806ea2805d",tag:"div","section-title":"Aspect Ratios","heading-level":"h3"},t("ul",{key:"faa065acac9bce28073f709d147c9b2725150da5",class:"gap-y-8 md:gap-y-12 lg:gap-y-16"},Object.entries(a).map((([e,a])=>t("li",{class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},t("div",{class:"container ratio-box flex items-center justify-center text-center border-2 border-soft",style:{aspectRatio:a.replace("/",":"),width:"100%",maxWidth:"300px"}},t("span",{class:"text-default font-bold mr-auto"},"aspect-",e),t("span",{class:"mt-2 text-sm ml-auto"},a))))))))}};export{s as token_ratios}

package/dist/components/p-3ccd6948.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{g as t}from"./p-50e27321.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"41c0a44af7394753c8c656f5a1de86b1446f05e3",class:this.class,innerHTML:t})}};export{a as eds_icon_gitlab}

package/dist/components/p-3d3841d6.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a}from"./p-271c61ff.js";const c=class{constructor(a){e(this,a)}render(){return a("div",{key:"8ebe0d888150e5fefd1d3047cc82548f12f47f9f",class:"w-full"},a("ul",{key:"c57af77dfb437bafaf060a6c6ebece84c4683409",class:"not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"},a("li",{key:"6ca948268bd07e50409334b84eeeb362287f131e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"0f33f8feec6657d21a4e4a1973d4c46cf4f6c526",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"194c9d5367c75c35f021d0b5c64601a72d1141fd",class:"spacing-sample m-16 bg-strong"},a("span",{key:"252af2371d58a8364718210563b7aa9a76a551a6",class:"f-body-01 text-inverse"},"Margin: 1rem / m-16")))),a("li",{key:"833a8373bbe4db4514c84d4e299e2103b37bc75e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"d364398230aca7af47273a654a8f138d70361c75",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"707e0b62f500c16dc2d72da8e0bd85adabd7280b",class:"spacing-sample ml-64 bg-strong"},a("span",{key:"846c07af2613e90c3acd1fa66aa422db14a95526",class:"f-body-01 text-inverse"},"Margin Left: 4rem / ml-64")))),a("li",{key:"107899eab78bbb70f62b0aa2df8573f7a940024c",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"fb007ac46524cfda56c1033869b3fd7edeec96b8",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"4312aaa901f7ad1075056517b2d8b0902e708aec",class:"spacing-sample mt-32 bg-strong"},a("span",{key:"62a87119afea530831e3bcbb45da16f3a3cfb1b8",class:"f-body-01 text-inverse"},"Margin Top: 2rem / mt-32")))),a("li",{key:"279e6f5af470cf3f969c37f715def542e4d13140",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"057bcacd976a4d7f0a69ccba3b469e79f6e8c86a",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"379423e5ef1b3f5be2a322493266305f2cf46b9d",class:"spacing-sample p-32 bg-strong"},a("span",{key:"a3bd9db6ab5dd4f6204d5009c4328f617f44b78c",class:"f-body-01 text-inverse"},"Padding: 2rem / p-32")))),a("li",{key:"526411b8ab854f67873964446dee7191949f5d54",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"93e0422c2304a0d3a158ba086aa9235a05d621f0",class:"spacing-sample pt-32 bg-strong"},a("span",{key:"dca707847134a421d60930307613a6528a009f9d",class:"f-body-01 text-inverse"},"Padding Top: 2rem / pt-32")))),a("li",{key:"a132977bdf19ba79401ccc05f248711eb2793497",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"2fad0e796528bce6c021cbb9d3036d4a23226b82",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"be02958fc44ca651c348078dfc84fabbe92afaa1",class:"spacing-sample pl-32 bg-strong"},a("span",{key:"6c94b77b470a1dd9de4dad7a6900d2e053236f52",class:"f-body-01 text-inverse"},"Padding Left: 2rem / pl-32"))))))}};export{c as token_spacing}

package/dist/components/p-3f38df99.entry.js

@@ -1 +0,0 @@
-import{r as e,h as s}from"./p-271c61ff.js";import{e as r}from"./p-e0ee2386.js";const t=class{constructor(s){e(this,s),this.class=""}render(){return s("span",{key:"c4a043469698de97b7433749599ee04746df7f8e",class:this.class,innerHTML:r})}};export{t as eds_icon_eu}

package/dist/components/p-527e71d0.entry.js

@@ -1 +0,0 @@
-import{r as e,h as c}from"./p-271c61ff.js";const o=class{constructor(c){e(this,c),this.isAuthenticated=!1}componentWillLoad(){const e=new Promise((e=>{document.addEventListener("initKeycloak",(c=>{e(c.detail)}),{once:!0})})),c=new Promise((e=>{document.addEventListener("authStatusChanged",(c=>{var o;this.isAuthenticated=null===(o=c.detail)||void 0===o?void 0:o.authenticated,e(c.detail)}),{once:!0})}));this.combinedInitPromise=Promise.all([e,c])}render(){return c("div",{key:"10a75e7e117b2f3ab3d0ba8f2a26c122b2e0eed4"},c("eds-splash-screen",{key:"ab527af22c9a9fe861bbed4759946428e3e7fdf0",inverse:!0,initPromise:this.combinedInitPromise}),c("eds-login",{key:"78e7face11e06df76b9dd29e99b7d968cc2cf32e","keycloak-url":"http://localhost:8080","keycloak-realm":"nigeor-realm","keycloak-client-id":"stencil-app"}),c("main",{key:"30f463e667ccc25062bbf2764fdabc8937b6097c"},c("h1",null,this.isAuthenticated?"Welcome, authenticated user!":"Please log in.")))}};export{o as eds_app_root}