@ebrains/components 2.4.1 → 3.1.0

package/dist/components/{eds-icon-close.d.ts → eds-input-file.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconClose extends Components.EdsIconClose, HTMLElement {}
-export const EdsIconClose: {
-    prototype: EdsIconClose;
-    new (): EdsIconClose;
+interface EdsInputFile extends Components.EdsInputFile, HTMLElement {}
+export const EdsInputFile: {
+    prototype: EdsInputFile;
+    new (): EdsInputFile;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-input-file.js

@@ -0,0 +1,6 @@
+import { E as EdsInputFile$1, d as defineCustomElement$1 } from './eds-input-file2.js';
+
+const EdsInputFile = EdsInputFile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsInputFile, defineCustomElement };

package/dist/components/eds-input-file2.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const edsInputFileCss = ".eds-input-file-container{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem}.eds-input-file-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.eds-input-file-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;border:1.5px solid var(--color-border-soft, #d0d0d0);border-radius:100px;background-color:var(--color-bg-inverse, #ffffff);font-family:var(--font-family, 'IBM Plex Sans', sans-serif);font-size:0.875rem;font-weight:500;color:var(--color-text-default, #07140D);cursor:pointer;transition:all 0.2s ease;outline:none}.eds-input-file-btn:hover:not(:disabled){border-color:var(--color-border-strong, #07140D);background-color:var(--color-bg-softer, #ECECEC)}.eds-input-file-btn:active:not(:disabled){background-color:var(--color-bg-soft, #F5F5F5)}.eds-input-file-btn:focus-visible{outline:2px solid var(--color-accent, #00FF9D);outline-offset:2px}.eds-input-file-btn:disabled{opacity:0.5;cursor:not-allowed}.eds-input-file-btn svg{width:16px;height:16px;flex-shrink:0}.eds-input-file-chips{display:flex;flex-wrap:wrap;gap:0.5rem}.eds-input-file-chip{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 0.75rem;background-color:var(--color-bg-softer, #ECECEC);border-radius:100px;font-size:0.75rem;color:var(--color-text-default, #07140D)}.eds-input-file-chip-icon{width:14px;height:14px;color:var(--color-text-light, #7A7B7A);flex-shrink:0}.eds-input-file-chip-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.eds-input-file-chip-size{font-family:var(--font-family-mono, 'IBM Plex Mono', monospace);font-size:0.625rem;color:var(--color-text-light, #7A7B7A);flex-shrink:0}.eds-input-file-chip-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;color:var(--color-text-light, #7A7B7A);cursor:pointer;transition:color 0.2s ease;flex-shrink:0}.eds-input-file-chip-remove:hover:not(:disabled){color:var(--color-error, #e53935)}.eds-input-file-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.eds-input-file-chip-remove svg{width:14px;height:14px}@media (max-width: 640px){.eds-input-file-chip-name{max-width:120px}}";
+const EdsInputFileStyle0 = edsInputFileCss;
+
+const EdsInputFile = /*@__PURE__*/ proxyCustomElement(class EdsInputFile extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.edsfile = createEvent(this, "edsfile", 7);
+        this.handleButtonClick = () => {
+            var _a;
+            (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (!input.files)
+                return;
+            const newFiles = Array.from(input.files).map((file) => ({
+                file,
+                id: `${file.name}-${Date.now()}-${Math.random()}`
+            }));
+            if (this.multiple) {
+                this.selectedFiles = [...this.selectedFiles, ...newFiles];
+            }
+            else {
+                this.selectedFiles = newFiles.slice(0, 1);
+            }
+            this.emitFileChange();
+        };
+        this.handleRemoveFile = (id) => {
+            this.selectedFiles = this.selectedFiles.filter((item) => item.id !== id);
+            this.emitFileChange();
+        };
+        this.name = undefined;
+        this.inputId = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = false;
+        this.accept = undefined;
+        this.maxFileSize = undefined;
+        this.buttonLabel = undefined;
+        this.selectedFiles = [];
+    }
+    emitFileChange() {
+        const files = this.selectedFiles.map((item) => item.file);
+        this.edsfile.emit({ files });
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+    }
+    getFileIcon(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'];
+        if (imageExts.includes(ext || '')) {
+            // Image icon
+            return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })));
+        }
+        // Document icon (default)
+        return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" })));
+    }
+    render() {
+        const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
+        return (h("div", { key: 'e02d98fbc01dbe7a89eeb3010f966ed4a373ede6', class: "eds-input-file-container" }, h("input", { key: '2013826fda9453aade4528c9f051aac98780662f', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'f5e5cf91376ccb69b39ef3c9b11095aca8bfb728', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: '563066375b42d0a8c14f14ac9fdfb587539f4e76', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'ebe5549fffa0c2453ab98891da75a464c09e9fa2', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '69036b82e15103e481770d0ef2c500b0dcad0399', points: "17 8 12 3 7 8" }), h("line", { key: 'e0531be95796ec6dc7f9fe359e4736a15a0e3640', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '62590fb46cee89d2524f1ede71c7af341c3e426a', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+    }
+    get hostEl() { return this; }
+    static get style() { return EdsInputFileStyle0; }
+}, [1, "eds-input-file", {
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "disabled": [4],
+        "required": [4],
+        "multiple": [4],
+        "accept": [1],
+        "maxFileSize": [2, "max-file-size"],
+        "buttonLabel": [1, "button-label"],
+        "selectedFiles": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-input-file"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-input-file":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsInputFile);
+            }
+            break;
+    } });
+}
+
+export { EdsInputFile as E, defineCustomElement as d };

package/dist/components/eds-input-footer2.js

@@ -2,7 +2,47 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsInputFooterCss = "p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{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)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
+/**
+ * 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>
+ */
+function safeInlineFormat(text) {
+    if (!text) {
+        return '';
+    }
+    let s = String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    // bold
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // links — safe schemes only; otherwise drop to the plain label
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, label, url) => /^(https?:|mailto:)/i.test(url)
+        ? `<a href="${url}" target="_blank" rel="noopener noreferrer" class="eds-desc-link">${label}</a>`
+        : label);
+    // newlines → line breaks
+    s = s.replace(/\n/g, '<br>');
+    return s;
+}
+
+const edsInputFooterCss = "p{margin:0}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}eds-link{--f-ui-02-fontSize:var(--f-ui-04-fontSize)}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{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)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
 const EdsInputFooterStyle0 = edsInputFooterCss;
 
 const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter extends HTMLElement {
@@ -17,7 +57,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'ac60e5d56a86af64ea34445f9376c942258c9026' }, this.error && this.errorMessage && (h("div", { key: '25ff09f276f7028e1b2877133ab639b35cdebaba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '2add9a34a966428af96598f3e8e07f9535da8728', icon: "warning" }), h("p", { key: 'bcb624339190c0585e960a0c4debc3fec2ada4eb', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '00944237618f325774f316faaf4620e5eb507289', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '464c5a59e9c36a06f1cdae9be9e09a4f8b05d282', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
+        return (h("div", { key: '866e375b5dd1d9c958f2255537e919a8c1f25dc7' }, this.error && this.errorMessage && (h("div", { key: '95d11c9cbb7746cc727ad9e037d00a28d9475bfc', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'face7f905ffa7c5f4dc7a7e6825d185e0d6b7901', name: "warning", size: 20 }), h("p", { key: '2011af93e06df1d91972843a510e843763f53b0b', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '39d6833a30e7b93f75154a14bee1e6b4500575cb', id: `desc_${this.name}`, class: "f-ui-04 text-lighter", innerHTML: safeInlineFormat(this.message) }), this.link && (h("eds-link", { key: 'bfbf95e704574ada6f857ca08a90409ab38c1a5e', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
     static get style() { return EdsInputFooterStyle0; }
 }, [1, "eds-input-footer", {
@@ -51,4 +91,4 @@ function defineCustomElement() {
     } });
 }
 
-export { EdsInputFooter as E, defineCustomElement as d };
+export { EdsInputFooter as E, defineCustomElement as d, safeInlineFormat as s };

package/dist/components/eds-input-label2.js

@@ -14,7 +14,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '8a421c62ddec859bd7837454aa664a116001fd31', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'ad49202fb172a182822587248c141e0f8d7bcc6f' }, h("span", { key: 'e682ff5f3ac83b8adce37c8c9893c2aa235c97b1', "aria-hidden": "true" }, "*"), h("span", { key: '343d2abb7c452fc2a6a67b04727237fea9519838', class: "sr-only" }, "required")))));
+        return (h("label", { key: '40867ae01e94ab7a69b6f82658e4ee1b1e5b87cf', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'e3cfc44ea2a7f53f51c544648b3c635557cb8248' }, h("span", { key: 'ff7559b58cb22ce2a3066ed15e77f6088f299aaa', "aria-hidden": "true" }, "*"), h("span", { key: '2c831682aae410ac71589171e2b04981c60052bb', class: "sr-only" }, "required")))));
     }
     static get style() { return EdsInputLabelStyle0; }
 }, [1, "eds-input-label", {

package/dist/components/eds-input-range2.js

@@ -25,8 +25,8 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         this.sliderVal = undefined;
     }
     componentWillLoad() {
-        this.sliderVal =
-            this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+        var _a;
+        this.sliderVal = (_a = this.value) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
     }
     // Keep the internal state in sync when the passed value changes.
     onValueChange(newVal) {
@@ -43,7 +43,9 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '27c60fe7ad5cf3cf8255129529ef64905c87b609', class: "relative flex flex-col items-start" }, h("input", { key: '8ef115e18b6afd956c57a30cd4b9ee45ecd79334', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'beb95f6aa032db57ec401839cea48ac1d3a1861d', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        var _a;
+        const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
+        return (h("div", { key: '231ae0f34900dfa3b8edeb9745ce07220735c613', class: "relative flex flex-col items-start" }, h("input", { key: '2cbfbbb410694a4764f44c26a74f4cbca9b98f3c', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '8e7036cbaeebb62c6cd4b7f2105d3fa487ad463e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-input-search.js

@@ -1,4 +1,103 @@
-import { E as EdsInputSearch$1, d as defineCustomElement$1 } from './eds-input-search2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+
+const EdsInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.search = createEvent(this, "search", 7);
+        /**
+         * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
+         * and focus the input element when triggered.
+         *
+         * @param e - The keyboard event.
+         */
+        this.keydownListener = (e) => {
+            // Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                // Focus the input if it's available and not disabled
+                if (this.inputElement && !this.disabled) {
+                    this.inputElement.focus();
+                }
+            }
+        };
+        /*onInput = (e: any) => {
+          // eslint-disable-next-line
+          console.log('on input:', e);
+        };*/
+        this.onChange = (e) => {
+            // eslint-disable-next-line
+            this.search.emit({
+                event: 'change',
+                value: e.target.value
+            });
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: e.target.value || '',
+                action: 'search'
+            });
+        };
+        this.name = undefined;
+        this.inputId = 'search-main';
+        this.placeholder = 'Search...';
+        this.value = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.decorate = undefined;
+        this.label = 'Search';
+    }
+    componentDidLoad() {
+        // Assign the native input element after the component loads
+        this.inputElement = this.el.querySelector('input');
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    disconnectedCallback() {
+        // Clean up the event listener when the component is removed
+        document.removeEventListener('keydown', this.keydownListener);
+    }
+    async getInputElement() {
+        // Return the native input element
+        return this.inputElement;
+    }
+    render() {
+        return (h("div", { key: '52676b3559e14b5153f7d8f0fa6cd12e49354d87', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '754e8753607c01dab63d156d306f3325547049aa', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'b49d523195711316c0817de67776d379a6c7248b', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+            //onInput={this.onInput}
+            onChange: this.onChange })));
+    }
+    get el() { return this; }
+}, [0, "eds-input-search", {
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "placeholder": [1],
+        "value": [1],
+        "disabled": [4],
+        "required": [4],
+        "decorate": [1],
+        "label": [1],
+        "getInputElement": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-input-search", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsInputSearch$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const EdsInputSearch = EdsInputSearch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-input-select2.js

@@ -24,12 +24,12 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: '5f73cb76010cac41f433921395aaf779765e298a', class: "relative" }, h("select", { key: '0705adad43076b6048900d5c62b8be2dff090270', id: selectId, name: this.name, class: {
+        return (h("div", { key: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, h("select", { key: '52e712898a3251cea5447a379886449175e7c8b8', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '6b2d7856821cfe804f63f6f289f78bd3f7a8273c', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '161692e967ed9c094feb171c6d067058dfafa146', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '513a74b4753a08280326970dfbb16642b5c6b986', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'd52c376ffb683abc0dec72177dba445273d148f7', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'fecbcb47793f8a57de44711b33d3650be5297aa7', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '4fda1345a62eeb212093057382d877f31bb6112d', class: "w-20 h-20", name: "chevron-right" }))));
     }
 }, [0, "eds-input-select", {
         "inputId": [1, "input-id"],

package/dist/components/eds-input2.js

@@ -29,6 +29,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
         this.min = undefined;
         this.max = undefined;
         this.step = undefined;
+        this.inputTabIndex = undefined;
         this.innerVal = '';
         this.maxLengthReached = false;
     }
@@ -51,7 +52,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '10cacc49f2e61f8b357d1d0dd303822d7b3d7800', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+        return (h("div", { key: '0261b14034860a2f59dde8de72d6729ec411d2cf', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, tabindex: this.inputTabIndex, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -62,7 +63,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: '2f17e830e7d5977c06dff45e248ec6d4bcf2885c', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'd171f505b869787c01945720489343a6d57e02bf', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: 'f2a7b410ee586d3266d05d422f3376488392fc6b', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: '37581bbd64652b25a00a401ab359736169814b1f', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -86,6 +87,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
         "min": [2],
         "max": [2],
         "step": [2],
+        "inputTabIndex": [2, "input-tab-index"],
         "innerVal": [32],
         "maxLengthReached": [32]
     }, undefined, {

package/dist/components/eds-kg-learning-resources.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsKgLearningResources extends Components.EdsKgLearningResources, HTMLElement {}
+export const EdsKgLearningResources: {
+    prototype: EdsKgLearningResources;
+    new (): EdsKgLearningResources;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-kg-learning-resources.js

@@ -0,0 +1,221 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './eds-accordion2.js';
+import { d as defineCustomElement$7 } from './eds-alert2.js';
+import { d as defineCustomElement$6 } from './eds-button2.js';
+import { d as defineCustomElement$5 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$4 } from './eds-link2.js';
+import { d as defineCustomElement$3 } from './eds-spinner2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsKgLearningResourcesCss = ":host{display:block;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);color:var(--brand-black, #07140D)}.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{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{display:flex;flex-direction:column;gap:0.5rem}.resources-content{padding-top:0.5rem}.kg-link{margin-bottom:1rem}.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}.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}@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%}}";
+const EdsKgLearningResourcesStyle0 = edsKgLearningResourcesCss;
+
+let cachedData = null;
+let cacheTimestamp = 0;
+const CACHE_TTL = 10 * 60 * 1000;
+const EdsKgLearningResources$1 = /*@__PURE__*/ proxyCustomElement(class EdsKgLearningResources extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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."))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsKgLearningResourcesStyle0; }
+}, [1, "eds-kg-learning-resources", {
+        "apiEndpoint": [1, "api-endpoint"],
+        "resolveNames": [4, "resolve-names"],
+        "size": [2],
+        "heading": [1],
+        "variant": [1],
+        "loading": [32],
+        "error": [32],
+        "software": [32],
+        "meta": [32],
+        "filterType": [32],
+        "filterLevel": [32],
+        "searchQuery": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-kg-learning-resources", "eds-accordion", "eds-alert", "eds-button", "eds-icon-wrapper", "eds-link", "eds-spinner", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-kg-learning-resources":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsKgLearningResources$1);
+            }
+            break;
+        case "eds-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsKgLearningResources = EdsKgLearningResources$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsKgLearningResources, defineCustomElement };