@dso-toolkit/core 47.0.1 → 48.0.0

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

@@ -95,42 +95,45 @@ export class Autosuggest {
     }
   }
   connectedCallback() {
-    const input = this.host.querySelector('input[type="text"]');
-    if (!(input instanceof HTMLInputElement)) {
-      throw new ReferenceError("Mandatory text input not found");
-    }
-    this.input = input;
-    if (input.id) {
-      this.inputId = input.id;
-    }
-    else {
-      input.id = this.inputId;
-    }
-    if (!this.input.labels || this.input.labels.length < 1) {
-      throw new ReferenceError("Mandatory label for text input not found");
-    }
-    const label = this.input.labels[0];
-    if (label.id) {
-      this.labelId = label.id;
-    }
-    else {
-      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);
+    setTimeout(() => {
+      const input = this.host.querySelector('input[type="text"]');
+      if (!(input instanceof HTMLInputElement)) {
+        throw new ReferenceError("Mandatory text input not found");
+      }
+      this.input = input;
+      if (input.id) {
+        this.inputId = input.id;
+      }
+      else {
+        input.id = this.inputId;
+      }
+      if (!this.input.labels || this.input.labels.length < 1) {
+        throw new ReferenceError("Mandatory label for text input not found");
+      }
+      const label = this.input.labels[0];
+      if (label.id) {
+        this.labelId = label.id;
+      }
+      else {
+        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() {
-    this.input.removeEventListener("input", this.onInput);
-    this.input.removeEventListener("keydown", this.onKeyDown);
-    this.input.removeEventListener("focusin", this.onFocusIn);
+    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) {
@@ -151,60 +154,64 @@ export class Autosuggest {
     });
   }
   selectSuggestion(suggestion) {
+    var _a;
     this.selectedSuggestion = suggestion;
-    this.input.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
   }
   selectFirstSuggestion() {
+    var _a;
     if (!this.suggestions) {
       return;
     }
     this.selectedSuggestion = this.suggestions[0];
     if (this.selectedSuggestion) {
-      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.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) {
-      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectNextSuggestion() {
-    var _a;
+    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) {
-      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+      (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectPreviousSuggestion() {
-    var _a;
+    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) {
-      this.input.setAttribute("aria-activedescendant", this.listboxItemId(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;
-    this.input.setAttribute("aria-activedescendant", "");
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
   }
   openSuggestions(selectSuggestion) {
-    var _a, _b, _c;
+    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;
-    this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
+    (_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();
     }
@@ -213,17 +220,19 @@ export class Autosuggest {
     }
   }
   closeSuggestions() {
+    var _a;
     this.showSuggestions = false;
     this.notFound = false;
-    this.input.setAttribute("aria-expanded", "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);
     }
     else {
-      this.dsoSearch.emit(this.input.value);
+      this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
     }
     this.closeSuggestions();
   }
@@ -234,7 +243,8 @@ export class Autosuggest {
     return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
   }
   render() {
-    const terms = this.input.value.split(" ").filter((t) => t);
+    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", 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"; }
@@ -259,7 +269,8 @@ export class Autosuggest {
           "resolved": "Suggestion[] | null",
           "references": {
             "Suggestion": {
-              "location": "local"
+              "location": "import",
+              "path": "./autosuggest.interfaces"
             }
           }
         },
@@ -385,7 +396,8 @@ export class Autosuggest {
           "resolved": "Suggestion",
           "references": {
             "Suggestion": {
-              "location": "local"
+              "location": "import",
+              "path": "./autosuggest.interfaces"
             }
           }
         }

package/dist/collection/components/banner/banner.js

@@ -36,7 +36,7 @@ export class Banner {
           "text": ""
         },
         "attribute": "status",
-        "reflect": false
+        "reflect": true
       }
     };
   }

package/dist/collection/components/card-container/card-container.js

@@ -40,7 +40,7 @@ export class CardContainer {
           "text": ""
         },
         "attribute": "mode",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"list\""
       }
     };

package/dist/collection/components/date-picker/date-picker.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/date-picker/date-picker.js

@@ -268,7 +268,7 @@ export class DsoDatePicker {
     this.name = "date";
     this.identifier = undefined;
     this.disabled = false;
-    this.role = undefined;
+    this.role = null;
     this.direction = "right";
     this.required = false;
     this.dsoAutofocus = false;
@@ -388,6 +388,7 @@ export class DsoDatePicker {
    * Always the last one in the class.
    */
   render() {
+    var _a;
     const valueAsDate = parseDutchDate(this.value);
     const formattedDate = valueAsDate && printDutchDate(valueAsDate);
     const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
@@ -405,7 +406,7 @@ export class DsoDatePicker {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
+    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
@@ -482,8 +483,8 @@ export class DsoDatePicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
+          "original": "string | null",
+          "resolved": "null | string",
           "references": {}
         },
         "required": false,
@@ -493,7 +494,8 @@ export class DsoDatePicker {
           "text": "Defines a specific role attribute for the date picker input."
         },
         "attribute": "role",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "null"
       },
       "direction": {
         "type": "string",
@@ -503,7 +505,8 @@ export class DsoDatePicker {
           "resolved": "\"left\" | \"right\"",
           "references": {
             "DsoDatePickerDirection": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         },
@@ -631,7 +634,8 @@ export class DsoDatePicker {
           "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
           "references": {
             "DsoDatePickerChangeEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         }
@@ -650,7 +654,8 @@ export class DsoDatePicker {
           "resolved": "{ component: \"dso-date-picker\"; }",
           "references": {
             "DsoDatePickerFocusEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         }
@@ -669,7 +674,8 @@ export class DsoDatePicker {
           "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
           "references": {
             "DsoDatePickerKeyboardEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         }
@@ -688,7 +694,8 @@ export class DsoDatePicker {
           "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
           "references": {
             "DsoDatePickerKeyboardEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         }
@@ -707,7 +714,8 @@ export class DsoDatePicker {
           "resolved": "{ component: \"dso-date-picker\"; }",
           "references": {
             "DsoDatePickerFocusEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./date-picker.interfaces"
             }
           }
         }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -41,7 +41,7 @@ export class DropdownMenu {
     this.checkable = false;
   }
   get button() {
-    const button = this.host.querySelectorAll('button[slot="toggle"]')[0];
+    const button = this.host.querySelector('button[slot="toggle"]');
     if (!(button instanceof HTMLButtonElement)) {
       throw new ReferenceError("Mandatory toggle button not found");
     }
@@ -50,7 +50,7 @@ export class DropdownMenu {
   get tabbables() {
     return tabbable(this.host).filter((e) => e !== this.button);
   }
-  connectedCallback() {
+  componentDidLoad() {
     this.button.setAttribute("aria-haspopup", "menu");
     this.button.setAttribute("aria-expanded", "false");
     if (!this.button.id) {

package/dist/collection/components/header/header.js

@@ -280,14 +280,10 @@ export class Header {
           "text": "Emitted when something in the header is selected.\r\n\r\n`event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`"
         },
         "complexType": {
-          "original": "HeaderClickEvent | HeaderClickMenuItemEvent",
+          "original": "HeaderEvent",
           "resolved": "HeaderClickEvent | HeaderClickMenuItemEvent",
           "references": {
-            "HeaderClickEvent": {
-              "location": "import",
-              "path": "./header.interfaces"
-            },
-            "HeaderClickMenuItemEvent": {
+            "HeaderEvent": {
               "location": "import",
               "path": "./header.interfaces"
             }

package/dist/collection/components/info-button/info-button.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/info-button/info-button.js

@@ -107,7 +107,8 @@ export class InfoButton {
           "resolved": "InfoButtonToggleEvent",
           "references": {
             "InfoButtonToggleEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./info-button.interfaces"
             }
           }
         }

package/dist/collection/components/label/label.js

@@ -84,13 +84,13 @@ export class Label {
     const status = this.status && Label.statusMap.get(this.status);
     return (h(Host, { "aria-roledescription": this.truncate && this.truncatedContent
         ? "Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus."
-        : undefined }, h("span", { id: "toggle-anchor", class: clsx("dso-label", {
+        : undefined }, h("span", { "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
         [`dso-label-${this.status}`]: this.status,
         "dso-compact": this.compact && !this.removable,
         "dso-hover": this.removeHover || this.removeFocus,
       }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }