@duetds/components 8.0.6 → 8.1.0

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
@@ -12,1063 +12,1068 @@ import { DatePickerMonth } from "./date-picker-month";
 import { addDays, clamp, endOfMonth, endOfWeek, inRange, isEqual, parseDate, parseISODate, printDate, printISODate, setMonth, setYear, startOfMonth, startOfWeek, } from "./date-utils";
 import { createShortcuts, range } from "./utils";
 export class DuetDatePicker {
-  constructor() {
-    this.monthSelectId = createID("DuetDatePicker");
-    this.yearSelectId = createID("DuetDatePicker");
-    this.dialogLabelId = createID("DuetDatePicker");
-    this.initialTouchX = null;
-    this.initialTouchY = null;
-    this.focusTarget = null;
-    this.enableActiveFocus = () => {
-      this.focusTarget = "day-button";
-    };
-    this.disableActiveFocus = () => {
-      this.focusTarget = null;
-    };
-    this.toggleOpen = (e) => {
-      e.preventDefault();
-      this.open ? this.hide(false) : this.show();
-    };
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.duetBlur.emit({
-        component: "duet-date-picker",
-      });
-    };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.duetFocus.emit({
-        component: "duet-date-picker",
-      });
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    this.handleTouchMove = (event) => {
-      event.preventDefault();
-    };
-    this.handleTouchEnd = (event) => {
-      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 threshold = 70;
-      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-      const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
-      if (isHorizontalSwipe) {
-        this.addMonths(distX < 0 ? 1 : -1);
-      }
-      else if (isDownwardsSwipe) {
-        this.hide();
-        event.preventDefault();
-      }
-      this.initialTouchY = null;
-      this.initialTouchX = null;
-    };
-    this.handleNextMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(1);
-    };
-    this.handlePreviousMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(-1);
-    };
-    this.handleEscKey = createShortcuts({
-      Escape: () => this.hide(),
-      Esc: () => this.hide(), // IE-specific
-    });
-    this.handleKeyboardNavigation = createShortcuts({
-      ArrowRight: () => this.addDays(1),
-      Right: () => this.addDays(1),
-      ArrowLeft: () => this.addDays(-1),
-      Left: () => this.addDays(-1),
-      ArrowDown: () => this.addDays(7),
-      Down: () => this.addDays(7),
-      ArrowUp: () => this.addDays(-7),
-      Up: () => this.addDays(-7),
-      Home: () => this.startOfWeek(),
-      End: () => this.endOfWeek(),
-      PageUp: () => this.addMonths(-1),
-      PageDown: () => this.addMonths(1),
-      "Shift+PageUp": () => this.addYears(-1),
-      "Shift+PageDown": () => this.addYears(1),
-    });
-    this.handleDaySelect = (_event, day) => {
-      const min = parseISODate(this.min);
-      const max = parseISODate(this.max);
-      this.determineValidity(day);
-      if (inRange(day, min, max)) {
-        this.setValue(day);
-        this.hide();
-      }
-    };
-    this.handleMonthSelect = e => {
-      this.setMonth(parseInt(e.target.value, 10));
-    };
-    this.handleYearSelect = e => {
-      this.setYear(parseInt(e.target.value, 10));
-    };
-    this.handleInputChange = (e) => {
-      this.inputValue = e.detail.value;
-      const parsed = parseDate(this.inputValue);
-      this.determineValidity(parsed);
-      if (parsed || this.inputValue === "") {
-        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));
-  }
-  updateInternalValue() {
-    const parsedValue = parseISODate(this.value);
-    const parsedInputValue = parseDate(this.inputValue);
-    // an invalid or empty value should clear the input
-    if (!parsedValue) {
-      this.inputValue = "";
+    constructor() {
+        this.monthSelectId = createID("DuetDatePicker");
+        this.yearSelectId = createID("DuetDatePicker");
+        this.dialogLabelId = createID("DuetDatePicker");
+        this.initialTouchX = null;
+        this.initialTouchY = null;
+        this.focusTarget = null;
+        this.enableActiveFocus = () => {
+            this.focusTarget = "day-button";
+        };
+        this.disableActiveFocus = () => {
+            this.focusTarget = null;
+        };
+        this.toggleOpen = (e) => {
+            e.preventDefault();
+            this.open ? this.hide(false) : this.show();
+        };
+        this.handleBlur = (event) => {
+            event.stopPropagation();
+            this.duetBlur.emit({
+                component: "duet-date-picker",
+            });
+        };
+        this.handleFocus = (event) => {
+            event.stopPropagation();
+            this.duetFocus.emit({
+                component: "duet-date-picker",
+            });
+        };
+        this.handleTouchStart = (event) => {
+            const touch = event.changedTouches[0];
+            this.initialTouchX = touch.pageX;
+            this.initialTouchY = touch.pageY;
+        };
+        this.handleTouchMove = (event) => {
+            event.preventDefault();
+        };
+        this.handleTouchEnd = (event) => {
+            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 threshold = 70;
+            const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+            const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
+            if (isHorizontalSwipe) {
+                this.addMonths(distX < 0 ? 1 : -1);
+            }
+            else if (isDownwardsSwipe) {
+                this.hide();
+                event.preventDefault();
+            }
+            this.initialTouchY = null;
+            this.initialTouchX = null;
+        };
+        this.handleNextMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(1);
+        };
+        this.handlePreviousMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(-1);
+        };
+        this.handleEscKey = createShortcuts({
+            Escape: () => this.hide(),
+            Esc: () => this.hide(), // IE-specific
+        });
+        this.handleKeyboardNavigation = createShortcuts({
+            ArrowRight: () => this.addDays(1),
+            Right: () => this.addDays(1), // IE does not have "Arrow" prefix
+            ArrowLeft: () => this.addDays(-1),
+            Left: () => this.addDays(-1),
+            ArrowDown: () => this.addDays(7),
+            Down: () => this.addDays(7),
+            ArrowUp: () => this.addDays(-7),
+            Up: () => this.addDays(-7),
+            Home: () => this.startOfWeek(),
+            End: () => this.endOfWeek(),
+            PageUp: () => this.addMonths(-1),
+            PageDown: () => this.addMonths(1),
+            "Shift+PageUp": () => this.addYears(-1),
+            "Shift+PageDown": () => this.addYears(1),
+        });
+        this.handleDaySelect = (_event, day) => {
+            const min = parseISODate(this.min);
+            const max = parseISODate(this.max);
+            this.determineValidity(day);
+            if (inRange(day, min, max)) {
+                this.setValue(day);
+                this.hide();
+            }
+        };
+        this.handleMonthSelect = e => {
+            this.setMonth(parseInt(e.target.value, 10));
+        };
+        this.handleYearSelect = e => {
+            this.setYear(parseInt(e.target.value, 10));
+        };
+        this.handleInputChange = (e) => {
+            this.inputValue = e.detail.value;
+            const parsed = parseDate(this.inputValue);
+            this.determineValidity(parsed);
+            if (parsed || this.inputValue === "") {
+                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;
     }
-    // but otherwise only update user's input if the new value is different to user's input
-    else if (!isEqual(parsedValue, parsedInputValue)) {
-      this.inputValue = printDate(parsedValue);
+    updateValidity() {
+        this.determineValidity(parseISODate(this.value));
     }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.determineValidity(parseISODate(this.value));
-    this.updateInternalValue();
-  }
-  componentDidUpdate() {
-    // we want to run this code _after_ render
-    // to ensure all elements are visible (and thus focusable)
-    // hence using componentDidUpdate
-    switch (this.focusTarget) {
-      case "toggle-button":
-        this.datePickerButton.focus();
-        this.focusTarget = null;
-        break;
-      case "day-button":
-        // we don't clear focusTarget here since this is cleared
-        // already when focus is moved out of calendar table
-        this.focusedDayNode.focus();
-        break;
-      case "month-select":
-        this.monthSelectNode.focus();
-        this.focusTarget = null;
-        break;
+    updateInternalValue() {
+        const parsedValue = parseISODate(this.value);
+        const parsedInputValue = parseDate(this.inputValue);
+        // an invalid or empty value should clear the input
+        if (!parsedValue) {
+            this.inputValue = "";
+        }
+        // but otherwise only update user's input if the new value is different to user's input
+        else if (!isEqual(parsedValue, parsedInputValue)) {
+            this.inputValue = printDate(parsedValue);
+        }
     }
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, { prop: "placeholder", defaults: "placeholderDefaults" });
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-   */
-  async setFocus(options) {
-    this.datePickerInput.setFocus(options);
-  }
-  /**
-   * Show the calendar modal, moving focus to the calendar inside.
-   */
-  async show() {
-    this.open = true;
-    this.focusTarget = "month-select";
-    this.setFocusedDay(parseISODate(this.value) || new Date());
-  }
-  /**
-   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-   * returning to the date picker's button. Default is true.
-   */
-  async hide(moveFocusToButton = true) {
-    this.open = false;
-    if (moveFocusToButton) {
-      this.focusTarget = "toggle-button";
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.determineValidity(parseISODate(this.value));
+        this.updateInternalValue();
     }
-  }
-  addDays(days) {
-    this.setFocusedDay(addDays(this.focusedDay, days));
-  }
-  addMonths(months) {
-    this.setMonth(this.focusedDay.getMonth() + months);
-  }
-  addYears(years) {
-    this.setYear(this.focusedDay.getFullYear() + years);
-  }
-  startOfWeek() {
-    this.setFocusedDay(startOfWeek(this.focusedDay));
-  }
-  endOfWeek() {
-    this.setFocusedDay(endOfWeek(this.focusedDay));
-  }
-  setMonth(month) {
-    const min = setMonth(startOfMonth(this.focusedDay), month);
-    const max = endOfMonth(min);
-    const date = setMonth(this.focusedDay, month);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  setYear(year) {
-    const min = setYear(startOfMonth(this.focusedDay), year);
-    const max = endOfMonth(min);
-    const date = setYear(this.focusedDay, year);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  setFocusedDay(day) {
-    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
-  }
-  determineValidity(date) {
-    var _a, _b;
-    const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-    const badInput = inputValue !== "" && date == null;
-    const valueMissing = this.required && date == null;
-    const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
-    const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
-    this.validity = {
-      patternMismatch: false,
-      customError: false,
-      stepMismatch: false,
-      tooLong: false,
-      tooShort: false,
-      typeMismatch: false,
-      valueMissing,
-      badInput,
-      rangeUnderflow,
-      rangeOverflow,
-      valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
-    };
-  }
-  setValue(date) {
-    const newValue = printISODate(date);
-    if (newValue === this.value) {
-      return;
+    componentDidUpdate() {
+        // we want to run this code _after_ render
+        // to ensure all elements are visible (and thus focusable)
+        // hence using componentDidUpdate
+        switch (this.focusTarget) {
+            case "toggle-button":
+                this.datePickerButton.focus();
+                this.focusTarget = null;
+                break;
+            case "day-button":
+                // we don't clear focusTarget here since this is cleared
+                // already when focus is moved out of calendar table
+                this.focusedDayNode.focus();
+                break;
+            case "month-select":
+                this.monthSelectNode.focus();
+                this.focusTarget = null;
+                break;
+        }
     }
-    this.value = newValue;
-    this.duetChange.emit({
-      component: "duet-date-picker",
-      value: this.value,
-      valueAsDate: date,
-    });
-  }
-  handleDocumentClick(e) {
-    if (!this.open) {
-      return;
+    connectedCallback() {
+        connectLanguageChangeObserver(this, { prop: "placeholder", defaults: "placeholderDefaults" });
     }
-    // the dialog and the button aren't considered clicks outside.
-    // dialog for obvious reasons, but the button needs to be skipped
-    // so that two things are possible:
-    //
-    // a) clicking again on the button when dialog is open should close the modal.
-    //    without skipping the button here, we would see a click outside
-    //    _and_ a click on the button, so the `open` state goes
-    //    open -> close (click outside) -> open (click button)
-    //
-    // b) clicking another date picker's button should close the current calendar
-    //    and open the new one. this means we can't stopPropagation() on the button itself
-    const isClickOutside = e
-      .composedPath()
-      .every(node => node !== this.dialogWrapperNode && node !== this.datePickerButton);
-    if (isClickOutside) {
-      this.hide(false);
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
     }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const valueAsDate = parseISODate(this.value);
-    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
-    const focusedMonth = this.focusedDay.getMonth();
-    const focusedYear = this.focusedDay.getFullYear();
-    const text = i18n[this.language];
-    const minDate = parseISODate(this.min);
-    const maxDate = parseISODate(this.max);
-    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-    let minYear = selectedYear - this.incrementYears;
-    let maxYear = selectedYear + this.incrementYears;
-    if (minDate) {
-      minYear = Math.max(minYear, minDate.getFullYear());
+    /**
+     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+     */
+    async setFocus(options) {
+        this.datePickerInput.setFocus(options);
     }
-    if (maxDate) {
-      maxYear = Math.min(maxYear, maxDate.getFullYear());
+    /**
+     * Show the calendar modal, moving focus to the calendar inside.
+     */
+    async show() {
+        this.open = true;
+        this.focusTarget = "month-select";
+        this.setFocusedDay(parseISODate(this.value) || new Date());
     }
-    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", { accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, 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",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "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": "Adds a unique identifier for the date picker input."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "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": "\"\""
-      },
-      "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
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
-            }
-          }
-        },
-        "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": true,
-        "defaultValue": "getLanguage()"
-      },
-      "placeholderDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "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": true,
-        "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 | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines a specific role attribute for the date picker input."
-        },
-        "attribute": "role",
-        "reflect": false
-      },
-      "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
-      },
-      "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
-      },
-      "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
-      },
-      "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": {
-        "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"
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetDatePickerDirection",
-          "resolved": "\"left\" | \"right\"",
-          "references": {
-            "DuetDatePickerDirection": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
-              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerDirection"
-            }
-          }
-        },
-        "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": "Tooltip to display next to the label of the date picker input."
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "tooltipDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTooltipDirection",
-          "resolved": "\"auto\" | \"left\" | \"right\"",
-          "references": {
-            "DuetTooltipDirection": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTooltipDirection"
-            }
-          }
-        },
-        "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."
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "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": "\"\""
-      },
-      "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"
-      },
-      "validity": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "ValidityState",
-          "resolved": "ValidityState",
-          "references": {
-            "ValidityState": {
-              "location": "global",
-              "id": "global::ValidityState"
-            }
-          }
-        },
-        "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**."
+    /**
+     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
+     * returning to the date picker's button. Default is true.
+     */
+    async hide(moveFocusToButton = true) {
+        this.open = false;
+        if (moveFocusToButton) {
+            this.focusTarget = "toggle-button";
         }
-      }
-    };
-  }
-  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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
-              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerChangeEvent"
-            }
-          }
+    }
+    addDays(days) {
+        this.setFocusedDay(addDays(this.focusedDay, days));
+    }
+    addMonths(months) {
+        this.setMonth(this.focusedDay.getMonth() + months);
+    }
+    addYears(years) {
+        this.setYear(this.focusedDay.getFullYear() + years);
+    }
+    startOfWeek() {
+        this.setFocusedDay(startOfWeek(this.focusedDay));
+    }
+    endOfWeek() {
+        this.setFocusedDay(endOfWeek(this.focusedDay));
+    }
+    setMonth(month) {
+        const min = setMonth(startOfMonth(this.focusedDay), month);
+        const max = endOfMonth(min);
+        const date = setMonth(this.focusedDay, month);
+        this.setFocusedDay(clamp(date, min, max));
+    }
+    setYear(year) {
+        const min = setYear(startOfMonth(this.focusedDay), year);
+        const max = endOfMonth(min);
+        const date = setYear(this.focusedDay, year);
+        this.setFocusedDay(clamp(date, min, max));
+    }
+    setFocusedDay(day) {
+        this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
+    }
+    determineValidity(date) {
+        var _a, _b;
+        const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+        const badInput = inputValue !== "" && date == null;
+        const valueMissing = this.required && date == null;
+        const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
+        const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
+        this.validity = {
+            patternMismatch: false,
+            customError: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing,
+            badInput,
+            rangeUnderflow,
+            rangeOverflow,
+            valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
+        };
+    }
+    setValue(date) {
+        const newValue = printISODate(date);
+        if (newValue === this.value) {
+            return;
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
-              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
-            }
-          }
+        this.value = newValue;
+        this.duetChange.emit({
+            component: "duet-date-picker",
+            value: this.value,
+            valueAsDate: date,
+        });
+    }
+    handleDocumentClick(e) {
+        if (!this.open) {
+            return;
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
-              "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
-            }
-          }
+        // the dialog and the button aren't considered clicks outside.
+        // dialog for obvious reasons, but the button needs to be skipped
+        // so that two things are possible:
+        //
+        // a) clicking again on the button when dialog is open should close the modal.
+        //    without skipping the button here, we would see a click outside
+        //    _and_ a click on the button, so the `open` state goes
+        //    open -> close (click outside) -> open (click button)
+        //
+        // b) clicking another date picker's button should close the current calendar
+        //    and open the new one. this means we can't stopPropagation() on the button itself
+        const isClickOutside = e
+            .composedPath()
+            .every(node => node !== this.dialogWrapperNode && node !== this.datePickerButton);
+        if (isClickOutside) {
+            this.hide(false);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
-          "tags": []
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        if (Build.isServer) {
+            return;
         }
-      },
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show the calendar modal, moving focus to the calendar inside.",
-          "tags": []
+        const valueAsDate = parseISODate(this.value);
+        const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+        const focusedMonth = this.focusedDay.getMonth();
+        const focusedYear = this.focusedDay.getFullYear();
+        const text = i18n[this.language];
+        const minDate = parseISODate(this.min);
+        const maxDate = parseISODate(this.max);
+        const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+        const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+        let minYear = selectedYear - this.incrementYears;
+        let maxYear = selectedYear + this.incrementYears;
+        if (minDate) {
+            minYear = Math.max(minYear, minDate.getFullYear());
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "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": []
+        if (maxDate) {
+            maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-      }
-    };
-  }
-  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
-      }];
-  }
+        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", { accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, 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",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "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": "Adds a unique identifier for the date picker input."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "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": "\"\""
+            },
+            "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
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "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": true,
+                "defaultValue": "getLanguage()"
+            },
+            "placeholderDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "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": true,
+                "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 | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a specific role attribute for the date picker input."
+                },
+                "attribute": "role",
+                "reflect": false
+            },
+            "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
+            },
+            "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
+            },
+            "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
+            },
+            "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": {
+                "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"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetDatePickerDirection",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "DuetDatePickerDirection": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerDirection"
+                        }
+                    }
+                },
+                "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": "Tooltip to display next to the label of the date picker input."
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "tooltipDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTooltipDirection",
+                    "resolved": "\"auto\" | \"left\" | \"right\"",
+                    "references": {
+                        "DuetTooltipDirection": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTooltipDirection"
+                        }
+                    }
+                },
+                "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."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "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": "\"\""
+            },
+            "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"
+            },
+            "validity": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                },
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-date-picker/duet-date-picker.tsx",
+                            "id": "src/components/duet-date-picker/duet-date-picker.tsx::DuetDatePickerFocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show the calendar modal, moving focus to the calendar inside.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "moveFocusToButton",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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": []
+                }
+            }
+        };
+    }
+    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
+            }];
+    }
 }