@ebrains/components 2.4.1 → 3.1.0

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

@@ -0,0 +1,685 @@
+import { h } from "@stencil/core";
+/**
+ * Searchable, source-agnostic select for HUGE option lists (countries,
+ * currencies, nationalities, …) — the generalised sibling of
+ * eds-kg-web-services-select.
+ *
+ * It never talks to an external API directly. It either filters an inline
+ * `options` array client-side, or queries a VETTED, NAMED `source` through our
+ * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+ * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+ * messy upstream schema is flattened server-side by an adapter — the component
+ * stays dumb.
+ *
+ * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+ * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+ * sources are additionally bounded by the server's page `limit`.
+ */
+export class EdsSearchSelect {
+    constructor() {
+        this.debounceTimer = null;
+        this.inlineOptions = [];
+        this.listboxId = `eds-ss-list-${Math.round(performance.now())}`;
+        // value -> label, so selected tags render readable labels even for remote
+        // values whose label hasn't been fetched in the current page.
+        this.labelCache = {};
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.open = true;
+            this.activeIndex = -1;
+            this.runSearch(this.query);
+        };
+        this.clear = () => {
+            if (this.multiple) {
+                this.value = [];
+                this.emitValue([]);
+            }
+            else {
+                this.value = undefined;
+                this.selectedLabel = '';
+                this.emitValue('');
+            }
+            this.query = '';
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.open)
+                    return this.openMenu();
+                this.activeIndex = Math.min(this.activeIndex + 1, this.visibleItems.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeIndex = Math.max(this.activeIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                if (this.open && this.activeIndex >= 0) {
+                    e.preventDefault();
+                    this.select(this.visibleItems[this.activeIndex]);
+                }
+            }
+            else if (e.key === 'Escape') {
+                this.closeMenu();
+            }
+            else if (e.key === 'Backspace' && this.multiple && !this.query && this.selectedValues.length) {
+                // Backspace on an empty query removes the last selected tag.
+                this.removeValue(this.selectedValues[this.selectedValues.length - 1]);
+            }
+        };
+        // Close when a click lands outside the component. Must be shadow-aware:
+        // this component is nested inside eds-form's shadow root, so a document-level
+        // listener sees the event retargeted to the OUTER host — `host.contains(target)`
+        // would be false even for our own clicks and wrongly close on open. composedPath()
+        // walks through every shadow boundary and contains our host iff the click was ours.
+        this.onDocumentClick = (e) => {
+            if (this.open && !e.composedPath().includes(this.host))
+                this.closeMenu();
+        };
+        this.name = undefined;
+        this.label = undefined;
+        this.placeholder = 'Search…';
+        this.required = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.errorMessage = undefined;
+        this.value = undefined;
+        this.multiple = false;
+        this.options = undefined;
+        this.source = undefined;
+        this.apiBase = '/api/v1';
+        this.searchParam = 'q';
+        this.limit = 50;
+        this.debounceMs = 250;
+        this.maxVisible = 100;
+        this.open = false;
+        this.query = '';
+        this.loading = false;
+        this.fetchError = '';
+        this.items = [];
+        this.total = 0;
+        this.activeIndex = -1;
+        this.selectedLabel = '';
+    }
+    componentWillLoad() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onOptionsChange() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onValueChange() {
+        this.resolveSelectedLabel();
+    }
+    parseInlineOptions() {
+        if (!this.options) {
+            this.inlineOptions = [];
+            return;
+        }
+        if (typeof this.options === 'string') {
+            try {
+                this.inlineOptions = JSON.parse(this.options) || [];
+            }
+            catch (_a) {
+                this.inlineOptions = [];
+            }
+        }
+        else {
+            this.inlineOptions = this.options;
+        }
+        this.cacheLabels(this.inlineOptions);
+    }
+    cacheLabels(opts) {
+        (opts || []).forEach((o) => {
+            if (o && o.value != null)
+                this.labelCache[String(o.value)] = o.label;
+        });
+    }
+    /** The current selection as a value array (works for single + multi). */
+    get selectedValues() {
+        const v = this.value;
+        if (Array.isArray(v))
+            return v.map(String).filter((s) => s !== '');
+        if (typeof v === 'string' && v !== '') {
+            return this.multiple ? v.split(',').filter(Boolean) : [v];
+        }
+        return [];
+    }
+    labelFor(val) {
+        var _a, _b;
+        return (this.labelCache[String(val)] ||
+            ((_a = this.inlineOptions.find((o) => String(o.value) === String(val))) === null || _a === void 0 ? void 0 : _a.label) ||
+            ((_b = this.items.find((o) => String(o.value) === String(val))) === null || _b === void 0 ? void 0 : _b.label) ||
+            String(val));
+    }
+    emitValue(v) {
+        this.edsinput.emit({ value: v });
+        this.edschange.emit({ value: v });
+    }
+    get isRemote() {
+        return !!this.source && this.inlineOptions.length === 0;
+    }
+    resolveSelectedLabel() {
+        if (!this.value) {
+            this.selectedLabel = '';
+            return;
+        }
+        // Inline: resolve label from the known list. Remote: best-effort — show the
+        // value until/unless it appears in a fetched page.
+        const pool = this.inlineOptions.length ? this.inlineOptions : this.items;
+        const found = pool.find((o) => String(o.value) === String(this.value));
+        this.selectedLabel = found ? found.label : String(this.value);
+    }
+    // --- Data --------------------------------------------------------------
+    filterInline(q) {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return this.inlineOptions;
+        return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) ||
+            String(o.value).toLowerCase().includes(needle));
+    }
+    async fetchRemote(q) {
+        this.loading = true;
+        this.fetchError = '';
+        try {
+            const params = new URLSearchParams({ [this.searchParam]: q, limit: String(this.limit) });
+            const url = `${this.apiBase}/datasets/${encodeURIComponent(this.source)}/search?${params}`;
+            const resp = await fetch(url);
+            if (!resp.ok)
+                throw new Error(`Search failed: ${resp.statusText}`);
+            const data = await resp.json();
+            this.items = data.items || [];
+            this.cacheLabels(this.items);
+            this.total = typeof data.total === 'number' ? data.total : this.items.length;
+            this.resolveSelectedLabel();
+        }
+        catch (e) {
+            this.fetchError = e instanceof Error ? e.message : 'Search failed';
+            this.items = [];
+            this.total = 0;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    runSearch(q, immediate = false) {
+        if (this.isRemote) {
+            // Show the loading state synchronously so the debounce window renders
+            // "Searching…" rather than a misleading "No matches" before the fetch.
+            this.loading = true;
+            clearTimeout(this.debounceTimer);
+            if (immediate) {
+                this.fetchRemote(q);
+            }
+            else {
+                this.debounceTimer = setTimeout(() => this.fetchRemote(q), this.debounceMs);
+            }
+        }
+        else {
+            this.items = this.filterInline(q);
+            this.total = this.items.length;
+        }
+    }
+    // --- The capped, render-ready slice ------------------------------------
+    get visibleItems() {
+        return this.items.slice(0, this.maxVisible);
+    }
+    get hiddenCount() {
+        return Math.max(0, this.total - this.visibleItems.length);
+    }
+    // --- Interaction -------------------------------------------------------
+    openMenu() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.activeIndex = -1;
+        // Populate on first open (initial page for remote, full list for inline).
+        // Immediate fetch on open — debounce only applies to typing.
+        if (!this.items.length || this.isRemote)
+            this.runSearch(this.query, true);
+    }
+    closeMenu() {
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    select(opt) {
+        this.labelCache[String(opt.value)] = opt.label;
+        if (this.multiple) {
+            const current = this.selectedValues;
+            const key = String(opt.value);
+            const next = current.includes(key)
+                ? current.filter((v) => v !== key) // toggle off if already chosen
+                : [...current, key];
+            this.value = next;
+            this.query = '';
+            this.emitValue(next);
+            // Keep the menu open so more can be picked; reset the list to all results.
+            this.runSearch('', true);
+            return;
+        }
+        this.value = opt.value;
+        this.selectedLabel = opt.label;
+        this.query = '';
+        this.closeMenu();
+        this.emitValue(opt.value);
+    }
+    removeValue(val, e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        const next = this.selectedValues.filter((v) => v !== String(val));
+        this.value = next;
+        this.emitValue(next);
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.onDocumentClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onDocumentClick, true);
+        clearTimeout(this.debounceTimer);
+    }
+    render() {
+        const selected = this.selectedValues;
+        const hasSelection = selected.length > 0;
+        const inputValue = this.multiple ? this.query : (this.open ? this.query : this.selectedLabel);
+        const placeholder = this.multiple
+            ? (hasSelection ? '' : this.placeholder)
+            : (hasSelection && !this.open ? this.selectedLabel : this.placeholder);
+        return (h("div", { key: 'f5224332aa395be2a9dd8a1312dcd1b631ad2129', class: "eds-ss" }, (this.label || this.hint) && (h("div", { key: 'e28da19abdedb4107a7b7be2a59e6444780f8251', class: "eds-ss__labelrow" }, this.label && (h("eds-input-label", { key: '81933dbc2d370b8ddbbf8f4286c3420e4f140ca7', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (h("p", { key: '1ff5b7a62cc20bb2ce710ca2e06c728d94aef895', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), h("div", { key: '84fbdccc6326707ac854e06d7209dd149d9c26a7', class: "eds-ss__control relative" }, h("div", { key: 'ae99c3d9c706fa6619459d8d6c9baa3df610169e', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
+            selected.map((v) => (h("span", { class: "eds-ss__chip", key: v }, h("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (h("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => { e.preventDefault(); this.removeValue(v, e); } }, "\u00D7"))))), h("input", { key: '18dcd5787c7636c09be7285fb85b77f5cae334c8', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (h("button", { key: 'c927fa49fb58b7abec13f6d436f1d1452f9644c5', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), h("span", { key: 'bff4bf41fb388f849ef9c0928f4aa88e065d718d', class: "eds-ss__chevron", "aria-hidden": "true" }, h("eds-icon-wrapper", { key: '7871955d6fc5626914995d51c1b4b3511b60febe', name: "chevron-right", size: 20 }))), this.open && (h("ul", { key: 'e529fe82576be45a0e99d4a020aa4f721b71686b', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && h("li", { key: 'fe8d73dfa0d6a5cf7e9bea4220511a22489884f8', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && h("li", { key: 'b708b1de4eee8e45287fd23f0bf63327032616d6', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (h("li", { key: '9400ac7a022f38935f05df3705e2a65acb9d4a04', class: "eds-ss__status" }, "No matches")), !this.loading &&
+            !this.fetchError &&
+            this.visibleItems.map((opt, i) => (h("li", { key: opt.value, class: { 'eds-ss__option': true, 'is-active': i === this.activeIndex, 'is-selected': selected.includes(String(opt.value)) }, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => { e.preventDefault(); this.select(opt); } }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (h("li", { key: '8e82d65e9da3755ad10ffaf0fc4a45f5bc365a48', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), h("eds-input-footer", { key: '0564f006a874a3556118ce99441cbfabc230ac57', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage })));
+    }
+    static get is() { return "eds-search-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-search-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-search-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Search\u2026'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value. A single value string in single-select mode, or an array\nof values in multi-select mode. v-model friendly."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow selecting multiple values \u2014 selections render as removable tags."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Option[] | string",
+                    "resolved": "Option[] | string",
+                    "references": {
+                        "Option": {
+                            "location": "global",
+                            "id": "global::Option"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Inline options: an array or a JSON string of [{label, value}]."
+                },
+                "attribute": "options",
+                "reflect": false
+            },
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A vetted registry source key, e.g. \"countries\" / \"currencies\"."
+                },
+                "attribute": "source",
+                "reflect": false
+            },
+            "apiBase": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base path for the datasets API."
+                },
+                "attribute": "api-base",
+                "reflect": false,
+                "defaultValue": "'/api/v1'"
+            },
+            "searchParam": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Query param name the search term is sent as."
+                },
+                "attribute": "search-param",
+                "reflect": false,
+                "defaultValue": "'q'"
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Server page size for remote sources."
+                },
+                "attribute": "limit",
+                "reflect": false,
+                "defaultValue": "50"
+            },
+            "debounceMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce (ms) before a remote search fires."
+                },
+                "attribute": "debounce-ms",
+                "reflect": false,
+                "defaultValue": "250"
+            },
+            "maxVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max rows rendered at once (DOM cap)."
+                },
+                "attribute": "max-visible",
+                "reflect": false,
+                "defaultValue": "100"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "query": {},
+            "loading": {},
+            "fetchError": {},
+            "items": {},
+            "total": {},
+            "activeIndex": {},
+            "selectedLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "edsinput",
+                "name": "edsinput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string | boolean | string[] }",
+                    "resolved": "{ value: string | boolean | string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "edschange",
+                "name": "edschange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string | boolean | string[] }",
+                    "resolved": "{ value: string | boolean | string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}