@ebrains/components 3.0.0 → 3.2.0

package/dist/collection/shared-ui/eds-global-search/eds-global-search.js

@@ -2,6 +2,23 @@ import { h } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 export class EdsGlobalSearch {
     constructor() {
+        /** Clear the current query and results; keep focus in the input so the
+         *  user can start typing again without an extra click. */
+        this.handleClear = () => {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.query = '';
+            this.results = [];
+            this.hasSearched = false;
+            this.showDropdown = false;
+            this.selectedIndex = -1;
+            // Re-focus and reflect the empty value on the underlying DOM input.
+            if (this.inputRef) {
+                this.inputRef.value = '';
+                this.inputRef.focus();
+            }
+        };
         this.handleInput = (event) => {
             var _a;
             const target = event.target;
@@ -34,6 +51,7 @@ export class EdsGlobalSearch {
         this.currentOrigin = '';
         this.currentSource = '';
         this.authToken = '';
+        this.variant = 'gray';
         this.query = '';
         this.results = [];
         this.loading = false;
@@ -43,15 +61,26 @@ export class EdsGlobalSearch {
         this.selectedIndex = -1;
     }
     componentDidLoad() {
-        // Focus input if needed
-        if (this.inputRef) {
-            this.inputRef.focus();
-        }
+        // ⌘K / Ctrl+K focuses the search pill from anywhere on the page.
+        // Bound here (not via @Listen) so it works across shadow boundaries.
+        this.cmdKListener = (event) => {
+            var _a;
+            const isMac = navigator.platform.toUpperCase().includes('MAC');
+            const modifier = isMac ? event.metaKey : event.ctrlKey;
+            if (modifier && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        document.addEventListener('keydown', this.cmdKListener);
     }
     disconnectedCallback() {
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
         }
+        if (this.cmdKListener) {
+            document.removeEventListener('keydown', this.cmdKListener);
+        }
     }
     handleDocumentClick(event) {
         const path = event.composedPath();
@@ -108,7 +137,9 @@ export class EdsGlobalSearch {
             if (this.authToken) {
                 headers['Authorization'] = `Bearer ${this.authToken}`;
             }
-            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, { headers });
+            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, {
+                headers
+            });
             if (!response.ok) {
                 throw new Error('Search failed');
             }
@@ -198,10 +229,23 @@ export class EdsGlobalSearch {
         return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (h("div", { key: '1852fc796b6240987bcad1e278f4b1df136cc449', class: "search-wrapper" }, h("eds-input-field", { key: 'b52b3f0910af3b75c52dc5fd9a514c592b257939', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (h("div", { key: '9f3201f757082d175f74cd6cf289235876a7adbd', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '3eb28e3703204b69356012f69088e6eb756be901', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '08034f1d9fd9125bc9581c89e9b2f96efc1a964b', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '8b54ae6c27499978b37a34b0b8e596216141a967', class: "flex text-center justify-center p-16" }, h("span", { key: 'b4229325ea0650af096984c50882558508c3e97d', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: 'e2c4afb90f05171d30c42d7f5780388b18b19e50', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'ad17ced3b7cd285c654cb88e21f295c1aaa1059f', name: "search" }), h("div", { key: '66f22b148372de474fa3593deedbaa138b6f534e' }, h("p", { key: 'eeb0532fbe406b0415f45685ea0f00e09950db84', class: "f-body-02" }, "No results found"), h("p", { key: 'e13d6267eaa8cfc11930b2f61ea29b2f3a82cb71', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '23a0e1e6e1634d0e9212d2b9711a9d9f8d1ace42', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+        return (h("div", { key: '677355c6a3318ec1197965eac1b2cd92d1068730', class: "search-wrapper" }, h("label", { key: 'f5cc85b9445df11e888428bb2a0b2b4114bdc3a9', class: `search-pill search-pill--${this.variant}`, htmlFor: "search-global" }, h("svg", { key: 'b95972f32833c302166af4d496d62aabbbca6b96', class: "search-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '916f6f24dc45b800fd024196cad8a5a7704715e0', cx: "11", cy: "11", r: "7" }), h("line", { key: 'e73a37d14e3c5de75ff1d5e1ff3ac6dc17276884', x1: "20", y1: "20", x2: "16.5", y2: "16.5" })), h("input", { key: 'e9c88b7577dbc32d700f4ccfc657ac3400c406a7', id: "search-global", class: "search-input", type: "search", name: "search-box-global", placeholder: this.placeholder, value: this.query, autoComplete: "off", onInput: this.handleInput, ref: (el) => (this.inputRef = el) }), this.query && this.query.length > 0 ? (h("button", { type: "button", class: "search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault() /* keep focus in input */, onClick: () => this.handleClear() }, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))) : (h("kbd", { class: "search-kbd", "aria-hidden": "true" }, "\u2318K"))), this.showDropdown && (h("div", { key: 'bac2451a0d8e8fe44f4ee8205aac072866c071cc', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '2272670a68466fdcb7f7dbef9392c85524f26511', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: 'ea08bc71e4e251110d63c1f7f0c9ec3cf4f02d31', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: 'c54f235e8cf516715d83b830c13b7091ce10c8e5', class: "flex text-center justify-center p-16" }, h("span", { key: '5e0164e70620b1b70acbd665f72e02627758d447', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: 'bc8c5dce2e1e9e0cdb46db53a94d4a06401f8c2f', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'ddb1815134abfd538530de6d805006f2e629f423', name: "search" }), h("div", { key: '0fe6b3742f59bf6a9745d0c3652caeed1c9fcd0c' }, h("p", { key: '26751d170e283e85eb0fa914c7cd681281b79606', class: "f-body-02" }, "No results found"), h("p", { key: '3c5117ba70272690647141c09105ad73142d2880', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: 'ec4e905215fa05a2d29e3cb02325b898cc8e7e75', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
                 'result-item': true,
                 'result-item--selected': index === this.selectedIndex
-            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "result-title f-body-02" }, result.title)), h("div", { class: "result-meta" }, h("span", { class: "result-badge" }, result.source), result.section && h("span", { class: "result-badge" }, result.section), h("span", { class: "result-url" }, result.url)), result.snippet && h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (h("div", { key: '4d901487a14818ea05d3433c7cc5b881a87764e2', class: "dropdown-footer" }, h("span", { key: '8411362dd3b694220e6d10268a63ef4fc3b30eeb', class: "footer-hint" }, h("kbd", { key: '5b1c50f275a4d1daa35f0b1276c26bf110189785' }, "\u2191"), " ", h("kbd", { key: '711430aba48663a8f58b5f3dae15c1357e75761b' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: 'b4e4362f19d7b82cbce9dcdea0b9c863a6e36fef' }, "\u21B5"), " select \u2022 ", h("kbd", { key: '9cc79708fece76043eb8f050b1715ff610f937ec' }, "esc"), " close")))))));
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "result-title f-body-02" }, result.title)), h("div", { class: "result-meta" }, result.parent_software
+            ? [
+                h("span", { class: "result-badge result-badge--parent" }, result.parent_software),
+                result.section && h("span", { class: "result-badge result-badge--lr" }, result.section)
+            ]
+            : result.source === 'kg-services'
+                ? [
+                    h("span", { class: "result-badge" }, "EBRAINS KG"),
+                    result.section && h("span", { class: "result-badge" }, result.section)
+                ]
+                : [
+                    h("span", { class: "result-badge" }, result.source),
+                    result.section && h("span", { class: "result-badge" }, result.section)
+                ], h("span", { class: "result-url" }, result.url)), result.snippet && h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (h("div", { key: '8ba2b0905762d08201d770ef4ad555b5817a93d5', class: "dropdown-footer" }, h("span", { key: '447177da436c4673c1530b63985069270eea9629', class: "footer-hint" }, h("kbd", { key: 'eca68fd4c32ff1b05130322d55c6b40353d0d7e9' }, "\u2191"), " ", h("kbd", { key: 'f0e8c800465276b7648e883f0de99389e144cbdf' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: 'a40bfd64de00d1e9e7770ae13221b84e7270a93e' }, "\u21B5"), " select \u2022 ", h("kbd", { key: 'bbc53439fad27289cdd4705a7ddb61e8d3b578ee' }, "esc"), " close")))))));
     }
     static get is() { return "eds-global-search"; }
     static get encapsulation() { return "shadow"; }
@@ -360,6 +404,24 @@ export class EdsGlobalSearch {
                 "attribute": "auth-token",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'gray' | 'white' | 'black'",
+                    "resolved": "\"black\" | \"gray\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme of the search pill.\n- \"gray\"  (default): light grey surface (matches the EBRAINS header mockup)\n- \"white\": white surface with a 1px border (use when sitting on a coloured nav)\n- \"black\": brand-black surface with white text (use on dark backgrounds)"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'gray'"
             }
         };
     }

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

@@ -0,0 +1,205 @@
+:host {
+  display: block;
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  color: var(--brand-black, #07140D);
+}
+
+/* Header */
+.lr-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.lr-heading {
+  font-family: var(--inter, 'Inter', sans-serif);
+  font-weight: 300;
+  font-size: 1.75rem;
+  line-height: 110%;
+  margin: 0;
+  color: var(--brand-black, #07140D);
+}
+
+.summary {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Filters */
+.filters {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  align-items: flex-end;
+}
+
+.filter-search {
+  grid-column: span 2;
+}
+
+.filter-select {
+  grid-column: span 1;
+}
+
+/* Accordion list */
+.accordion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Resources inside accordion */
+.resources-content {
+  padding-top: 0.5rem;
+}
+
+.kg-link {
+  margin-bottom: 1rem;
+}
+
+/* Resources table */
+.resources-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.resources-table thead th {
+  text-align: left;
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--grey-dark, #7A7B7A);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.resource-row {
+  transition: background-color 0.2s ease;
+}
+
+.resource-row--clickable {
+  cursor: pointer;
+}
+
+.resource-row--clickable:hover {
+  background-color: rgba(0, 255, 157, 0.04);
+}
+
+.resource-row td {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  vertical-align: top;
+}
+
+.resource-row:last-child td {
+  border-bottom: none;
+}
+
+.resource-name {
+  font-weight: 500;
+  font-size: 1.0625rem;
+  color: var(--brand-black, #07140D);
+  transition: color 0.2s ease;
+}
+
+.resource-row--clickable:hover .resource-name {
+  color: var(--brand-green-dark, #00C87B);
+}
+
+.resource-desc {
+  margin: 0.25rem 0 0;
+  font-size: 0.9375rem;
+  color: var(--grey-dark, #7A7B7A);
+  line-height: 145%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.col-name {
+  width: auto;
+}
+
+.col-type {
+  width: 160px;
+  white-space: nowrap;
+}
+
+.col-level {
+  width: 110px;
+  white-space: nowrap;
+}
+
+/* States */
+/* eds-spinner renders an absolutely-positioned overlay (top/left/100%×100%)
+   that anchors to the nearest positioned ancestor. .loading must therefore
+   be `position: relative` and tall enough to host the spinner + message,
+   otherwise the overlay escapes upward and centres against the page. */
+.loading {
+  position: relative;
+  min-height: 8rem;
+  padding: 1rem 1.25rem;
+  color: var(--grey-dark, #7A7B7A);
+  font-size: 0.9375rem;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 0.25rem;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.no-results {
+  padding: 2rem;
+  text-align: center;
+  color: var(--grey-dark, #7A7B7A);
+  font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 750px) {
+  .lr-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .filters {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-search,
+  .filter-select {
+    grid-column: span 1;
+  }
+
+  .col-type,
+  .col-level {
+    width: auto;
+  }
+
+  .resources-table thead {
+    display: none;
+  }
+
+  .resource-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    padding: 0.625rem 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  }
+
+  .resource-row td {
+    border: none;
+    padding: 0;
+  }
+
+  .col-name {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,253 @@
+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: 'aef669885e2bc85b30f70b3db12fbf4040a306a9', class: "lr-container" }, h("div", { key: '95413849959947a851e27a404aa21368aa895e96', class: "lr-header" }, h("h2", { key: '10353aae716a1408f3f49d70501684a633bf7b51', class: "lr-heading" }, this.heading)), this.loading && (h("div", { key: 'd3318b411c4e27551997a697aa165fe4afb8f3fa', class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { key: 'b242ace225a2b93d5d8e6e4fd3b78a23778d1995', size: "sm", variant: "primary", background: "transparent", message: "Loading learning resources..." }))), this.error && !this.loading && h("eds-alert", { key: 'c0a5cf3aa2830cb96f253f10a34babc4bdb9aedb', intent: "error", message: this.error }), !this.loading && !this.error && (h("div", { key: '83671b3aea2286fe508742ae81d8d0d4aae9863c', 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: '2d344afbcaa2f18bddf2872fd1cf1eb0993ce632', 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-kg-web-services-select/eds-kg-web-services-select.js

@@ -33,7 +33,7 @@ export class EdsKgWebServicesSelect {
             // Check cache first
             const cachedEntry = webServicesCache.get(cacheKey);
             const now = Date.now();
-            if (cachedEntry && (now - cachedEntry.timestamp) < CACHE_DURATION) {
+            if (cachedEntry && now - cachedEntry.timestamp < CACHE_DURATION) {
                 // Use cached data
                 this.webServices = cachedEntry.data;
             }
@@ -52,7 +52,7 @@ export class EdsKgWebServicesSelect {
                 });
             }
             // Format options for eds-input-field: "Localizoom (ebrains-localizoom)"
-            this.selectOptions = this.webServices.map(service => ({
+            this.selectOptions = this.webServices.map((service) => ({
                 label: `${service.name} (${service.short_name})`,
                 value: service.short_name
             }));

package/dist/collection/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.stories.js

@@ -56,8 +56,7 @@ export default {
         }
     }
 };
-const Template = (args) => {
-    return `
+const Template = (args) => `
     <eds-kg-web-services-select
       ${args.apiEndpoint ? `api-endpoint="${args.apiEndpoint}"` : ''}
       ${args.label ? `label="${args.label}"` : ''}
@@ -74,7 +73,6 @@ const Template = (args) => {
       ${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
     ></eds-kg-web-services-select>
   `;
-};
 export const Default = Template.bind({});
 Default.args = {
     apiEndpoint: 'https://forms.ebrains.eu/api/v1/kg/web-services/cached',