@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,11 +1,11 @@
-import { createIdentifier } from '../../utils/create-identifier';
-import { Component, Host, Prop, Element, h, Event, State, Listen, Method, } from '@stencil/core';
-import { addDays, startOfWeek, endOfWeek, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printDutchDate, parseDutchDate, DaysOfWeek } from './date-utils';
-import { DatePickerMonth } from './date-picker-month';
-import defaultLocalization from './date-localization';
+import { createIdentifier } from "../../utils/create-identifier";
+import { Host, h, } from "@stencil/core";
+import { addDays, startOfWeek, endOfWeek, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printDutchDate, parseDutchDate, DaysOfWeek, } from "./date-utils";
+import { DatePickerMonth } from "./date-picker-month";
+import defaultLocalization from "./date-localization";
 function range(from, to) {
-  var result = [];
-  for (var i = from; i <= to; i++) {
+  const result = [];
+  for (let i = from; i <= to; i++) {
     result.push(i);
   }
   return result;
@@ -23,7 +23,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9-]+/g;
 const TRANSITION_MS = 300;
 function cleanValue(input, regex) {
   const value = input.value;
@@ -51,43 +51,6 @@ export class DsoDatePicker {
     this.dialogLabelId = createIdentifier("DsoDateLabel");
     this.localization = defaultLocalization;
     this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * State() variables
-     */
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    /**
-     * Public Property API
-     */
-    /**
-     * Name of the date picker input.
-     */
-    this.name = "date";
-    /**
-     * Makes the date picker input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Forces the opening direction of the calendar modal to be always left or right.
-     * This setting can be useful when the input is smaller than the opening date picker
-     * would be as by default the picker always opens towards right.
-     */
-    this.direction = "right";
-    /**
-     * 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.
-     */
-    this.value = "";
     /**
      * Local methods.
      */
@@ -116,14 +79,14 @@ export class DsoDatePicker {
       event.stopPropagation();
       this.dsoKeyUp.emit({
         component: "dso-date-picker",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleKeyDown = (event) => {
       event.stopPropagation();
       this.dsoKeyDown.emit({
         component: "dso-date-picker",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleFocus = (event) => {
@@ -141,9 +104,10 @@ export class DsoDatePicker {
       event.preventDefault();
     };
     this.handleTouchEnd = (event) => {
+      var _a, _b;
       const touch = event.changedTouches[0];
-      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
-      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
+      const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // get vertical dist traveled
       const threshold = 70;
       const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
       const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
@@ -182,7 +146,7 @@ export class DsoDatePicker {
         (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
         return;
       }
-      var handled = true;
+      let handled = true;
       switch (event.keyCode) {
         case keyCode.RIGHT:
           this.addDays(1);
@@ -239,10 +203,15 @@ export class DsoDatePicker {
       }
     };
     this.handleMonthSelect = (e) => {
-      this.setMonth(parseInt(e.target.value, 10));
+      // Todo
+      if (e.target instanceof HTMLSelectElement) {
+        this.setMonth(parseInt(e.target.value, 10));
+      }
     };
     this.handleYearSelect = (e) => {
-      this.setYear(parseInt(e.target.value, 10));
+      if (e.target instanceof HTMLSelectElement) {
+        this.setYear(parseInt(e.target.value, 10));
+      }
     };
     this.handleInputChange = (e) => {
       const target = e.target;
@@ -250,10 +219,10 @@ export class DsoDatePicker {
       this.setValue(cleanedValue);
     };
     this.prepareEvent = (value) => {
-      var event = {
+      const event = {
         component: "dso-date-picker",
         value: "",
-        valueAsDate: undefined
+        valueAsDate: undefined,
       };
       if (value instanceof Date) {
         event.valueAsDate = value;
@@ -292,6 +261,20 @@ export class DsoDatePicker {
         setTimeout(() => element.focus(), 0);
       }
     };
+    this.activeFocus = false;
+    this.focusedDay = new Date();
+    this.open = false;
+    this.visible = false;
+    this.name = "date";
+    this.identifier = undefined;
+    this.disabled = false;
+    this.role = undefined;
+    this.direction = "right";
+    this.required = false;
+    this.dsoAutofocus = false;
+    this.value = "";
+    this.min = undefined;
+    this.max = undefined;
   }
   /**
    * Component event handling.
@@ -322,14 +305,14 @@ export class DsoDatePicker {
    * Show the calendar modal, moving focus to the calendar inside.
    */
   async show() {
-    if (typeof this.hideTimeoutId !== 'undefined') {
+    if (typeof this.hideTimeoutId !== "undefined") {
       clearTimeout(this.hideTimeoutId);
     }
     this.visible = true;
     setTimeout(() => {
       this.open = true;
       this.setFocusedDay(parseDutchDate(this.value) || new Date());
-      if (typeof this.focusTimeoutId !== 'undefined') {
+      if (typeof this.focusTimeoutId !== "undefined") {
         clearTimeout(this.focusTimeoutId);
       }
       this.focusTimeoutId = setTimeout(() => { var _a; return (_a = this.monthSelectNode) === null || _a === void 0 ? void 0 : _a.focus(); }, TRANSITION_MS);
@@ -343,7 +326,7 @@ export class DsoDatePicker {
     this.open = false;
     // in cases where calendar is quickly shown and hidden
     // we should avoid moving focus to the button
-    if (typeof this.focusTimeoutId !== 'undefined') {
+    if (typeof this.focusTimeoutId !== "undefined") {
       clearTimeout(this.focusTimeoutId);
     }
     this.hideTimeoutId = setTimeout(() => {
@@ -385,7 +368,7 @@ export class DsoDatePicker {
   }
   setValue(value) {
     const event = this.prepareEvent(value);
-    this.value = typeof value === 'string' ? value : event.value;
+    this.value = typeof value === "string" ? value : event.value;
     if (this.value !== this.previousValue) {
       this.dsoDateChange.emit(event);
       this.previousValue = this.value;
@@ -412,8 +395,8 @@ export class DsoDatePicker {
     const focusedYear = this.focusedDay.getFullYear();
     const minDate = parseDutchDate(this.min);
     const maxDate = parseDutchDate(this.max);
-    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
     let minYear = selectedYear - 10;
     let maxYear = selectedYear + 10;
     if (minDate) {
@@ -422,410 +405,377 @@ 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: {
-            "dso-date__dialog": true,
-            "is-left": this.direction === "left",
-            "is-active": this.open,
-          }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd },
-          h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey },
-            h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction),
-            h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus },
-              h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading),
-              h("button", { class: "dso-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" },
-                h("dso-icon", { icon: "times" }),
-                h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))),
-            h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus },
-              h("div", null,
-                h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" },
-                  this.localization.monthNames[focusedMonth],
-                  " ",
-                  this.focusedDay.getFullYear()),
-                h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel),
-                h("div", { class: "dso-date__select" },
-                  h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth }, month)))),
-                  h("div", { class: "dso-date__select-label", "aria-hidden": "true" },
-                    h("span", null, this.localization.monthNamesShort[focusedMonth]),
-                    h("dso-icon", { icon: "chevron-down" }))),
-                h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel),
-                h("div", { class: "dso-date__select" },
-                  h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))),
-                  h("div", { class: "dso-date__select-label", "aria-hidden": "true" },
-                    h("span", null, this.focusedDay.getFullYear()),
-                    h("dso-icon", { icon: "chevron-down" })))),
-              h("div", { class: "dso-date__nav" },
-                h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" },
-                  h("dso-icon", { icon: "chevron-left" }),
-                  h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)),
-                h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" },
-                  h("dso-icon", { icon: "chevron-right" }),
-                  h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))),
-            h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+    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: {
+        "dso-date__dialog": true,
+        "is-left": this.direction === "left",
+        "is-active": this.open,
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth }, month)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
   }
   static get is() { return "dso-date-picker"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["date-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["date-picker.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the date picker input."
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "\"date\""
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["date-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["date-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the date picker input."
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"date\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Makes the date picker input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
+        },
+        "attribute": "identifier",
+        "reflect": false
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string | undefined",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the date picker input component disabled. This prevents users from being able to\r\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines a specific role attribute for the date picker input."
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines a specific role attribute for the date picker input."
+        },
+        "attribute": "role",
+        "reflect": false
       },
-      "attribute": "role",
-      "reflect": false
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DsoDatePickerDirection",
-        "resolved": "\"left\" | \"right\"",
-        "references": {
-          "DsoDatePickerDirection": {
-            "location": "local"
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DsoDatePickerDirection",
+          "resolved": "\"left\" | \"right\"",
+          "references": {
+            "DsoDatePickerDirection": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Forces the opening direction of the calendar modal to be always left or right.\nThis setting can be useful when the input is smaller than the opening date picker\nwould be as by default the picker always opens towards right."
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "\"right\""
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should the input be marked as required?"
-      },
-      "attribute": "required",
-      "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": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "min": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string | undefined",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Forces the opening direction of the calendar modal to be always left or right.\r\nThis setting can be useful when the input is smaller than the opening date picker\r\nwould be as by default the picker always opens towards right."
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "\"right\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\nThis setting can be used alone or together with the max property."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should the input be marked as required?"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "min",
-      "reflect": false
-    },
-    "max": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string | undefined",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\nThis setting can be used alone or together with the min property."
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
       },
-      "attribute": "max",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "activeFocus": {},
-    "focusedDay": {},
-    "open": {},
-    "visible": {}
-  }; }
-  static get events() { return [{
-      "method": "dsoDateChange",
-      "name": "dsoDateChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted when a date is selected."
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
+        },
+        "attribute": "min",
+        "reflect": false
       },
-      "complexType": {
-        "original": "DsoDatePickerChangeEvent",
-        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
-        "references": {
-          "DsoDatePickerChangeEvent": {
-            "location": "local"
-          }
-        }
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
+        },
+        "attribute": "max",
+        "reflect": false
       }
-    }, {
-      "method": "dsoBlur",
-      "name": "dsoBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted the date picker input is blurred."
-      },
-      "complexType": {
-        "original": "DsoDatePickerFocusEvent",
-        "resolved": "{ component: \"dso-date-picker\"; }",
-        "references": {
-          "DsoDatePickerFocusEvent": {
-            "location": "local"
+    };
+  }
+  static get states() {
+    return {
+      "activeFocus": {},
+      "focusedDay": {},
+      "open": {},
+      "visible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoDateChange",
+        "name": "dsoDateChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when a date is selected."
+        },
+        "complexType": {
+          "original": "DsoDatePickerChangeEvent",
+          "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
+          "references": {
+            "DsoDatePickerChangeEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "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": "dsoBlur",
+        "name": "dsoBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted the date picker input is blurred."
+        },
+        "complexType": {
+          "original": "DsoDatePickerFocusEvent",
+          "resolved": "{ component: \"dso-date-picker\"; }",
+          "references": {
+            "DsoDatePickerFocusEvent": {
+              "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": "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": "dsoFocus",
-      "name": "dsoFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted the date picker input is focused."
-      },
-      "complexType": {
-        "original": "DsoDatePickerFocusEvent",
-        "resolved": "{ component: \"dso-date-picker\"; }",
-        "references": {
-          "DsoDatePickerFocusEvent": {
-            "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void | undefined>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "dsoFocus",
+        "name": "dsoFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted the date picker input is focused."
         },
-        "return": "Promise<void | undefined>"
-      },
-      "docs": {
-        "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
-        "tags": []
-      }
-    },
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "DsoDatePickerFocusEvent",
+          "resolved": "{ component: \"dso-date-picker\"; }",
+          "references": {
+            "DsoDatePickerFocusEvent": {
+              "location": "local"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void | undefined>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void | undefined>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Show the calendar modal, moving focus to the calendar inside.",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Show the calendar modal, moving focus to the calendar inside.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\nreturning to the date picker's button. Default is true.",
-        "tags": []
+      "hide": {
+        "complexType": {
+          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\nreturning to the date picker's button. Default is true.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleDocumentClick",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
 }