@duetds/components 6.2.4 → 6.2.5

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
@@ -19,112 +19,6 @@ export class DuetDatePicker {
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.focusTarget = null;
-    this.open = false;
-    this.focusedDay = new Date();
-    this.inputValue = "";
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * Expands the date picker input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Name of the date picker input.
-     */
-    this.name = "";
-    /**
-     * Adds a unique identifier for the date picker input.
-     */
-    this.identifier = "";
-    /**
-     * Label for the date picker input.
-     */
-    this.label = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * The currently active language. This setting changes the month/year/day.
-     * names and button labels as well as all screen reader labels.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
-     * @default "fi"
-     */
-    this.language = getLanguage();
-    /**
-     * Placeholder defaults.
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
-    this.placeholderDefaults = {
-      fi: "pp.kk.vvvv",
-      en: "dd.mm.yyyy",
-      sv: "dd.mm.åååå",
-    };
-    /**
-     * Hint text to display before the user types into the date picker input.
-     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
-     */
-    this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * 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;
-    /**
-     * Display the date picker input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = 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";
-    /**
-     * Tooltip to display next to the label of the date picker input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
-    /**
-     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-     */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
-     */
-    this.incrementYears = 10;
     this.enableActiveFocus = () => {
       this.focusTarget = "day-button";
     };
@@ -223,6 +117,41 @@ export class DuetDatePicker {
         this.setValue(parsed);
       }
     };
+    this.open = false;
+    this.focusedDay = new Date();
+    this.inputValue = "";
+    this.theme = "";
+    this.expand = false;
+    this.name = "";
+    this.identifier = "";
+    this.label = "";
+    this.caption = undefined;
+    this.margin = "auto";
+    this.language = getLanguage();
+    this.placeholderDefaults = {
+      fi: "pp.kk.vvvv",
+      en: "dd.mm.yyyy",
+      sv: "dd.mm.åååå",
+    };
+    this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
+    this.echoPlaceholder = false;
+    this.disabled = false;
+    this.error = "";
+    this.labelHidden = false;
+    this.role = undefined;
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.required = false;
+    this.direction = "right";
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.incrementYears = 10;
+    this.validity = undefined;
   }
   updateValidity() {
     this.determineValidity(parseISODate(this.value));
@@ -398,745 +327,724 @@ export class DuetDatePicker {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } },
-      h("div", { class: "duet-date" },
-        h(DatePickerInput, { value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, echoPlaceholder: this.echoPlaceholder, caption: this.caption })),
-      h("div", { class: {
-          "duet-theme-turva": this.theme === "turva",
-          "duet-date-dialog": true,
-          left: this.direction === "left",
-          error: !!this.error,
-          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(FocusGuard, { moveFocusTo: this.focusedDayNode }),
-        h("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) },
-          h("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction),
-          h("div", { class: "duet-date-dialog-mobile-header" },
-            h("duet-label", { margin: "none" }, this.label),
-            h("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" },
-              h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }),
-              h("duet-visually-hidden", null, text.closeLabel))),
-          h("div", { class: "duet-date-dialog-header" },
-            h("div", { class: "duet-date-dialog-dropdowns" },
-              h("duet-visually-hidden", null,
-                h("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" },
-                  text.monthLabels[focusedMonth],
-                  " ",
-                  this.focusedDay.getFullYear())),
-              h("duet-visually-hidden", null,
-                h("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)),
-              h("div", { class: "duet-date-dialog-select" },
-                h("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))),
-                h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" },
-                  h("span", null, text.monthLabelsShort[focusedMonth]),
-                  h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))),
-              h("duet-visually-hidden", null,
-                h("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)),
-              h("div", { class: "duet-date-dialog-select" },
-                h("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))),
-                h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" },
-                  h("span", null, this.focusedDay.getFullYear()),
-                  h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))),
-            h("div", { class: "duet-date-dialog-buttons" },
-              h("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel),
-              h("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))),
-          h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })),
-        h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-date-dialog": true,
+        left: this.direction === "left",
+        error: !!this.error,
+        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(FocusGuard, { moveFocusTo: this.focusedDayNode }), h("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h("div", { class: "duet-date-dialog-mobile-header" }, h("duet-label", { margin: "none" }, this.label), h("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", null, text.closeLabel))), h("div", { class: "duet-date-dialog-header" }, h("div", { class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", null, h("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", null, h("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", null, h("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { class: "duet-date-dialog-select" }, h("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { class: "duet-date-dialog-buttons" }, h("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }
   static get is() { return "duet-date-picker"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-date-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-date-picker.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-date-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-date-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the component."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "expand": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expands the date picker input to fill 100% of the container width."
-      },
-      "attribute": "expand",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "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": "\"\""
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the component."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the date picker input."
+      "expand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expands the date picker input to fill 100% of the container width."
+        },
+        "attribute": "expand",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "identifier",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for the date picker input."
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the date picker input."
+        },
+        "attribute": "identifier",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for the date picker input."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Caption (underneath label) that can be set as a way of adding extra information."
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caption (underneath label) that can be set as a way of adding extra information."
+        },
+        "attribute": "caption",
+        "reflect": false
       },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLanguage",
-        "resolved": "\"en\" | \"fi\" | \"sv\"",
-        "references": {
-          "DuetLanguage": {
-            "location": "import",
-            "path": "../../common-types"
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLanguage",
+          "resolved": "\"en\" | \"fi\" | \"sv\"",
+          "references": {
+            "DuetLanguage": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing."
-          }, {
-            "name": "default",
-            "text": "\"fi\""
-          }],
-        "text": "The currently active language. This setting changes the month/year/day.\nnames and button labels as well as all screen reader labels."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing."
+            }, {
+              "name": "default",
+              "text": "\"fi\""
+            }],
+          "text": "The currently active language. This setting changes the month/year/day.\nnames and button labels as well as all screen reader labels."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "getLanguage()"
       },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "getLanguage()"
-    },
-    "placeholderDefaults": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject | string",
-        "resolved": "DuetLangObject | string",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
+      "placeholderDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
-          }],
-        "text": "Placeholder defaults."
-      },
-      "attribute": "placeholder-default",
-      "reflect": false,
-      "defaultValue": "{\n    fi: \"pp.kk.vvvv\",\n    en: \"dd.mm.yyyy\",\n    sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\",\n  }"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
-          }],
-        "text": "Hint text to display before the user types into the date picker input."
-      },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
-    },
-    "echoPlaceholder": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
-      },
-      "attribute": "echo-placeholder",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "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\ninteract with the input, and conveys its inactive state to assistive technologies."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display the date picker input in error state along with an error message."
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+            }],
+          "text": "Placeholder defaults."
+        },
+        "attribute": "placeholder-default",
+        "reflect": false,
+        "defaultValue": "{\n    fi: \"pp.kk.vvvv\",\n    en: \"dd.mm.yyyy\",\n    sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\",\n  }"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines a specific role attribute for the date picker input."
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+            }],
+          "text": "Hint text to display before the user types into the date picker input."
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
       },
-      "attribute": "role",
-      "reflect": false
-    },
-    "accessibleActiveDescendant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "echoPlaceholder": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        "attribute": "echo-placeholder",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a related component\u2019s visually focused element."
+      "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\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "accessible-active-descendant",
-      "reflect": false
-    },
-    "accessibleControls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display the date picker input in error state along with an error message."
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "accessible-controls",
-      "reflect": false
-    },
-    "accessibleOwns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines a specific role attribute for the date picker input."
+        },
+        "attribute": "role",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component owned by the input."
+      "accessibleActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "accessible-active-descendant",
+        "reflect": false
       },
-      "attribute": "accessible-owns",
-      "reflect": false
-    },
-    "accessibleDescribedBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "accessibleControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        "attribute": "accessible-controls",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component that describes the input."
+      "accessibleOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component owned by the input."
+        },
+        "attribute": "accessible-owns",
+        "reflect": false
       },
-      "attribute": "accessible-described-by",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetDatePickerDirection",
-        "resolved": "\"left\" | \"right\"",
-        "references": {
-          "DuetDatePickerDirection": {
-            "location": "local"
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetDatePickerDirection",
+          "resolved": "\"left\" | \"right\"",
+          "references": {
+            "DuetDatePickerDirection": {
+              "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\""
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "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": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip to display next to the label of the date picker input."
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip to display next to the label of the date picker input."
+        },
+        "attribute": "tooltip",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "tooltip",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "tooltipDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetTooltipDirection",
-        "resolved": "\"auto\" | \"left\" | \"right\"",
-        "references": {
-          "DuetTooltipDirection": {
-            "location": "import",
-            "path": "../../common-types"
+      "tooltipDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetTooltipDirection",
+          "resolved": "\"auto\" | \"left\" | \"right\"",
+          "references": {
+            "DuetTooltipDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-      },
-      "attribute": "tooltip-direction",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Date value. Must be in IS0-8601 format: YYYY-MM-DD"
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "min": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+        },
+        "attribute": "tooltip-direction",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "max": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date value. Must be in IS0-8601 format: YYYY-MM-DD"
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "incrementYears": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100"
+      "incrementYears": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100"
+        },
+        "attribute": "increment",
+        "reflect": false,
+        "defaultValue": "10"
       },
-      "attribute": "increment",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "validity": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "ValidityState",
-        "resolved": "ValidityState",
-        "references": {
-          "ValidityState": {
-            "location": "global"
+      "validity": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ValidityState",
+          "resolved": "ValidityState",
+          "references": {
+            "ValidityState": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This offers information relating to the current validity of the component.\nIt follow as closely as possible the behaviour of the native date input.\nUseful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.\n**This property should be treated as read only**."
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This offers information relating to the current validity of the component.\nIt follow as closely as possible the behaviour of the native date input.\nUseful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.\n**This property should be treated as read only**."
       }
-    }
-  }; }
-  static get states() { return {
-    "open": {},
-    "focusedDay": {},
-    "inputValue": {}
-  }; }
-  static get events() { return [{
-      "method": "duetChange",
-      "name": "duetChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted when a date is selected."
-      },
-      "complexType": {
-        "original": "DuetDatePickerChangeEvent",
-        "resolved": "{ component: \"duet-date-picker\"; valueAsDate: Date; value: string; }",
-        "references": {
-          "DuetDatePickerChangeEvent": {
-            "location": "local"
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "focusedDay": {},
+      "inputValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when a date is selected."
+        },
+        "complexType": {
+          "original": "DuetDatePickerChangeEvent",
+          "resolved": "{ component: \"duet-date-picker\"; valueAsDate: Date; value: string; }",
+          "references": {
+            "DuetDatePickerChangeEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetBlur",
-      "name": "duetBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted the date picker input is blurred."
-      },
-      "complexType": {
-        "original": "DuetDatePickerFocusEvent",
-        "resolved": "{ component: \"duet-date-picker\"; }",
-        "references": {
-          "DuetDatePickerFocusEvent": {
-            "location": "local"
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted the date picker input is blurred."
+        },
+        "complexType": {
+          "original": "DuetDatePickerFocusEvent",
+          "resolved": "{ component: \"duet-date-picker\"; }",
+          "references": {
+            "DuetDatePickerFocusEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetFocus",
-      "name": "duetFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted the date picker input is focused."
-      },
-      "complexType": {
-        "original": "DuetDatePickerFocusEvent",
-        "resolved": "{ component: \"duet-date-picker\"; }",
-        "references": {
-          "DuetDatePickerFocusEvent": {
-            "location": "local"
+      }, {
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted the date picker input is focused."
+        },
+        "complexType": {
+          "original": "DuetDatePickerFocusEvent",
+          "resolved": "{ component: \"duet-date-picker\"; }",
+          "references": {
+            "DuetDatePickerFocusEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
+          "tags": []
+        }
       },
-      "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"
-          }
+      "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": "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"
-          }
+      "hide": {
+        "complexType": {
+          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\nreturning to the date picker's button. Default is true.",
-        "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": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "min",
-      "methodName": "updateValidity"
-    }, {
-      "propName": "max",
-      "methodName": "updateValidity"
-    }, {
-      "propName": "value",
-      "methodName": "updateValidity"
-    }, {
-      "propName": "required",
-      "methodName": "updateValidity"
-    }, {
-      "propName": "value",
-      "methodName": "updateInternalValue"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleDocumentClick",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "min",
+        "methodName": "updateValidity"
+      }, {
+        "propName": "max",
+        "methodName": "updateValidity"
+      }, {
+        "propName": "value",
+        "methodName": "updateValidity"
+      }, {
+        "propName": "required",
+        "methodName": "updateValidity"
+      }, {
+        "propName": "value",
+        "methodName": "updateInternalValue"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }