@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/esm/dso-autosuggest.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-528d5213.js';
-import { d as debounce_1 } from './index-aaea0a65.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-2e1b7388.js';
+import { d as debounce } from './index-baba34a8.js';
 import { v as v4 } from './v4-23648a96.js';
 
 function escapeStringRegexp(string) {
@@ -14,269 +14,282 @@ function escapeStringRegexp(string) {
 		.replace(/-/g, '\\x2d');
 }
 
-const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";
+const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding:4px 16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}";
+const DsoAutosuggestStyle0 = autosuggestCss;
 
 const Autosuggest = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dsoSelect = createEvent(this, "dsoSelect", 7);
-    this.dsoChange = createEvent(this, "dsoChange", 7);
-    this.dsoSearch = createEvent(this, "dsoSearch", 7);
-    this.listboxId = v4();
-    this.inputId = v4();
-    this.labelId = v4();
-    this.debouncedEmitValue = debounce_1((value) => {
-      this.dsoChange.emit(value);
-      this.debouncedShowLoading();
-    }, 200);
-    this.debouncedShowLoading = debounce_1(() => {
-      if (this.inputValue) {
-        this.showLoading = true;
-      }
-    }, this.loadingDelayed);
-    this.inputValue = "";
-    this.onInput = (event) => {
-      if (!(event.target instanceof HTMLInputElement)) {
-        return;
-        // throw new Error("event.target is not instanceof HTMLInputElement"); #2293
-      }
-      this.showLoading = !this.loadingDelayed;
-      this.inputValue = event.target.value;
-      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
-    };
-    this.onFocusIn = () => {
-      if (this.suggestOnFocus) {
-        this.openSuggestions();
-      }
-    };
-    this.onKeyDown = (event) => {
-      if (event.defaultPrevented || this.loading) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-          if (!this.showSuggestions) {
-            this.openSuggestions("first");
-          }
-          else {
-            this.selectNextSuggestion();
-          }
-          break;
-        case "ArrowUp":
-          if (!this.showSuggestions) {
-            this.openSuggestions("last");
-          }
-          else {
-            this.selectPreviousSuggestion();
-          }
-          break;
-        case "Tab":
-          this.closeSuggestions();
-          return;
-        case "Escape":
-          this.closeSuggestions();
-          break;
-        case "Enter":
-          this.pickSelectedValue();
-          break;
-        default:
-          return;
-      }
-      event.preventDefault();
-    };
-    this.suggestions = null;
-    this.loading = false;
-    this.loadingLabel = "Een moment geduld.";
-    this.loadingDelayed = undefined;
-    this.notFoundLabel = undefined;
-    this.suggestOnFocus = false;
-    this.showSuggestions = false;
-    this.selectedSuggestion = undefined;
-    this.notFound = false;
-    this.showLoading = false;
-  }
-  suggestionsWatcher() {
-    this.resetSelectedSuggestion();
-    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
-      this.openSuggestions();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoSelect = createEvent(this, "dsoSelect", 7);
+        this.dsoChange = createEvent(this, "dsoChange", 7);
+        this.dsoSearch = createEvent(this, "dsoSearch", 7);
+        this.listboxId = v4();
+        this.inputId = v4();
+        this.labelId = v4();
+        this.debouncedEmitValue = debounce((value) => {
+            this.dsoChange.emit(value);
+            this.debouncedShowLoading();
+        }, 200);
+        this.debouncedShowLoading = debounce(() => {
+            if (this.inputValue) {
+                this.showLoading = true;
+            }
+        }, this.loadingDelayed);
+        this.inputValue = "";
+        this.onInput = (event) => {
+            if (!(event.target instanceof HTMLInputElement)) {
+                return;
+                // throw new Error("event.target is not instanceof HTMLInputElement"); #2293
+            }
+            this.showLoading = !this.loadingDelayed;
+            this.inputValue = event.target.value;
+            this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
+        };
+        this.onFocusIn = () => {
+            if (this.suggestOnFocus) {
+                this.openSuggestions();
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (event.defaultPrevented || this.loading) {
+                return;
+            }
+            switch (event.key) {
+                case "ArrowDown":
+                    if (!this.showSuggestions) {
+                        this.openSuggestions("first");
+                    }
+                    else {
+                        this.selectNextSuggestion();
+                    }
+                    break;
+                case "ArrowUp":
+                    if (!this.showSuggestions) {
+                        this.openSuggestions("last");
+                    }
+                    else {
+                        this.selectPreviousSuggestion();
+                    }
+                    break;
+                case "Tab":
+                    this.closeSuggestions();
+                    return;
+                case "Escape":
+                    this.closeSuggestions();
+                    break;
+                case "Enter":
+                    this.pickSelectedValue();
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+        };
+        this.suggestions = null;
+        this.loading = false;
+        this.loadingLabel = "Een moment geduld.";
+        this.loadingDelayed = undefined;
+        this.notFoundLabel = undefined;
+        this.suggestOnFocus = false;
+        this.showSuggestions = false;
+        this.selectedSuggestion = undefined;
+        this.notFound = false;
+        this.showLoading = false;
     }
-    else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
-      this.closeSuggestions();
+    suggestionsWatcher() {
+        this.resetSelectedSuggestion();
+        if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
+            this.openSuggestions();
+        }
+        else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
+            this.closeSuggestions();
+        }
     }
-  }
-  onDocumentClick(event) {
-    if ((this.showSuggestions || this.notFound) &&
-      this.listbox &&
-      event.target instanceof Node &&
-      !this.listbox.contains(event.target) &&
-      this.input !== event.target) {
-      this.closeSuggestions();
+    onDocumentClick(event) {
+        if ((this.showSuggestions || this.notFound) &&
+            this.listbox &&
+            event.target instanceof Node &&
+            !this.listbox.contains(event.target) &&
+            this.input !== event.target) {
+            this.closeSuggestions();
+        }
     }
-  }
-  connectedCallback() {
-    setTimeout(() => {
-      const input = this.host.querySelector('input[type="text"]');
-      if (!(input instanceof HTMLInputElement)) {
-        return;
-        // throw new ReferenceError("Mandatory text input not found"); #2293
-      }
-      this.input = input;
-      if (input.id) {
-        this.inputId = input.id;
-      }
-      else {
-        input.id = this.inputId;
-      }
-      if (!this.input.labels || this.input.labels.length < 1) {
-        return;
-        // throw new ReferenceError("Mandatory label for text input not found"); #2293
-      }
-      const label = this.input.labels[0];
-      if (label === null || label === void 0 ? void 0 : label.id) {
-        this.labelId = label.id;
-      }
-      else if (label) {
-        label.id = this.labelId;
-      }
-      this.input.setAttribute("role", "combobox");
-      this.input.setAttribute("aria-haspopup", "listbox");
-      this.input.setAttribute("aria-controls", this.listboxId);
-      this.input.setAttribute("aria-expanded", "false");
-      this.input.setAttribute("autocomplete", "off");
-      this.input.setAttribute("aria-autocomplete", "list");
-      this.input.setAttribute("aria-activedescendant", "");
-      this.input.addEventListener("input", this.onInput);
-      this.input.addEventListener("keydown", this.onKeyDown);
-      this.input.addEventListener("focusin", this.onFocusIn);
-    });
-  }
-  disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput);
-    (_b = this.input) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.onKeyDown);
-    (_c = this.input) === null || _c === void 0 ? void 0 : _c.removeEventListener("focusin", this.onFocusIn);
-  }
-  markTerms(suggestionValue, terms) {
-    if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {
-      return [""];
+    connectedCallback() {
+        setTimeout(() => {
+            const input = this.host.querySelector('input[type="text"]');
+            if (!(input instanceof HTMLInputElement)) {
+                return;
+                // throw new ReferenceError("Mandatory text input not found"); #2293
+            }
+            this.input = input;
+            if (input.id) {
+                this.inputId = input.id;
+            }
+            else {
+                input.id = this.inputId;
+            }
+            if (!this.input.labels || this.input.labels.length < 1) {
+                return;
+                // throw new ReferenceError("Mandatory label for text input not found"); #2293
+            }
+            const label = this.input.labels[0];
+            if (label === null || label === void 0 ? void 0 : label.id) {
+                this.labelId = label.id;
+            }
+            else if (label) {
+                label.id = this.labelId;
+            }
+            this.input.setAttribute("role", "combobox");
+            this.input.setAttribute("aria-haspopup", "listbox");
+            this.input.setAttribute("aria-controls", this.listboxId);
+            this.input.setAttribute("aria-expanded", "false");
+            this.input.setAttribute("autocomplete", "off");
+            this.input.setAttribute("aria-autocomplete", "list");
+            this.input.setAttribute("aria-activedescendant", "");
+            this.input.addEventListener("input", this.onInput);
+            this.input.addEventListener("keydown", this.onKeyDown);
+            this.input.addEventListener("focusin", this.onFocusIn);
+        });
     }
-    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
-    return suggestionValue.split(termRegex).map((valuePart) => {
-      if (!valuePart) {
-        return "";
-      }
-      if (termRegex.test(valuePart)) {
-        return h("mark", null, valuePart);
-      }
-      if (terms.length === 1) {
-        return h("span", null, valuePart);
-      }
-      return this.markTerms(valuePart, terms.slice(1));
-    });
-  }
-  selectSuggestion(suggestion) {
-    var _a;
-    this.selectedSuggestion = suggestion;
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
-  }
-  selectFirstSuggestion() {
-    var _a;
-    if (!this.suggestions) {
-      return;
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput);
+        (_b = this.input) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.onKeyDown);
+        (_c = this.input) === null || _c === void 0 ? void 0 : _c.removeEventListener("focusin", this.onFocusIn);
     }
-    this.selectedSuggestion = this.suggestions[0];
-    if (this.selectedSuggestion) {
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    markTerms(suggestionValue, terms) {
+        if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {
+            return [""];
+        }
+        const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
+        return suggestionValue.split(termRegex).map((valuePart) => {
+            if (!valuePart) {
+                return "";
+            }
+            if (termRegex.test(valuePart)) {
+                return h("mark", null, valuePart);
+            }
+            if (terms.length === 1) {
+                return h("span", null, valuePart);
+            }
+            return this.markTerms(valuePart, terms.slice(1));
+        });
     }
-  }
-  selectLastSuggestion() {
-    var _a;
-    if (!this.suggestions) {
-      return;
+    selectSuggestion(suggestion) {
+        var _a;
+        this.selectedSuggestion = suggestion;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
     }
-    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
-    if (this.selectedSuggestion) {
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    selectFirstSuggestion() {
+        var _a;
+        if (!this.suggestions) {
+            return;
+        }
+        this.selectedSuggestion = this.suggestions[0];
+        if (this.selectedSuggestion) {
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+        }
     }
-  }
-  selectNextSuggestion() {
-    var _a, _b;
-    if (!this.suggestions) {
-      return;
+    selectLastSuggestion() {
+        var _a;
+        if (!this.suggestions) {
+            return;
+        }
+        this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+        if (this.selectedSuggestion) {
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+        }
     }
-    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
-    this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
-    if (this.selectedSuggestion) {
-      (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    selectNextSuggestion() {
+        var _a, _b;
+        if (!this.suggestions) {
+            return;
+        }
+        const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
+        this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
+        if (this.selectedSuggestion) {
+            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+        }
     }
-  }
-  selectPreviousSuggestion() {
-    var _a, _b;
-    if (!this.suggestions) {
-      return;
+    selectPreviousSuggestion() {
+        var _a, _b;
+        if (!this.suggestions) {
+            return;
+        }
+        const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
+        this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+        if (this.selectedSuggestion) {
+            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+        }
     }
-    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
-    this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
-    if (this.selectedSuggestion) {
-      (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    resetSelectedSuggestion() {
+        var _a;
+        this.showLoading = !this.loadingDelayed;
+        this.notFound = false;
+        this.selectedSuggestion = undefined;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
     }
-  }
-  resetSelectedSuggestion() {
-    var _a;
-    this.showLoading = !this.loadingDelayed;
-    this.notFound = false;
-    this.selectedSuggestion = undefined;
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
-  }
-  openSuggestions(selectSuggestion) {
-    var _a, _b, _c, _d;
-    this.showSuggestions = (_a = (this.suggestions && this.suggestions.length > 0)) !== null && _a !== void 0 ? _a : false;
-    this.notFound = (_c = ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) === 0) !== null && _c !== void 0 ? _c : false;
-    (_d = this.input) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
-    if (this.showSuggestions && selectSuggestion === "first") {
-      this.selectFirstSuggestion();
+    openSuggestions(selectSuggestion) {
+        var _a, _b, _c, _d;
+        this.showSuggestions = (_a = (this.suggestions && this.suggestions.length > 0)) !== null && _a !== void 0 ? _a : false;
+        this.notFound = (_c = ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) === 0) !== null && _c !== void 0 ? _c : false;
+        (_d = this.input) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
+        if (this.showSuggestions && selectSuggestion === "first") {
+            this.selectFirstSuggestion();
+        }
+        else if (this.showSuggestions && selectSuggestion === "last") {
+            this.selectLastSuggestion();
+        }
     }
-    else if (this.showSuggestions && selectSuggestion === "last") {
-      this.selectLastSuggestion();
+    closeSuggestions() {
+        var _a;
+        this.showSuggestions = false;
+        this.notFound = false;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
+        this.selectFirstSuggestion();
     }
-  }
-  closeSuggestions() {
-    var _a;
-    this.showSuggestions = false;
-    this.notFound = false;
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
-    this.selectFirstSuggestion();
-  }
-  pickSelectedValue() {
-    var _a;
-    if (this.selectedSuggestion && this.showSuggestions) {
-      this.dsoSelect.emit(this.selectedSuggestion);
+    pickSelectedValue() {
+        var _a;
+        if (this.selectedSuggestion && this.showSuggestions) {
+            this.dsoSelect.emit(this.selectedSuggestion);
+        }
+        else {
+            this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
+        }
+        this.closeSuggestions();
     }
-    else {
-      this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
+    listboxItemId(suggestion) {
+        if (!this.suggestions) {
+            return "";
+        }
+        return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
     }
-    this.closeSuggestions();
-  }
-  listboxItemId(suggestion) {
-    if (!this.suggestions) {
-      return "";
+    getChunkedExtras(extras) {
+        return extras.reduce((resultArray, extra, index) => {
+            var _a;
+            const chunkIndex = Math.floor(index / 2);
+            if (!resultArray[chunkIndex]) {
+                resultArray[chunkIndex] = [];
+            }
+            (_a = resultArray[chunkIndex]) === null || _a === void 0 ? void 0 : _a.push(extra);
+            return resultArray;
+        }, []);
     }
-    return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
-  }
-  render() {
-    var _a, _b;
-    const terms = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [];
-    return (h(Fragment, null, h("slot", null), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
-      this.suggestions &&
-      this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type ? h("span", { class: "type" }, suggestion.type) : undefined)))) ||
-      (this.notFound && (h("li", null, h("span", { class: "value" }, !this.notFoundLabel ? (this.markTerms(`${this.inputValue} is niet gevonden.`, terms)) : (h("span", null, this.notFoundLabel))))))))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "suggestions": ["suggestionsWatcher"]
-  }; }
+    render() {
+        var _a, _b;
+        const terms = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [];
+        return (h(Fragment, null, h("slot", { key: '09b8007a9093730c9198eb3298b7c653138c2647' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
+            this.suggestions &&
+            this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type ? h("span", { class: "type" }, this.markTerms(suggestion.type, terms)) : undefined), suggestion.extras &&
+                this.getChunkedExtras(suggestion.extras).map((chunk) => (h("div", { class: "suggestion-row" }, chunk.map((c) => (h("span", { class: "extra" }, this.markTerms(c, terms))))))))))) ||
+            (this.notFound && (h("li", null, h("span", { class: "value" }, !this.notFoundLabel ? (this.markTerms(`${this.inputValue} is niet gevonden.`, terms)) : (h("span", null, this.notFoundLabel))))))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "suggestions": ["suggestionsWatcher"]
+    }; }
 };
-Autosuggest.style = autosuggestCss;
+Autosuggest.style = DsoAutosuggestStyle0;
 
 export { Autosuggest as dso_autosuggest };