@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,34 +1,9 @@
-import { Component, Element, h, Listen, Prop, State, Fragment, Event, Watch, } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import debounce from "debounce";
 import { v4 } from "uuid";
 import escapeStringRegexp from "escape-string-regexp";
 export class Autosuggest {
   constructor() {
-    /**
-     * The suggestions for the value of the slotted input element. Optionally a
-     * Suggestion can have a `type` and `item`.
-     *
-     * The `type` is used to style the suggestion. `item` can be use to reference
-     * the original object that was used to create the suggestion.
-     *
-     * The value should be null when no suggestions have been fetched.
-     */
-    this.suggestions = null;
-    /**
-     * Shows progress indicator when fetching results.
-     */
-    this.loading = false;
-    /**
-     * To override progress indicator's default loading label.
-     */
-    this.loadingLabel = "Een moment geduld.";
-    /**
-     * Whether the previous suggestions will be presented when the input gets focus again.
-     */
-    this.suggestOnFocus = false;
-    this.showSuggestions = false;
-    this.notFound = false;
-    this.showLoading = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
@@ -41,14 +16,14 @@ export class Autosuggest {
         this.showLoading = true;
       }
     }, this.loadingDelayed);
-    this.inputValue = '';
+    this.inputValue = "";
     this.onInput = (event) => {
       if (!(event.target instanceof HTMLInputElement)) {
         throw new Error("event.target is not instanceof HTMLInputElement");
       }
       this.showLoading = !this.loadingDelayed;
       this.inputValue = event.target.value;
-      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
+      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
     };
     this.onFocusIn = () => {
       if (this.suggestOnFocus) {
@@ -60,29 +35,29 @@ export class Autosuggest {
         return;
       }
       switch (event.key) {
-        case 'ArrowDown':
+        case "ArrowDown":
           if (!this.showSuggestions) {
-            this.openSuggestions('first');
+            this.openSuggestions("first");
           }
           else {
             this.selectNextSuggestion();
           }
           break;
-        case 'ArrowUp':
+        case "ArrowUp":
           if (!this.showSuggestions) {
-            this.openSuggestions('last');
+            this.openSuggestions("last");
           }
           else {
             this.selectPreviousSuggestion();
           }
           break;
-        case 'Tab':
+        case "Tab":
           this.closeSuggestions();
           return;
-        case 'Escape':
+        case "Escape":
           this.closeSuggestions();
           break;
-        case 'Enter':
+        case "Enter":
           this.pickSelectedValue();
           break;
         default:
@@ -90,6 +65,16 @@ export class Autosuggest {
       }
       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();
@@ -105,7 +90,7 @@ export class Autosuggest {
       this.listbox &&
       event.target instanceof Node &&
       !this.listbox.contains(event.target) &&
-      this.input != event.target) {
+      this.input !== event.target) {
       this.closeSuggestions();
     }
   }
@@ -149,12 +134,12 @@ export class Autosuggest {
   }
   markTerms(suggestionValue, terms) {
     if (!suggestionValue || !terms || terms.length === 0) {
-      return [''];
+      return [""];
     }
-    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, 'gi');
+    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
     return suggestionValue.split(termRegex).map((valuePart) => {
       if (!valuePart) {
-        return '';
+        return "";
       }
       if (termRegex.test(valuePart)) {
         return h("mark", null, valuePart);
@@ -175,7 +160,7 @@ export class Autosuggest {
     }
     this.selectedSuggestion = this.suggestions[0];
     if (this.selectedSuggestion) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectLastSuggestion() {
@@ -184,7 +169,7 @@ export class Autosuggest {
     }
     this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
     if (this.selectedSuggestion) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectNextSuggestion() {
@@ -195,7 +180,7 @@ export class Autosuggest {
     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) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectPreviousSuggestion() {
@@ -206,24 +191,24 @@ export class Autosuggest {
     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) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   resetSelectedSuggestion() {
     this.showLoading = !this.loadingDelayed;
     this.notFound = false;
     this.selectedSuggestion = undefined;
-    this.input.setAttribute('aria-activedescendant', '');
+    this.input.setAttribute("aria-activedescendant", "");
   }
   openSuggestions(selectSuggestion) {
     var _a, _b, _c;
     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;
     this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
-    if (this.showSuggestions && selectSuggestion === 'first') {
+    if (this.showSuggestions && selectSuggestion === "first") {
       this.selectFirstSuggestion();
     }
-    else if (this.showSuggestions && selectSuggestion === 'last') {
+    else if (this.showSuggestions && selectSuggestion === "last") {
       this.selectLastSuggestion();
     }
   }
@@ -244,214 +229,212 @@ export class Autosuggest {
   }
   listboxItemId(suggestion) {
     if (!this.suggestions) {
-      return '';
+      return "";
     }
     return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
   }
   render() {
-    const terms = this.input.value.split(' ').filter(t => t);
-    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", 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)))
-            : undefined)));
+    const terms = this.input.value.split(" ").filter((t) => t);
+    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", 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))))) : undefined))));
   }
   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": "local"
+  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": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion.\n\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": "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Shows progress indicator when fetching results."
+      "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"
       },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loadingLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "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.\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "To override progress indicator's default loading label."
+      "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
       },
-      "attribute": "loading-label",
-      "reflect": false,
-      "defaultValue": "\"Een moment geduld.\""
-    },
-    "loadingDelayed": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
+      "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
       },
-      "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.\nThe `detail` property of the `CustomEvent`\u00A0will contain the selected suggestion."
-      },
-      "complexType": {
-        "original": "Suggestion",
-        "resolved": "Suggestion",
-        "references": {
-          "Suggestion": {
-            "location": "local"
+      "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": "local"
+            }
           }
         }
-      }
-    }, {
-      "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.\nThe `detail` property of the `CustomEvent`\u00A0will contain the input text."
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "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 watchers() {
+    return [{
+        "propName": "suggestions",
+        "methodName": "suggestionsWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }