@ebrains/components 3.0.0 → 3.1.0

package/dist/collection/shared-ui/eds-kg-learning-resources/eds-kg-learning-resources.js

@@ -0,0 +1,257 @@
+import { h } from "@stencil/core";
+let cachedData = null;
+let cacheTimestamp = 0;
+const CACHE_TTL = 10 * 60 * 1000;
+export class EdsKgLearningResources {
+    constructor() {
+        this.apiEndpoint = '/api/v1/kg/learning-resources/cached';
+        this.resolveNames = true;
+        this.size = 500;
+        this.heading = '';
+        this.variant = 'inverse';
+        this.loading = false;
+        this.error = '';
+        this.software = [];
+        this.meta = null;
+        this.filterType = '';
+        this.filterLevel = '';
+        this.searchQuery = '';
+    }
+    componentWillLoad() {
+        this.fetchData();
+    }
+    async fetchData() {
+        const now = Date.now();
+        if (cachedData && (now - cacheTimestamp) < CACHE_TTL) {
+            this.software = cachedData;
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const params = new URLSearchParams({
+                size: this.size.toString(),
+                resolve_names: this.resolveNames.toString(),
+            });
+            const response = await fetch(`${this.apiEndpoint}?${params}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+            const data = await response.json();
+            this.software = data.data || [];
+            this.meta = data.meta || null;
+            cachedData = this.software;
+            cacheTimestamp = now;
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load learning resources';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    getFilteredSoftware() {
+        let filtered = this.software;
+        if (this.filterType) {
+            filtered = filtered.filter(sw => sw.learning_resources_types.includes(this.filterType));
+        }
+        if (this.filterLevel) {
+            filtered = filtered.filter(sw => sw.learning_resources_levels.includes(this.filterLevel));
+        }
+        if (this.searchQuery) {
+            const q = this.searchQuery.toLowerCase();
+            filtered = filtered.filter(sw => sw.name.toLowerCase().includes(q) ||
+                sw.learning_resources.some(lr => {
+                    var _a, _b;
+                    return ((_a = lr.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(q)) ||
+                        ((_b = lr.abstract) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(q));
+                }));
+        }
+        return filtered;
+    }
+    getFilteredResources(resources) {
+        let filtered = resources;
+        if (this.filterType) {
+            filtered = filtered.filter(lr => lr.type === this.filterType);
+        }
+        if (this.filterLevel) {
+            filtered = filtered.filter(lr => lr.educational_level === this.filterLevel);
+        }
+        return filtered;
+    }
+    /* TODO: Uncomment when filters are enabled
+    private getAllTypes(): string[] {
+      const types = new Set<string>();
+      this.software.forEach(sw =>
+        sw.learning_resources_types.forEach(t => types.add(t))
+      );
+      return Array.from(types).sort();
+    }
+  
+    private getAllLevels(): string[] {
+      const levels = new Set<string>();
+      this.software.forEach(sw =>
+        sw.learning_resources_levels.forEach(l => levels.add(l))
+      );
+      return Array.from(levels).sort();
+    }
+    */
+    getTagIntent(type) {
+        const map = {
+            'interactive tutorial': 'brand',
+            'video tutorial': 'primary',
+            'user documentation': 'dark',
+            'video presentation': 'inverse',
+            'slide deck': 'strong',
+        };
+        return map[type] || 'brand-dark';
+    }
+    getLevelTagIntent(level) {
+        const map = {
+            'beginner': 'brand',
+            'intermediate': 'dark',
+            'advanced': 'strong',
+        };
+        return map[level] || 'brand-dark';
+    }
+    renderAccordionDescription(sw) {
+        const count = sw.learning_resources_count;
+        const types = sw.learning_resources_types.join(', ');
+        return `${count} resource${count !== 1 ? 's' : ''} — ${types}`;
+    }
+    renderResources(sw) {
+        const filtered = this.getFilteredResources(sw.learning_resources);
+        return (h("div", { class: "resources-content" }, sw.kg_search_url && (h("div", { class: "kg-link" }, h("eds-link", { url: sw.kg_search_url, label: "View in EBRAINS Knowledge Graph", intent: "cta", external: true }))), h("table", { class: "resources-table" }, h("thead", null, h("tr", null, h("th", { class: "col-name" }, "Name"), h("th", { class: "col-type" }, "Type"), h("th", { class: "col-level" }, "Level"))), h("tbody", null, filtered.map(lr => (h("tr", { class: `resource-row ${lr.iri ? 'resource-row--clickable' : ''}`, onClick: () => {
+                if (lr.iri) {
+                    window.open(lr.iri, '_blank', 'noopener,noreferrer');
+                }
+            } }, h("td", { class: "col-name" }, h("span", { class: "resource-name" }, lr.name || 'Untitled'), lr.abstract && (h("p", { class: "resource-desc" }, lr.abstract))), h("td", { class: "col-type" }, lr.type && (h("eds-tag", { label: lr.type, intent: this.getTagIntent(lr.type), size: "medium" }))), h("td", { class: "col-level" }, lr.educational_level && (h("eds-tag", { label: lr.educational_level, intent: this.getLevelTagIntent(lr.educational_level), size: "medium" })))))))), filtered.length === 0 && (h("p", { class: "no-results" }, "No resources match the current filters."))));
+    }
+    render() {
+        // Always render the same outer scaffold (header + content area) so the
+        // heading sits in identical position across loading / error / loaded
+        // states and the spinner appears where the accordion list will render.
+        const filtered = !this.loading && !this.error ? this.getFilteredSoftware() : [];
+        // const allTypes = this.getAllTypes();
+        // const allLevels = this.getAllLevels();
+        return (h("div", { key: '154b59a74cb32996f1bee10ee7758d916bebdd43', class: "lr-container" }, h("div", { key: '0c5c04b65f0c4e4c032b1b1a7d96e98fd6775563', class: "lr-header" }, h("h2", { key: '01ef66537b31a63521f0406cd2ec9976b532d18f', class: "lr-heading" }, this.heading)), this.loading && (h("div", { key: '134ca8e5f7349127b40aa1ae0967cd12dc12cc0b', class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { key: 'a3a0621b6ea041f8da4ef6f36c1688974f3c5591', size: "sm", variant: "primary", background: "transparent", message: "Loading learning resources..." }))), this.error && !this.loading && (h("eds-alert", { key: 'a0334442c175374daf8ce2be4da60ac004e4d0e2', intent: "error", message: this.error })), !this.loading && !this.error && (h("div", { key: 'f2b8244f1ee5c052cabd5eec8cbfc36d06f4d08d', class: "accordion-list" }, filtered.map(sw => (h("eds-accordion", { heading: sw.name, description: this.renderAccordionDescription(sw), variant: this.variant, icon: "book", switchBg: true, clampText: false }, this.renderResources(sw)))), filtered.length === 0 && (h("p", { key: 'd572c9eb76279c93ba2bd5f0fae20b4e1d9fc816', class: "no-results" }, "No software matches the current filters."))))));
+    }
+    static get is() { return "eds-kg-learning-resources"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-kg-learning-resources.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-kg-learning-resources.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API endpoint for fetching learning resources"
+                },
+                "attribute": "api-endpoint",
+                "reflect": false,
+                "defaultValue": "'/api/v1/kg/learning-resources/cached'"
+            },
+            "resolveNames": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to resolve software names"
+                },
+                "attribute": "resolve-names",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max resources to fetch"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component heading"
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant for accordions and cards"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inverse'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {},
+            "error": {},
+            "software": {},
+            "meta": {},
+            "filterType": {},
+            "filterLevel": {},
+            "searchQuery": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.css

@@ -1,113 +1,34 @@
-.fixed {
-    position: fixed;
-}
-
-.absolute {
-    position: absolute;
-}
-
-.w-full {
-    width: 100%;
-}
-
-.bottom-0 {
-    bottom: 0rem;
-}
-
-.bottom-4 {
-    bottom: 0.25rem;
-}
-
-.p-4 {
-    padding: 0.25rem;
-}
-
-.p-6 {
-    padding: 0.375rem;
-}
-
-.p-8 {
-    padding: 0.5rem;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.z-\[999999\] {
-    z-index: 999999;
-}
-
-.left-0 {
-    left: 0rem;
-}
-
-.left-1\/2 {
-    left: 50%;
-}
-
-.grow {
-    flex-grow: 1;
-}
-
-.-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));
-}
-
-.items-center {
-    align-items: center;
-}
-
-.justify-center {
-    justify-content: center;
-}
-
-.justify-between {
-    justify-content: space-between;
+/*
+ * eds-matomo-notice is presentation-only: it renders the consent accordion
+ * and its buttons. The host application is responsible for positioning
+ * (fixed banner, centered card, modal, etc.). See
+ * packages/shared-hugo/layouts/_default/baseof.html for the default
+ * bottom-centered card wrapper used by handbook/eds-docs.
+ *
+ * The classes below are only the ones actually applied inside the
+ * shadow root — utility classes from the host page don't pierce shadow
+ * DOM, so they must be declared here.
+ */
+
+:host {
+    display: block;
+    background-color: var(--white, #FFFFFF);
+    /* Match the inner eds-accordion card radius (16px). A smaller host radius
+       clips the accordion's rounded border, making it look like the border
+       extends past the corners (in both the resting and hover states). */
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
 }
 
 .flex {
     display: flex;
 }
 
-.gap-12 {
-    gap: 0.75rem;
-}
-
-.gap-20 {
-    gap: 1.25rem;
-}
-
-.gap-4 {
-    gap: 0.25rem;
+.items-center {
+    align-items: center;
 }
 
 .gap-8 {
     gap: 0.5rem;
 }
-
-@media (min-width: 750px) {
-    .md\:left-1\/2 {
-      left: 50%;
-    }
-    .md\:flex {
-      display: flex;
-    }
-    .md\:hidden {
-      display: none;
-    }
-    .md\:-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));
-    }
-    .md\:-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));
-    }
-  }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -106,7 +106,13 @@ export class EdsMatomoNotice {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "p-8" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
+        return (
+        // Content-only render — no positioning, no overlay, no sizing.
+        // The host application wraps this component in whatever positioned
+        // container makes sense (fixed bottom banner, modal, sidebar slot,
+        // etc.). See packages/shared-hugo/layouts/_default/baseof.html for
+        // the bottom-centered card wrapper used by handbook/eds-docs.
+        h("div", null, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     static get is() { return "eds-matomo-notice"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-search-select/eds-search-select.css

@@ -0,0 +1,203 @@
+/* eds-search-select — shadow:true, fully self-contained (the global Tailwind
+   `.input` / utility classes can't pierce the shadow boundary, so everything is
+   replicated here). Design-token CSS variables DO inherit through shadow, so we
+   use the same tokens eds-input-field uses → identical look. The `.eds-ss__input`
+   rules below are a 1:1 copy of the compiled `.input` rule from eds-input-field. */
+
+:host {
+  display: block;
+  width: 100%;
+  font-family: var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif);
+}
+
+.eds-ss {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+/* Label row: label left, hint pushed top-right (mirrors eds-input-field's
+   `flex justify-between mb-4`). */
+.eds-ss__labelrow {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+
+.eds-ss__hint {
+  margin-top: 0.5rem;   /* mt-8 */
+  margin-left: 0.5rem;  /* ml-8 */
+  font-family: var(--f-ui-05-fontFamily);
+  font-weight: var(--f-ui-05-fontWeight);
+  font-size: var(--f-ui-05-fontSize);
+  line-height: var(--f-ui-05-lineHeight);
+  letter-spacing: var(--f-ui-05-letterSpacing);
+  color: var(--grey-600);
+}
+
+.eds-ss__control {
+  position: relative;
+}
+
+/* ---- The bordered box: 1:1 with the compiled EDS `.input` ----
+   In multi mode it flex-wraps tags + the input; in single mode it holds just
+   the input. The box owns the border/radius/height/focus so it looks identical
+   to an eds-input-field. */
+.eds-ss__box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 2.5rem;
+  padding: 6px 0.75rem;
+  /* extra right room for the clear + chevron-box overlay */
+  padding-right: 3.75rem;
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--white, #fff);
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.eds-ss__box:hover { border-color: var(--brand-black); }
+.eds-ss__box:focus-within {
+  border-color: var(--brand-black);
+  outline: 3px solid var(--brand-green);
+  outline-offset: 2px;
+}
+.eds-ss__box.is-error { border-color: var(--red-700); }
+.eds-ss__box.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--grey-300);
+}
+
+/* The actual text input — transparent/borderless inside the box. */
+.eds-ss__input {
+  flex: 1;
+  min-width: 6rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 4px 0;
+  color: var(--brand-black);
+  font-family: var(--f-ui-02-light-fontFamily);
+  font-weight: var(--f-ui-02-light-fontWeight);
+  font-size: var(--f-ui-02-light-fontSize);
+  line-height: var(--f-ui-02-light-lineHeight);
+  letter-spacing: var(--f-ui-02-light-letterSpacing);
+}
+.eds-ss__input::placeholder { color: var(--grey-500); }
+.eds-ss__input:disabled { cursor: not-allowed; color: var(--grey-500); }
+
+/* ---- Selected tags (multi-select) ---- */
+.eds-ss__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 4px 0.4rem 4px 0.7rem;
+  background: rgba(0, 200, 123, 0.12);
+  color: var(--brand-green-dark, #00A867);
+  border-radius: 6px;
+  font-family: var(--f-ui-02-fontFamily);
+  font-size: var(--f-ui-02-fontSize);
+  font-weight: 600;
+  line-height: 1.4;
+  max-width: 100%;
+}
+.eds-ss__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.eds-ss__chip-x {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--brand-green-dark, #00A867);
+  font-size: 1.2rem;
+  line-height: 1;
+  padding: 0 2px;
+}
+.eds-ss__chip-x:hover { color: var(--brand-black, #07140D); }
+
+/* ---- Clear + chevron overlay (right side of the input) ---- */
+.eds-ss__clear,
+.eds-ss__chevron {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+/* Grey rounded box + icon — same affordance as eds-input-select (bg-dark =
+   --grey-300, rounded-xs = 4px). The icon inherits currentColor. */
+.eds-ss__chevron {
+  right: 6px;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--grey-300);
+  border-radius: 4px;
+  color: var(--brand-black);
+  pointer-events: none;
+}
+.eds-ss__clear {
+  right: 2.6rem; /* just left of the chevron box */
+  color: var(--grey-600, #6e6e6e);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.05rem;
+  line-height: 1;
+}
+.eds-ss__clear:hover { color: var(--brand-black, #07140D); }
+
+/* ---- Dropdown list: EDS tokens + the f-ui-02 body typography of inputs ---- */
+.eds-ss__list {
+  position: absolute;
+  z-index: 50;
+  left: 0;
+  right: 0;
+  margin: 0.25rem 0 0;
+  padding: 0.25rem;
+  list-style: none;
+  max-height: 18rem;
+  overflow-y: auto;
+  background: var(--white, #fff);
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.eds-ss__option {
+  padding: 0.5rem 0.6rem;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--brand-black, #07140D);
+  font-family: var(--f-ui-02-fontFamily);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+.eds-ss__option.is-active { background: rgba(0, 200, 123, 0.1); }
+.eds-ss__option.is-selected { font-weight: 600; color: var(--brand-green-dark, #00A867); }
+
+.eds-ss__status,
+.eds-ss__more {
+  padding: 0.5rem 0.6rem;
+  font-family: var(--f-ui-05-fontFamily);
+  font-size: var(--f-ui-05-fontSize);
+  line-height: var(--f-ui-05-lineHeight);
+  color: var(--grey-600, #6e6e6e);
+}
+.eds-ss__status.is-error { color: var(--red-700, #d64545); }
+.eds-ss__more {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: 0.25rem;
+  font-style: italic;
+}