@dso-toolkit/core 29.0.1 → 31.1.0

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

@@ -1,86 +1,61 @@
-import { Component, Element, h, Listen, Prop, State, Fragment, Event, } from "@stencil/core";
+import { Component, Element, h, Listen, Prop, State, Fragment, Event, Watch, } 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
+     */
+    this.suggestions = [];
     /**
      * Whether the previous suggestions will be presented when the input gets focus again.
      */
     this.suggestOnFocus = false;
-    this.suggestions = [];
-    this.selectedIndex = -1;
-    this.terms = [];
     this.showSuggestions = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
-    this.debouncedFetchSuggestions = debounce((terms) => (this.fetchSuggestions ? this.fetchSuggestions(terms.join(" ")) : Promise.resolve([]))
-      .then((result) => {
-      this.suggestions = result.map((suggestion, index) => ({
-        value: suggestion.value,
-        type: suggestion.type,
-        selected: false,
-        id: `${index}-${this.inputId}`,
-      }));
-      this.terms = terms;
-      this.openSuggestions();
-    })
-      .catch(() => {
-      this.closeSuggestions();
-      this.suggestions = [];
-    }), 200);
+    this.debouncedEmitValue = debounce((value) => this.changeEmitter.emit(value), 200);
     this.onInput = (event) => {
-      var _a;
       if (!(event.target instanceof HTMLInputElement)) {
-        throw new Error("event.target not a instance of HTMLInputElement");
+        throw new Error("event.target is not instanceof HTMLInputElement");
       }
-      this.debouncedFetchSuggestions((_a = `${event.target.value}`.match(/(\S+)/g)) !== null && _a !== void 0 ? _a : []);
+      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
     };
     this.onFocusIn = () => {
       if (this.suggestOnFocus) {
         this.openSuggestions();
       }
     };
-    this.onMouseEnterOption = (event) => {
-      if (event.target instanceof HTMLElement) {
-        const id = event.target.id;
-        this.setSelectedSuggestion(this.suggestions.findIndex((s) => s.id == id));
-      }
-    };
-    this.onMouseLeaveOption = () => {
-      this.setSelectedSuggestion(-1);
-    };
-    this.onClickOption = () => {
-      this.pickSelectedValue();
-    };
     this.onKeyDown = (event) => {
       if (event.defaultPrevented) {
         return;
       }
       switch (event.key) {
-        case "ArrowDown":
+        case 'ArrowDown':
           if (!this.showSuggestions) {
-            this.openSuggestions();
+            this.openSuggestions('first');
+          }
+          else {
+            this.selectNextSuggestion();
           }
-          this.setSelectedSuggestion(this.selectedIndex >= this.suggestions.length - 1
-            ? 0
-            : this.selectedIndex + 1);
           break;
-        case "ArrowUp":
+        case 'ArrowUp':
           if (!this.showSuggestions) {
-            this.openSuggestions();
+            this.openSuggestions('last');
+          }
+          else {
+            this.selectPreviousSuggestion();
           }
-          this.setSelectedSuggestion(this.selectedIndex <= 0
-            ? this.suggestions.length - 1
-            : this.selectedIndex - 1);
           break;
-        case "Tab":
+        case 'Tab':
           this.closeSuggestions();
           return;
-        case "Escape":
+        case 'Escape':
           this.closeSuggestions();
           break;
-        case "Enter":
+        case 'Enter':
           this.pickSelectedValue();
           break;
         default:
@@ -89,6 +64,15 @@ export class Autosuggest {
       event.preventDefault();
     };
   }
+  suggestionsWatcher() {
+    this.resetSelectedSuggestion();
+    if (!this.showSuggestions && this.suggestions.length > 0) {
+      this.openSuggestions();
+    }
+    else if (this.showSuggestions && this.suggestions.length === 0) {
+      this.closeSuggestions();
+    }
+  }
   onDocumentClick(event) {
     if (this.showSuggestions &&
       this.listbox &&
@@ -99,7 +83,7 @@ export class Autosuggest {
     }
   }
   connectedCallback() {
-    const input = this.host.querySelectorAll('input[type="text"]')[0];
+    const input = this.host.querySelector('input[type="text"]');
     if (!(input instanceof HTMLInputElement)) {
       throw new ReferenceError("Mandatory text input not found");
     }
@@ -137,62 +121,93 @@ export class Autosuggest {
     this.input.removeEventListener("focusin", this.onFocusIn);
   }
   markTerms(suggestionValue, terms) {
-    if (!suggestionValue || !terms || terms.length == 0) {
-      return [""];
+    if (!suggestionValue || !terms || terms.length === 0) {
+      return [''];
     }
-    const termRegex = new RegExp(`(${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);
       }
-      if (terms.length == 1) {
+      if (terms.length === 1) {
         return h("span", null, valuePart);
       }
       return this.markTerms(valuePart, terms.slice(1));
     });
   }
-  setSelectedSuggestion(index) {
-    this.suggestions.forEach((suggestion) => (suggestion.selected = false));
-    if (index < 0 || index >= this.suggestions.length) {
-      this.selectedIndex = -1;
-      this.input.setAttribute("aria-activedescendant", "");
+  selectSuggestion(suggestion) {
+    this.selectedSuggestion = suggestion;
+    this.input.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
+  }
+  selectFirstSuggestion() {
+    this.selectedSuggestion = this.suggestions[0];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
     }
-    else {
-      this.selectedIndex = index;
-      this.suggestions[index].selected = true;
-      this.input.setAttribute("aria-activedescendant", this.suggestions[index].id);
+  }
+  selectLastSuggestion() {
+    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  selectNextSuggestion() {
+    var _a;
+    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));
+    }
+  }
+  selectPreviousSuggestion() {
+    var _a;
+    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.suggestions = [...this.suggestions];
   }
-  openSuggestions() {
+  resetSelectedSuggestion() {
+    this.selectedSuggestion = undefined;
+    this.input.setAttribute('aria-activedescendant', '');
+  }
+  openSuggestions(selectSuggestion) {
     this.showSuggestions = this.suggestions.length > 0;
-    this.input.setAttribute("aria-expanded", `${this.showSuggestions}`);
-    this.setSelectedSuggestion(-1);
+    this.input.setAttribute("aria-expanded", this.showSuggestions.toString());
+    if (selectSuggestion === 'first') {
+      this.selectFirstSuggestion();
+    }
+    else if (selectSuggestion === 'last') {
+      this.selectLastSuggestion();
+    }
   }
   closeSuggestions() {
     this.showSuggestions = false;
     this.input.setAttribute("aria-expanded", "false");
-    this.setSelectedSuggestion(-1);
+    this.selectFirstSuggestion();
   }
   pickSelectedValue() {
-    var _a;
-    if (this.selectedIndex >= 0) {
-      this.input.value = this.suggestions[this.selectedIndex].value;
-      (_a = this.selected) === null || _a === void 0 ? void 0 : _a.emit(this.input.value);
+    if (this.selectedSuggestion) {
+      this.selectEmitter.emit(this.selectedSuggestion);
     }
-    this.suggestions = [];
     this.closeSuggestions();
   }
+  listboxItemId(suggestion) {
+    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),
-      h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (e) => (this.listbox = e), style: { display: this.showSuggestions ? "block" : "none" } }, this.showSuggestions
-        ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: suggestion.id, key: suggestion.id, onMouseEnter: this.onMouseEnterOption, onMouseLeave: this.onMouseLeaveOption, onClick: this.onClickOption, "aria-selected": "" + suggestion.selected, "aria-label": suggestion.value },
-          h("span", { class: "value" }, this.markTerms(suggestion.value, this.terms)),
-          suggestion.type ? (h("span", { class: "type" }, suggestion.type)) : undefined)))
+      h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
+        ? 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)))
         : undefined)));
   }
   static get is() { return "dso-autosuggest"; }
@@ -204,33 +219,25 @@ export class Autosuggest {
     "$": ["autosuggest.css"]
   }; }
   static get properties() { return {
-    "fetchSuggestions": {
+    "suggestions": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "(value: string) => Promise<Array<Suggestion>>",
-        "resolved": "((value: string) => Promise<Suggestion[]>) | undefined",
+        "original": "Suggestion[]",
+        "resolved": "Suggestion[]",
         "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          },
           "Suggestion": {
             "location": "local"
           }
         }
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
-        "tags": [{
-            "text": "A promise with an array of `Suggestion`s. You should limit this array to ten items.",
-            "name": "returns"
-          }],
-        "text": "A method that will be called debounced with the input value as its first parameter.\nThis method will also be called when the input is reduced to an empty string."
-      }
+        "tags": [],
+        "text": "The suggestions for the value of the slotted input element"
+      },
+      "defaultValue": "[]"
     },
     "suggestOnFocus": {
       "type": "boolean",
@@ -252,12 +259,12 @@ export class Autosuggest {
     }
   }; }
   static get states() { return {
-    "suggestions": {},
-    "showSuggestions": {}
+    "showSuggestions": {},
+    "selectedSuggestion": {}
   }; }
   static get events() { return [{
-      "method": "selected",
-      "name": "selected",
+      "method": "selectEmitter",
+      "name": "dsoSelect",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -266,12 +273,35 @@ export class Autosuggest {
         "text": "Emitted when a suggestion is selected.\nThe `detail` property of the `CustomEvent`\u00A0will contain the selected suggestion."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "Suggestion",
+        "resolved": "Suggestion",
+        "references": {
+          "Suggestion": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "changeEmitter",
+      "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": {}
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "suggestions",
+      "methodName": "suggestionsWatcher"
+    }]; }
   static get listeners() { return [{
       "name": "click",
       "method": "onDocumentClick",

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

@@ -1,13 +1,13 @@
-import { html } from "lit-html";
-export function autosuggestTemplate({ fetchSuggestions, onSelected, suggestOnFocus, }) {
+import { html } from 'lit-html';
+export function autosuggestTemplate({ suggestions, onSelect, onChange, suggestOnFocus }, children) {
   return html `
-    <label for="autosuggestInputId">Label voor input</label>
     <dso-autosuggest
-      @selected=${(e) => onSelected(e.detail)}
-      .fetchSuggestions=${fetchSuggestions}
+      .suggestions=${suggestions}
+      @dsoSelect=${onSelect}
+      @dsoChange=${onChange}
       ?suggest-on-focus=${suggestOnFocus}
     >
-      <input id="autosuggestInputId" type="text" class="form-control" />
+      ${children}
     </dso-autosuggest>
   `;
 }

package/dist/collection/components/banner/banner.css

@@ -5,6 +5,8 @@
   display: block;
   --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e");
   --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
+  --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
+  --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }
 
 *,

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

@@ -6,7 +6,7 @@ const localization = {
   nextMonthLabel: 'Volgende maand',
   monthSelectLabel: 'Maand',
   yearSelectLabel: 'Jaar',
-  closeLabel: 'Sluit window',
+  closeLabel: 'Sluiten',
   keyboardInstruction: 'Gebruik de pijltjestoetsen om een dag te kiezen',
   calendarHeading: 'Kies een datum',
   dayNames: [

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

@@ -63,6 +63,10 @@ export class DsoDatePicker {
      * Should the input be marked as required?
      */
     this.required = false;
+    /**
+     * Should the input be focused on load?
+     */
+    this.dsoAutofocus = false;
     /**
      * Date value. Must be in Dutch date format: DD-MM-YYYY.
      */
@@ -91,6 +95,20 @@ export class DsoDatePicker {
         component: "dso-date-picker",
       });
     };
+    this.handleKeyUp = (event) => {
+      event.stopPropagation();
+      this.dsoKeyUp.emit({
+        component: "dso-date-picker",
+        originalEvent: event
+      });
+    };
+    this.handleKeyDown = (event) => {
+      event.stopPropagation();
+      this.dsoKeyDown.emit({
+        component: "dso-date-picker",
+        originalEvent: event
+      });
+    };
     this.handleFocus = (event) => {
       event.stopPropagation();
       this.dsoFocus.emit({
@@ -211,12 +229,8 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      // clean up any invalid characters
       target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      const parsed = parseDutchDate(target.value);
-      if (parsed || target.value === "") {
-        this.setValue(parsed);
-      }
+      this.setValue(target.value);
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -308,13 +322,37 @@ export class DsoDatePicker {
   setFocusedDay(day) {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
-  setValue(date) {
-    this.value = printDutchDate(date);
-    this.dateChange.emit({
+  setValue(value) {
+    var event = {
       component: "dso-date-picker",
-      value: this.value,
-      valueAsDate: date,
-    });
+      value: "",
+      valueAsDate: undefined
+    };
+    if (value instanceof Date) {
+      event.valueAsDate = value;
+    }
+    else {
+      event.value = value;
+      event.valueAsDate = parseDutchDate(value);
+    }
+    if (event.valueAsDate) {
+      event.value = this.value = printDutchDate(event.valueAsDate);
+    }
+    else {
+      this.value = "";
+    }
+    if (!event.valueAsDate && this.required) {
+      event.error = "required";
+    }
+    if (event.value && !event.valueAsDate) {
+      event.error = "invalid";
+    }
+    this.dateChange.emit(event);
+  }
+  componentDidLoad() {
+    if (this.dsoAutofocus) {
+      this.setFocus();
+    }
   }
   /**
    * render() function
@@ -341,7 +379,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          h("input", { class: "dso-date__input", value: formattedDate, 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, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
+          h("input", { class: "dso-date__input", value: formattedDate, 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" })),
@@ -510,9 +548,27 @@ export class DsoDatePicker {
       "reflect": false,
       "defaultValue": "false"
     },
+    "dsoAutofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Should the input be focused on load?"
+      },
+      "attribute": "dso-autofocus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -580,7 +636,7 @@ export class DsoDatePicker {
       },
       "complexType": {
         "original": "DsoDatePickerChangeEvent",
-        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; }",
+        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | undefined; }",
         "references": {
           "DsoDatePickerChangeEvent": {
             "location": "local"
@@ -606,6 +662,44 @@ export class DsoDatePicker {
           }
         }
       }
+    }, {
+      "method": "dsoKeyUp",
+      "name": "dsoKeyUp",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted on key up in the date picker input."
+      },
+      "complexType": {
+        "original": "DsoDatePickerKeyboardEvent",
+        "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
+        "references": {
+          "DsoDatePickerKeyboardEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "dsoKeyDown",
+      "name": "dsoKeyDown",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted on key down in the date picker input."
+      },
+      "complexType": {
+        "original": "DsoDatePickerKeyboardEvent",
+        "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
+        "references": {
+          "DsoDatePickerKeyboardEvent": {
+            "location": "local"
+          }
+        }
+      }
     }, {
       "method": "dsoFocus",
       "name": "dsoFocus",

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function datePickerTemplate({ id, onDateChange, value, min, max, disabled }) {
+export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }) {
   return html `
     <dso-date-picker
       @dateChange=${(e) => onDateChange(e)}
@@ -8,6 +8,7 @@ export function datePickerTemplate({ id, onDateChange, value, min, max, disabled
       value=${ifDefined(value || undefined)}
       min=${ifDefined(min || undefined)}
       max=${ifDefined(max || undefined)}
+      dso-autofocus=${ifDefined(autofocus || undefined)}
       ?disabled=${disabled}
     ></dso-date-picker>
   `;

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

@@ -44,9 +44,9 @@ export function printDutchDate(date) {
   if (!date) {
     return '';
   }
-  var d = date.getDate().toString(10);
-  var m = (date.getMonth() + 1).toString(10);
-  var y = date.getFullYear().toString(10);
+  var d = date.getDate().toString(10).padStart(2, '0');
+  var m = (date.getMonth() + 1).toString(10).padStart(2, '0');
+  var y = date.getFullYear().toString(10).padStart(2, '0');
   return `${d}-${m}-${y}`;
 }
 /**

package/dist/collection/components/icon/icon.js

@@ -179,11 +179,13 @@ const icons = [
 ];
 export class Icon {
   render() {
-    const icon = icons.find(i => i.alias === this.icon);
-    if (!icon) {
-      throw new TypeError(`Unknown svg: ${this.icon}`);
+    if (this.icon) {
+      const icon = icons.find(i => i.alias === this.icon);
+      if (!icon) {
+        throw new TypeError(`Unknown svg: ${this.icon}`);
+      }
+      return h("span", { class: "icon-container", innerHTML: icon.svg });
     }
-    return h("span", { class: "icon-container", innerHTML: icon.svg });
   }
   static get is() { return "dso-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -199,11 +201,11 @@ export class Icon {
       "mutable": false,
       "complexType": {
         "original": "string",
-        "resolved": "string",
+        "resolved": "string | undefined",
         "references": {}
       },
-      "required": true,
-      "optional": false,
+      "required": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""