@dso-toolkit/core 62.17.0 → 62.19.0

package/dist/collection/components/autosuggest/autosuggest.js

@@ -3,459 +3,471 @@ import debounce from "debounce";
 import { v4 } from "uuid";
 import escapeStringRegexp from "escape-string-regexp";
 export class Autosuggest {
-  constructor() {
-    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;
-  }
-  suggestionsWatcher() {
-    this.resetSelectedSuggestion();
-    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
-      this.openSuggestions();
-    }
-    else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
-      this.closeSuggestions();
+    constructor() {
+        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;
     }
-  }
-  onDocumentClick(event) {
-    if ((this.showSuggestions || this.notFound) &&
-      this.listbox &&
-      event.target instanceof Node &&
-      !this.listbox.contains(event.target) &&
-      this.input !== event.target) {
-      this.closeSuggestions();
+    suggestionsWatcher() {
+        this.resetSelectedSuggestion();
+        if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
+            this.openSuggestions();
+        }
+        else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
+            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 [""];
+    onDocumentClick(event) {
+        if ((this.showSuggestions || this.notFound) &&
+            this.listbox &&
+            event.target instanceof Node &&
+            !this.listbox.contains(event.target) &&
+            this.input !== event.target) {
+            this.closeSuggestions();
+        }
     }
-    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;
+    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);
+        });
     }
-    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));
+    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);
     }
-  }
-  selectLastSuggestion() {
-    var _a;
-    if (!this.suggestions) {
-      return;
+    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));
+        });
     }
-    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));
+    selectSuggestion(suggestion) {
+        var _a;
+        this.selectedSuggestion = suggestion;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
     }
-  }
-  selectNextSuggestion() {
-    var _a, _b;
-    if (!this.suggestions) {
-      return;
+    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));
+        }
     }
-    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));
+    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));
+        }
     }
-  }
-  selectPreviousSuggestion() {
-    var _a, _b;
-    if (!this.suggestions) {
-      return;
+    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));
+        }
     }
-    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));
+    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));
+        }
     }
-  }
-  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();
+    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", "");
     }
-    else if (this.showSuggestions && selectSuggestion === "last") {
-      this.selectLastSuggestion();
+    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();
+        }
     }
-  }
-  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);
+    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();
     }
-    else {
-      this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
+    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();
     }
-    this.closeSuggestions();
-  }
-  listboxItemId(suggestion) {
-    if (!this.suggestions) {
-      return "";
+    listboxItemId(suggestion) {
+        if (!this.suggestions) {
+            return "";
+        }
+        return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
     }
-    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))))))))));
-  }
-  static get is() { return "dso-autosuggest"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["autosuggest.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["autosuggest.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "suggestions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Suggestion[] | null",
-          "resolved": "Suggestion[] | null",
-          "references": {
-            "Suggestion": {
-              "location": "import",
-              "path": "./autosuggest.interfaces",
-              "id": "src/components/autosuggest/autosuggest.interfaces.ts::Suggestion"
+    getChunkedExtras(extras) {
+        return extras.reduce((resultArray, extra, index) => {
+            var _a;
+            const chunkIndex = Math.floor(index / 2);
+            if (!resultArray[chunkIndex]) {
+                resultArray[chunkIndex] = [];
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The suggestions for the value of the slotted input element. Optionally a\r\nSuggestion can have a `type` and `item`.\r\n\r\nThe `type` is used to style the suggestion. `item` can be use to reference\r\nthe original object that was used to create the suggestion.\r\n\r\nThe value should be null when no suggestions have been fetched."
-        },
-        "defaultValue": "null"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows progress indicator when fetching results."
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "loadingLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To override progress indicator's default loading label."
-        },
-        "attribute": "loading-label",
-        "reflect": false,
-        "defaultValue": "\"Een moment geduld.\""
-      },
-      "loadingDelayed": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To delay progress indicator showing (in ms)."
-        },
-        "attribute": "loading-delayed",
-        "reflect": false
-      },
-      "notFoundLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To show text when no results are found."
-        },
-        "attribute": "not-found-label",
-        "reflect": false
-      },
-      "suggestOnFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the previous suggestions will be presented when the input gets focus again."
-        },
-        "attribute": "suggest-on-focus",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "showSuggestions": {},
-      "selectedSuggestion": {},
-      "notFound": {},
-      "showLoading": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoSelect",
-        "name": "dsoSelect",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a suggestion is selected.\r\nThe `detail` property of the `CustomEvent` will contain the selected suggestion."
-        },
-        "complexType": {
-          "original": "Suggestion",
-          "resolved": "Suggestion",
-          "references": {
-            "Suggestion": {
-              "location": "import",
-              "path": "./autosuggest.interfaces",
-              "id": "src/components/autosuggest/autosuggest.interfaces.ts::Suggestion"
+            (_a = resultArray[chunkIndex]) === null || _a === void 0 ? void 0 : _a.push(extra);
+            return resultArray;
+        }, []);
+    }
+    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: '88aa1f92e5c8bd707f10b2ded156480431f23f29' }), 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))))))))));
+    }
+    static get is() { return "dso-autosuggest"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["autosuggest.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["autosuggest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "suggestions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Suggestion[] | null",
+                    "resolved": "Suggestion[] | null",
+                    "references": {
+                        "Suggestion": {
+                            "location": "import",
+                            "path": "./autosuggest.interfaces",
+                            "id": "src/components/autosuggest/autosuggest.interfaces.ts::Suggestion"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The suggestions for the value of the slotted input element. Optionally a\r\nSuggestion can have a `type` and `item`.\r\n\r\nThe `type` is used to style the suggestion. `item` can be use to reference\r\nthe original object that was used to create the suggestion.\r\n\r\nThe value should be null when no suggestions have been fetched."
+                },
+                "defaultValue": "null"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows progress indicator when fetching results."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To override progress indicator's default loading label."
+                },
+                "attribute": "loading-label",
+                "reflect": false,
+                "defaultValue": "\"Een moment geduld.\""
+            },
+            "loadingDelayed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To delay progress indicator showing (in ms)."
+                },
+                "attribute": "loading-delayed",
+                "reflect": false
+            },
+            "notFoundLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To show text when no results are found."
+                },
+                "attribute": "not-found-label",
+                "reflect": false
+            },
+            "suggestOnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the previous suggestions will be presented when the input gets focus again."
+                },
+                "attribute": "suggest-on-focus",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        }
-      }, {
-        "method": "dsoChange",
-        "name": "dsoChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "This is emitted debounced for every change for the slotted input type=text element."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "dsoSearch",
-        "name": "dsoSearch",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when enter is pressed.\r\nThe `detail` property of the `CustomEvent` will contain the input text."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "suggestions",
-        "methodName": "suggestionsWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onDocumentClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "showSuggestions": {},
+            "selectedSuggestion": {},
+            "notFound": {},
+            "showLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoSelect",
+                "name": "dsoSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a suggestion is selected.\r\nThe `detail` property of the `CustomEvent` will contain the selected suggestion."
+                },
+                "complexType": {
+                    "original": "Suggestion",
+                    "resolved": "Suggestion",
+                    "references": {
+                        "Suggestion": {
+                            "location": "import",
+                            "path": "./autosuggest.interfaces",
+                            "id": "src/components/autosuggest/autosuggest.interfaces.ts::Suggestion"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoChange",
+                "name": "dsoChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This is emitted debounced for every change for the slotted input type=text element."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsoSearch",
+                "name": "dsoSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter is pressed.\r\nThe `detail` property of the `CustomEvent` will contain the input text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "suggestions",
+                "methodName": "suggestionsWatcher"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=autosuggest.js.map