@ebrains/components 2.4.0 → 3.0.0

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

@@ -27,13 +27,17 @@ menu {
   right: 0;
   background: white;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 255, 157, 0.08);
   max-height: 500px;
   overflow: hidden;
   z-index: 9999;
   display: flex;
   flex-direction: column;
+  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* States */
@@ -57,10 +61,11 @@ menu {
 }
 
 .result-item {
-  padding: 10px 14px;
+  padding: 7px 7px;
   cursor: pointer;
-  transition: background-color 0.15s ease;
-  border-left: 3px solid transparent;
+  border-left: 4px solid transparent;
+  margin-bottom: 2px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   word-wrap: break-word;
   word-break: break-word;
@@ -68,73 +73,143 @@ menu {
 
 .result-item:hover,
 .result-item--selected {
-  background-color: var(--grey-200);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 255, 157, 0.08) 0%,
+    rgba(0, 255, 157, 0.03) 100%
+  );
   border-left-color: var(--green-600);
+  box-shadow: 0 2px 8px rgba(0, 255, 157, 0.15);
+}
+
+.result-item:hover .result-title,
+.result-item--selected .result-title {
+  color: var(--green-700);
+}
+
+.result-title {
+  color: var(--black);
+  transition: color 0.2s ease;
 }
 
 .result-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.result-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  background: rgba(0, 255, 157, 0.12);
+  color: var(--green-800);
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.2s ease;
+}
+
+.result-item:hover .result-badge,
+.result-item--selected .result-badge {
+  background: rgba(0, 255, 157, 0.2);
+  color: var(--green-900);
+}
+
+.result-url {
+  font-size: 12px;
+  color: var(--grey-600);
+}
+
+.external-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 4px;
+  color: var(--green-600);
 }
 
 .result-snippet {
   font-size: 13px;
   color: #616161;
-  line-height: 1.4;
+  line-height: 1.5;
   margin: 0;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  transition: color 0.2s ease;
+}
+
+.result-item:hover .result-snippet,
+.result-item--selected .result-snippet {
+  color: #424242;
 }
 
 /* Footer */
 .dropdown-footer {
-  border-top: 1px solid #e0e0e0;
-  padding: 8px 16px;
-  background: #fafafa;
+  border-top: 1px solid rgba(0, 255, 157, 0.15);
+  padding: 10px 16px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 255, 157, 0.02) 0%,
+    rgba(0, 255, 157, 0.05) 100%
+  );
   flex-shrink: 0;
 }
 
 .footer-hint {
   font-size: 11px;
-  color: #757575;
+  color: #616161;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex-wrap: wrap;
 }
 
 kbd {
   display: inline-block;
-  padding: 2px 5px;
-  font-size: 10px;
+  padding: 3px 7px;
+  font-size: 11px;
   font-family: monospace;
-  line-height: 1;
-  color: #424242;
-  background-color: #f5f5f5;
-  border: 1px solid #bdbdbd;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  line-height: 1.2;
+  font-weight: 500;
+  color: var(--green-700);
+  background: rgba(0, 255, 157, 0.1);
+  border: 1px solid rgba(0, 200, 123, 0.3);
+  border-radius: 4px;
+  box-shadow:
+    0 2px 0 rgba(0, 255, 157, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
-/* Scrollbar */
+/* Scrollbar - Green themed */
 .dropdown-results::-webkit-scrollbar {
   width: 8px;
 }
 
 .dropdown-results::-webkit-scrollbar-track {
-  background: #f5f5f5;
+  background: rgba(0, 255, 157, 0.05);
+  border-radius: 4px;
 }
 
 .dropdown-results::-webkit-scrollbar-thumb {
-  background: #bdbdbd;
+  background: #33FFB8;
   border-radius: 4px;
 }
 
 .dropdown-results::-webkit-scrollbar-thumb:hover {
-  background: #9e9e9e;
+  background: #00FF9D;
 }
 
 .flex {

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

@@ -30,6 +30,10 @@ export class EdsGlobalSearch {
         this.placeholder = 'Search Handbook + Design...';
         this.limit = 20;
         this.debounceDelay = 300;
+        this.forceNewTab = false;
+        this.currentOrigin = '';
+        this.currentSource = '';
+        this.authToken = '';
         this.query = '';
         this.results = [];
         this.loading = false;
@@ -99,7 +103,12 @@ export class EdsGlobalSearch {
         this.loading = true;
         this.error = '';
         try {
-            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);
+            // Build headers with optional authorization
+            const headers = {};
+            if (this.authToken) {
+                headers['Authorization'] = `Bearer ${this.authToken}`;
+            }
+            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`, { headers });
             if (!response.ok) {
                 throw new Error('Search failed');
             }
@@ -126,10 +135,48 @@ export class EdsGlobalSearch {
             category: 'shared-ui',
             parentContext: null,
             tag: this.el.tagName.toLowerCase(),
-            name: `search-select: ${result.url}` || 'unknow search result selection',
+            name: `search-select: ${result.url}` || 'unknown search result selection',
             action: 'click'
         });
-        window.open(result.url, '_blank', 'noopener,noreferrer');
+        // Determine if link is external
+        let isExternal = false;
+        let navigateUrl = result.url;
+        try {
+            const resultUrl = new URL(result.url, window.location.href);
+            // If currentSource is set and matches result source, treat as internal
+            if (this.currentSource && result.source === this.currentSource) {
+                // Extract relative path from the URL
+                navigateUrl = resultUrl.pathname + resultUrl.search + resultUrl.hash;
+                isExternal = false;
+            }
+            else {
+                // Different source - check actual origin
+                const currentOrigin = this.currentOrigin || window.location.origin;
+                isExternal = resultUrl.origin !== currentOrigin;
+            }
+            /*console.log('[eds-global-search] Navigation check:', {
+              resultUrl: result.url,
+              resultSource: result.source,
+              currentSource: this.currentSource,
+              isMatchingSource: result.source === this.currentSource,
+              isExternal: isExternal,
+              navigateUrl: navigateUrl,
+              forceNewTab: this.forceNewTab
+            });*/
+        }
+        catch (e) {
+            console.error('[eds-global-search] URL parsing error:', e);
+            isExternal = false;
+        }
+        // Open in new tab if: forced OR external link
+        if (this.forceNewTab || isExternal) {
+            //console.log('[eds-global-search] Opening in new tab');
+            window.open(result.url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            //console.log('[eds-global-search] Navigating in same tab to:', navigateUrl);
+            window.location.href = navigateUrl;
+        }
     }
     scrollToSelected() {
         if (this.selectedIndex >= 0 && this.dropdownRef) {
@@ -151,10 +198,10 @@ export class EdsGlobalSearch {
         return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (h("div", { key: 'be8f46caa1d12a034401686c9860b87032652322', class: "search-wrapper" }, h("eds-input-field", { key: 'c31ac27a5e9f97729da8f7168e22ad09205ffce0', 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: '57b87393636913be24856bedc805e180171f084e', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '3ddb78e5a734d69b581e64ee825d12574f98574d', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '178c99535ce61b320fd70ab1f3aeb8408c868fe3', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '87feb37ffec93fa12185cd1fffb5c4f8ac54cd55', class: "flex text-center justify-center p-16" }, h("span", { key: '07544fe95721c9e0898364f3bdcfc0b1ca79a48d', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '6595178cb14ce5e21cdb15f96e039975a8af0c67', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'f5b614218bb6ef642c3d1f4c7d41f56f28319a9d', icon: "search" }), h("div", { key: '857671d7783d8fe854e6b3203a3755d24f337e5d' }, h("p", { key: '89bae3bfb4efa63e777121088a59d873652de4e9', class: "f-body-02" }, "No results found"), h("p", { key: '1a951b1a6f0daf7506e6e7892a211f92d95b94d4', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '1c1711dc4332d70cefe965dcfeeabc3c6745ce4d', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+        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: {
                 '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: "f-body-02" }, result.title)), h("div", { class: "inline" }, h("eds-tag", { intent: "accent", label: result.source }), result.section && h("span", { class: "result-badge" }, result.section), h("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (h("div", { key: '26e172b579f71b7096481994c0a4af80d3e416d3', class: "dropdown-footer" }, h("span", { key: '57a6432125472aaed3b7b46c106aeec0d0a5ee50', class: "footer-hint" }, h("kbd", { key: 'c8ca5d4b1a2e8f59665290ab78499f8db431a2e9' }, "\u2191"), " ", h("kbd", { key: '89a6520e51bed33cfc37b892480af44e5b77a9c3' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '4173b9ec77d52d4570e016c3366e27fef225ccb0' }, "\u21B5"), " select \u2022 ", h("kbd", { key: '7f118c184acf52edd545e1f97b4ca991eaa1aa1f' }, "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" }, 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")))))));
     }
     static get is() { return "eds-global-search"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +288,78 @@ export class EdsGlobalSearch {
                 "attribute": "debounce-delay",
                 "reflect": false,
                 "defaultValue": "300"
+            },
+            "forceNewTab": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force all results to open in new tab (useful when embedded in external sites)"
+                },
+                "attribute": "force-new-tab",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "currentOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current site origin (auto-detected if not provided)"
+                },
+                "attribute": "current-origin",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "currentSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current source identifier (e.g., 'handbook', 'design')\nResults matching this source will open in same tab"
+                },
+                "attribute": "current-source",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional authorization token (JWT) to include in requests\nWhen provided, will be sent as \"Bearer <token>\" in Authorization header"
+                },
+                "attribute": "auth-token",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -0,0 +1,8 @@
+.kg-web-services-select-container {
+  width: 100%;
+}
+
+.loading-container,
+.error-container {
+  width: 100%;
+}