@duetds/components 8.0.6 → 8.1.0

package/lib/dist-custom-elements/duet-date-picker.js

@@ -1,145 +1,145 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-7247d0b2.js';
-import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { c as createID } from './p-45f71a69.js';
-import { F as FocusGuard } from './p-c5032d3a.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-6f7dcc4d.js';
+import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { c as createID } from './p-5e59e970.js';
+import { F as FocusGuard } from './p-eef66341.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
 import { h } from './p-62c7d9d4.js';
-import { d as defineCustomElement$c } from './p-fe8a2205.js';
-import { d as defineCustomElement$b } from './p-2b1a35cd.js';
-import { d as defineCustomElement$a } from './p-e77f7fff.js';
-import { d as defineCustomElement$9 } from './p-180c0d2d.js';
-import { d as defineCustomElement$8 } from './p-4687ca41.js';
-import { d as defineCustomElement$7 } from './p-ba870310.js';
-import { d as defineCustomElement$6 } from './p-bcfb9e03.js';
-import { d as defineCustomElement$5 } from './p-e6b07569.js';
-import { d as defineCustomElement$4 } from './p-fd4877d1.js';
-import { d as defineCustomElement$3 } from './p-e4355989.js';
-import { d as defineCustomElement$2 } from './p-62e68de8.js';
+import { d as defineCustomElement$c } from './p-402e81c0.js';
+import { d as defineCustomElement$b } from './p-5fe36e8b.js';
+import { d as defineCustomElement$a } from './p-98746766.js';
+import { d as defineCustomElement$9 } from './p-76b345c8.js';
+import { d as defineCustomElement$8 } from './p-86649f25.js';
+import { d as defineCustomElement$7 } from './p-ba9ad148.js';
+import { d as defineCustomElement$6 } from './p-d5fc2405.js';
+import { d as defineCustomElement$5 } from './p-f91cddd9.js';
+import { d as defineCustomElement$4 } from './p-0825cbc5.js';
+import { d as defineCustomElement$3 } from './p-ce1cc5ab.js';
+import { d as defineCustomElement$2 } from './p-d5f3b174.js';
 
 const formatOptionsShort = { day: "numeric", month: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n = {
-  fi: {
-    buttonLabel: "Valitse päivämäärä",
-    prevMonthLabel: "Edellinen kuukausi",
-    nextMonthLabel: "Seuraava kuukausi",
-    monthSelectLabel: "Kuukausi",
-    yearSelectLabel: "Vuosi",
-    closeLabel: "Sulje ikkuna",
-    selected: "Valittu päivämäärä on",
-    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-    monthLabels: [
-      "Tammikuu",
-      "Helmikuu",
-      "Maaliskuu",
-      "Huhtikuu",
-      "Toukokuu",
-      "Kesäkuu",
-      "Heinäkuu",
-      "Elokuu",
-      "Syyskuu",
-      "Lokakuu",
-      "Marraskuu",
-      "Joulukuu",
-    ],
-    monthLabelsShort: [
-      "Tammi",
-      "Helmi",
-      "Maalis",
-      "Huhti",
-      "Touko",
-      "Kesä",
-      "Heinä",
-      "Elo",
-      "Syys",
-      "Loka",
-      "Marras",
-      "Joulu",
-    ],
-    formatterShort: new Intl.DateTimeFormat("fi-FI", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("fi-FI", formatOptionsLong),
-  },
-  en: {
-    buttonLabel: "Choose date",
-    prevMonthLabel: "Previous month",
-    nextMonthLabel: "Next month",
-    monthSelectLabel: "Month",
-    yearSelectLabel: "Year",
-    closeLabel: "Close window",
-    selected: "Selected date is",
-    keyboardInstruction: "You can use arrow keys to navigate dates",
-    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-    monthLabels: [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
-    ],
-    monthLabelsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-    formatterShort: new Intl.DateTimeFormat("en-GB", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("en-GB", formatOptionsLong),
-  },
-  sv: {
-    buttonLabel: "Välj datum",
-    prevMonthLabel: "Föregående månad",
-    nextMonthLabel: "Nästa månad",
-    monthSelectLabel: "Månad",
-    yearSelectLabel: "År",
-    closeLabel: "Stäng fönstret",
-    selected: "Valt datum är",
-    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-    monthLabels: [
-      "Januari",
-      "Februari",
-      "Mars",
-      "April",
-      "Maj",
-      "Juni",
-      "Juli",
-      "Augusti",
-      "September",
-      "Oktober",
-      "November",
-      "December",
-    ],
-    monthLabelsShort: ["Jan", "Feb", "Mars", "April", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"],
-    formatterShort: new Intl.DateTimeFormat("sv-SE", formatOptionsShort),
-    formatterLong: new Intl.DateTimeFormat("sv-SE", formatOptionsLong),
-  },
+    fi: {
+        buttonLabel: "Valitse päivämäärä",
+        prevMonthLabel: "Edellinen kuukausi",
+        nextMonthLabel: "Seuraava kuukausi",
+        monthSelectLabel: "Kuukausi",
+        yearSelectLabel: "Vuosi",
+        closeLabel: "Sulje ikkuna",
+        selected: "Valittu päivämäärä on",
+        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+        monthLabels: [
+            "Tammikuu",
+            "Helmikuu",
+            "Maaliskuu",
+            "Huhtikuu",
+            "Toukokuu",
+            "Kesäkuu",
+            "Heinäkuu",
+            "Elokuu",
+            "Syyskuu",
+            "Lokakuu",
+            "Marraskuu",
+            "Joulukuu",
+        ],
+        monthLabelsShort: [
+            "Tammi",
+            "Helmi",
+            "Maalis",
+            "Huhti",
+            "Touko",
+            "Kesä",
+            "Heinä",
+            "Elo",
+            "Syys",
+            "Loka",
+            "Marras",
+            "Joulu",
+        ],
+        formatterShort: new Intl.DateTimeFormat("fi-FI", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("fi-FI", formatOptionsLong),
+    },
+    en: {
+        buttonLabel: "Choose date",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        monthSelectLabel: "Month",
+        yearSelectLabel: "Year",
+        closeLabel: "Close window",
+        selected: "Selected date is",
+        keyboardInstruction: "You can use arrow keys to navigate dates",
+        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+        monthLabels: [
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December",
+        ],
+        monthLabelsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        formatterShort: new Intl.DateTimeFormat("en-GB", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("en-GB", formatOptionsLong),
+    },
+    sv: {
+        buttonLabel: "Välj datum",
+        prevMonthLabel: "Föregående månad",
+        nextMonthLabel: "Nästa månad",
+        monthSelectLabel: "Månad",
+        yearSelectLabel: "År",
+        closeLabel: "Stäng fönstret",
+        selected: "Valt datum är",
+        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+        monthLabels: [
+            "Januari",
+            "Februari",
+            "Mars",
+            "April",
+            "Maj",
+            "Juni",
+            "Juli",
+            "Augusti",
+            "September",
+            "Oktober",
+            "November",
+            "December",
+        ],
+        monthLabelsShort: ["Jan", "Feb", "Mars", "April", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"],
+        formatterShort: new Intl.DateTimeFormat("sv-SE", formatOptionsShort),
+        formatterLong: new Intl.DateTimeFormat("sv-SE", formatOptionsLong),
+    },
 };
 
 var formDate={"title":"form-date","tags":"form date calendar date picker","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M2.25 24A2.252 2.252 0 0 1 0 21.75V5.25A2.252 2.252 0 0 1 2.25 3H6V.75a.75.75 0 0 1 1.5 0V3h9V.75a.75.75 0 0 1 1.5 0V3h3.75A2.252 2.252 0 0 1 24 5.25v16.5A2.252 2.252 0 0 1 21.75 24zm-.75-2.25c0 .414.336.75.75.75h19.5a.75.75 0 0 0 .75-.75V10.5h-21zM22.5 9V5.25a.75.75 0 0 0-.75-.75H18V6a.75.75 0 0 1-1.5 0V4.5h-9V6A.75.75 0 0 1 6 6V4.5H2.25a.75.75 0 0 0-.75.75V9z\"/><circle cx=\"5.625\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"5.625\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"12\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"12\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"18.375\" cy=\"13.875\" r=\"1.125\"/><path d=\"M18.375 20.25c-.62 0-1.125-.505-1.125-1.125a1.127 1.127 0 0 1 1.171-1.122l.027.003a1.118 1.118 0 0 1 1.052 1.12c0 .619-.505 1.124-1.125 1.124z\"/></svg>"};
 
 const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, echoPlaceholder, caption, }) => {
-  const { buttonLabel, selected, formatterLong } = i18n[language];
-  return (h("div", { class: {
-      "duet-theme-turva": theme === "turva",
-      "duet-date-input": true,
-    } },
-    h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption },
-      h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
-        h("duet-icon", { icon: formDate.svg, margin: "none", size: "small", color: "currentColor" }),
-        h("duet-visually-hidden", null,
-          buttonLabel,
-          valueAsDate && (h("span", null,
-            ", ",
-            selected,
-            " ",
-            formatterLong.format(valueAsDate)))))),
-    h("input", { type: "hidden", name: name, value: value })));
+    const { buttonLabel, selected, formatterLong } = i18n[language];
+    return (h("div", { class: {
+            "duet-theme-turva": theme === "turva",
+            "duet-date-input": true,
+        } },
+        h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption },
+            h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+                h("duet-icon", { icon: formDate.svg, margin: "none", size: "small", color: "currentColor" }),
+                h("duet-visually-hidden", null,
+                    buttonLabel,
+                    valueAsDate && (h("span", null,
+                        ", ",
+                        selected,
+                        " ",
+                        formatterLong.format(valueAsDate)))))),
+        h("input", { type: "hidden", name: name, value: value })));
 };
 
 const DATE_FORMAT = /^(\d{1,2})[\.\-\/](\d{1,2})[\.\-\/](\d{4})$/;
@@ -147,142 +147,142 @@ const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
 const DATE_OUTPUT_FORMAT = "dd.mm.yyyy";
 const DATE_ISO_OUTPUT_FORMAT = "YYYY-MM-DD";
 function createDate(year, month, day) {
-  var dayInt = parseInt(day, 10);
-  var monthInt = parseInt(month, 10);
-  var yearInt = parseInt(year, 10);
-  const isValid = Number.isInteger(yearInt) && // all parts should be integers
-    Number.isInteger(monthInt) &&
-    Number.isInteger(dayInt) &&
-    monthInt > 0 && // month must be 1-12
-    monthInt <= 12 &&
-    dayInt > 0 && // day must be 1-31
-    dayInt <= 31 &&
-    yearInt > 0;
-  if (isValid) {
-    return new Date(yearInt, monthInt - 1, dayInt);
-  }
+    var dayInt = parseInt(day, 10);
+    var monthInt = parseInt(month, 10);
+    var yearInt = parseInt(year, 10);
+    const isValid = Number.isInteger(yearInt) && // all parts should be integers
+        Number.isInteger(monthInt) &&
+        Number.isInteger(dayInt) &&
+        monthInt > 0 && // month must be 1-12
+        monthInt <= 12 &&
+        dayInt > 0 && // day must be 1-31
+        dayInt <= 31 &&
+        yearInt > 0;
+    if (isValid) {
+        return new Date(yearInt, monthInt - 1, dayInt);
+    }
 }
 /**
  * @param value date string in format dd.mm.yyyy
  */
 function parseDate(value) {
-  if (!value) {
-    return;
-  }
-  const matches = value.match(DATE_FORMAT);
-  if (matches) {
-    return createDate(matches[3], matches[2], matches[1]);
-  }
+    if (!value) {
+        return;
+    }
+    const matches = value.match(DATE_FORMAT);
+    if (matches) {
+        return createDate(matches[3], matches[2], matches[1]);
+    }
 }
 /**
  * @param value date string in ISO format YYYY-MM-DD
  */
 function parseISODate(value) {
-  if (!value) {
-    return;
-  }
-  const matches = value.match(ISO_DATE_FORMAT);
-  if (matches) {
-    return createDate(matches[1], matches[2], matches[3]);
-  }
+    if (!value) {
+        return;
+    }
+    const matches = value.match(ISO_DATE_FORMAT);
+    if (matches) {
+        return createDate(matches[1], matches[2], matches[3]);
+    }
 }
 /**
  * @param date the date to format as a Date
  * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
  */
 function formatDate(date, format) {
-  if (!date) {
-    return "";
-  }
-  var d = date.getDate().toString(10);
-  var m = (date.getMonth() + 1).toString(10);
-  var y = date.getFullYear().toString(10);
-  // days are not zero-indexed, so pad if less than 10
-  if (date.getDate() < 10) {
-    d = `0${d}`;
-  }
-  // months *are* zero-indexed, pad if less than 9!
-  if (date.getMonth() < 9) {
-    m = `0${m}`;
-  }
-  return format.replace(/MM/i, m).replace(/YYYY/i, y).replace(/DD/i, d);
+    if (!date) {
+        return "";
+    }
+    var d = date.getDate().toString(10);
+    var m = (date.getMonth() + 1).toString(10);
+    var y = date.getFullYear().toString(10);
+    // days are not zero-indexed, so pad if less than 10
+    if (date.getDate() < 10) {
+        d = `0${d}`;
+    }
+    // months *are* zero-indexed, pad if less than 9!
+    if (date.getMonth() < 9) {
+        m = `0${m}`;
+    }
+    return format.replace(/MM/i, m).replace(/YYYY/i, y).replace(/DD/i, d);
 }
 /**
  * print date in format dd.mm.yyyy
  * @param date
  */
 function printDate(date) {
-  return formatDate(date, DATE_OUTPUT_FORMAT);
+    return formatDate(date, DATE_OUTPUT_FORMAT);
 }
 /**
  * print date in format YYYY-MM-DD
  * @param date
  */
 function printISODate(date) {
-  return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
+    return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
 }
 /**
  * Compare if two dates are equal in terms of day, month, and year
  */
 function isEqual(a, b) {
-  if (a == null || b == null) {
-    return false;
-  }
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    if (a == null || b == null) {
+        return false;
+    }
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 function addDays(date, days) {
-  var d = new Date(date);
-  d.setDate(d.getDate() + days);
-  return d;
+    var d = new Date(date);
+    d.setDate(d.getDate() + days);
+    return d;
 }
 function startOfWeek(date, firstDayOfWeek = 1) {
-  var d = new Date(date);
-  var day = d.getDay();
-  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
-  d.setDate(d.getDate() - diff);
-  return d;
+    var d = new Date(date);
+    var day = d.getDay();
+    var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+    d.setDate(d.getDate() - diff);
+    return d;
 }
 function endOfWeek(date, firstDayOfWeek = 1) {
-  var d = new Date(date);
-  var day = d.getDay();
-  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
-  d.setDate(d.getDate() + diff);
-  return d;
+    var d = new Date(date);
+    var day = d.getDay();
+    var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
+    d.setDate(d.getDate() + diff);
+    return d;
 }
 function startOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1);
+    return new Date(date.getFullYear(), date.getMonth(), 1);
 }
 function endOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }
 function setMonth(date, month) {
-  const d = new Date(date);
-  d.setMonth(month);
-  return d;
+    const d = new Date(date);
+    d.setMonth(month);
+    return d;
 }
 function setYear(date, year) {
-  const d = new Date(date);
-  d.setFullYear(year);
-  return d;
+    const d = new Date(date);
+    d.setFullYear(year);
+    return d;
 }
 /**
  * Check if date is within a min and max
  */
 function inRange(date, min, max) {
-  return clamp(date, min, max) === date;
+    return clamp(date, min, max) === date;
 }
 /**
  * Ensures date is within range, returns min or max if out of bounds
  */
 function clamp(date, min, max) {
-  const time = date.getTime();
-  if (min && min instanceof Date && time < min.getTime()) {
-    return min;
-  }
-  if (max && max instanceof Date && time > max.getTime()) {
-    return max;
-  }
-  return date;
+    const time = date.getTime();
+    if (min && min instanceof Date && time < min.getTime()) {
+        return min;
+    }
+    if (max && max instanceof Date && time > max.getTime()) {
+        return max;
+    }
+    return date;
 }
 /**
  * given start and end date, return an (inclusive) array of all dates in between
@@ -290,14 +290,14 @@ function clamp(date, min, max) {
  * @param end
  */
 function getDaysInRange(start, end) {
-  const days = [];
-  let current = start;
-  while (!isEqual(current, end)) {
+    const days = [];
+    let current = start;
+    while (!isEqual(current, end)) {
+        days.push(current);
+        current = addDays(current, 1);
+    }
     days.push(current);
-    current = addDays(current, 1);
-  }
-  days.push(current);
-  return days;
+    return days;
 }
 /**
  * given a date, return an array of dates from a calendar perspective
@@ -305,23 +305,23 @@ function getDaysInRange(start, end) {
  * @param firstDayOfWeek
  */
 function getViewOfMonth(date, firstDayOfWeek = 1) {
-  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
-  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
-  return getDaysInRange(start, end);
+    const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
+    const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
+    return getDaysInRange(start, end);
 }
 
 const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
-  const isToday = isEqual(day, today);
-  const isFocused = isEqual(day, focusedDay);
-  const isDisabled = day.getMonth() !== focusedDay.getMonth();
-  const isOutsideRange = !inRange;
-  const { formatterShort } = i18n[language];
-  function handleClick(e) {
-    onDaySelect(e, day);
-  }
-  return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref },
-    h("span", { "aria-hidden": "true" }, day.getDate()),
-    h("duet-visually-hidden", null, formatterShort.format(day))));
+    const isToday = isEqual(day, today);
+    const isFocused = isEqual(day, focusedDay);
+    const isDisabled = day.getMonth() !== focusedDay.getMonth();
+    const isOutsideRange = !inRange;
+    const { formatterShort } = i18n[language];
+    function handleClick(e) {
+        onDaySelect(e, day);
+    }
+    return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref },
+        h("span", { "aria-hidden": "true" }, day.getDate()),
+        h("duet-visually-hidden", null, formatterShort.format(day))));
 };
 
 /**
@@ -331,11 +331,11 @@ const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboa
  * @param to
  */
 function range(from, to) {
-  var result = [];
-  for (var i = from; i <= to; i++) {
-    result.push(i);
-  }
-  return result;
+    var result = [];
+    for (var i = from; i <= to; i++) {
+        result.push(i);
+    }
+    return result;
 }
 /**
  * Splits an array into smaller arrays of given chunk size
@@ -343,17 +343,17 @@ function range(from, to) {
  * @param chunkSize
  */
 function chunk(array, chunkSize) {
-  const result = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    result.push(array.slice(i, i + chunkSize));
-  }
-  return result;
+    const result = [];
+    for (let i = 0; i < array.length; i += chunkSize) {
+        result.push(array.slice(i, i + chunkSize));
+    }
+    return result;
 }
 function parseShortcut(str) {
-  var _a;
-  const press = str.trim().split("+");
-  const key = press.pop();
-  return [((_a = press[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "shift", key];
+    var _a;
+    const press = str.trim().split("+");
+    const key = press.pop();
+    return [((_a = press[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "shift", key];
 }
 /**
  * Creates a keyboard event handler for handling keyboard shortcuts.
@@ -366,502 +366,502 @@ function parseShortcut(str) {
  * }))
  */
 function createShortcuts(shortcuts) {
-  const keyBindings = Object.keys(shortcuts).map(key => [parseShortcut(key), shortcuts[key]]);
-  return function handleShortcuts(event) {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
-    // we need to check both event.code and event.key
-    // for browser support back to IE11
-    const shortcut = keyBindings.find(([[shift, key]]) => {
-      return (key.toUpperCase() === event.key.toUpperCase() || key === event.code) && shift === event.shiftKey;
-    });
-    if (shortcut) {
-      shortcut[1](event);
-      event.preventDefault();
-    }
-  };
+    const keyBindings = Object.keys(shortcuts).map(key => [parseShortcut(key), shortcuts[key]]);
+    return function handleShortcuts(event) {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        // we need to check both event.code and event.key
+        // for browser support back to IE11
+        const shortcut = keyBindings.find(([[shift, key]]) => {
+            return (key.toUpperCase() === event.key.toUpperCase() || key === event.code) && shift === event.shiftKey;
+        });
+        if (shortcut) {
+            shortcut[1](event);
+            event.preventDefault();
+        }
+    };
 }
 
 const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
-  const { dayLabels } = i18n[language];
-  const today = new Date();
-  const days = getViewOfMonth(focusedDate);
-  function handleFocusOut(e) {
-    const table = e.currentTarget;
-    const relatedTarget = e.relatedTarget;
-    if (relatedTarget && !table.contains(relatedTarget)) {
-      onFocusExit(e);
-    }
-  }
-  return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById, 
-    // @ts-ignore
-    onFocusin: onFocusEnter, onFocusout: handleFocusOut },
-    h("thead", null,
-      h("tr", null, dayLabels.map(label => (h("th", { scope: "col" },
-        h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
-        h("duet-visually-hidden", null, label)))))),
-    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" },
-      h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
-          if (el && isEqual(day, focusedDate)) {
-            focusedDayRef(el);
-          }
-        } }))))))))));
+    const { dayLabels } = i18n[language];
+    const today = new Date();
+    const days = getViewOfMonth(focusedDate);
+    function handleFocusOut(e) {
+        const table = e.currentTarget;
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget && !table.contains(relatedTarget)) {
+            onFocusExit(e);
+        }
+    }
+    return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById, 
+        // @ts-ignore
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut },
+        h("thead", null,
+            h("tr", null, dayLabels.map(label => (h("th", { scope: "col" },
+                h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+                h("duet-visually-hidden", null, label)))))),
+        h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" },
+            h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+                    if (el && isEqual(day, focusedDate)) {
+                        focusedDayRef(el);
+                    }
+                } }))))))))));
 };
 
 const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;display:flex;align-items:center;justify-content:center;width:48px;height:calc(100% - 2px);color:rgb(0, 41, 77);cursor:pointer;background:transparent !important;border-left:1px solid rgb(207, 210, 212) !important;border-radius:0 4px 4px 0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:rgb(23, 28, 58);border-color:rgb(207, 207, 209)}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:not-allowed;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:rgb(245, 245, 247) !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-button.sc-duet-date-picker:focus{color:rgb(0, 119, 179);border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;background:rgba(0, 41, 77, 0.75);transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}.duet-date-dialog.duet-theme-turva.sc-duet-date-picker{background:rgba(23, 28, 58, 0.75)}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(225, 227, 230);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:rgb(228, 228, 230)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25 !important;color:rgb(0, 41, 77) !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button.sc-duet-date-picker:hover{background:rgb(230, 242, 248) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:rgb(249, 230, 234) !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:rgb(0, 77, 128) !important;background:rgb(243, 249, 252) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:rgb(148, 9, 37) !important;background:rgb(252, 243, 244) !important;box-shadow:0 0 0 1px #171c3a !important}.duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-date-table-button.sc-duet-date-picker:focus{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;outline:0}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important;box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.sc-duet-date-picker:focus{z-index:200;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(144, 149, 153) !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(116, 116, 117) !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:rgb(144, 149, 153) !important;pointer-events:none;cursor:default;background:rgb(245, 248, 250) !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:rgb(116, 116, 117);background:rgb(245, 245, 247);box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker .sc-duet-date-picker::part(button){border:0}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77);pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(207, 210, 212)}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:rgb(207, 207, 209)}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(0, 41, 77) !important;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:rgb(245, 245, 247) !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 245, 247) !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a !important}";
 
 const DuetDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DuetDatePicker extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.duetChange = createEvent(this, "duetChange", 7);
-    this.duetBlur = createEvent(this, "duetBlur", 7);
-    this.duetFocus = createEvent(this, "duetFocus", 7);
-    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 = "";
-    }
-    // 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);
-    }
-  }
-  /**
-   * 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();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.duetChange = createEvent(this, "duetChange", 7);
+        this.duetBlur = createEvent(this, "duetBlur", 7);
+        this.duetFocus = createEvent(this, "duetFocus", 7);
+        this.monthSelectId = createID("DuetDatePicker");
+        this.yearSelectId = createID("DuetDatePicker");
+        this.dialogLabelId = createID("DuetDatePicker");
+        this.initialTouchX = null;
+        this.initialTouchY = null;
         this.focusTarget = null;
-        break;
-    }
-  }
-  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";
-    }
-  }
-  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;
-    }
-    this.value = newValue;
-    this.duetChange.emit({
-      component: "duet-date-picker",
-      value: this.value,
-      valueAsDate: date,
-    });
-  }
-  handleDocumentClick(e) {
-    if (!this.open) {
-      return;
-    }
-    // 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);
-    }
-  }
-  /**
-   * 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());
-    }
-    if (maxDate) {
-      maxYear = Math.min(maxYear, maxDate.getFullYear());
-    }
-    return (h$1(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h$1("div", { class: "duet-date" }, h$1(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$1("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$1(FocusGuard, { moveFocusTo: this.focusedDayNode }), h$1("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { class: "duet-date-dialog-mobile-header" }, h$1("duet-label", { margin: "none" }, this.label), h$1("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", null, text.closeLabel))), h$1("div", { class: "duet-date-dialog-header" }, h$1("div", { class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", null, h$1("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h$1("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$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h$1("option", { key: year, selected: year === focusedYear }, year)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, this.focusedDay.getFullYear()), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { class: "duet-date-dialog-buttons" }, h$1("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$1("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$1(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$1(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "min": ["updateValidity"],
-    "max": ["updateValidity"],
-    "value": ["updateValidity", "updateInternalValue"],
-    "required": ["updateValidity"]
-  }; }
-  static get style() { return duetDatePickerCss; }
+        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;
+    }
+    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 = "";
+        }
+        // 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);
+        }
+    }
+    /**
+     * 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;
+        }
+    }
+    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";
+        }
+    }
+    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;
+        }
+        this.value = newValue;
+        this.duetChange.emit({
+            component: "duet-date-picker",
+            value: this.value,
+            valueAsDate: date,
+        });
+    }
+    handleDocumentClick(e) {
+        if (!this.open) {
+            return;
+        }
+        // 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);
+        }
+    }
+    /**
+     * 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());
+        }
+        if (maxDate) {
+            maxYear = Math.min(maxYear, maxDate.getFullYear());
+        }
+        return (h$1(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h$1("div", { class: "duet-date" }, h$1(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$1("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$1(FocusGuard, { moveFocusTo: this.focusedDayNode }), h$1("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { class: "duet-date-dialog-mobile-header" }, h$1("duet-label", { margin: "none" }, this.label), h$1("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", null, text.closeLabel))), h$1("div", { class: "duet-date-dialog-header" }, h$1("div", { class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", null, h$1("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h$1("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$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h$1("option", { key: year, selected: year === focusedYear }, year)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, this.focusedDay.getFullYear()), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { class: "duet-date-dialog-buttons" }, h$1("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$1("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$1(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$1(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "min": ["updateValidity"],
+        "max": ["updateValidity"],
+        "value": ["updateValidity", "updateInternalValue"],
+        "required": ["updateValidity"]
+    }; }
+    static get style() { return duetDatePickerCss; }
 }, [2, "duet-date-picker", {
-    "theme": [1025],
-    "expand": [4],
-    "name": [1],
-    "identifier": [1],
-    "label": [1],
-    "caption": [1],
-    "margin": [1],
-    "language": [1537],
-    "placeholderDefaults": [1, "placeholder-default"],
-    "placeholder": [1025],
-    "echoPlaceholder": [1540, "echo-placeholder"],
-    "disabled": [516],
-    "error": [1],
-    "labelHidden": [4, "label-hidden"],
-    "role": [1],
-    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-    "accessibleControls": [1, "accessible-controls"],
-    "accessibleOwns": [1, "accessible-owns"],
-    "accessibleDescribedBy": [1, "accessible-described-by"],
-    "required": [4],
-    "direction": [1],
-    "tooltip": [1],
-    "tooltipDirection": [1, "tooltip-direction"],
-    "value": [1537],
-    "min": [1],
-    "max": [1],
-    "incrementYears": [2, "increment"],
-    "validity": [1040],
-    "open": [32],
-    "focusedDay": [32],
-    "inputValue": [32],
-    "setFocus": [64],
-    "show": [64],
-    "hide": [64]
-  }, [[4, "click", "handleDocumentClick"]], {
-    "min": ["updateValidity"],
-    "max": ["updateValidity"],
-    "value": ["updateValidity", "updateInternalValue"],
-    "required": ["updateValidity"]
-  }]);
+        "theme": [1025],
+        "expand": [4],
+        "name": [1],
+        "identifier": [1],
+        "label": [1],
+        "caption": [1],
+        "margin": [1],
+        "language": [1537],
+        "placeholderDefaults": [1, "placeholder-default"],
+        "placeholder": [1025],
+        "echoPlaceholder": [1540, "echo-placeholder"],
+        "disabled": [516],
+        "error": [1],
+        "labelHidden": [4, "label-hidden"],
+        "role": [1],
+        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+        "accessibleControls": [1, "accessible-controls"],
+        "accessibleOwns": [1, "accessible-owns"],
+        "accessibleDescribedBy": [1, "accessible-described-by"],
+        "required": [4],
+        "direction": [1],
+        "tooltip": [1],
+        "tooltipDirection": [1, "tooltip-direction"],
+        "value": [1537],
+        "min": [1],
+        "max": [1],
+        "incrementYears": [2, "increment"],
+        "validity": [1040],
+        "open": [32],
+        "focusedDay": [32],
+        "inputValue": [32],
+        "setFocus": [64],
+        "show": [64],
+        "hide": [64]
+    }, [[4, "click", "handleDocumentClick"]], {
+        "min": ["updateValidity"],
+        "max": ["updateValidity"],
+        "value": ["updateValidity", "updateInternalValue"],
+        "required": ["updateValidity"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["duet-date-picker", "duet-action-button", "duet-button", "duet-caption", "duet-icon", "duet-input", "duet-label", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-  components.forEach(tagName => { switch (tagName) {
-    case "duet-date-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DuetDatePicker$1);
-      }
-      break;
-    case "duet-action-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "duet-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "duet-caption":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "duet-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "duet-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "duet-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "duet-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "duet-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "duet-tooltip-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "duet-tooltip-popup":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "duet-visually-hidden":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["duet-date-picker", "duet-action-button", "duet-button", "duet-caption", "duet-icon", "duet-input", "duet-label", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "duet-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DuetDatePicker$1);
+            }
+            break;
+        case "duet-action-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "duet-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "duet-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "duet-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "duet-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "duet-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "duet-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "duet-tooltip-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "duet-tooltip-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const DuetDatePicker = DuetDatePicker$1;