@duetds/date-picker - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

custom-element/index.js

@@ -5,17 +5,17 @@ import { h, createEvent, Host, proxyCustomElement } from '@stencil/core/internal/client';
 const DatePickerInput = ({ onClick, placeholder, buttonLabel, name, value, identifier, disabled, role, buttonRef, inputRef, onInput, onBlur, onFocus, }) => {
-    return (h("div", { class: "duet-date__input-wrapper" },
-        h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
-        h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
-            h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
-                h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
-                    h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("g", { fill: "currentColor" },
-                        h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
-            h("span", { class: "duet-date__vhidden" }, buttonLabel))));
+  return (h("div", { class: "duet-date__input-wrapper" },
+    h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
+    h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+      h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
+        h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
+          h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("g", { fill: "currentColor" },
+            h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
+      h("span", { class: "duet-date__vhidden" }, buttonLabel))));
 };
@@ -28,16 +28,16 @@
 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);
+  }
 }
@@ -48,9 +48,9 @@ /**
 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]);
+  }
 }
@@ -61,9 +61,9 @@ /**
 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]);
+  }
 }
@@ -75,17 +75,17 @@ /**
 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);
 }
@@ -97,3 +97,3 @@ /**
 function printDate(date) {
-    return formatDate(date, DATE_OUTPUT_FORMAT);
+  return formatDate(date, DATE_OUTPUT_FORMAT);
 }
@@ -105,3 +105,3 @@ /**
 function printISODate(date) {
-    return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
+  return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
 }
@@ -112,41 +112,41 @@ /**
 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;
 }
@@ -157,3 +157,3 @@ /**
 function inRange(date, min, max) {
-    return clamp(date, min, max) === date;
+  return clamp(date, min, max) === date;
 }
@@ -164,10 +164,10 @@ /**
 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;
 }
@@ -180,10 +180,10 @@ /**
 function getDaysInRange(start, end) {
-    const days = [];
-    let current = start;
-    while (!isEqual(current, end)) {
-        days.push(current);
-        current = addDays(current, 1);
-    }
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
     days.push(current);
-    return days;
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
 }
@@ -196,5 +196,5 @@ /**
 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);
 }
@@ -205,3 +205,3 @@ /**
 function chr4() {
-    return Math.random().toString(16).slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
@@ -213,149 +213,149 @@ /**
 function createIdentifier(prefix) {
-    return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
+  return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
 }
 
 const i18n = {
-    en: {
-        locale: "en-GB",
-        buttonLabel: "Choose date",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        monthSelectLabel: "Month",
-        yearSelectLabel: "Year",
-        closeLabel: "Close window",
-        keyboardInstruction: "You can use arrow keys to navigate dates",
-        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-        calendarHeading: "Choose a date",
-        placeholder: "dd.mm.yyyy",
-        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"],
-    },
-    fi: {
-        locale: "fi-FI",
-        buttonLabel: "Valitse päivämäärä",
-        prevMonthLabel: "Edellinen kuukausi",
-        nextMonthLabel: "Seuraava kuukausi",
-        monthSelectLabel: "Kuukausi",
-        yearSelectLabel: "Vuosi",
-        closeLabel: "Sulje ikkuna",
-        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-        placeholder: "pp.kk.vvvv",
-        calendarHeading: "Valitse päivämäärä",
-        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",
-        ],
-    },
-    sv: {
-        locale: "sv-SE",
-        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",
-        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-        placeholder: "dd.mm.åååå",
-        calendarHeading: "Välj datum",
-        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"],
-    },
+  en: {
+    locale: "en-GB",
+    buttonLabel: "Choose date",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    monthSelectLabel: "Month",
+    yearSelectLabel: "Year",
+    closeLabel: "Close window",
+    keyboardInstruction: "You can use arrow keys to navigate dates",
+    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    calendarHeading: "Choose a date",
+    placeholder: "dd.mm.yyyy",
+    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"],
+  },
+  fi: {
+    locale: "fi-FI",
+    buttonLabel: "Valitse päivämäärä",
+    prevMonthLabel: "Edellinen kuukausi",
+    nextMonthLabel: "Seuraava kuukausi",
+    monthSelectLabel: "Kuukausi",
+    yearSelectLabel: "Vuosi",
+    closeLabel: "Sulje ikkuna",
+    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+    placeholder: "pp.kk.vvvv",
+    calendarHeading: "Valitse päivämäärä",
+    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",
+    ],
+  },
+  sv: {
+    locale: "sv-SE",
+    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",
+    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+    placeholder: "dd.mm.åååå",
+    calendarHeading: "Välj datum",
+    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"],
+  },
 };
 
 const DatePickerDay = ({ selectedDay, focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-    const isToday = isEqual(day, today);
-    const isFocused = isEqual(day, focusedDay);
-    const isSelected = isEqual(day, selectedDay);
-    const isDisabled = day.getMonth() !== focusedDay.getMonth();
-    const isOutsideRange = !inRange;
-    const { locale } = i18n[language];
-    function handleClick(e) {
-        onDaySelect(e, day);
-    }
-    return (h("button", { class: {
-            "duet-date__day": true,
-            "is-outside": isOutsideRange,
-            "is-disabled": isDisabled,
-            "is-today": isToday,
-        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
-            if (isFocused && el && focusedDayRef) {
-                focusedDayRef(el);
-            }
-        } },
-        h("span", { "aria-hidden": "true" }, day.getDate()),
-        h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isSelected = isEqual(day, selectedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  const { locale } = i18n[language];
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      "duet-date__day": true,
+      "is-outside": isOutsideRange,
+      "is-disabled": isDisabled,
+      "is-today": isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    h("span", { "aria-hidden": "true" }, day.getDate()),
+    h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
 };
 
 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;
 }
 const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-    const { dayLabels } = i18n[language];
-    const today = new Date();
-    const days = getViewOfMonth(focusedDate);
-    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
-        // @ts-ignore
-        onFocusin: onFocusIn, onMouseDown: onMouseDown },
-        h("thead", null,
-            h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
-                h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
-                h("span", { class: "duet-date__vhidden" }, label)))))),
-        h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
-            h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+  const { dayLabels } = i18n[language];
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate);
+  return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+    h("thead", null,
+      h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
+        h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+        h("span", { class: "duet-date__vhidden" }, label)))))),
+    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
+      h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };
@@ -366,20 +366,20 @@
 function range(from, to) {
-    var result = [];
-    for (var i = 0; i <= to - from; i++) {
-        result.push(from + i);
-    }
-    return result;
+  var result = [];
+  for (var i = 0; i <= to - from; i++) {
+    result.push(from + i);
+  }
+  return result;
 }
 const keyCode = {
-    TAB: 9,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
 };
@@ -389,314 +389,314 @@ const DISALLOWED_CHARACTERS = /[^0-9\.]+/g;
 const DuetDatePicker = class extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.duetChange = createEvent(this, "duetChange", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.monthSelectId = createIdentifier("DuetDateMonth");
-        this.yearSelectId = createIdentifier("DuetDateYear");
-        this.dialogLabelId = createIdentifier("DuetDateLabel");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.activeFocus = false;
-        this.open = false;
-        this.focusedDay = new Date();
-        /**
-         * Name of the date picker input.
-         */
-        this.name = "";
-        /**
-         * Adds a unique identifier for the date picker input.
-         */
-        this.identifier = "";
-        /**
-         * The currently active language. This setting changes the month/year/day
-         * names and button labels as well as all screen reader labels.
-         */
-        this.language = "en";
-        /**
-         * Makes the date picker input component disabled. This prevents users from being able to
-         * interact with the input, and conveys its inactive state to assistive technologies.
-         */
-        this.disabled = false;
-        /**
-         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-         */
-        this.value = "";
-        /**
-         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-         * This setting can be used alone or together with the max property.
-         */
-        this.min = "";
-        /**
-         * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-         * This setting can be used alone or together with the min property.
-         */
-        this.max = "";
-        this.enableActiveFocus = () => {
-            this.activeFocus = true;
-        };
-        this.disableActiveFocus = () => {
-            this.activeFocus = false;
-        };
-        this.toggleOpen = (e) => {
-            e.preventDefault();
-            this.open ? this.hide(false) : this.show();
-        };
-        this.handleEscKey = (event) => {
-            if (event.keyCode === keyCode.ESC) {
-                this.hide();
-            }
-        };
-        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.handleFirstFocusableKeydown = (event) => {
-            // this ensures focus is trapped inside the dialog
-            if (event.keyCode === keyCode.TAB && event.shiftKey) {
-                this.focusedDayNode.focus();
-                event.preventDefault();
-            }
-        };
-        this.handleKeyboardNavigation = (event) => {
-            // handle tab separately, since it needs to be treated
-            // differently to other keyboard interactions
-            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-                event.preventDefault();
-                this.firstFocusableElement.focus();
-                return;
-            }
-            var handled = true;
-            switch (event.keyCode) {
-                case keyCode.RIGHT:
-                    this.addDays(1);
-                    break;
-                case keyCode.LEFT:
-                    this.addDays(-1);
-                    break;
-                case keyCode.DOWN:
-                    this.addDays(7);
-                    break;
-                case keyCode.UP:
-                    this.addDays(-7);
-                    break;
-                case keyCode.PAGE_UP:
-                    if (event.shiftKey) {
-                        this.addYears(-1);
-                    }
-                    else {
-                        this.addMonths(-1);
-                    }
-                    break;
-                case keyCode.PAGE_DOWN:
-                    if (event.shiftKey) {
-                        this.addYears(1);
-                    }
-                    else {
-                        this.addMonths(1);
-                    }
-                    break;
-                case keyCode.HOME:
-                    this.startOfWeek();
-                    break;
-                case keyCode.END:
-                    this.endOfWeek();
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                event.preventDefault();
-                this.enableActiveFocus();
-            }
-        };
-        this.handleDaySelect = (_event, day) => {
-            if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
-                return;
-            }
-            if (day.getMonth() === this.focusedDay.getMonth()) {
-                this.setValue(day);
-                this.hide();
-            }
-            else {
-                this.setFocusedDay(day);
-            }
-        };
-        this.handleMonthSelect = e => {
-            this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = e => {
-            this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = (e) => {
-            const target = e.target;
-            // clean up any invalid characters
-            target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-            const parsed = parseDate(target.value);
-            if (parsed || target.value === "") {
-                this.setValue(parsed);
-            }
-        };
-        this.processFocusedDayNode = (element) => {
-            this.focusedDayNode = element;
-            if (this.activeFocus && this.open) {
-                setTimeout(() => element.focus(), 0);
-            }
-        };
-    }
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.monthSelectId = createIdentifier("DuetDateMonth");
+    this.yearSelectId = createIdentifier("DuetDateYear");
+    this.dialogLabelId = createIdentifier("DuetDateLabel");
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.activeFocus = false;
+    this.open = false;
+    this.focusedDay = new Date();
     /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+     * Name of the date picker input.
      */
-    async setFocus() {
-        return this.datePickerInput.focus();
-    }
+    this.name = "";
     /**
-     * Show the calendar modal, moving focus to the calendar inside.
+     * Adds a unique identifier for the date picker input.
      */
-    async show() {
-        this.open = true;
-        this.setFocusedDay(parseISODate(this.value) || new Date());
-        clearTimeout(this.focusTimeoutId);
-        this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
-    }
+    this.identifier = "";
     /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
+     * The currently active language. This setting changes the month/year/day
+     * names and button labels as well as all screen reader labels.
      */
-    async hide(moveFocusToButton = true) {
-        this.open = false;
-        // in cases where calendar is quickly shown and hidden
-        // we should avoid moving focus to the button
-        clearTimeout(this.focusTimeoutId);
-        if (moveFocusToButton) {
-            // iOS VoiceOver needs to wait for all transitions to finish.
-            setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
-        }
+    this.language = "en";
+    /**
+     * Makes the date picker input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+     */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.toggleOpen = (e) => {
+      e.preventDefault();
+      this.open ? this.hide(false) : this.show();
+    };
+    this.handleEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    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.handleFirstFocusableKeydown = (event) => {
+      // this ensures focus is trapped inside the dialog
+      if (event.keyCode === keyCode.TAB && event.shiftKey) {
+        this.focusedDayNode.focus();
+        event.preventDefault();
+      }
+    };
+    this.handleKeyboardNavigation = (event) => {
+      // handle tab separately, since it needs to be treated
+      // differently to other keyboard interactions
+      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+        return;
+      }
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
+        return;
+      }
+      if (day.getMonth() === this.focusedDay.getMonth()) {
+        this.setValue(day);
+        this.hide();
+      }
+      else {
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.handleInputChange = (e) => {
+      const target = e.target;
+      // clean up any invalid characters
+      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
+      const parsed = parseDate(target.value);
+      if (parsed || target.value === "") {
+        this.setValue(parsed);
+      }
+    };
+    this.processFocusedDayNode = (element) => {
+      this.focusedDayNode = element;
+      if (this.activeFocus && this.open) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  async setFocus() {
+    return this.datePickerInput.focus();
+  }
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  async show() {
+    this.open = true;
+    this.setFocusedDay(parseISODate(this.value) || new Date());
+    clearTimeout(this.focusTimeoutId);
+    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
+  }
+  /**
+   * 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;
+    // in cases where calendar is quickly shown and hidden
+    // we should avoid moving focus to the button
+    clearTimeout(this.focusTimeoutId);
+    if (moveFocusToButton) {
+      // iOS VoiceOver needs to wait for all transitions to finish.
+      setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
     }
-    addDays(days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  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));
+  }
+  setValue(date) {
+    this.value = printISODate(date);
+    this.duetChange.emit({
+      component: "duet-date-picker",
+      value: this.value,
+      valueAsDate: date,
+    });
+  }
+  handleDocumentClick(e) {
+    if (!this.open) {
+      return;
     }
-    addMonths(months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
+    const target = e.target;
+    // TODO: stopPropagation only on open??
+    // 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
+    //
+    // this was the only satisfactory combination of things to get the above to work
+    if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
+      return;
     }
-    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));
-    }
-    setValue(date) {
-        this.value = printISODate(date);
-        this.duetChange.emit({
-            component: "duet-date-picker",
-            value: this.value,
-            valueAsDate: date,
-        });
-    }
-    handleDocumentClick(e) {
-        if (!this.open) {
-            return;
-        }
-        const target = e.target;
-        // TODO: stopPropagation only on open??
-        // 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
-        //
-        // this was the only satisfactory combination of things to get the above to work
-        if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
-            return;
-        }
-        this.hide(false);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const valueAsDate = parseISODate(this.value);
-        const formattedDate = printDate(valueAsDate);
-        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;
-        return (h(Host, null, h("div", { class: "duet-date" }, h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), h("div", { class: {
-                "duet-date__dialog": true,
-                "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), h("span", { class: "duet-date__vhidden" }, text.closeLabel))), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
-    }
-    get element() { return this; }
-    static get style() { return duetDatePickerCss; }
+    this.hide(false);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const formattedDate = printDate(valueAsDate);
+    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;
+    return (h(Host, null, h("div", { class: "duet-date" }, h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), h("div", { class: {
+        "duet-date__dialog": true,
+        "is-active": this.open,
+      }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), h("span", { class: "duet-date__vhidden" }, text.closeLabel))), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
+  }
+  get element() { return this; }
+  static get style() { return duetDatePickerCss; }
 };
@@ -703,0 +703,0 @@

dist/cjs/duet-date-picker.cjs.entry.js

@@ -5,20 +5,20 @@ 'use strict';
 
-const index = require('./index-fa33197e.js');
+const index = require('./index-643139b4.js');
 
 const DatePickerInput = ({ onClick, placeholder, buttonLabel, name, value, identifier, disabled, role, buttonRef, inputRef, onInput, onBlur, onFocus, }) => {
-    return (index.h("div", { class: "duet-date__input-wrapper" },
-        index.h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
-        index.h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
-            index.h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
-                index.h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
-                    index.h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    index.h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    index.h("g", { fill: "currentColor" },
-                        index.h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
-                        index.h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
-                        index.h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
-                        index.h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
-                        index.h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
-                        index.h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
-            index.h("span", { class: "duet-date__vhidden" }, buttonLabel))));
+  return (index.h("div", { class: "duet-date__input-wrapper" },
+    index.h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
+    index.h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+      index.h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
+        index.h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
+          index.h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          index.h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          index.h("g", { fill: "currentColor" },
+            index.h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
+            index.h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
+            index.h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
+            index.h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
+            index.h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
+            index.h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
+      index.h("span", { class: "duet-date__vhidden" }, buttonLabel))));
 };
@@ -31,16 +31,16 @@
 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);
+  }
 }
@@ -51,9 +51,9 @@ /**
 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]);
+  }
 }
@@ -64,9 +64,9 @@ /**
 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]);
+  }
 }
@@ -78,17 +78,17 @@ /**
 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);
 }
@@ -100,3 +100,3 @@ /**
 function printDate(date) {
-    return formatDate(date, DATE_OUTPUT_FORMAT);
+  return formatDate(date, DATE_OUTPUT_FORMAT);
 }
@@ -108,3 +108,3 @@ /**
 function printISODate(date) {
-    return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
+  return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
 }
@@ -115,41 +115,41 @@ /**
 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;
 }
@@ -160,3 +160,3 @@ /**
 function inRange(date, min, max) {
-    return clamp(date, min, max) === date;
+  return clamp(date, min, max) === date;
 }
@@ -167,10 +167,10 @@ /**
 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;
 }
@@ -183,10 +183,10 @@ /**
 function getDaysInRange(start, end) {
-    const days = [];
-    let current = start;
-    while (!isEqual(current, end)) {
-        days.push(current);
-        current = addDays(current, 1);
-    }
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
     days.push(current);
-    return days;
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
 }
@@ -199,5 +199,5 @@ /**
 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);
 }
@@ -208,3 +208,3 @@ /**
 function chr4() {
-    return Math.random().toString(16).slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
@@ -216,149 +216,149 @@ /**
 function createIdentifier(prefix) {
-    return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
+  return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
 }
 
 const i18n = {
-    en: {
-        locale: "en-GB",
-        buttonLabel: "Choose date",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        monthSelectLabel: "Month",
-        yearSelectLabel: "Year",
-        closeLabel: "Close window",
-        keyboardInstruction: "You can use arrow keys to navigate dates",
-        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-        calendarHeading: "Choose a date",
-        placeholder: "dd.mm.yyyy",
-        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"],
-    },
-    fi: {
-        locale: "fi-FI",
-        buttonLabel: "Valitse päivämäärä",
-        prevMonthLabel: "Edellinen kuukausi",
-        nextMonthLabel: "Seuraava kuukausi",
-        monthSelectLabel: "Kuukausi",
-        yearSelectLabel: "Vuosi",
-        closeLabel: "Sulje ikkuna",
-        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-        placeholder: "pp.kk.vvvv",
-        calendarHeading: "Valitse päivämäärä",
-        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",
-        ],
-    },
-    sv: {
-        locale: "sv-SE",
-        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",
-        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-        placeholder: "dd.mm.åååå",
-        calendarHeading: "Välj datum",
-        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"],
-    },
+  en: {
+    locale: "en-GB",
+    buttonLabel: "Choose date",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    monthSelectLabel: "Month",
+    yearSelectLabel: "Year",
+    closeLabel: "Close window",
+    keyboardInstruction: "You can use arrow keys to navigate dates",
+    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    calendarHeading: "Choose a date",
+    placeholder: "dd.mm.yyyy",
+    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"],
+  },
+  fi: {
+    locale: "fi-FI",
+    buttonLabel: "Valitse päivämäärä",
+    prevMonthLabel: "Edellinen kuukausi",
+    nextMonthLabel: "Seuraava kuukausi",
+    monthSelectLabel: "Kuukausi",
+    yearSelectLabel: "Vuosi",
+    closeLabel: "Sulje ikkuna",
+    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+    placeholder: "pp.kk.vvvv",
+    calendarHeading: "Valitse päivämäärä",
+    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",
+    ],
+  },
+  sv: {
+    locale: "sv-SE",
+    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",
+    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+    placeholder: "dd.mm.åååå",
+    calendarHeading: "Välj datum",
+    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"],
+  },
 };
 
 const DatePickerDay = ({ selectedDay, focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-    const isToday = isEqual(day, today);
-    const isFocused = isEqual(day, focusedDay);
-    const isSelected = isEqual(day, selectedDay);
-    const isDisabled = day.getMonth() !== focusedDay.getMonth();
-    const isOutsideRange = !inRange;
-    const { locale } = i18n[language];
-    function handleClick(e) {
-        onDaySelect(e, day);
-    }
-    return (index.h("button", { class: {
-            "duet-date__day": true,
-            "is-outside": isOutsideRange,
-            "is-disabled": isDisabled,
-            "is-today": isToday,
-        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
-            if (isFocused && el && focusedDayRef) {
-                focusedDayRef(el);
-            }
-        } },
-        index.h("span", { "aria-hidden": "true" }, day.getDate()),
-        index.h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isSelected = isEqual(day, selectedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  const { locale } = i18n[language];
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (index.h("button", { class: {
+      "duet-date__day": true,
+      "is-outside": isOutsideRange,
+      "is-disabled": isDisabled,
+      "is-today": isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    index.h("span", { "aria-hidden": "true" }, day.getDate()),
+    index.h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
 };
 
 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;
 }
 const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-    const { dayLabels } = i18n[language];
-    const today = new Date();
-    const days = getViewOfMonth(focusedDate);
-    return (index.h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
-        // @ts-ignore
-        onFocusin: onFocusIn, onMouseDown: onMouseDown },
-        index.h("thead", null,
-            index.h("tr", null, dayLabels.map(label => (index.h("th", { class: "duet-date__table-header", scope: "col" },
-                index.h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
-                index.h("span", { class: "duet-date__vhidden" }, label)))))),
-        index.h("tbody", null, chunk(days, 7).map(week => (index.h("tr", { class: "duet-date__row" }, week.map(day => (index.h("td", { class: "duet-date__cell" },
-            index.h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+  const { dayLabels } = i18n[language];
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate);
+  return (index.h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+    index.h("thead", null,
+      index.h("tr", null, dayLabels.map(label => (index.h("th", { class: "duet-date__table-header", scope: "col" },
+        index.h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+        index.h("span", { class: "duet-date__vhidden" }, label)))))),
+    index.h("tbody", null, chunk(days, 7).map(week => (index.h("tr", { class: "duet-date__row" }, week.map(day => (index.h("td", { class: "duet-date__cell" },
+      index.h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };
@@ -369,20 +369,20 @@
 function range(from, to) {
-    var result = [];
-    for (var i = 0; i <= to - from; i++) {
-        result.push(from + i);
-    }
-    return result;
+  var result = [];
+  for (var i = 0; i <= to - from; i++) {
+    result.push(from + i);
+  }
+  return result;
 }
 const keyCode = {
-    TAB: 9,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
 };
@@ -392,312 +392,312 @@ const DISALLOWED_CHARACTERS = /[^0-9\.]+/g;
 const DuetDatePicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.duetChange = index.createEvent(this, "duetChange", 7);
-        this.duetBlur = index.createEvent(this, "duetBlur", 7);
-        this.duetFocus = index.createEvent(this, "duetFocus", 7);
-        this.monthSelectId = createIdentifier("DuetDateMonth");
-        this.yearSelectId = createIdentifier("DuetDateYear");
-        this.dialogLabelId = createIdentifier("DuetDateLabel");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.activeFocus = false;
-        this.open = false;
-        this.focusedDay = new Date();
-        /**
-         * Name of the date picker input.
-         */
-        this.name = "";
-        /**
-         * Adds a unique identifier for the date picker input.
-         */
-        this.identifier = "";
-        /**
-         * The currently active language. This setting changes the month/year/day
-         * names and button labels as well as all screen reader labels.
-         */
-        this.language = "en";
-        /**
-         * Makes the date picker input component disabled. This prevents users from being able to
-         * interact with the input, and conveys its inactive state to assistive technologies.
-         */
-        this.disabled = false;
-        /**
-         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-         */
-        this.value = "";
-        /**
-         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-         * This setting can be used alone or together with the max property.
-         */
-        this.min = "";
-        /**
-         * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-         * This setting can be used alone or together with the min property.
-         */
-        this.max = "";
-        this.enableActiveFocus = () => {
-            this.activeFocus = true;
-        };
-        this.disableActiveFocus = () => {
-            this.activeFocus = false;
-        };
-        this.toggleOpen = (e) => {
-            e.preventDefault();
-            this.open ? this.hide(false) : this.show();
-        };
-        this.handleEscKey = (event) => {
-            if (event.keyCode === keyCode.ESC) {
-                this.hide();
-            }
-        };
-        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.handleFirstFocusableKeydown = (event) => {
-            // this ensures focus is trapped inside the dialog
-            if (event.keyCode === keyCode.TAB && event.shiftKey) {
-                this.focusedDayNode.focus();
-                event.preventDefault();
-            }
-        };
-        this.handleKeyboardNavigation = (event) => {
-            // handle tab separately, since it needs to be treated
-            // differently to other keyboard interactions
-            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-                event.preventDefault();
-                this.firstFocusableElement.focus();
-                return;
-            }
-            var handled = true;
-            switch (event.keyCode) {
-                case keyCode.RIGHT:
-                    this.addDays(1);
-                    break;
-                case keyCode.LEFT:
-                    this.addDays(-1);
-                    break;
-                case keyCode.DOWN:
-                    this.addDays(7);
-                    break;
-                case keyCode.UP:
-                    this.addDays(-7);
-                    break;
-                case keyCode.PAGE_UP:
-                    if (event.shiftKey) {
-                        this.addYears(-1);
-                    }
-                    else {
-                        this.addMonths(-1);
-                    }
-                    break;
-                case keyCode.PAGE_DOWN:
-                    if (event.shiftKey) {
-                        this.addYears(1);
-                    }
-                    else {
-                        this.addMonths(1);
-                    }
-                    break;
-                case keyCode.HOME:
-                    this.startOfWeek();
-                    break;
-                case keyCode.END:
-                    this.endOfWeek();
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                event.preventDefault();
-                this.enableActiveFocus();
-            }
-        };
-        this.handleDaySelect = (_event, day) => {
-            if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
-                return;
-            }
-            if (day.getMonth() === this.focusedDay.getMonth()) {
-                this.setValue(day);
-                this.hide();
-            }
-            else {
-                this.setFocusedDay(day);
-            }
-        };
-        this.handleMonthSelect = e => {
-            this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = e => {
-            this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = (e) => {
-            const target = e.target;
-            // clean up any invalid characters
-            target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-            const parsed = parseDate(target.value);
-            if (parsed || target.value === "") {
-                this.setValue(parsed);
-            }
-        };
-        this.processFocusedDayNode = (element) => {
-            this.focusedDayNode = element;
-            if (this.activeFocus && this.open) {
-                setTimeout(() => element.focus(), 0);
-            }
-        };
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetChange = index.createEvent(this, "duetChange", 7);
+    this.duetBlur = index.createEvent(this, "duetBlur", 7);
+    this.duetFocus = index.createEvent(this, "duetFocus", 7);
+    this.monthSelectId = createIdentifier("DuetDateMonth");
+    this.yearSelectId = createIdentifier("DuetDateYear");
+    this.dialogLabelId = createIdentifier("DuetDateLabel");
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.activeFocus = false;
+    this.open = false;
+    this.focusedDay = new Date();
     /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+     * Name of the date picker input.
      */
-    async setFocus() {
-        return this.datePickerInput.focus();
-    }
+    this.name = "";
     /**
-     * Show the calendar modal, moving focus to the calendar inside.
+     * Adds a unique identifier for the date picker input.
      */
-    async show() {
-        this.open = true;
-        this.setFocusedDay(parseISODate(this.value) || new Date());
-        clearTimeout(this.focusTimeoutId);
-        this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
-    }
+    this.identifier = "";
     /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
+     * The currently active language. This setting changes the month/year/day
+     * names and button labels as well as all screen reader labels.
      */
-    async hide(moveFocusToButton = true) {
-        this.open = false;
-        // in cases where calendar is quickly shown and hidden
-        // we should avoid moving focus to the button
-        clearTimeout(this.focusTimeoutId);
-        if (moveFocusToButton) {
-            // iOS VoiceOver needs to wait for all transitions to finish.
-            setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
-        }
+    this.language = "en";
+    /**
+     * Makes the date picker input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+     */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.toggleOpen = (e) => {
+      e.preventDefault();
+      this.open ? this.hide(false) : this.show();
+    };
+    this.handleEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    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.handleFirstFocusableKeydown = (event) => {
+      // this ensures focus is trapped inside the dialog
+      if (event.keyCode === keyCode.TAB && event.shiftKey) {
+        this.focusedDayNode.focus();
+        event.preventDefault();
+      }
+    };
+    this.handleKeyboardNavigation = (event) => {
+      // handle tab separately, since it needs to be treated
+      // differently to other keyboard interactions
+      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+        return;
+      }
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
+        return;
+      }
+      if (day.getMonth() === this.focusedDay.getMonth()) {
+        this.setValue(day);
+        this.hide();
+      }
+      else {
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.handleInputChange = (e) => {
+      const target = e.target;
+      // clean up any invalid characters
+      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
+      const parsed = parseDate(target.value);
+      if (parsed || target.value === "") {
+        this.setValue(parsed);
+      }
+    };
+    this.processFocusedDayNode = (element) => {
+      this.focusedDayNode = element;
+      if (this.activeFocus && this.open) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  async setFocus() {
+    return this.datePickerInput.focus();
+  }
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  async show() {
+    this.open = true;
+    this.setFocusedDay(parseISODate(this.value) || new Date());
+    clearTimeout(this.focusTimeoutId);
+    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
+  }
+  /**
+   * 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;
+    // in cases where calendar is quickly shown and hidden
+    // we should avoid moving focus to the button
+    clearTimeout(this.focusTimeoutId);
+    if (moveFocusToButton) {
+      // iOS VoiceOver needs to wait for all transitions to finish.
+      setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
     }
-    addDays(days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  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));
+  }
+  setValue(date) {
+    this.value = printISODate(date);
+    this.duetChange.emit({
+      component: "duet-date-picker",
+      value: this.value,
+      valueAsDate: date,
+    });
+  }
+  handleDocumentClick(e) {
+    if (!this.open) {
+      return;
     }
-    addMonths(months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
+    const target = e.target;
+    // TODO: stopPropagation only on open??
+    // 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
+    //
+    // this was the only satisfactory combination of things to get the above to work
+    if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
+      return;
     }
-    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));
-    }
-    setValue(date) {
-        this.value = printISODate(date);
-        this.duetChange.emit({
-            component: "duet-date-picker",
-            value: this.value,
-            valueAsDate: date,
-        });
-    }
-    handleDocumentClick(e) {
-        if (!this.open) {
-            return;
-        }
-        const target = e.target;
-        // TODO: stopPropagation only on open??
-        // 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
-        //
-        // this was the only satisfactory combination of things to get the above to work
-        if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
-            return;
-        }
-        this.hide(false);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const valueAsDate = parseISODate(this.value);
-        const formattedDate = printDate(valueAsDate);
-        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;
-        return (index.h(index.Host, null, index.h("div", { class: "duet-date" }, index.h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), index.h("div", { class: {
-                "duet-date__dialog": true,
-                "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, index.h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), index.h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), index.h("span", { class: "duet-date__vhidden" }, text.closeLabel))), index.h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (index.h("option", { value: i, selected: i === focusedMonth }, month)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, text.monthLabelsShort[focusedMonth]), index.h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), index.h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (index.h("option", { selected: year === focusedYear }, year)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), index.h("div", { class: "duet-date__nav" }, index.h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, index.h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), index.h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), index.h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, index.h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), index.h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), index.h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), index.h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
-    }
-    get element() { return index.getElement(this); }
+    this.hide(false);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const formattedDate = printDate(valueAsDate);
+    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;
+    return (index.h(index.Host, null, index.h("div", { class: "duet-date" }, index.h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), index.h("div", { class: {
+        "duet-date__dialog": true,
+        "is-active": this.open,
+      }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, index.h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), index.h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), index.h("span", { class: "duet-date__vhidden" }, text.closeLabel))), index.h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (index.h("option", { value: i, selected: i === focusedMonth }, month)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, text.monthLabelsShort[focusedMonth]), index.h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), index.h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (index.h("option", { selected: year === focusedYear }, year)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, index.h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), index.h("div", { class: "duet-date__nav" }, index.h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, index.h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), index.h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), index.h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, index.h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, index.h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), index.h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), index.h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), index.h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
+  }
+  get element() { return index.getElement(this); }
 };
@@ -704,0 +704,0 @@ DuetDatePicker.style = duetDatePickerCss;

dist/cjs/duet.cjs.js

 'use strict';
 
-const index = require('./index-fa33197e.js');
-const patch = require('./patch-430766c9.js');
+const index = require('./index-643139b4.js');
 
-patch.patchBrowser().then(options => {
+/*
+ Stencil Client Patch Browser v2.0.0-2 | MIT Licensed | https://stenciljs.com
+ */
+const noop = () => {
+    /* noop*/
+};
+const IS_DENO_ENV = typeof Deno !== 'undefined';
+const IS_NODE_ENV = !IS_DENO_ENV &&
+    typeof global !== 'undefined' &&
+    typeof require === 'function' &&
+    !!global.process &&
+    typeof __filename === 'string' &&
+    (!global.origin || typeof global.origin !== 'string');
+const OS_PLATFORM = IS_NODE_ENV ? process.platform : IS_DENO_ENV ? Deno.build.os : '';
+const requireFunc = IS_NODE_ENV ? require : noop;
+const getCurrentDirectory = IS_NODE_ENV ? process.cwd : IS_DENO_ENV ? Deno.cwd : () => '/';
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+const patchBrowser = () => {
+    {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    // @ts-ignore
+    const scriptElm =  Array.from(index.doc.querySelectorAll('script')).find(s => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        ;
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('duet.cjs.js', document.baseURI).href));
+    const opts =  {};
+    if ( importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    else {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if ( !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-4d013d09.js'); }).then(() => opts);
+        }
+    }
+    return index.promiseResolve(opts);
+};
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
+                mod = new Promise(resolve => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+
+patchBrowser().then(options => {
   return index.bootstrapLazy([["duet-date-picker.cjs",[[0,"duet-date-picker",{"name":[1],"identifier":[1],"language":[1],"disabled":[516],"role":[1],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"open":[32],"focusedDay":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,8 +5,28 @@ 'use strict';
 
-const index = require('./index-fa33197e.js');
-const patch = require('./patch-430766c9.js');
+const index = require('./index-643139b4.js');
 
+/*
+ Stencil Client Patch Esm v2.0.0-2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    // NOTE!! This fn cannot use async/await!
+    // @ts-ignore
+    if ( !(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
+        // @ts-ignore
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-5fa7987d.js'); }).then(() => {
+            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
+                return index.plt.$cssShim$.i();
+            }
+            else {
+                // for better minification
+                return 0;
+            }
+        });
+    }
+    return index.promiseResolve();
+};
+
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return patch.patchEsm().then(() => {
+  return patchEsm().then(() => {
   return index.bootstrapLazy([["duet-date-picker.cjs",[[0,"duet-date-picker",{"name":[1],"identifier":[1],"language":[1],"disabled":[516],"role":[1],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"open":[32],"focusedDay":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]]], options);
@@ -13,0 +33,0 @@ });

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "1.17.3",
-    "typescriptVersion": "3.9.7"
+    "version": "2.0.0-2",
+    "typescriptVersion": "4.0.0-beta"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/duet-date-picker/date-i18n.js

 const i18n = {
-    en: {
-        locale: "en-GB",
-        buttonLabel: "Choose date",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        monthSelectLabel: "Month",
-        yearSelectLabel: "Year",
-        closeLabel: "Close window",
-        keyboardInstruction: "You can use arrow keys to navigate dates",
-        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-        calendarHeading: "Choose a date",
-        placeholder: "dd.mm.yyyy",
-        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"],
-    },
-    fi: {
-        locale: "fi-FI",
-        buttonLabel: "Valitse päivämäärä",
-        prevMonthLabel: "Edellinen kuukausi",
-        nextMonthLabel: "Seuraava kuukausi",
-        monthSelectLabel: "Kuukausi",
-        yearSelectLabel: "Vuosi",
-        closeLabel: "Sulje ikkuna",
-        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-        placeholder: "pp.kk.vvvv",
-        calendarHeading: "Valitse päivämäärä",
-        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",
-        ],
-    },
-    sv: {
-        locale: "sv-SE",
-        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",
-        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-        placeholder: "dd.mm.åååå",
-        calendarHeading: "Välj datum",
-        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"],
-    },
+  en: {
+    locale: "en-GB",
+    buttonLabel: "Choose date",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    monthSelectLabel: "Month",
+    yearSelectLabel: "Year",
+    closeLabel: "Close window",
+    keyboardInstruction: "You can use arrow keys to navigate dates",
+    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    calendarHeading: "Choose a date",
+    placeholder: "dd.mm.yyyy",
+    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"],
+  },
+  fi: {
+    locale: "fi-FI",
+    buttonLabel: "Valitse päivämäärä",
+    prevMonthLabel: "Edellinen kuukausi",
+    nextMonthLabel: "Seuraava kuukausi",
+    monthSelectLabel: "Kuukausi",
+    yearSelectLabel: "Vuosi",
+    closeLabel: "Sulje ikkuna",
+    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+    placeholder: "pp.kk.vvvv",
+    calendarHeading: "Valitse päivämäärä",
+    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",
+    ],
+  },
+  sv: {
+    locale: "sv-SE",
+    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",
+    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+    placeholder: "dd.mm.åååå",
+    calendarHeading: "Välj datum",
+    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"],
+  },
 };
 export default i18n;

dist/collection/components/duet-date-picker/date-picker-day.js

@@ -5,23 +5,23 @@ import { h } from "@stencil/core";
 export const DatePickerDay = ({ selectedDay, focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-    const isToday = isEqual(day, today);
-    const isFocused = isEqual(day, focusedDay);
-    const isSelected = isEqual(day, selectedDay);
-    const isDisabled = day.getMonth() !== focusedDay.getMonth();
-    const isOutsideRange = !inRange;
-    const { locale } = i18n[language];
-    function handleClick(e) {
-        onDaySelect(e, day);
-    }
-    return (h("button", { class: {
-            "duet-date__day": true,
-            "is-outside": isOutsideRange,
-            "is-disabled": isDisabled,
-            "is-today": isToday,
-        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
-            if (isFocused && el && focusedDayRef) {
-                focusedDayRef(el);
-            }
-        } },
-        h("span", { "aria-hidden": "true" }, day.getDate()),
-        h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isSelected = isEqual(day, selectedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  const { locale } = i18n[language];
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      "duet-date__day": true,
+      "is-outside": isOutsideRange,
+      "is-disabled": isDisabled,
+      "is-today": isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    h("span", { "aria-hidden": "true" }, day.getDate()),
+    h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
 };

dist/collection/components/duet-date-picker/date-picker-input.js

 import { h } from "@stencil/core";
 export const DatePickerInput = ({ onClick, placeholder, buttonLabel, name, value, identifier, disabled, role, buttonRef, inputRef, onInput, onBlur, onFocus, }) => {
-    return (h("div", { class: "duet-date__input-wrapper" },
-        h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
-        h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
-            h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
-                h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
-                    h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("g", { fill: "currentColor" },
-                        h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
-            h("span", { class: "duet-date__vhidden" }, buttonLabel))));
+  return (h("div", { class: "duet-date__input-wrapper" },
+    h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
+    h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+      h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
+        h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
+          h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("g", { fill: "currentColor" },
+            h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
+      h("span", { class: "duet-date__vhidden" }, buttonLabel))));
 };

dist/collection/components/duet-date-picker/date-picker-month.js

@@ -6,21 +6,21 @@ import { h } from "@stencil/core";
 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;
 }
 export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-    const { dayLabels } = i18n[language];
-    const today = new Date();
-    const days = getViewOfMonth(focusedDate);
-    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
-        // @ts-ignore
-        onFocusin: onFocusIn, onMouseDown: onMouseDown },
-        h("thead", null,
-            h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
-                h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
-                h("span", { class: "duet-date__vhidden" }, label)))))),
-        h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
-            h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+  const { dayLabels } = i18n[language];
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate);
+  return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+    h("thead", null,
+      h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
+        h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+        h("span", { class: "duet-date__vhidden" }, label)))))),
+    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
+      h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };

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

@@ -6,16 +6,16 @@ const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
 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);
+  }
 }
@@ -26,9 +26,9 @@ /**
 export 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]);
+  }
 }
@@ -39,9 +39,9 @@ /**
 export 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]);
+  }
 }
@@ -53,17 +53,17 @@ /**
 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);
 }
@@ -75,3 +75,3 @@ /**
 export function printDate(date) {
-    return formatDate(date, DATE_OUTPUT_FORMAT);
+  return formatDate(date, DATE_OUTPUT_FORMAT);
 }
@@ -83,3 +83,3 @@ /**
 export function printISODate(date) {
-    return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
+  return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
 }
@@ -90,51 +90,51 @@ /**
 export 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();
 }
 export 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;
 }
 export function addMonths(date, months) {
-    const d = new Date(date);
-    d.setMonth(date.getMonth() + months);
-    return d;
+  const d = new Date(date);
+  d.setMonth(date.getMonth() + months);
+  return d;
 }
 export function addYears(date, years) {
-    const d = new Date(date);
-    d.setFullYear(date.getFullYear() + years);
-    return d;
+  const d = new Date(date);
+  d.setFullYear(date.getFullYear() + years);
+  return d;
 }
 export 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;
 }
 export 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;
 }
 export function startOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
+  return new Date(date.getFullYear(), date.getMonth(), 1);
 }
 export function endOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }
 export function setMonth(date, month) {
-    const d = new Date(date);
-    d.setMonth(month);
-    return d;
+  const d = new Date(date);
+  d.setMonth(month);
+  return d;
 }
 export function setYear(date, year) {
-    const d = new Date(date);
-    d.setFullYear(year);
-    return d;
+  const d = new Date(date);
+  d.setFullYear(year);
+  return d;
 }
@@ -145,3 +145,3 @@ /**
 export function inRange(date, min, max) {
-    return clamp(date, min, max) === date;
+  return clamp(date, min, max) === date;
 }
@@ -152,10 +152,10 @@ /**
 export 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;
 }
@@ -168,10 +168,10 @@ /**
 function getDaysInRange(start, end) {
-    const days = [];
-    let current = start;
-    while (!isEqual(current, end)) {
-        days.push(current);
-        current = addDays(current, 1);
-    }
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
     days.push(current);
-    return days;
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
 }
@@ -184,5 +184,5 @@ /**
 export 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);
 }
@@ -193,3 +193,3 @@ /**
 export function chr4() {
-    return Math.random().toString(16).slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
@@ -201,3 +201,3 @@ /**
 export function createIdentifier(prefix) {
-    return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
+  return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
 }

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

@@ -7,20 +7,20 @@ import { Component, Host, Prop, Element, h, Event, State, Listen, Method, } from "@stencil/core";
 function range(from, to) {
-    var result = [];
-    for (var i = 0; i <= to - from; i++) {
-        result.push(from + i);
-    }
-    return result;
+  var result = [];
+  for (var i = 0; i <= to - from; i++) {
+    result.push(from + i);
+  }
+  return result;
 }
 const keyCode = {
-    TAB: 9,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
 };
@@ -30,629 +30,629 @@ const DISALLOWED_CHARACTERS = /[^0-9\.]+/g;
 export class DuetDatePicker {
-    constructor() {
-        this.monthSelectId = createIdentifier("DuetDateMonth");
-        this.yearSelectId = createIdentifier("DuetDateYear");
-        this.dialogLabelId = createIdentifier("DuetDateLabel");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.activeFocus = false;
-        this.open = false;
-        this.focusedDay = new Date();
-        /**
-         * Name of the date picker input.
-         */
-        this.name = "";
-        /**
-         * Adds a unique identifier for the date picker input.
-         */
-        this.identifier = "";
-        /**
-         * The currently active language. This setting changes the month/year/day
-         * names and button labels as well as all screen reader labels.
-         */
-        this.language = "en";
-        /**
-         * Makes the date picker input component disabled. This prevents users from being able to
-         * interact with the input, and conveys its inactive state to assistive technologies.
-         */
-        this.disabled = false;
-        /**
-         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-         */
-        this.value = "";
-        /**
-         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-         * This setting can be used alone or together with the max property.
-         */
-        this.min = "";
-        /**
-         * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-         * This setting can be used alone or together with the min property.
-         */
-        this.max = "";
-        this.enableActiveFocus = () => {
-            this.activeFocus = true;
-        };
-        this.disableActiveFocus = () => {
-            this.activeFocus = false;
-        };
-        this.toggleOpen = (e) => {
-            e.preventDefault();
-            this.open ? this.hide(false) : this.show();
-        };
-        this.handleEscKey = (event) => {
-            if (event.keyCode === keyCode.ESC) {
-                this.hide();
-            }
-        };
-        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.handleFirstFocusableKeydown = (event) => {
-            // this ensures focus is trapped inside the dialog
-            if (event.keyCode === keyCode.TAB && event.shiftKey) {
-                this.focusedDayNode.focus();
-                event.preventDefault();
-            }
-        };
-        this.handleKeyboardNavigation = (event) => {
-            // handle tab separately, since it needs to be treated
-            // differently to other keyboard interactions
-            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-                event.preventDefault();
-                this.firstFocusableElement.focus();
-                return;
-            }
-            var handled = true;
-            switch (event.keyCode) {
-                case keyCode.RIGHT:
-                    this.addDays(1);
-                    break;
-                case keyCode.LEFT:
-                    this.addDays(-1);
-                    break;
-                case keyCode.DOWN:
-                    this.addDays(7);
-                    break;
-                case keyCode.UP:
-                    this.addDays(-7);
-                    break;
-                case keyCode.PAGE_UP:
-                    if (event.shiftKey) {
-                        this.addYears(-1);
-                    }
-                    else {
-                        this.addMonths(-1);
-                    }
-                    break;
-                case keyCode.PAGE_DOWN:
-                    if (event.shiftKey) {
-                        this.addYears(1);
-                    }
-                    else {
-                        this.addMonths(1);
-                    }
-                    break;
-                case keyCode.HOME:
-                    this.startOfWeek();
-                    break;
-                case keyCode.END:
-                    this.endOfWeek();
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                event.preventDefault();
-                this.enableActiveFocus();
-            }
-        };
-        this.handleDaySelect = (_event, day) => {
-            if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
-                return;
-            }
-            if (day.getMonth() === this.focusedDay.getMonth()) {
-                this.setValue(day);
-                this.hide();
-            }
-            else {
-                this.setFocusedDay(day);
-            }
-        };
-        this.handleMonthSelect = e => {
-            this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = e => {
-            this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = (e) => {
-            const target = e.target;
-            // clean up any invalid characters
-            target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-            const parsed = parseDate(target.value);
-            if (parsed || target.value === "") {
-                this.setValue(parsed);
-            }
-        };
-        this.processFocusedDayNode = (element) => {
-            this.focusedDayNode = element;
-            if (this.activeFocus && this.open) {
-                setTimeout(() => element.focus(), 0);
-            }
-        };
-    }
+  constructor() {
+    this.monthSelectId = createIdentifier("DuetDateMonth");
+    this.yearSelectId = createIdentifier("DuetDateYear");
+    this.dialogLabelId = createIdentifier("DuetDateLabel");
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.activeFocus = false;
+    this.open = false;
+    this.focusedDay = new Date();
     /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+     * Name of the date picker input.
      */
-    async setFocus() {
-        return this.datePickerInput.focus();
-    }
+    this.name = "";
     /**
-     * Show the calendar modal, moving focus to the calendar inside.
+     * Adds a unique identifier for the date picker input.
      */
-    async show() {
-        this.open = true;
-        this.setFocusedDay(parseISODate(this.value) || new Date());
-        clearTimeout(this.focusTimeoutId);
-        this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
-    }
+    this.identifier = "";
     /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
+     * The currently active language. This setting changes the month/year/day
+     * names and button labels as well as all screen reader labels.
      */
-    async hide(moveFocusToButton = true) {
-        this.open = false;
-        // in cases where calendar is quickly shown and hidden
-        // we should avoid moving focus to the button
-        clearTimeout(this.focusTimeoutId);
-        if (moveFocusToButton) {
-            // iOS VoiceOver needs to wait for all transitions to finish.
-            setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
-        }
+    this.language = "en";
+    /**
+     * Makes the date picker input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+     */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.toggleOpen = (e) => {
+      e.preventDefault();
+      this.open ? this.hide(false) : this.show();
+    };
+    this.handleEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    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.handleFirstFocusableKeydown = (event) => {
+      // this ensures focus is trapped inside the dialog
+      if (event.keyCode === keyCode.TAB && event.shiftKey) {
+        this.focusedDayNode.focus();
+        event.preventDefault();
+      }
+    };
+    this.handleKeyboardNavigation = (event) => {
+      // handle tab separately, since it needs to be treated
+      // differently to other keyboard interactions
+      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+        return;
+      }
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
+        return;
+      }
+      if (day.getMonth() === this.focusedDay.getMonth()) {
+        this.setValue(day);
+        this.hide();
+      }
+      else {
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.handleInputChange = (e) => {
+      const target = e.target;
+      // clean up any invalid characters
+      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
+      const parsed = parseDate(target.value);
+      if (parsed || target.value === "") {
+        this.setValue(parsed);
+      }
+    };
+    this.processFocusedDayNode = (element) => {
+      this.focusedDayNode = element;
+      if (this.activeFocus && this.open) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  async setFocus() {
+    return this.datePickerInput.focus();
+  }
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  async show() {
+    this.open = true;
+    this.setFocusedDay(parseISODate(this.value) || new Date());
+    clearTimeout(this.focusTimeoutId);
+    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
+  }
+  /**
+   * 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;
+    // in cases where calendar is quickly shown and hidden
+    // we should avoid moving focus to the button
+    clearTimeout(this.focusTimeoutId);
+    if (moveFocusToButton) {
+      // iOS VoiceOver needs to wait for all transitions to finish.
+      setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
     }
-    addDays(days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  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));
+  }
+  setValue(date) {
+    this.value = printISODate(date);
+    this.duetChange.emit({
+      component: "duet-date-picker",
+      value: this.value,
+      valueAsDate: date,
+    });
+  }
+  handleDocumentClick(e) {
+    if (!this.open) {
+      return;
     }
-    addMonths(months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
+    const target = e.target;
+    // TODO: stopPropagation only on open??
+    // 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
+    //
+    // this was the only satisfactory combination of things to get the above to work
+    if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
+      return;
     }
-    addYears(years) {
-        this.setYear(this.focusedDay.getFullYear() + years);
+    this.hide(false);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const formattedDate = printDate(valueAsDate);
+    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;
+    return (h(Host, null,
+      h("div", { class: "duet-date" },
+        h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }),
+        h("div", { class: {
+            "duet-date__dialog": true,
+            "is-active": this.open,
+          }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd },
+          h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) },
+            h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus },
+              h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading),
+              h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" },
+                h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
+                  h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                  h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })),
+                h("span", { class: "duet-date__vhidden" }, text.closeLabel))),
+            h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus },
+              h("div", null,
+                h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" },
+                  text.monthLabels[focusedMonth],
+                  " ",
+                  this.focusedDay.getFullYear()),
+                h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel),
+                h("div", { class: "duet-date__select" },
+                  h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))),
+                  h("div", { class: "duet-date__select-label", "aria-hidden": "true" },
+                    h("span", null, text.monthLabelsShort[focusedMonth]),
+                    h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
+                      h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))),
+                h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel),
+                h("div", { class: "duet-date__select" },
+                  h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))),
+                  h("div", { class: "duet-date__select-label", "aria-hidden": "true" },
+                    h("span", null, this.focusedDay.getFullYear()),
+                    h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
+                      h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))),
+              h("div", { class: "duet-date__nav" },
+                h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" },
+                  h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" },
+                    h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })),
+                  h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)),
+                h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" },
+                  h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" },
+                    h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })),
+                  h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))),
+            h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }),
+            h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
+  }
+  static get is() { return "duet-date-picker"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-date-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-date-picker.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the date picker input."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "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": "\"\""
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLanguage",
+        "resolved": "\"en\" | \"fi\" | \"sv\"",
+        "references": {
+          "DuetLanguage": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels."
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"en\""
+    },
+    "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"
+    },
+    "role": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines a specific role attribute for the date picker input."
+      },
+      "attribute": "role",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "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": "Maximum 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": "\"\""
     }
-    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));
-    }
-    setValue(date) {
-        this.value = printISODate(date);
-        this.duetChange.emit({
-            component: "duet-date-picker",
-            value: this.value,
-            valueAsDate: date,
-        });
-    }
-    handleDocumentClick(e) {
-        if (!this.open) {
-            return;
+  }; }
+  static get states() { return {
+    "activeFocus": {},
+    "open": {},
+    "focusedDay": {}
+  }; }
+  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"
+          }
         }
-        const target = e.target;
-        // TODO: stopPropagation only on open??
-        // 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
-        //
-        // this was the only satisfactory combination of things to get the above to work
-        if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
-            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"
+          }
         }
-        this.hide(false);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const valueAsDate = parseISODate(this.value);
-        const formattedDate = printDate(valueAsDate);
-        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;
-        return (h(Host, null,
-            h("div", { class: "duet-date" },
-                h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }),
-                h("div", { class: {
-                        "duet-date__dialog": true,
-                        "is-active": this.open,
-                    }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd },
-                    h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) },
-                        h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus },
-                            h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading),
-                            h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" },
-                                h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
-                                    h("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-                                    h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })),
-                                h("span", { class: "duet-date__vhidden" }, text.closeLabel))),
-                        h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus },
-                            h("div", null,
-                                h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" },
-                                    text.monthLabels[focusedMonth],
-                                    " ",
-                                    this.focusedDay.getFullYear()),
-                                h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel),
-                                h("div", { class: "duet-date__select" },
-                                    h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))),
-                                    h("div", { class: "duet-date__select-label", "aria-hidden": "true" },
-                                        h("span", null, text.monthLabelsShort[focusedMonth]),
-                                        h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
-                                            h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))),
-                                h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel),
-                                h("div", { class: "duet-date__select" },
-                                    h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))),
-                                    h("div", { class: "duet-date__select-label", "aria-hidden": "true" },
-                                        h("span", null, this.focusedDay.getFullYear()),
-                                        h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" },
-                                            h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))),
-                            h("div", { class: "duet-date__nav" },
-                                h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" },
-                                    h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" },
-                                        h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })),
-                                    h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)),
-                                h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" },
-                                    h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" },
-                                        h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })),
-                                    h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))),
-                        h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }),
-                        h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
-    }
-    static get is() { return "duet-date-picker"; }
-    static get originalStyleUrls() { return {
-        "$": ["duet-date-picker.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["duet-date-picker.css"]
-    }; }
-    static get properties() { return {
-        "name": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Name of the date picker input."
-            },
-            "attribute": "name",
-            "reflect": false,
-            "defaultValue": "\"\""
+      }
+    }, {
+      "method": "duetFocus",
+      "name": "duetFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted the date picker input is focused."
+      },
+      "complexType": {
+        "original": "DuetDatePickerFocusEvent",
+        "resolved": "{ component: \"duet-date-picker\"; }",
+        "references": {
+          "DuetDatePickerFocusEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "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": "\"\""
+        "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"
+          }
         },
-        "language": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "DuetLanguage",
-                "resolved": "\"en\" | \"fi\" | \"sv\"",
-                "references": {
-                    "DuetLanguage": {
-                        "location": "local"
-                    }
-                }
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels."
-            },
-            "attribute": "language",
-            "reflect": false,
-            "defaultValue": "\"en\""
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Show the calendar modal, moving focus to the calendar inside.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
         },
-        "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"
-        },
-        "role": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "Defines a specific role attribute for the date picker input."
-            },
-            "attribute": "role",
-            "reflect": false
-        },
-        "value": {
-            "type": "string",
-            "mutable": false,
-            "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": "Maximum 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": "\"\""
-        }
-    }; }
-    static get states() { return {
-        "activeFocus": {},
-        "open": {},
-        "focusedDay": {}
-    }; }
-    static get events() { return [{
-            "method": "duetChange",
-            "name": "duetChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Event emitted when a date is selected."
-            },
-            "complexType": {
-                "original": "DuetDatePickerChangeEvent",
-                "resolved": "{ component: \"duet-date-picker\"; valueAsDate: Date; value: string; }",
-                "references": {
-                    "DuetDatePickerChangeEvent": {
-                        "location": "local"
-                    }
-                }
-            }
-        }, {
-            "method": "duetBlur",
-            "name": "duetBlur",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Event emitted the date picker input is blurred."
-            },
-            "complexType": {
-                "original": "DuetDatePickerFocusEvent",
-                "resolved": "{ component: \"duet-date-picker\"; }",
-                "references": {
-                    "DuetDatePickerFocusEvent": {
-                        "location": "local"
-                    }
-                }
-            }
-        }, {
-            "method": "duetFocus",
-            "name": "duetFocus",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "Event emitted the date picker input is focused."
-            },
-            "complexType": {
-                "original": "DuetDatePickerFocusEvent",
-                "resolved": "{ component: \"duet-date-picker\"; }",
-                "references": {
-                    "DuetDatePickerFocusEvent": {
-                        "location": "local"
-                    }
-                }
-            }
-        }]; }
-    static get methods() { return {
-        "setFocus": {
-            "complexType": {
-                "signature": "() => Promise<void>",
-                "parameters": [],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "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"
-                    }
-                },
-                "return": "Promise<void>"
-            },
-            "docs": {
-                "text": "Show the calendar modal, moving focus to the calendar inside.",
-                "tags": []
-            }
-        },
-        "hide": {
-            "complexType": {
-                "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-                "parameters": [{
-                        "tags": [],
-                        "text": ""
-                    }],
-                "references": {
-                    "Promise": {
-                        "location": "global"
-                    }
-                },
-                "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 listeners() { return [{
-            "name": "click",
-            "method": "handleDocumentClick",
-            "target": "document",
-            "capture": true,
-            "passive": false
-        }]; }
+        "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 listeners() { return [{
+      "name": "click",
+      "method": "handleDocumentClick",
+      "target": "document",
+      "capture": true,
+      "passive": false
+    }]; }
 }

dist/collection/utils/test-utils.js

 import { newE2EPage } from "@stencil/core/testing";
 export async function createPage(optionsOrHtml) {
-    const options = typeof optionsOrHtml === "string" ? { html: optionsOrHtml, viewportWidth: 600 } : optionsOrHtml;
-    const page = (await newE2EPage());
-    const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
-    await page.setViewport(viewport);
-    await page.setContent(options.html, { waitUntil: "networkidle0" });
-    await page.evaluateHandle(() => document.fonts.ready);
-    // monkey patch screenshot function to add some extra features
-    const screenshot = page.screenshot;
-    page.screenshot = async function () {
-        // get the element's height, and set viewport to that height
-        // this enables us to get full page, clipped screenshots
-        const htmlElement = await page.$("html");
-        const { width, height } = await htmlElement.boundingBox();
-        await page.setViewport({ width: page.viewport().width, height: Math.round(height) });
-        return screenshot.call(page, {
-            clip: {
-                x: 0,
-                y: 0,
-                width: Math.round(width),
-                height: Math.round(height),
-            },
-        });
-    };
-    return page;
+  const options = typeof optionsOrHtml === "string" ? { html: optionsOrHtml, viewportWidth: 600 } : optionsOrHtml;
+  const page = (await newE2EPage());
+  const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
+  await page.setViewport(viewport);
+  await page.setContent(options.html, { waitUntil: "networkidle0" });
+  await page.evaluateHandle(() => document.fonts.ready);
+  // monkey patch screenshot function to add some extra features
+  const screenshot = page.screenshot;
+  page.screenshot = async function () {
+    // get the element's height, and set viewport to that height
+    // this enables us to get full page, clipped screenshots
+    const htmlElement = await page.$("html");
+    const { width, height } = await htmlElement.boundingBox();
+    await page.setViewport({ width: page.viewport().width, height: Math.round(height) });
+    return screenshot.call(page, {
+      clip: {
+        x: 0,
+        y: 0,
+        width: Math.round(width),
+        height: Math.round(height),
+      },
+    });
+  };
+  return page;
 }

dist/duet/duet-date-picker.entry.js

@@ -1,1 +0,1 @@
-import{h as e,r as t,c as a,H as i,g as o}from"./index-330a800f.js";const n=({onClick:t,placeholder:a,buttonLabel:i,name:o,value:n,identifier:d,disabled:s,role:r,buttonRef:l,inputRef:u,onInput:c,onBlur:h,onFocus:p})=>e("div",{class:"duet-date__input-wrapper"},e("input",{class:"duet-date__input",name:o,value:n,placeholder:a,id:d,disabled:s,role:r,"aria-autocomplete":"none",onInput:c,onFocus:p,onBlur:h,autoComplete:"off",ref:u}),e("button",{class:"duet-date__toggle",onClick:t,disabled:s,ref:l,type:"button"},e("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},e("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},e("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),e("g",{fill:"currentColor"},e("circle",{cx:"8.5",cy:"8.5",r:"1"}),e("circle",{cx:"4.5",cy:"8.5",r:"1"}),e("circle",{cx:"12.5",cy:"8.5",r:"1"}),e("circle",{cx:"8.5",cy:"12.5",r:"1"}),e("circle",{cx:"4.5",cy:"12.5",r:"1"}),e("circle",{cx:"12.5",cy:"12.5",r:"1"})))),e("span",{class:"duet-date__vhidden"},i))),d=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,s=/^(\d{4})-(\d{2})-(\d{2})$/;function r(e,t,a){var i=parseInt(a,10),o=parseInt(t,10),n=parseInt(e,10);if(Number.isInteger(n)&&Number.isInteger(o)&&Number.isInteger(i)&&o>0&&o<=12&&i>0&&i<=31&&n>0)return new Date(n,o-1,i)}function l(e){if(!e)return;const t=e.match(s);return t?r(t[1],t[2],t[3]):void 0}function u(e,t){if(!e)return"";var a=e.getDate().toString(10),i=(e.getMonth()+1).toString(10),o=e.getFullYear().toString(10);return e.getDate()<10&&(a="0"+a),e.getMonth()<9&&(i="0"+i),t.replace(/MM/i,i).replace(/YYYY/i,o).replace(/DD/i,a)}function c(e,t){return null!=e&&null!=t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function h(e,t){var a=new Date(e);return a.setDate(a.getDate()+t),a}function p(e,t=1){var a=new Date(e),i=a.getDay(),o=(i<t?7:0)+i-t;return a.setDate(a.getDate()-o),a}function b(e,t=1){var a=new Date(e),i=a.getDay(),o=6+(i<t?-7:0)-(i-t);return a.setDate(a.getDate()+o),a}function v(e){return new Date(e.getFullYear(),e.getMonth(),1)}function m(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function g(e,t){const a=new Date(e);return a.setMonth(t),a}function _(e,t){const a=new Date(e);return a.setFullYear(t),a}function f(e,t,a){return y(e,t,a)===e}function y(e,t,a){const i=e.getTime();return t&&t instanceof Date&&i<t.getTime()?t:a&&a instanceof Date&&i>a.getTime()?a:e}function x(){return Math.random().toString(16).slice(-4)}function w(e){return e+"-"+x()+x()+"-"+x()+"-"+x()+"-"+x()+"-"+x()+x()+x()}const k={en:{locale:"en-GB",buttonLabel:"Choose date",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",dayLabels:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],calendarHeading:"Choose a date",placeholder:"dd.mm.yyyy",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"]},fi:{locale:"fi-FI",buttonLabel:"Valitse päivämäärä",prevMonthLabel:"Edellinen kuukausi",nextMonthLabel:"Seuraava kuukausi",monthSelectLabel:"Kuukausi",yearSelectLabel:"Vuosi",closeLabel:"Sulje ikkuna",keyboardInstruction:"Voit navigoida päivämääriä nuolinäppäimillä",dayLabels:["Maanantai","Tiistai","Keskiviikko","Torstai","Perjantai","Lauantai","Sunnuntai"],placeholder:"pp.kk.vvvv",calendarHeading:"Valitse päivämäärä",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"]},sv:{locale:"sv-SE",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",keyboardInstruction:"Använd piltangenterna för att navigera i kalender",dayLabels:["Måndag","Tisdag","Onsdag","Torsdag","Fredag","Lördag","Söndag"],placeholder:"dd.mm.åååå",calendarHeading:"Välj datum",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"]}},D=({selectedDay:t,focusedDay:a,today:i,day:o,language:n,onDaySelect:d,onKeyboardNavigation:s,focusedDayRef:r,inRange:l})=>{const u=c(o,i),h=c(o,a),p=c(o,t),b=o.getMonth()!==a.getMonth(),v=!l,{locale:m}=k[n];return e("button",{class:{"duet-date__day":!0,"is-outside":v,"is-disabled":b,"is-today":u},tabIndex:h?0:-1,onClick:function(e){d(e,o)},onKeyDown:s,"aria-selected":p?"true":void 0,"data-label":o.toLocaleDateString(m),disabled:v||b,type:"button",ref:e=>{h&&e&&r&&r(e)}},e("span",{"aria-hidden":"true"},o.getDate()),e("span",{class:"duet-date__vhidden"},o.toLocaleDateString(m)))},L=({selectedDate:t,focusedDate:a,labelledById:i,language:o,min:n,max:d,onDateSelect:s,onKeyboardNavigation:r,focusedDayRef:l,onMouseDown:u,onFocusIn:g})=>{const{dayLabels:_}=k[o],y=new Date,x=function(e,t=1){return function(e,t){const a=[];let i=e;for(;!c(i,t);)a.push(i),i=h(i,1);return a.push(i),a}(p(v(e),t),b(m(e),t))}(a);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:g,onMouseDown:u},e("thead",null,e("tr",null,_.map(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t))))),e("tbody",null,function(e){const t=[];for(let a=0;a<e.length;a+=7)t.push(e.slice(a,a+7));return t}(x).map(i=>e("tr",{class:"duet-date__row"},i.map(i=>e("td",{class:"duet-date__cell"},e(D,{day:i,today:y,language:o,selectedDay:t,focusedDay:a,inRange:f(i,n,d),onDaySelect:s,onKeyboardNavigation:r,focusedDayRef:l})))))))},M=/[^0-9\.]+/g,z=class{constructor(e){t(this,e),this.duetChange=a(this,"duetChange",7),this.duetBlur=a(this,"duetBlur",7),this.duetFocus=a(this,"duetFocus",7),this.monthSelectId=w("DuetDateMonth"),this.yearSelectId=w("DuetDateYear"),this.dialogLabelId=w("DuetDateLabel"),this.initialTouchX=null,this.initialTouchY=null,this.activeFocus=!1,this.open=!1,this.focusedDay=new Date,this.name="",this.identifier="",this.language="en",this.disabled=!1,this.value="",this.min="",this.max="",this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleEscKey=e=>{27===e.keyCode&&this.hide()},this.handleBlur=e=>{e.stopPropagation(),this.duetBlur.emit({component:"duet-date-picker"})},this.handleFocus=e=>{e.stopPropagation(),this.duetFocus.emit({component:"duet-date-picker"})},this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX,this.initialTouchY=t.pageY},this.handleTouchMove=e=>{e.preventDefault()},this.handleTouchEnd=e=>{const t=e.changedTouches[0],a=t.pageX-this.initialTouchX,i=t.pageY-this.initialTouchY,o=Math.abs(a)>=70&&Math.abs(i)<=70,n=Math.abs(i)>=70&&Math.abs(a)<=70&&i>0;o?this.addMonths(a<0?1:-1):n&&(this.hide(),e.preventDefault()),this.initialTouchY=null,this.initialTouchX=null},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.handleFirstFocusableKeydown=e=>{9===e.keyCode&&e.shiftKey&&(this.focusedDayNode.focus(),e.preventDefault())},this.handleKeyboardNavigation=e=>{if(9===e.keyCode&&!e.shiftKey)return e.preventDefault(),void this.firstFocusableElement.focus();var t=!0;switch(e.keyCode){case 39:this.addDays(1);break;case 37:this.addDays(-1);break;case 40:this.addDays(7);break;case 38:this.addDays(-7);break;case 33:e.shiftKey?this.addYears(-1):this.addMonths(-1);break;case 34:e.shiftKey?this.addYears(1):this.addMonths(1);break;case 36:this.startOfWeek();break;case 35:this.endOfWeek();break;default:t=!1}t&&(e.preventDefault(),this.enableActiveFocus())},this.handleDaySelect=(e,t)=>{f(t,l(this.min),l(this.max))&&(t.getMonth()===this.focusedDay.getMonth()?(this.setValue(t),this.hide()):this.setFocusedDay(t))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleInputChange=e=>{const t=e.target;t.value=t.value.replace(M,"");const a=function(e){if(!e)return;const t=e.match(d);return t?r(t[3],t[2],t[1]):void 0}(t.value);(a||""===t.value)&&this.setValue(a)},this.processFocusedDayNode=e=>{this.focusedDayNode=e,this.activeFocus&&this.open&&setTimeout(()=>e.focus(),0)}}async setFocus(){return this.datePickerInput.focus()}async show(){this.open=!0,this.setFocusedDay(l(this.value)||new Date),clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout(()=>this.monthSelectNode.focus(),400)}async hide(e=!0){this.open=!1,clearTimeout(this.focusTimeoutId),e&&setTimeout(()=>this.datePickerButton.focus(),600)}addDays(e){this.setFocusedDay(h(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(p(this.focusedDay))}endOfWeek(){this.setFocusedDay(b(this.focusedDay))}setMonth(e){const t=g(v(this.focusedDay),e),a=m(t),i=g(this.focusedDay,e);this.setFocusedDay(y(i,t,a))}setYear(e){const t=_(v(this.focusedDay),e),a=m(t),i=_(this.focusedDay,e);this.setFocusedDay(y(i,t,a))}setFocusedDay(e){this.focusedDay=y(e,l(this.min),l(this.max))}setValue(e){this.value=function(e){return u(e,"YYYY-MM-DD")}(e),this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:e})}handleDocumentClick(e){if(!this.open)return;const t=e.target;this.dialogWrapperNode.contains(t)||this.datePickerButton.contains(t)||this.hide(!1)}render(){const t=l(this.value),a=u(t,"dd.mm.yyyy"),o=(t||this.focusedDay).getFullYear(),d=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),r=k[this.language],c=l(this.min),h=l(this.max),p=null!=c&&c.getMonth()===d&&c.getFullYear()===s,b=null!=h&&h.getMonth()===d&&h.getFullYear()===s;return e(i,null,e("div",{class:"duet-date"},e(n,{value:a,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,placeholder:r.placeholder,buttonLabel:r.buttonLabel,identifier:this.identifier,buttonRef:e=>this.datePickerButton=e,inputRef:e=>this.datePickerInput=e}),e("div",{class:{"duet-date__dialog":!0,"is-active":this.open},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:e=>this.dialogWrapperNode=e},e("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},e("label",{class:"duet-date__mobile-heading"},r.calendarHeading),e("button",{class:"duet-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),"data-label":r.closeLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M0 0h24v24H0V0z",fill:"none"}),e("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),e("span",{class:"duet-date__vhidden"},r.closeLabel))),e("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},r.monthLabels[d]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},r.monthSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.monthSelectId,ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},r.monthLabels.map((t,a)=>e("option",{value:a,selected:a===d},t))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,r.monthLabelsShort[d]),e("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),e("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},r.yearSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.yearSelectId,onChange:this.handleYearSelect},function(e,t){for(var a=[],i=0;i<=t-e;i++)a.push(e+i);return a}(o-10,o+10).map(t=>e("option",{selected:t===s},t))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),e("div",{class:"duet-date__nav"},e("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:p,"data-label":r.prevMonthLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},e("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),e("span",{class:"duet-date__vhidden"},r.prevMonthLabel)),e("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:b,"data-label":r.nextMonthLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},e("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),e("span",{class:"duet-date__vhidden"},r.nextMonthLabel)))),e(L,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,language:this.language,focusedDayRef:this.processFocusedDayNode,min:c,max:h}),e("div",{class:"duet-date__vhidden","aria-live":"polite"},r.keyboardInstruction)))))}get element(){return o(this)}};z.style='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}';export{z as duet_date_picker}
+import{h as e,r as t,c as a,H as i,g as o}from"./index-2ab9c052.js";const n=({onClick:t,placeholder:a,buttonLabel:i,name:o,value:n,identifier:d,disabled:s,role:r,buttonRef:l,inputRef:u,onInput:c,onBlur:h,onFocus:p})=>e("div",{class:"duet-date__input-wrapper"},e("input",{class:"duet-date__input",name:o,value:n,placeholder:a,id:d,disabled:s,role:r,"aria-autocomplete":"none",onInput:c,onFocus:p,onBlur:h,autoComplete:"off",ref:u}),e("button",{class:"duet-date__toggle",onClick:t,disabled:s,ref:l,type:"button"},e("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},e("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},e("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),e("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),e("g",{fill:"currentColor"},e("circle",{cx:"8.5",cy:"8.5",r:"1"}),e("circle",{cx:"4.5",cy:"8.5",r:"1"}),e("circle",{cx:"12.5",cy:"8.5",r:"1"}),e("circle",{cx:"8.5",cy:"12.5",r:"1"}),e("circle",{cx:"4.5",cy:"12.5",r:"1"}),e("circle",{cx:"12.5",cy:"12.5",r:"1"})))),e("span",{class:"duet-date__vhidden"},i))),d=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,s=/^(\d{4})-(\d{2})-(\d{2})$/;function r(e,t,a){var i=parseInt(a,10),o=parseInt(t,10),n=parseInt(e,10);if(Number.isInteger(n)&&Number.isInteger(o)&&Number.isInteger(i)&&o>0&&o<=12&&i>0&&i<=31&&n>0)return new Date(n,o-1,i)}function l(e){if(!e)return;const t=e.match(s);return t?r(t[1],t[2],t[3]):void 0}function u(e,t){if(!e)return"";var a=e.getDate().toString(10),i=(e.getMonth()+1).toString(10),o=e.getFullYear().toString(10);return e.getDate()<10&&(a="0"+a),e.getMonth()<9&&(i="0"+i),t.replace(/MM/i,i).replace(/YYYY/i,o).replace(/DD/i,a)}function c(e,t){return null!=e&&null!=t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function h(e,t){var a=new Date(e);return a.setDate(a.getDate()+t),a}function p(e,t=1){var a=new Date(e),i=a.getDay(),o=(i<t?7:0)+i-t;return a.setDate(a.getDate()-o),a}function b(e,t=1){var a=new Date(e),i=a.getDay(),o=6+(i<t?-7:0)-(i-t);return a.setDate(a.getDate()+o),a}function v(e){return new Date(e.getFullYear(),e.getMonth(),1)}function m(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function g(e,t){const a=new Date(e);return a.setMonth(t),a}function _(e,t){const a=new Date(e);return a.setFullYear(t),a}function f(e,t,a){return y(e,t,a)===e}function y(e,t,a){const i=e.getTime();return t&&t instanceof Date&&i<t.getTime()?t:a&&a instanceof Date&&i>a.getTime()?a:e}function x(){return Math.random().toString(16).slice(-4)}function w(e){return e+"-"+x()+x()+"-"+x()+"-"+x()+"-"+x()+"-"+x()+x()+x()}const k={en:{locale:"en-GB",buttonLabel:"Choose date",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",dayLabels:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],calendarHeading:"Choose a date",placeholder:"dd.mm.yyyy",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"]},fi:{locale:"fi-FI",buttonLabel:"Valitse päivämäärä",prevMonthLabel:"Edellinen kuukausi",nextMonthLabel:"Seuraava kuukausi",monthSelectLabel:"Kuukausi",yearSelectLabel:"Vuosi",closeLabel:"Sulje ikkuna",keyboardInstruction:"Voit navigoida päivämääriä nuolinäppäimillä",dayLabels:["Maanantai","Tiistai","Keskiviikko","Torstai","Perjantai","Lauantai","Sunnuntai"],placeholder:"pp.kk.vvvv",calendarHeading:"Valitse päivämäärä",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"]},sv:{locale:"sv-SE",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",keyboardInstruction:"Använd piltangenterna för att navigera i kalender",dayLabels:["Måndag","Tisdag","Onsdag","Torsdag","Fredag","Lördag","Söndag"],placeholder:"dd.mm.åååå",calendarHeading:"Välj datum",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"]}},D=({selectedDay:t,focusedDay:a,today:i,day:o,language:n,onDaySelect:d,onKeyboardNavigation:s,focusedDayRef:r,inRange:l})=>{const u=c(o,i),h=c(o,a),p=c(o,t),b=o.getMonth()!==a.getMonth(),v=!l,{locale:m}=k[n];return e("button",{class:{"duet-date__day":!0,"is-outside":v,"is-disabled":b,"is-today":u},tabIndex:h?0:-1,onClick:function(e){d(e,o)},onKeyDown:s,"aria-selected":p?"true":void 0,"data-label":o.toLocaleDateString(m),disabled:v||b,type:"button",ref:e=>{h&&e&&r&&r(e)}},e("span",{"aria-hidden":"true"},o.getDate()),e("span",{class:"duet-date__vhidden"},o.toLocaleDateString(m)))},L=({selectedDate:t,focusedDate:a,labelledById:i,language:o,min:n,max:d,onDateSelect:s,onKeyboardNavigation:r,focusedDayRef:l,onMouseDown:u,onFocusIn:g})=>{const{dayLabels:_}=k[o],y=new Date,x=function(e,t=1){return function(e,t){const a=[];let i=e;for(;!c(i,t);)a.push(i),i=h(i,1);return a.push(i),a}(p(v(e),t),b(m(e),t))}(a);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:g,onMouseDown:u},e("thead",null,e("tr",null,_.map(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t))))),e("tbody",null,function(e){const t=[];for(let a=0;a<e.length;a+=7)t.push(e.slice(a,a+7));return t}(x).map(i=>e("tr",{class:"duet-date__row"},i.map(i=>e("td",{class:"duet-date__cell"},e(D,{day:i,today:y,language:o,selectedDay:t,focusedDay:a,inRange:f(i,n,d),onDaySelect:s,onKeyboardNavigation:r,focusedDayRef:l})))))))},M=/[^0-9\.]+/g,z=class{constructor(e){t(this,e),this.duetChange=a(this,"duetChange",7),this.duetBlur=a(this,"duetBlur",7),this.duetFocus=a(this,"duetFocus",7),this.monthSelectId=w("DuetDateMonth"),this.yearSelectId=w("DuetDateYear"),this.dialogLabelId=w("DuetDateLabel"),this.initialTouchX=null,this.initialTouchY=null,this.activeFocus=!1,this.open=!1,this.focusedDay=new Date,this.name="",this.identifier="",this.language="en",this.disabled=!1,this.value="",this.min="",this.max="",this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleEscKey=e=>{27===e.keyCode&&this.hide()},this.handleBlur=e=>{e.stopPropagation(),this.duetBlur.emit({component:"duet-date-picker"})},this.handleFocus=e=>{e.stopPropagation(),this.duetFocus.emit({component:"duet-date-picker"})},this.handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX,this.initialTouchY=t.pageY},this.handleTouchMove=e=>{e.preventDefault()},this.handleTouchEnd=e=>{const t=e.changedTouches[0],a=t.pageX-this.initialTouchX,i=t.pageY-this.initialTouchY,o=Math.abs(a)>=70&&Math.abs(i)<=70,n=Math.abs(i)>=70&&Math.abs(a)<=70&&i>0;o?this.addMonths(a<0?1:-1):n&&(this.hide(),e.preventDefault()),this.initialTouchY=null,this.initialTouchX=null},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.handleFirstFocusableKeydown=e=>{9===e.keyCode&&e.shiftKey&&(this.focusedDayNode.focus(),e.preventDefault())},this.handleKeyboardNavigation=e=>{if(9===e.keyCode&&!e.shiftKey)return e.preventDefault(),void this.firstFocusableElement.focus();var t=!0;switch(e.keyCode){case 39:this.addDays(1);break;case 37:this.addDays(-1);break;case 40:this.addDays(7);break;case 38:this.addDays(-7);break;case 33:e.shiftKey?this.addYears(-1):this.addMonths(-1);break;case 34:e.shiftKey?this.addYears(1):this.addMonths(1);break;case 36:this.startOfWeek();break;case 35:this.endOfWeek();break;default:t=!1}t&&(e.preventDefault(),this.enableActiveFocus())},this.handleDaySelect=(e,t)=>{f(t,l(this.min),l(this.max))&&(t.getMonth()===this.focusedDay.getMonth()?(this.setValue(t),this.hide()):this.setFocusedDay(t))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleInputChange=e=>{const t=e.target;t.value=t.value.replace(M,"");const a=function(e){if(!e)return;const t=e.match(d);return t?r(t[3],t[2],t[1]):void 0}(t.value);(a||""===t.value)&&this.setValue(a)},this.processFocusedDayNode=e=>{this.focusedDayNode=e,this.activeFocus&&this.open&&setTimeout(()=>e.focus(),0)}}async setFocus(){return this.datePickerInput.focus()}async show(){this.open=!0,this.setFocusedDay(l(this.value)||new Date),clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout(()=>this.monthSelectNode.focus(),400)}async hide(e=!0){this.open=!1,clearTimeout(this.focusTimeoutId),e&&setTimeout(()=>this.datePickerButton.focus(),600)}addDays(e){this.setFocusedDay(h(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(p(this.focusedDay))}endOfWeek(){this.setFocusedDay(b(this.focusedDay))}setMonth(e){const t=g(v(this.focusedDay),e),a=m(t),i=g(this.focusedDay,e);this.setFocusedDay(y(i,t,a))}setYear(e){const t=_(v(this.focusedDay),e),a=m(t),i=_(this.focusedDay,e);this.setFocusedDay(y(i,t,a))}setFocusedDay(e){this.focusedDay=y(e,l(this.min),l(this.max))}setValue(e){this.value=function(e){return u(e,"YYYY-MM-DD")}(e),this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:e})}handleDocumentClick(e){if(!this.open)return;const t=e.target;this.dialogWrapperNode.contains(t)||this.datePickerButton.contains(t)||this.hide(!1)}render(){const t=l(this.value),a=u(t,"dd.mm.yyyy"),o=(t||this.focusedDay).getFullYear(),d=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),r=k[this.language],c=l(this.min),h=l(this.max),p=null!=c&&c.getMonth()===d&&c.getFullYear()===s,b=null!=h&&h.getMonth()===d&&h.getFullYear()===s;return e(i,null,e("div",{class:"duet-date"},e(n,{value:a,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,placeholder:r.placeholder,buttonLabel:r.buttonLabel,identifier:this.identifier,buttonRef:e=>this.datePickerButton=e,inputRef:e=>this.datePickerInput=e}),e("div",{class:{"duet-date__dialog":!0,"is-active":this.open},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:e=>this.dialogWrapperNode=e},e("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},e("label",{class:"duet-date__mobile-heading"},r.calendarHeading),e("button",{class:"duet-date__close",ref:e=>this.firstFocusableElement=e,onKeyDown:this.handleFirstFocusableKeydown,onClick:()=>this.hide(),"data-label":r.closeLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M0 0h24v24H0V0z",fill:"none"}),e("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),e("span",{class:"duet-date__vhidden"},r.closeLabel))),e("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",null,e("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},r.monthLabels[d]," ",this.focusedDay.getFullYear()),e("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},r.monthSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.monthSelectId,ref:e=>this.monthSelectNode=e,onChange:this.handleMonthSelect},r.monthLabels.map((t,a)=>e("option",{value:a,selected:a===d},t))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,r.monthLabelsShort[d]),e("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),e("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},r.yearSelectLabel),e("div",{class:"duet-date__select"},e("select",{id:this.yearSelectId,onChange:this.handleYearSelect},function(e,t){for(var a=[],i=0;i<=t-e;i++)a.push(e+i);return a}(o-10,o+10).map(t=>e("option",{selected:t===s},t))),e("div",{class:"duet-date__select-label","aria-hidden":"true"},e("span",null,this.focusedDay.getFullYear()),e("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},e("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),e("div",{class:"duet-date__nav"},e("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:p,"data-label":r.prevMonthLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},e("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),e("span",{class:"duet-date__vhidden"},r.prevMonthLabel)),e("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:b,"data-label":r.nextMonthLabel,type:"button"},e("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},e("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),e("span",{class:"duet-date__vhidden"},r.nextMonthLabel)))),e(L,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,language:this.language,focusedDayRef:this.processFocusedDayNode,min:c,max:h}),e("div",{class:"duet-date__vhidden","aria-live":"polite"},r.keyboardInstruction)))))}get element(){return o(this)}};z.style='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}';export{z as duet_date_picker}

dist/duet/duet-date-picker.system.entry.js

@@ -1,1 +0,1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,a,n){function i(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,o){function r(e){try{s(n.next(e))}catch(e){o(e)}}function d(e){try{s(n["throw"](e))}catch(e){o(e)}}function s(e){e.done?a(e.value):i(e.value).then(r,d)}s((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,r;return r={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function d(e){return function(t){return s([e,t])}}function s(r){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:a.label++;return{value:r[1],done:false};case 5:a.label++;i=r[1];r=[0];continue;case 7:r=a.ops.pop();a.trys.pop();continue;default:if(!(o=a.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){a=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){a.label=r[1];break}if(r[0]===6&&a.label<o[1]){a.label=o[1];o=r;break}if(o&&a.label<o[2]){a.label=o[2];a.ops.push(r);break}if(o[2])a.ops.pop();a.trys.pop();continue}r=t.call(e,a)}catch(e){r=[6,e];i=0}finally{n=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./index-d828e802.system.js"],(function(e){"use strict";var t,a,n,i,o;return{setters:[function(e){t=e.h;a=e.r;n=e.c;i=e.H;o=e.g}],execute:function(){var r=function(e){var a=e.onClick,n=e.placeholder,i=e.buttonLabel,o=e.name,r=e.value,d=e.identifier,s=e.disabled,l=e.role,u=e.buttonRef,c=e.inputRef,h=e.onInput,p=e.onBlur,f=e.onFocus;return t("div",{class:"duet-date__input-wrapper"},t("input",{class:"duet-date__input",name:o,value:r,placeholder:n,id:d,disabled:s,role:l,"aria-autocomplete":"none",onInput:h,onFocus:f,onBlur:p,autoComplete:"off",ref:c}),t("button",{class:"duet-date__toggle",onClick:a,disabled:s,ref:u,type:"button"},t("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},t("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},t("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),t("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),t("g",{fill:"currentColor"},t("circle",{cx:"8.5",cy:"8.5",r:"1"}),t("circle",{cx:"4.5",cy:"8.5",r:"1"}),t("circle",{cx:"12.5",cy:"8.5",r:"1"}),t("circle",{cx:"8.5",cy:"12.5",r:"1"}),t("circle",{cx:"4.5",cy:"12.5",r:"1"}),t("circle",{cx:"12.5",cy:"12.5",r:"1"})))),t("span",{class:"duet-date__vhidden"},i)))};var d=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;var s=/^(\d{4})-(\d{2})-(\d{2})$/;var l="dd.mm.yyyy";var u="YYYY-MM-DD";function c(e,t,a){var n=parseInt(a,10);var i=parseInt(t,10);var o=parseInt(e,10);var r=Number.isInteger(o)&&Number.isInteger(i)&&Number.isInteger(n)&&i>0&&i<=12&&n>0&&n<=31&&o>0;if(r){return new Date(o,i-1,n)}}function h(e){if(!e){return}var t=e.match(d);if(t){return c(t[3],t[2],t[1])}}function p(e){if(!e){return}var t=e.match(s);if(t){return c(t[1],t[2],t[3])}}function f(e,t){if(!e){return""}var a=e.getDate().toString(10);var n=(e.getMonth()+1).toString(10);var i=e.getFullYear().toString(10);if(e.getDate()<10){a="0"+a}if(e.getMonth()<9){n="0"+n}return t.replace(/MM/i,n).replace(/YYYY/i,i).replace(/DD/i,a)}function v(e){return f(e,l)}function b(e){return f(e,u)}function g(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function y(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function m(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?7:0)+n-t;a.setDate(a.getDate()-i);return a}function _(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?-7:0)+6-(n-t);a.setDate(a.getDate()+i);return a}function x(e){return new Date(e.getFullYear(),e.getMonth(),1)}function w(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function D(e,t){var a=new Date(e);a.setMonth(t);return a}function k(e,t){var a=new Date(e);a.setFullYear(t);return a}function M(e,t,a){return L(e,t,a)===e}function L(e,t,a){var n=e.getTime();if(t&&t instanceof Date&&n<t.getTime()){return t}if(a&&a instanceof Date&&n>a.getTime()){return a}return e}function F(e,t){var a=[];var n=e;while(!g(n,t)){a.push(n);n=y(n,1)}a.push(n);return a}function S(e,t){if(t===void 0){t=1}var a=m(x(e),t);var n=_(w(e),t);return F(a,n)}function T(){return Math.random().toString(16).slice(-4)}function Y(e){return e+"-"+T()+T()+"-"+T()+"-"+T()+"-"+T()+"-"+T()+T()+T()}var I={en:{locale:"en-GB",buttonLabel:"Choose date",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",dayLabels:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],calendarHeading:"Choose a date",placeholder:"dd.mm.yyyy",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"]},fi:{locale:"fi-FI",buttonLabel:"Valitse päivämäärä",prevMonthLabel:"Edellinen kuukausi",nextMonthLabel:"Seuraava kuukausi",monthSelectLabel:"Kuukausi",yearSelectLabel:"Vuosi",closeLabel:"Sulje ikkuna",keyboardInstruction:"Voit navigoida päivämääriä nuolinäppäimillä",dayLabels:["Maanantai","Tiistai","Keskiviikko","Torstai","Perjantai","Lauantai","Sunnuntai"],placeholder:"pp.kk.vvvv",calendarHeading:"Valitse päivämäärä",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"]},sv:{locale:"sv-SE",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",keyboardInstruction:"Använd piltangenterna för att navigera i kalender",dayLabels:["Måndag","Tisdag","Onsdag","Torsdag","Fredag","Lördag","Söndag"],placeholder:"dd.mm.åååå",calendarHeading:"Välj datum",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"]}};var C=function(e){var a=e.selectedDay,n=e.focusedDay,i=e.today,o=e.day,r=e.language,d=e.onDaySelect,s=e.onKeyboardNavigation,l=e.focusedDayRef,u=e.inRange;var c=g(o,i);var h=g(o,n);var p=g(o,a);var f=o.getMonth()!==n.getMonth();var v=!u;var b=I[r].locale;function y(e){d(e,o)}return t("button",{class:{"duet-date__day":true,"is-outside":v,"is-disabled":f,"is-today":c},tabIndex:h?0:-1,onClick:y,onKeyDown:s,"aria-selected":p?"true":undefined,"data-label":o.toLocaleDateString(b),disabled:v||f,type:"button",ref:function(e){if(h&&e&&l){l(e)}}},t("span",{"aria-hidden":"true"},o.getDate()),t("span",{class:"duet-date__vhidden"},o.toLocaleDateString(b)))};function N(e,t){var a=[];for(var n=0;n<e.length;n+=t){a.push(e.slice(n,n+t))}return a}var z=function(e){var a=e.selectedDate,n=e.focusedDate,i=e.labelledById,o=e.language,r=e.min,d=e.max,s=e.onDateSelect,l=e.onKeyboardNavigation,u=e.focusedDayRef,c=e.onMouseDown,h=e.onFocusIn;var p=I[o].dayLabels;var f=new Date;var v=S(n);return t("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:h,onMouseDown:c},t("thead",null,t("tr",null,p.map((function(e){return t("th",{class:"duet-date__table-header",scope:"col"},t("span",{"aria-hidden":"true"},e.substr(0,2)),t("span",{class:"duet-date__vhidden"},e))})))),t("tbody",null,N(v,7).map((function(e){return t("tr",{class:"duet-date__row"},e.map((function(e){return t("td",{class:"duet-date__cell"},t(C,{day:e,today:f,language:o,selectedDay:a,focusedDay:n,inRange:M(e,r,d),onDaySelect:s,onKeyboardNavigation:l,focusedDayRef:u}))})))}))))};var E='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}';function A(e,t){var a=[];for(var n=0;n<=t-e;n++){a.push(e+n)}return a}var B={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};var P=/[^0-9\.]+/g;var K=400;var O=e("duet_date_picker",function(){function e(e){var t=this;a(this,e);this.duetChange=n(this,"duetChange",7);this.duetBlur=n(this,"duetBlur",7);this.duetFocus=n(this,"duetFocus",7);this.monthSelectId=Y("DuetDateMonth");this.yearSelectId=Y("DuetDateYear");this.dialogLabelId=Y("DuetDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.open=false;this.focusedDay=new Date;this.name="";this.identifier="";this.language="en";this.disabled=false;this.value="";this.min="";this.max="";this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.toggleOpen=function(e){e.preventDefault();t.open?t.hide(false):t.show()};this.handleEscKey=function(e){if(e.keyCode===B.ESC){t.hide()}};this.handleBlur=function(e){e.stopPropagation();t.duetBlur.emit({component:"duet-date-picker"})};this.handleFocus=function(e){e.stopPropagation();t.duetFocus.emit({component:"duet-date-picker"})};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var n=a.pageX-t.initialTouchX;var i=a.pageY-t.initialTouchY;var o=70;var r=Math.abs(n)>=o&&Math.abs(i)<=o;var d=Math.abs(i)>=o&&Math.abs(n)<=o&&i>0;if(r){t.addMonths(n<0?1:-1)}else if(d){t.hide();e.preventDefault()}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleFirstFocusableKeydown=function(e){if(e.keyCode===B.TAB&&e.shiftKey){t.focusedDayNode.focus();e.preventDefault()}};this.handleKeyboardNavigation=function(e){if(e.keyCode===B.TAB&&!e.shiftKey){e.preventDefault();t.firstFocusableElement.focus();return}var a=true;switch(e.keyCode){case B.RIGHT:t.addDays(1);break;case B.LEFT:t.addDays(-1);break;case B.DOWN:t.addDays(7);break;case B.UP:t.addDays(-7);break;case B.PAGE_UP:if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case B.PAGE_DOWN:if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case B.HOME:t.startOfWeek();break;case B.END:t.endOfWeek();break;default:a=false}if(a){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){if(!M(a,p(t.min),p(t.max))){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a);t.hide()}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.handleInputChange=function(e){var a=e.target;a.value=a.value.replace(P,"");var n=h(a.value);if(n||a.value===""){t.setValue(n)}};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus&&t.open){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.datePickerInput.focus()]}))}))};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){this.open=true;this.setFocusedDay(p(this.value)||new Date);clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){return e.monthSelectNode.focus()}),K);return[2]}))}))};e.prototype.hide=function(e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(a){this.open=false;clearTimeout(this.focusTimeoutId);if(e){setTimeout((function(){return t.datePickerButton.focus()}),K+200)}return[2]}))}))};e.prototype.addDays=function(e){this.setFocusedDay(y(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(m(this.focusedDay))};e.prototype.endOfWeek=function(){this.setFocusedDay(_(this.focusedDay))};e.prototype.setMonth=function(e){var t=D(x(this.focusedDay),e);var a=w(t);var n=D(this.focusedDay,e);this.setFocusedDay(L(n,t,a))};e.prototype.setYear=function(e){var t=k(x(this.focusedDay),e);var a=w(t);var n=k(this.focusedDay,e);this.setFocusedDay(L(n,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=L(e,p(this.min),p(this.max))};e.prototype.setValue=function(e){this.value=b(e);this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:e})};e.prototype.handleDocumentClick=function(e){if(!this.open){return}var t=e.target;if(this.dialogWrapperNode.contains(t)||this.datePickerButton.contains(t)){return}this.hide(false)};e.prototype.render=function(){var e=this;var a=p(this.value);var n=v(a);var o=(a||this.focusedDay).getFullYear();var d=this.focusedDay.getMonth();var s=this.focusedDay.getFullYear();var l=I[this.language];var u=p(this.min);var c=p(this.max);var h=u!=null&&u.getMonth()===d&&u.getFullYear()===s;var f=c!=null&&c.getMonth()===d&&c.getFullYear()===s;return t(i,null,t("div",{class:"duet-date"},t(r,{value:n,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,placeholder:l.placeholder,buttonLabel:l.buttonLabel,identifier:this.identifier,buttonRef:function(t){return e.datePickerButton=t},inputRef:function(t){return e.datePickerInput=t}}),t("div",{class:{"duet-date__dialog":true,"is-active":this.open},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:function(t){return e.dialogWrapperNode=t}},t("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},t("label",{class:"duet-date__mobile-heading"},l.calendarHeading),t("button",{class:"duet-date__close",ref:function(t){return e.firstFocusableElement=t},onKeyDown:this.handleFirstFocusableKeydown,onClick:function(){return e.hide()},"data-label":l.closeLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M0 0h24v24H0V0z",fill:"none"}),t("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),t("span",{class:"duet-date__vhidden"},l.closeLabel))),t("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},t("div",null,t("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},l.monthLabels[d]," ",this.focusedDay.getFullYear()),t("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},l.monthSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.monthSelectId,ref:function(t){return e.monthSelectNode=t},onChange:this.handleMonthSelect},l.monthLabels.map((function(e,a){return t("option",{value:a,selected:a===d},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,l.monthLabelsShort[d]),t("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),t("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},l.yearSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.yearSelectId,onChange:this.handleYearSelect},A(o-10,o+10).map((function(e){return t("option",{selected:e===s},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.focusedDay.getFullYear()),t("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),t("div",{class:"duet-date__nav"},t("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:h,"data-label":l.prevMonthLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},t("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),t("span",{class:"duet-date__vhidden"},l.prevMonthLabel)),t("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:f,"data-label":l.nextMonthLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},t("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),t("span",{class:"duet-date__vhidden"},l.nextMonthLabel)))),t(z,{selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,language:this.language,focusedDayRef:this.processFocusedDayNode,min:u,max:c}),t("div",{class:"duet-date__vhidden","aria-live":"polite"},l.keyboardInstruction)))))};Object.defineProperty(e.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());O.style=E}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,a,n){function i(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,o){function r(e){try{s(n.next(e))}catch(e){o(e)}}function d(e){try{s(n["throw"](e))}catch(e){o(e)}}function s(e){e.done?a(e.value):i(e.value).then(r,d)}s((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,r;return r={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function d(e){return function(t){return s([e,t])}}function s(r){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:a.label++;return{value:r[1],done:false};case 5:a.label++;i=r[1];r=[0];continue;case 7:r=a.ops.pop();a.trys.pop();continue;default:if(!(o=a.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){a=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){a.label=r[1];break}if(r[0]===6&&a.label<o[1]){a.label=o[1];o=r;break}if(o&&a.label<o[2]){a.label=o[2];a.ops.push(r);break}if(o[2])a.ops.pop();a.trys.pop();continue}r=t.call(e,a)}catch(e){r=[6,e];i=0}finally{n=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./index-b4a2d0d3.system.js"],(function(e){"use strict";var t,a,n,i,o;return{setters:[function(e){t=e.h;a=e.r;n=e.c;i=e.H;o=e.g}],execute:function(){var r=function(e){var a=e.onClick,n=e.placeholder,i=e.buttonLabel,o=e.name,r=e.value,d=e.identifier,s=e.disabled,l=e.role,u=e.buttonRef,c=e.inputRef,h=e.onInput,p=e.onBlur,f=e.onFocus;return t("div",{class:"duet-date__input-wrapper"},t("input",{class:"duet-date__input",name:o,value:r,placeholder:n,id:d,disabled:s,role:l,"aria-autocomplete":"none",onInput:h,onFocus:f,onBlur:p,autoComplete:"off",ref:c}),t("button",{class:"duet-date__toggle",onClick:a,disabled:s,ref:u,type:"button"},t("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},t("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},t("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),t("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),t("g",{fill:"currentColor"},t("circle",{cx:"8.5",cy:"8.5",r:"1"}),t("circle",{cx:"4.5",cy:"8.5",r:"1"}),t("circle",{cx:"12.5",cy:"8.5",r:"1"}),t("circle",{cx:"8.5",cy:"12.5",r:"1"}),t("circle",{cx:"4.5",cy:"12.5",r:"1"}),t("circle",{cx:"12.5",cy:"12.5",r:"1"})))),t("span",{class:"duet-date__vhidden"},i)))};var d=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;var s=/^(\d{4})-(\d{2})-(\d{2})$/;var l="dd.mm.yyyy";var u="YYYY-MM-DD";function c(e,t,a){var n=parseInt(a,10);var i=parseInt(t,10);var o=parseInt(e,10);var r=Number.isInteger(o)&&Number.isInteger(i)&&Number.isInteger(n)&&i>0&&i<=12&&n>0&&n<=31&&o>0;if(r){return new Date(o,i-1,n)}}function h(e){if(!e){return}var t=e.match(d);if(t){return c(t[3],t[2],t[1])}}function p(e){if(!e){return}var t=e.match(s);if(t){return c(t[1],t[2],t[3])}}function f(e,t){if(!e){return""}var a=e.getDate().toString(10);var n=(e.getMonth()+1).toString(10);var i=e.getFullYear().toString(10);if(e.getDate()<10){a="0"+a}if(e.getMonth()<9){n="0"+n}return t.replace(/MM/i,n).replace(/YYYY/i,i).replace(/DD/i,a)}function v(e){return f(e,l)}function b(e){return f(e,u)}function g(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function y(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function m(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?7:0)+n-t;a.setDate(a.getDate()-i);return a}function _(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?-7:0)+6-(n-t);a.setDate(a.getDate()+i);return a}function x(e){return new Date(e.getFullYear(),e.getMonth(),1)}function w(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function D(e,t){var a=new Date(e);a.setMonth(t);return a}function k(e,t){var a=new Date(e);a.setFullYear(t);return a}function M(e,t,a){return L(e,t,a)===e}function L(e,t,a){var n=e.getTime();if(t&&t instanceof Date&&n<t.getTime()){return t}if(a&&a instanceof Date&&n>a.getTime()){return a}return e}function F(e,t){var a=[];var n=e;while(!g(n,t)){a.push(n);n=y(n,1)}a.push(n);return a}function S(e,t){if(t===void 0){t=1}var a=m(x(e),t);var n=_(w(e),t);return F(a,n)}function T(){return Math.random().toString(16).slice(-4)}function Y(e){return e+"-"+T()+T()+"-"+T()+"-"+T()+"-"+T()+"-"+T()+T()+T()}var I={en:{locale:"en-GB",buttonLabel:"Choose date",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",dayLabels:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],calendarHeading:"Choose a date",placeholder:"dd.mm.yyyy",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"]},fi:{locale:"fi-FI",buttonLabel:"Valitse päivämäärä",prevMonthLabel:"Edellinen kuukausi",nextMonthLabel:"Seuraava kuukausi",monthSelectLabel:"Kuukausi",yearSelectLabel:"Vuosi",closeLabel:"Sulje ikkuna",keyboardInstruction:"Voit navigoida päivämääriä nuolinäppäimillä",dayLabels:["Maanantai","Tiistai","Keskiviikko","Torstai","Perjantai","Lauantai","Sunnuntai"],placeholder:"pp.kk.vvvv",calendarHeading:"Valitse päivämäärä",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"]},sv:{locale:"sv-SE",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",keyboardInstruction:"Använd piltangenterna för att navigera i kalender",dayLabels:["Måndag","Tisdag","Onsdag","Torsdag","Fredag","Lördag","Söndag"],placeholder:"dd.mm.åååå",calendarHeading:"Välj datum",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"]}};var C=function(e){var a=e.selectedDay,n=e.focusedDay,i=e.today,o=e.day,r=e.language,d=e.onDaySelect,s=e.onKeyboardNavigation,l=e.focusedDayRef,u=e.inRange;var c=g(o,i);var h=g(o,n);var p=g(o,a);var f=o.getMonth()!==n.getMonth();var v=!u;var b=I[r].locale;function y(e){d(e,o)}return t("button",{class:{"duet-date__day":true,"is-outside":v,"is-disabled":f,"is-today":c},tabIndex:h?0:-1,onClick:y,onKeyDown:s,"aria-selected":p?"true":undefined,"data-label":o.toLocaleDateString(b),disabled:v||f,type:"button",ref:function(e){if(h&&e&&l){l(e)}}},t("span",{"aria-hidden":"true"},o.getDate()),t("span",{class:"duet-date__vhidden"},o.toLocaleDateString(b)))};function N(e,t){var a=[];for(var n=0;n<e.length;n+=t){a.push(e.slice(n,n+t))}return a}var z=function(e){var a=e.selectedDate,n=e.focusedDate,i=e.labelledById,o=e.language,r=e.min,d=e.max,s=e.onDateSelect,l=e.onKeyboardNavigation,u=e.focusedDayRef,c=e.onMouseDown,h=e.onFocusIn;var p=I[o].dayLabels;var f=new Date;var v=S(n);return t("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:h,onMouseDown:c},t("thead",null,t("tr",null,p.map((function(e){return t("th",{class:"duet-date__table-header",scope:"col"},t("span",{"aria-hidden":"true"},e.substr(0,2)),t("span",{class:"duet-date__vhidden"},e))})))),t("tbody",null,N(v,7).map((function(e){return t("tr",{class:"duet-date__row"},e.map((function(e){return t("td",{class:"duet-date__cell"},t(C,{day:e,today:f,language:o,selectedDay:a,focusedDay:n,inRange:M(e,r,d),onDaySelect:s,onKeyboardNavigation:l,focusedDayRef:u}))})))}))))};var E='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}';function A(e,t){var a=[];for(var n=0;n<=t-e;n++){a.push(e+n)}return a}var B={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};var P=/[^0-9\.]+/g;var K=400;var O=e("duet_date_picker",function(){function e(e){var t=this;a(this,e);this.duetChange=n(this,"duetChange",7);this.duetBlur=n(this,"duetBlur",7);this.duetFocus=n(this,"duetFocus",7);this.monthSelectId=Y("DuetDateMonth");this.yearSelectId=Y("DuetDateYear");this.dialogLabelId=Y("DuetDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.open=false;this.focusedDay=new Date;this.name="";this.identifier="";this.language="en";this.disabled=false;this.value="";this.min="";this.max="";this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.toggleOpen=function(e){e.preventDefault();t.open?t.hide(false):t.show()};this.handleEscKey=function(e){if(e.keyCode===B.ESC){t.hide()}};this.handleBlur=function(e){e.stopPropagation();t.duetBlur.emit({component:"duet-date-picker"})};this.handleFocus=function(e){e.stopPropagation();t.duetFocus.emit({component:"duet-date-picker"})};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var n=a.pageX-t.initialTouchX;var i=a.pageY-t.initialTouchY;var o=70;var r=Math.abs(n)>=o&&Math.abs(i)<=o;var d=Math.abs(i)>=o&&Math.abs(n)<=o&&i>0;if(r){t.addMonths(n<0?1:-1)}else if(d){t.hide();e.preventDefault()}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleFirstFocusableKeydown=function(e){if(e.keyCode===B.TAB&&e.shiftKey){t.focusedDayNode.focus();e.preventDefault()}};this.handleKeyboardNavigation=function(e){if(e.keyCode===B.TAB&&!e.shiftKey){e.preventDefault();t.firstFocusableElement.focus();return}var a=true;switch(e.keyCode){case B.RIGHT:t.addDays(1);break;case B.LEFT:t.addDays(-1);break;case B.DOWN:t.addDays(7);break;case B.UP:t.addDays(-7);break;case B.PAGE_UP:if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case B.PAGE_DOWN:if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case B.HOME:t.startOfWeek();break;case B.END:t.endOfWeek();break;default:a=false}if(a){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){if(!M(a,p(t.min),p(t.max))){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a);t.hide()}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.handleInputChange=function(e){var a=e.target;a.value=a.value.replace(P,"");var n=h(a.value);if(n||a.value===""){t.setValue(n)}};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus&&t.open){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.datePickerInput.focus()]}))}))};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){this.open=true;this.setFocusedDay(p(this.value)||new Date);clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){return e.monthSelectNode.focus()}),K);return[2]}))}))};e.prototype.hide=function(e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(a){this.open=false;clearTimeout(this.focusTimeoutId);if(e){setTimeout((function(){return t.datePickerButton.focus()}),K+200)}return[2]}))}))};e.prototype.addDays=function(e){this.setFocusedDay(y(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(m(this.focusedDay))};e.prototype.endOfWeek=function(){this.setFocusedDay(_(this.focusedDay))};e.prototype.setMonth=function(e){var t=D(x(this.focusedDay),e);var a=w(t);var n=D(this.focusedDay,e);this.setFocusedDay(L(n,t,a))};e.prototype.setYear=function(e){var t=k(x(this.focusedDay),e);var a=w(t);var n=k(this.focusedDay,e);this.setFocusedDay(L(n,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=L(e,p(this.min),p(this.max))};e.prototype.setValue=function(e){this.value=b(e);this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:e})};e.prototype.handleDocumentClick=function(e){if(!this.open){return}var t=e.target;if(this.dialogWrapperNode.contains(t)||this.datePickerButton.contains(t)){return}this.hide(false)};e.prototype.render=function(){var e=this;var a=p(this.value);var n=v(a);var o=(a||this.focusedDay).getFullYear();var d=this.focusedDay.getMonth();var s=this.focusedDay.getFullYear();var l=I[this.language];var u=p(this.min);var c=p(this.max);var h=u!=null&&u.getMonth()===d&&u.getFullYear()===s;var f=c!=null&&c.getMonth()===d&&c.getFullYear()===s;return t(i,null,t("div",{class:"duet-date"},t(r,{value:n,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,placeholder:l.placeholder,buttonLabel:l.buttonLabel,identifier:this.identifier,buttonRef:function(t){return e.datePickerButton=t},inputRef:function(t){return e.datePickerInput=t}}),t("div",{class:{"duet-date__dialog":true,"is-active":this.open},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:function(t){return e.dialogWrapperNode=t}},t("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},t("label",{class:"duet-date__mobile-heading"},l.calendarHeading),t("button",{class:"duet-date__close",ref:function(t){return e.firstFocusableElement=t},onKeyDown:this.handleFirstFocusableKeydown,onClick:function(){return e.hide()},"data-label":l.closeLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M0 0h24v24H0V0z",fill:"none"}),t("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),t("span",{class:"duet-date__vhidden"},l.closeLabel))),t("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},t("div",null,t("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},l.monthLabels[d]," ",this.focusedDay.getFullYear()),t("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},l.monthSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.monthSelectId,ref:function(t){return e.monthSelectNode=t},onChange:this.handleMonthSelect},l.monthLabels.map((function(e,a){return t("option",{value:a,selected:a===d},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,l.monthLabelsShort[d]),t("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),t("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},l.yearSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.yearSelectId,onChange:this.handleYearSelect},A(o-10,o+10).map((function(e){return t("option",{selected:e===s},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.focusedDay.getFullYear()),t("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},t("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),t("div",{class:"duet-date__nav"},t("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:h,"data-label":l.prevMonthLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},t("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),t("span",{class:"duet-date__vhidden"},l.prevMonthLabel)),t("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:f,"data-label":l.nextMonthLabel,type:"button"},t("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},t("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),t("span",{class:"duet-date__vhidden"},l.nextMonthLabel)))),t(z,{selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,language:this.language,focusedDayRef:this.processFocusedDayNode,min:u,max:c}),t("div",{class:"duet-date__vhidden","aria-live":"polite"},l.keyboardInstruction)))))};Object.defineProperty(e.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());O.style=E}}}));

dist/duet/duet.esm.js

@@ -1,1 +0,1 @@
-import{b as e}from"./index-330a800f.js";import{p as a}from"./patch-3f1d0aae.js";a().then(a=>e([["duet-date-picker",[[0,"duet-date-picker",{name:[1],identifier:[1],language:[1],disabled:[516],role:[1],value:[513],min:[1],max:[1],activeFocus:[32],open:[32],focusedDay:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]]],a));
+import{p as e,w as t,d as n,N as o,a,b as s}from"./index-2ab9c052.js";const i="undefined"!=typeof Deno,r=!(i||"undefined"==typeof global||"function"!=typeof require||!global.process||"string"!=typeof __filename||global.origin&&"string"==typeof global.origin),c=(r?process:i&&Deno,r&&require,r?process:i&&Deno,(e,a)=>{const s="__sc_import_"+o.replace(/\s|-/g,"_");try{t[s]=new Function("w","return import(w);//"+Math.random())}catch(o){const i=new Map;t[s]=o=>{const r=new URL(o,e).href;let c=i.get(r);if(!c){const e=n.createElement("script");e.type="module",e.crossOrigin=a.crossOrigin,e.src=URL.createObjectURL(new Blob([`import * as m from '${r}'; window.${s}.m = m;`],{type:"application/javascript"})),c=new Promise(n=>{e.onload=()=>{n(t[s].m),e.remove()}}),i.set(r,c),n.head.appendChild(e)}return c}}});(()=>{e.t=t.__cssshim;const s=Array.from(n.querySelectorAll("script")).find(e=>new RegExp(`/${o}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===o),i={};return i.resourcesUrl=new URL(".",new URL(s.getAttribute("data-resources-url")||s.src,t.location.href)).href,c(i.resourcesUrl,s),t.customElements?a(i):__sc_import_duet("./dom-c100e06a.js").then(()=>i)})().then(e=>s([["duet-date-picker",[[0,"duet-date-picker",{name:[1],identifier:[1],language:[1],disabled:[516],role:[1],value:[513],min:[1],max:[1],activeFocus:[32],open:[32],focusedDay:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]]],e));

dist/duet/duet.system.js

@@ -1,1 +0,1 @@
-System.register(["./index-d828e802.system.js","./patch-20fd17d4.system.js"],(function(){"use strict";var e,t;return{setters:[function(t){e=t.b},function(e){t=e.p}],execute:function(){t().then((function(t){return e([["duet-date-picker.system",[[0,"duet-date-picker",{name:[1],identifier:[1],language:[1],disabled:[516],role:[1],value:[513],min:[1],max:[1],activeFocus:[32],open:[32],focusedDay:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]]],t)}))}}}));
+System.register(["./index-b4a2d0d3.system.js"],(function(e,r){"use strict";var t,n,i,o,s,a;return{setters:[function(e){t=e.p;n=e.w;i=e.d;o=e.N;s=e.a;a=e.b}],execute:function(){var e=function(){};var c=typeof Deno!=="undefined";var u=!c&&typeof global!=="undefined"&&typeof require==="function"&&!!global.process&&typeof __filename==="string"&&(!global.origin||typeof global.origin!=="string");var l=u?process.platform:c?Deno.build.os:"";var f=u?require:e;var d=u?process.cwd:c?Deno.cwd:function(){return"/"};var m=function(e){return"__sc_import_"+e.replace(/\s|-/g,"_")};var p=function(){{t.$cssShim$=n.__cssshim}var e=Array.from(i.querySelectorAll("script")).find((function(e){return new RegExp("/"+o+"(\\.esm)?\\.js($|\\?|#)").test(e.src)||e.getAttribute("data-stencil-namespace")===o}));var a=r.meta.url;var c={};if(a!==""){c.resourcesUrl=new URL(".",a).href}else{c.resourcesUrl=new URL(".",new URL(e.getAttribute("data-resources-url")||e.src,n.location.href)).href;{v(c.resourcesUrl,e)}if(!n.customElements){return r.import("./dom-2e802dc8.system.js").then((function(){return c}))}}return s(c)};var v=function(e,r){var t=m(o);try{n[t]=new Function("w","return import(w);//"+Math.random())}catch(o){var s=new Map;n[t]=function(o){var a=new URL(o,e).href;var c=s.get(a);if(!c){var u=i.createElement("script");u.type="module";u.crossOrigin=r.crossOrigin;u.src=URL.createObjectURL(new Blob(["import * as m from '"+a+"'; window."+t+".m = m;"],{type:"application/javascript"}));c=new Promise((function(e){u.onload=function(){e(n[t].m);u.remove()}}));s.set(a,c);i.head.appendChild(u)}return c}}};p().then((function(e){return a([["duet-date-picker.system",[[0,"duet-date-picker",{name:[1],identifier:[1],language:[1],disabled:[516],role:[1],value:[513],min:[1],max:[1],activeFocus:[32],open:[32],focusedDay:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]]],e)}))}}}));

dist/esm-es5/duet-date-picker.entry.js

@@ -1,722 +0,1 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4824c12f.js';
-var DatePickerInput = function (_a) {
-    var onClick = _a.onClick, placeholder = _a.placeholder, buttonLabel = _a.buttonLabel, name = _a.name, value = _a.value, identifier = _a.identifier, disabled = _a.disabled, role = _a.role, buttonRef = _a.buttonRef, inputRef = _a.inputRef, onInput = _a.onInput, onBlur = _a.onBlur, onFocus = _a.onFocus;
-    return (h("div", { class: "duet-date__input-wrapper" }, h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }), h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" }, h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" }, h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("g", { fill: "currentColor" }, h("circle", { cx: "8.5", cy: "8.5", r: "1" }), h("circle", { cx: "4.5", cy: "8.5", r: "1" }), h("circle", { cx: "12.5", cy: "8.5", r: "1" }), h("circle", { cx: "8.5", cy: "12.5", r: "1" }), h("circle", { cx: "4.5", cy: "12.5", r: "1" }), h("circle", { cx: "12.5", cy: "12.5", r: "1" })))), h("span", { class: "duet-date__vhidden" }, buttonLabel))));
-};
-var DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
-var ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
-var DATE_OUTPUT_FORMAT = "dd.mm.yyyy";
-var 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);
-    var 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;
-    }
-    var 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;
-    }
-    var matches = value.match(ISO_DATE_FORMAT);
-    if (matches) {
-        return createDate(matches[1], matches[2], matches[3]);
-    }
-}
-/**
- * @param date the date to format as a string
- * @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);
-}
-/**
- * print date in format dd.mm.yyyy
- * @param date
- */
-function printDate(date) {
-    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);
-}
-/**
- * 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();
-}
-function addDays(date, days) {
-    var d = new Date(date);
-    d.setDate(d.getDate() + days);
-    return d;
-}
-function startOfWeek(date, firstDayOfWeek) {
-    if (firstDayOfWeek === void 0) { 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;
-}
-function endOfWeek(date, firstDayOfWeek) {
-    if (firstDayOfWeek === void 0) { 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;
-}
-function startOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-}
-function endOfMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
-}
-function setMonth(date, month) {
-    var d = new Date(date);
-    d.setMonth(month);
-    return d;
-}
-function setYear(date, year) {
-    var 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;
-}
-/**
- * Ensures date is within range, returns min or max if out of bounds
- */
-function clamp(date, min, max) {
-    var 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
- * @param start
- * @param end
- */
-function getDaysInRange(start, end) {
-    var days = [];
-    var current = start;
-    while (!isEqual(current, end)) {
-        days.push(current);
-        current = addDays(current, 1);
-    }
-    days.push(current);
-    return days;
-}
-/**
- * given a date, return an array of dates from a calendar perspective
- * @param date
- * @param firstDayOfWeek
- */
-function getViewOfMonth(date, firstDayOfWeek) {
-    if (firstDayOfWeek === void 0) { firstDayOfWeek = 1; }
-    var start = startOfWeek(startOfMonth(date), firstDayOfWeek);
-    var end = endOfWeek(endOfMonth(date), firstDayOfWeek);
-    return getDaysInRange(start, end);
-}
-/**
- * Form random hash
- */
-function chr4() {
-    return Math.random().toString(16).slice(-4);
-}
-/**
- * Create random identifier with a prefix
- * @param prefix
- */
-function createIdentifier(prefix) {
-    return prefix + "-" + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
-}
-var i18n = {
-    en: {
-        locale: "en-GB",
-        buttonLabel: "Choose date",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        monthSelectLabel: "Month",
-        yearSelectLabel: "Year",
-        closeLabel: "Close window",
-        keyboardInstruction: "You can use arrow keys to navigate dates",
-        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-        calendarHeading: "Choose a date",
-        placeholder: "dd.mm.yyyy",
-        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"],
-    },
-    fi: {
-        locale: "fi-FI",
-        buttonLabel: "Valitse päivämäärä",
-        prevMonthLabel: "Edellinen kuukausi",
-        nextMonthLabel: "Seuraava kuukausi",
-        monthSelectLabel: "Kuukausi",
-        yearSelectLabel: "Vuosi",
-        closeLabel: "Sulje ikkuna",
-        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-        placeholder: "pp.kk.vvvv",
-        calendarHeading: "Valitse päivämäärä",
-        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",
-        ],
-    },
-    sv: {
-        locale: "sv-SE",
-        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",
-        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-        placeholder: "dd.mm.åååå",
-        calendarHeading: "Välj datum",
-        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"],
-    },
-};
-var DatePickerDay = function (_a) {
-    var selectedDay = _a.selectedDay, focusedDay = _a.focusedDay, today = _a.today, day = _a.day, language = _a.language, onDaySelect = _a.onDaySelect, onKeyboardNavigation = _a.onKeyboardNavigation, focusedDayRef = _a.focusedDayRef, inRange = _a.inRange;
-    var isToday = isEqual(day, today);
-    var isFocused = isEqual(day, focusedDay);
-    var isSelected = isEqual(day, selectedDay);
-    var isDisabled = day.getMonth() !== focusedDay.getMonth();
-    var isOutsideRange = !inRange;
-    var locale = i18n[language].locale;
-    function handleClick(e) {
-        onDaySelect(e, day);
-    }
-    return (h("button", { class: {
-            "duet-date__day": true,
-            "is-outside": isOutsideRange,
-            "is-disabled": isDisabled,
-            "is-today": isToday,
-        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: function (el) {
-            if (isFocused && el && focusedDayRef) {
-                focusedDayRef(el);
-            }
-        } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
-};
-function chunk(array, chunkSize) {
-    var result = [];
-    for (var i = 0; i < array.length; i += chunkSize) {
-        result.push(array.slice(i, i + chunkSize));
-    }
-    return result;
-}
-var DatePickerMonth = function (_a) {
-    var selectedDate = _a.selectedDate, focusedDate = _a.focusedDate, labelledById = _a.labelledById, language = _a.language, min = _a.min, max = _a.max, onDateSelect = _a.onDateSelect, onKeyboardNavigation = _a.onKeyboardNavigation, focusedDayRef = _a.focusedDayRef, onMouseDown = _a.onMouseDown, onFocusIn = _a.onFocusIn;
-    var dayLabels = i18n[language].dayLabels;
-    var today = new Date();
-    var days = getViewOfMonth(focusedDate);
-    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById,
-        // @ts-ignore
-        onFocusin: onFocusIn, onMouseDown: onMouseDown }, h("thead", null, h("tr", null, dayLabels.map(function (label) { return (h("th", { class: "duet-date__table-header", scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("span", { class: "duet-date__vhidden" }, label))); }))), h("tbody", null, chunk(days, 7).map(function (week) { return (h("tr", { class: "duet-date__row" }, week.map(function (day) { return (h("td", { class: "duet-date__cell" }, h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))); }))); }))));
-};
-var duetDatePickerCss = ".duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}";
-function range(from, to) {
-    var result = [];
-    for (var i = 0; i <= to - from; i++) {
-        result.push(from + i);
-    }
-    return result;
-}
-var keyCode = {
-    TAB: 9,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
-};
-var DISALLOWED_CHARACTERS = /[^0-9\.]+/g;
-var TRANSITION_MS = 400;
-var DuetDatePicker = /** @class */ (function () {
-    function class_1(hostRef) {
-        var _this = this;
-        registerInstance(this, hostRef);
-        this.duetChange = createEvent(this, "duetChange", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.monthSelectId = createIdentifier("DuetDateMonth");
-        this.yearSelectId = createIdentifier("DuetDateYear");
-        this.dialogLabelId = createIdentifier("DuetDateLabel");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.activeFocus = false;
-        this.open = false;
-        this.focusedDay = new Date();
-        /**
-         * Name of the date picker input.
-         */
-        this.name = "";
-        /**
-         * Adds a unique identifier for the date picker input.
-         */
-        this.identifier = "";
-        /**
-         * The currently active language. This setting changes the month/year/day
-         * names and button labels as well as all screen reader labels.
-         */
-        this.language = "en";
-        /**
-         * Makes the date picker input component disabled. This prevents users from being able to
-         * interact with the input, and conveys its inactive state to assistive technologies.
-         */
-        this.disabled = false;
-        /**
-         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-         */
-        this.value = "";
-        /**
-         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-         * This setting can be used alone or together with the max property.
-         */
-        this.min = "";
-        /**
-         * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-         * This setting can be used alone or together with the min property.
-         */
-        this.max = "";
-        this.enableActiveFocus = function () {
-            _this.activeFocus = true;
-        };
-        this.disableActiveFocus = function () {
-            _this.activeFocus = false;
-        };
-        this.toggleOpen = function (e) {
-            e.preventDefault();
-            _this.open ? _this.hide(false) : _this.show();
-        };
-        this.handleEscKey = function (event) {
-            if (event.keyCode === keyCode.ESC) {
-                _this.hide();
-            }
-        };
-        this.handleBlur = function (event) {
-            event.stopPropagation();
-            _this.duetBlur.emit({
-                component: "duet-date-picker",
-            });
-        };
-        this.handleFocus = function (event) {
-            event.stopPropagation();
-            _this.duetFocus.emit({
-                component: "duet-date-picker",
-            });
-        };
-        this.handleTouchStart = function (event) {
-            var touch = event.changedTouches[0];
-            _this.initialTouchX = touch.pageX;
-            _this.initialTouchY = touch.pageY;
-        };
-        this.handleTouchMove = function (event) {
-            event.preventDefault();
-        };
-        this.handleTouchEnd = function (event) {
-            var touch = event.changedTouches[0];
-            var distX = touch.pageX - _this.initialTouchX; // get horizontal dist traveled
-            var distY = touch.pageY - _this.initialTouchY; // get vertical dist traveled
-            var threshold = 70;
-            var isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-            var 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 = function (event) {
-            event.preventDefault();
-            _this.addMonths(1);
-        };
-        this.handlePreviousMonthClick = function (event) {
-            event.preventDefault();
-            _this.addMonths(-1);
-        };
-        this.handleFirstFocusableKeydown = function (event) {
-            // this ensures focus is trapped inside the dialog
-            if (event.keyCode === keyCode.TAB && event.shiftKey) {
-                _this.focusedDayNode.focus();
-                event.preventDefault();
-            }
-        };
-        this.handleKeyboardNavigation = function (event) {
-            // handle tab separately, since it needs to be treated
-            // differently to other keyboard interactions
-            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-                event.preventDefault();
-                _this.firstFocusableElement.focus();
-                return;
-            }
-            var handled = true;
-            switch (event.keyCode) {
-                case keyCode.RIGHT:
-                    _this.addDays(1);
-                    break;
-                case keyCode.LEFT:
-                    _this.addDays(-1);
-                    break;
-                case keyCode.DOWN:
-                    _this.addDays(7);
-                    break;
-                case keyCode.UP:
-                    _this.addDays(-7);
-                    break;
-                case keyCode.PAGE_UP:
-                    if (event.shiftKey) {
-                        _this.addYears(-1);
-                    }
-                    else {
-                        _this.addMonths(-1);
-                    }
-                    break;
-                case keyCode.PAGE_DOWN:
-                    if (event.shiftKey) {
-                        _this.addYears(1);
-                    }
-                    else {
-                        _this.addMonths(1);
-                    }
-                    break;
-                case keyCode.HOME:
-                    _this.startOfWeek();
-                    break;
-                case keyCode.END:
-                    _this.endOfWeek();
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                event.preventDefault();
-                _this.enableActiveFocus();
-            }
-        };
-        this.handleDaySelect = function (_event, day) {
-            if (!inRange(day, parseISODate(_this.min), parseISODate(_this.max))) {
-                return;
-            }
-            if (day.getMonth() === _this.focusedDay.getMonth()) {
-                _this.setValue(day);
-                _this.hide();
-            }
-            else {
-                _this.setFocusedDay(day);
-            }
-        };
-        this.handleMonthSelect = function (e) {
-            _this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = function (e) {
-            _this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = function (e) {
-            var target = e.target;
-            // clean up any invalid characters
-            target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-            var parsed = parseDate(target.value);
-            if (parsed || target.value === "") {
-                _this.setValue(parsed);
-            }
-        };
-        this.processFocusedDayNode = function (element) {
-            _this.focusedDayNode = element;
-            if (_this.activeFocus && _this.open) {
-                setTimeout(function () { return element.focus(); }, 0);
-            }
-        };
-    }
-    /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-     */
-    class_1.prototype.setFocus = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this.datePickerInput.focus()];
-            });
-        });
-    };
-    /**
-     * Show the calendar modal, moving focus to the calendar inside.
-     */
-    class_1.prototype.show = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                this.open = true;
-                this.setFocusedDay(parseISODate(this.value) || new Date());
-                clearTimeout(this.focusTimeoutId);
-                this.focusTimeoutId = setTimeout(function () { return _this.monthSelectNode.focus(); }, TRANSITION_MS);
-                return [2 /*return*/];
-            });
-        });
-    };
-    /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
-     */
-    class_1.prototype.hide = function (moveFocusToButton) {
-        if (moveFocusToButton === void 0) { moveFocusToButton = true; }
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                this.open = false;
-                // in cases where calendar is quickly shown and hidden
-                // we should avoid moving focus to the button
-                clearTimeout(this.focusTimeoutId);
-                if (moveFocusToButton) {
-                    // iOS VoiceOver needs to wait for all transitions to finish.
-                    setTimeout(function () { return _this.datePickerButton.focus(); }, TRANSITION_MS + 200);
-                }
-                return [2 /*return*/];
-            });
-        });
-    };
-    class_1.prototype.addDays = function (days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
-    };
-    class_1.prototype.addMonths = function (months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
-    };
-    class_1.prototype.addYears = function (years) {
-        this.setYear(this.focusedDay.getFullYear() + years);
-    };
-    class_1.prototype.startOfWeek = function () {
-        this.setFocusedDay(startOfWeek(this.focusedDay));
-    };
-    class_1.prototype.endOfWeek = function () {
-        this.setFocusedDay(endOfWeek(this.focusedDay));
-    };
-    class_1.prototype.setMonth = function (month) {
-        var min = setMonth(startOfMonth(this.focusedDay), month);
-        var max = endOfMonth(min);
-        var date = setMonth(this.focusedDay, month);
-        this.setFocusedDay(clamp(date, min, max));
-    };
-    class_1.prototype.setYear = function (year) {
-        var min = setYear(startOfMonth(this.focusedDay), year);
-        var max = endOfMonth(min);
-        var date = setYear(this.focusedDay, year);
-        this.setFocusedDay(clamp(date, min, max));
-    };
-    class_1.prototype.setFocusedDay = function (day) {
-        this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
-    };
-    class_1.prototype.setValue = function (date) {
-        this.value = printISODate(date);
-        this.duetChange.emit({
-            component: "duet-date-picker",
-            value: this.value,
-            valueAsDate: date,
-        });
-    };
-    class_1.prototype.handleDocumentClick = function (e) {
-        if (!this.open) {
-            return;
-        }
-        var target = e.target;
-        // TODO: stopPropagation only on open??
-        // 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
-        //
-        // this was the only satisfactory combination of things to get the above to work
-        if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
-            return;
-        }
-        this.hide(false);
-    };
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    class_1.prototype.render = function () {
-        var _this = this;
-        var valueAsDate = parseISODate(this.value);
-        var formattedDate = printDate(valueAsDate);
-        var selectedYear = (valueAsDate || this.focusedDay).getFullYear();
-        var focusedMonth = this.focusedDay.getMonth();
-        var focusedYear = this.focusedDay.getFullYear();
-        var text = i18n[this.language];
-        var minDate = parseISODate(this.min);
-        var maxDate = parseISODate(this.max);
-        var prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-        var nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-        return (h(Host, null, h("div", { class: "duet-date" }, h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: function (element) { return (_this.datePickerButton = element); }, inputRef: function (element) { return (_this.datePickerInput = element); } }), h("div", { class: {
-                "duet-date__dialog": true,
-                "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: function (element) { return (_this.dialogWrapperNode = element); } }, h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), h("button", { class: "duet-date__close", ref: function (element) { return (_this.firstFocusableElement = element); }, onKeyDown: this.handleFirstFocusableKeydown, onClick: function () { return _this.hide(); }, "data-label": text.closeLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), h("span", { class: "duet-date__vhidden" }, text.closeLabel))), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, ref: function (element) { return (_this.monthSelectNode = element); }, onChange: this.handleMonthSelect }, text.monthLabels.map(function (month, i) { return (h("option", { value: i, selected: i === focusedMonth }, month)); })), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(function (year) { return (h("option", { selected: year === focusedYear }, year)); })), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
-    };
-    Object.defineProperty(class_1.prototype, "element", {
-        get: function () { return getElement(this); },
-        enumerable: false,
-        configurable: true
-    });
-    return class_1;
-}());
-DuetDatePicker.style = duetDatePickerCss;
-export { DuetDatePicker as duet_date_picker };
+var __awaiter=this&&this.__awaiter||function(e,t,a,n){function i(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,o){function r(e){try{s(n.next(e))}catch(e){o(e)}}function d(e){try{s(n["throw"](e))}catch(e){o(e)}}function s(e){e.done?a(e.value):i(e.value).then(r,d)}s((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,r;return r={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function d(e){return function(t){return s([e,t])}}function s(r){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:a.label++;return{value:r[1],done:false};case 5:a.label++;i=r[1];r=[0];continue;case 7:r=a.ops.pop();a.trys.pop();continue;default:if(!(o=a.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){a=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){a.label=r[1];break}if(r[0]===6&&a.label<o[1]){a.label=o[1];o=r;break}if(o&&a.label<o[2]){a.label=o[2];a.ops.push(r);break}if(o[2])a.ops.pop();a.trys.pop();continue}r=t.call(e,a)}catch(e){r=[6,e];i=0}finally{n=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-51ab19fe.js";var DatePickerInput=function(e){var t=e.onClick,a=e.placeholder,n=e.buttonLabel,i=e.name,o=e.value,r=e.identifier,d=e.disabled,s=e.role,l=e.buttonRef,u=e.inputRef,c=e.onInput,p=e.onBlur,f=e.onFocus;return h("div",{class:"duet-date__input-wrapper"},h("input",{class:"duet-date__input",name:i,value:o,placeholder:a,id:r,disabled:d,role:s,"aria-autocomplete":"none",onInput:c,onFocus:f,onBlur:p,autoComplete:"off",ref:u}),h("button",{class:"duet-date__toggle",onClick:t,disabled:d,ref:l,type:"button"},h("svg",{"aria-hidden":"true",height:"24",viewBox:"0 0 21 21",width:"24",xmlns:"http://www.w3.org/2000/svg"},h("g",{fill:"none","fill-rule":"evenodd",transform:"translate(2 2)"},h("path",{d:"m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),h("path",{d:"m.5 4.5h16",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round"}),h("g",{fill:"currentColor"},h("circle",{cx:"8.5",cy:"8.5",r:"1"}),h("circle",{cx:"4.5",cy:"8.5",r:"1"}),h("circle",{cx:"12.5",cy:"8.5",r:"1"}),h("circle",{cx:"8.5",cy:"12.5",r:"1"}),h("circle",{cx:"4.5",cy:"12.5",r:"1"}),h("circle",{cx:"12.5",cy:"12.5",r:"1"})))),h("span",{class:"duet-date__vhidden"},n)))};var DATE_FORMAT=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;var ISO_DATE_FORMAT=/^(\d{4})-(\d{2})-(\d{2})$/;var DATE_OUTPUT_FORMAT="dd.mm.yyyy";var DATE_ISO_OUTPUT_FORMAT="YYYY-MM-DD";function createDate(e,t,a){var n=parseInt(a,10);var i=parseInt(t,10);var o=parseInt(e,10);var r=Number.isInteger(o)&&Number.isInteger(i)&&Number.isInteger(n)&&i>0&&i<=12&&n>0&&n<=31&&o>0;if(r){return new Date(o,i-1,n)}}function parseDate(e){if(!e){return}var t=e.match(DATE_FORMAT);if(t){return createDate(t[3],t[2],t[1])}}function parseISODate(e){if(!e){return}var t=e.match(ISO_DATE_FORMAT);if(t){return createDate(t[1],t[2],t[3])}}function formatDate(e,t){if(!e){return""}var a=e.getDate().toString(10);var n=(e.getMonth()+1).toString(10);var i=e.getFullYear().toString(10);if(e.getDate()<10){a="0"+a}if(e.getMonth()<9){n="0"+n}return t.replace(/MM/i,n).replace(/YYYY/i,i).replace(/DD/i,a)}function printDate(e){return formatDate(e,DATE_OUTPUT_FORMAT)}function printISODate(e){return formatDate(e,DATE_ISO_OUTPUT_FORMAT)}function isEqual(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function addDays(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function startOfWeek(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?7:0)+n-t;a.setDate(a.getDate()-i);return a}function endOfWeek(e,t){if(t===void 0){t=1}var a=new Date(e);var n=a.getDay();var i=(n<t?-7:0)+6-(n-t);a.setDate(a.getDate()+i);return a}function startOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}function endOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function setMonth(e,t){var a=new Date(e);a.setMonth(t);return a}function setYear(e,t){var a=new Date(e);a.setFullYear(t);return a}function inRange(e,t,a){return clamp(e,t,a)===e}function clamp(e,t,a){var n=e.getTime();if(t&&t instanceof Date&&n<t.getTime()){return t}if(a&&a instanceof Date&&n>a.getTime()){return a}return e}function getDaysInRange(e,t){var a=[];var n=e;while(!isEqual(n,t)){a.push(n);n=addDays(n,1)}a.push(n);return a}function getViewOfMonth(e,t){if(t===void 0){t=1}var a=startOfWeek(startOfMonth(e),t);var n=endOfWeek(endOfMonth(e),t);return getDaysInRange(a,n)}function chr4(){return Math.random().toString(16).slice(-4)}function createIdentifier(e){return e+"-"+chr4()+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+"-"+chr4()+chr4()+chr4()}var i18n={en:{locale:"en-GB",buttonLabel:"Choose date",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",dayLabels:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],calendarHeading:"Choose a date",placeholder:"dd.mm.yyyy",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"]},fi:{locale:"fi-FI",buttonLabel:"Valitse päivämäärä",prevMonthLabel:"Edellinen kuukausi",nextMonthLabel:"Seuraava kuukausi",monthSelectLabel:"Kuukausi",yearSelectLabel:"Vuosi",closeLabel:"Sulje ikkuna",keyboardInstruction:"Voit navigoida päivämääriä nuolinäppäimillä",dayLabels:["Maanantai","Tiistai","Keskiviikko","Torstai","Perjantai","Lauantai","Sunnuntai"],placeholder:"pp.kk.vvvv",calendarHeading:"Valitse päivämäärä",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"]},sv:{locale:"sv-SE",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",keyboardInstruction:"Använd piltangenterna för att navigera i kalender",dayLabels:["Måndag","Tisdag","Onsdag","Torsdag","Fredag","Lördag","Söndag"],placeholder:"dd.mm.åååå",calendarHeading:"Välj datum",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"]}};var DatePickerDay=function(e){var t=e.selectedDay,a=e.focusedDay,n=e.today,i=e.day,o=e.language,r=e.onDaySelect,d=e.onKeyboardNavigation,s=e.focusedDayRef,l=e.inRange;var u=isEqual(i,n);var c=isEqual(i,a);var p=isEqual(i,t);var f=i.getMonth()!==a.getMonth();var v=!l;var b=i18n[o].locale;function g(e){r(e,i)}return h("button",{class:{"duet-date__day":true,"is-outside":v,"is-disabled":f,"is-today":u},tabIndex:c?0:-1,onClick:g,onKeyDown:d,"aria-selected":p?"true":undefined,"data-label":i.toLocaleDateString(b),disabled:v||f,type:"button",ref:function(e){if(c&&e&&s){s(e)}}},h("span",{"aria-hidden":"true"},i.getDate()),h("span",{class:"duet-date__vhidden"},i.toLocaleDateString(b)))};function chunk(e,t){var a=[];for(var n=0;n<e.length;n+=t){a.push(e.slice(n,n+t))}return a}var DatePickerMonth=function(e){var t=e.selectedDate,a=e.focusedDate,n=e.labelledById,i=e.language,o=e.min,r=e.max,d=e.onDateSelect,s=e.onKeyboardNavigation,l=e.focusedDayRef,u=e.onMouseDown,c=e.onFocusIn;var p=i18n[i].dayLabels;var f=new Date;var v=getViewOfMonth(a);return h("table",{class:"duet-date__table",role:"grid","aria-labelledby":n,onFocusin:c,onMouseDown:u},h("thead",null,h("tr",null,p.map((function(e){return h("th",{class:"duet-date__table-header",scope:"col"},h("span",{"aria-hidden":"true"},e.substr(0,2)),h("span",{class:"duet-date__vhidden"},e))})))),h("tbody",null,chunk(v,7).map((function(e){return h("tr",{class:"duet-date__row"},e.map((function(e){return h("td",{class:"duet-date__cell"},h(DatePickerDay,{day:e,today:f,language:i,selectedDay:t,focusedDay:a,inRange:inRange(e,o,r),onDaySelect:d,onKeyboardNavigation:s,focusedDayRef:l}))})))}))))};var duetDatePickerCss='.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{font-family:var(--duet-font);color:var(--duet-color-text);box-sizing:border-box;display:block;text-align:left;position:relative;margin:0;width:100%}.duet-date__input{font-family:var(--duet-font);padding:12px 48px 12px 12px;width:100%}.duet-date__input-wrapper{position:relative;width:100%}.duet-date__toggle{color:var(--duet-color-text);-webkit-user-select:none;user-select:none;position:absolute;height:100%;width:48px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center}.duet-date__dialog{transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;opacity:0;visibility:hidden;will-change:transform, opacity, visibility;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;position:absolute;z-index:var(--duet-z-index);min-width:320px;width:100%;left:0;top:100%;display:flex}@media (max-width: 35.9375em){.duet-date__dialog{will-change:opacity, visibility;transition:opacity 400ms ease, visibility 400ms ease;transform-origin:bottom center;transform:translateZ(0);position:fixed;bottom:0;top:0;right:0;background:var(--duet-color-overlay)}}.duet-date__dialog.is-active{opacity:1;visibility:visible;transform:scale(1) translateZ(0) translateY(0)}.duet-date__dialog-content{margin-top:8px;width:100%;margin-left:auto;max-width:310px;min-width:290px;transform:none;position:relative;z-index:var(--duet-z-index);border-radius:var(--duet-radius);border:1px solid rgba(0, 0, 0, 0.1);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.1);padding:16px 16px 20px;background:var(--duet-color-surface)}@media (max-width: 35.9375em){.duet-date__dialog-content{border:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;opacity:0;visibility:hidden;min-height:26em;will-change:transform, opacity, visibility;transform:translateZ(0) translateY(100%);position:absolute;border-radius:0;border-top-left-radius:var(--duet-radius);border-top-right-radius:var(--duet-radius);bottom:0;left:0;margin:0;padding:0 8% 20px;max-width:none}.is-active .duet-date__dialog-content{opacity:1;visibility:visible;transform:translateZ(0) translateY(0)}}.duet-date__table{width:100%;font-size:1rem;font-weight:var(--duet-font-normal);line-height:1.25;color:var(--duet-color-text);border-collapse:collapse;border-spacing:0;text-align:center}.duet-date__table-header{padding-bottom:8px;text-decoration:none;letter-spacing:1px;font-size:0.75rem;line-height:1.25;font-weight:var(--duet-font-bold);text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 0 1px;font-size:0.875rem;font-weight:var(--duet-font-normal);line-height:1.25;font-family:var(--duet-font);font-variant-numeric:tabular-nums;border-radius:50%;color:var(--duet-color-text);vertical-align:middle;height:36px;width:36px;cursor:pointer;text-align:center;display:inline-block;position:relative;z-index:1}.duet-date__day.is-today{z-index:200;box-shadow:0 0 0 1px var(--duet-color-primary);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;background:var(--duet-color-primary);opacity:0.06}.duet-date__day[aria-selected=true],.duet-date__day:focus{box-shadow:none;outline:0;background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:active{z-index:200;box-shadow:0 0 5px var(--duet-color-primary);background:var(--duet-color-primary);color:var(--duet-color-text-active)}.duet-date__day:focus{z-index:200;box-shadow:0 0 5px var(--duet-color-primary)}.duet-date__day.is-disabled{opacity:0.5;background:transparent;box-shadow:none;cursor:default;color:var(--duet-color-text)}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{pointer-events:none;cursor:default;box-shadow:none;opacity:0.6;color:var(--duet-color-text);background:var(--duet-color-button)}.duet-date__day.is-outside::before{display:none}.duet-date__header{margin-bottom:16px;display:flex;width:100%;align-items:center;justify-content:space-between}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--duet-color-text);transition:background-color 300ms ease;background:var(--duet-color-button);border-radius:50%;width:32px;height:32px;margin-left:8px;padding:0;cursor:pointer;align-items:center;justify-content:center;display:inline-flex}@media (max-width: 35.9375em){.duet-date__prev,.duet-date__next{width:40px;height:40px}}.duet-date__prev:focus,.duet-date__next:focus{outline:0;box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__select{margin-top:4px;position:relative;display:inline-flex}.duet-date__select span{margin-right:4px}.duet-date__select select{font-size:1rem;cursor:pointer;opacity:0;width:100%;height:100%;z-index:2;position:absolute;top:0;left:0}.duet-date__select select:focus+.duet-date__select-label{box-shadow:0 0 0 2px var(--duet-color-primary)}.duet-date__select-label{border-radius:var(--duet-radius);padding:0 4px 0 8px;position:relative;pointer-events:none;align-items:center;display:flex;z-index:1;width:100%;font-size:1.25rem;font-weight:var(--duet-font-bold);line-height:1.25;color:var(--duet-color-text)}.duet-date__mobile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:120%;margin-left:-10%;margin-bottom:20px;padding:12px 20px;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;position:relative;justify-content:space-between;align-items:center}@media (min-width: 36em){.duet-date__mobile{position:absolute;overflow:visible;top:-8px;right:-8px;width:auto;margin:0;border:0;padding:0}}.duet-date__mobile-heading{font-weight:var(--duet-font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:84%}@media (min-width: 36em){.duet-date__mobile-heading{display:none}}.duet-date__close{-webkit-appearance:none;appearance:none;padding:0;border:0;background:var(--duet-color-button);color:var(--duet-color-text);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}@media (min-width: 36em){.duet-date__close{opacity:0}}.duet-date__close:focus{outline:none;box-shadow:0 0 0 2px var(--duet-color-primary)}@media (min-width: 36em){.duet-date__close:focus{opacity:1}}.duet-date__vhidden{clip:rect(1px, 1px, 1px, 1px);position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;top:0}';function range(e,t){var a=[];for(var n=0;n<=t-e;n++){a.push(e+n)}return a}var keyCode={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};var DISALLOWED_CHARACTERS=/[^0-9\.]+/g;var TRANSITION_MS=400;var DuetDatePicker=function(){function e(e){var t=this;registerInstance(this,e);this.duetChange=createEvent(this,"duetChange",7);this.duetBlur=createEvent(this,"duetBlur",7);this.duetFocus=createEvent(this,"duetFocus",7);this.monthSelectId=createIdentifier("DuetDateMonth");this.yearSelectId=createIdentifier("DuetDateYear");this.dialogLabelId=createIdentifier("DuetDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.open=false;this.focusedDay=new Date;this.name="";this.identifier="";this.language="en";this.disabled=false;this.value="";this.min="";this.max="";this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.toggleOpen=function(e){e.preventDefault();t.open?t.hide(false):t.show()};this.handleEscKey=function(e){if(e.keyCode===keyCode.ESC){t.hide()}};this.handleBlur=function(e){e.stopPropagation();t.duetBlur.emit({component:"duet-date-picker"})};this.handleFocus=function(e){e.stopPropagation();t.duetFocus.emit({component:"duet-date-picker"})};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var n=a.pageX-t.initialTouchX;var i=a.pageY-t.initialTouchY;var o=70;var r=Math.abs(n)>=o&&Math.abs(i)<=o;var d=Math.abs(i)>=o&&Math.abs(n)<=o&&i>0;if(r){t.addMonths(n<0?1:-1)}else if(d){t.hide();e.preventDefault()}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleFirstFocusableKeydown=function(e){if(e.keyCode===keyCode.TAB&&e.shiftKey){t.focusedDayNode.focus();e.preventDefault()}};this.handleKeyboardNavigation=function(e){if(e.keyCode===keyCode.TAB&&!e.shiftKey){e.preventDefault();t.firstFocusableElement.focus();return}var a=true;switch(e.keyCode){case keyCode.RIGHT:t.addDays(1);break;case keyCode.LEFT:t.addDays(-1);break;case keyCode.DOWN:t.addDays(7);break;case keyCode.UP:t.addDays(-7);break;case keyCode.PAGE_UP:if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case keyCode.PAGE_DOWN:if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case keyCode.HOME:t.startOfWeek();break;case keyCode.END:t.endOfWeek();break;default:a=false}if(a){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){if(!inRange(a,parseISODate(t.min),parseISODate(t.max))){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a);t.hide()}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.handleInputChange=function(e){var a=e.target;a.value=a.value.replace(DISALLOWED_CHARACTERS,"");var n=parseDate(a.value);if(n||a.value===""){t.setValue(n)}};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus&&t.open){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.datePickerInput.focus()]}))}))};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){this.open=true;this.setFocusedDay(parseISODate(this.value)||new Date);clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){return e.monthSelectNode.focus()}),TRANSITION_MS);return[2]}))}))};e.prototype.hide=function(e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(a){this.open=false;clearTimeout(this.focusTimeoutId);if(e){setTimeout((function(){return t.datePickerButton.focus()}),TRANSITION_MS+200)}return[2]}))}))};e.prototype.addDays=function(e){this.setFocusedDay(addDays(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(startOfWeek(this.focusedDay))};e.prototype.endOfWeek=function(){this.setFocusedDay(endOfWeek(this.focusedDay))};e.prototype.setMonth=function(e){var t=setMonth(startOfMonth(this.focusedDay),e);var a=endOfMonth(t);var n=setMonth(this.focusedDay,e);this.setFocusedDay(clamp(n,t,a))};e.prototype.setYear=function(e){var t=setYear(startOfMonth(this.focusedDay),e);var a=endOfMonth(t);var n=setYear(this.focusedDay,e);this.setFocusedDay(clamp(n,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=clamp(e,parseISODate(this.min),parseISODate(this.max))};e.prototype.setValue=function(e){this.value=printISODate(e);this.duetChange.emit({component:"duet-date-picker",value:this.value,valueAsDate:e})};e.prototype.handleDocumentClick=function(e){if(!this.open){return}var t=e.target;if(this.dialogWrapperNode.contains(t)||this.datePickerButton.contains(t)){return}this.hide(false)};e.prototype.render=function(){var e=this;var t=parseISODate(this.value);var a=printDate(t);var n=(t||this.focusedDay).getFullYear();var i=this.focusedDay.getMonth();var o=this.focusedDay.getFullYear();var r=i18n[this.language];var d=parseISODate(this.min);var s=parseISODate(this.max);var l=d!=null&&d.getMonth()===i&&d.getFullYear()===o;var u=s!=null&&s.getMonth()===i&&s.getFullYear()===o;return h(Host,null,h("div",{class:"duet-date"},h(DatePickerInput,{value:a,onInput:this.handleInputChange,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.toggleOpen,name:this.name,disabled:this.disabled,role:this.role,placeholder:r.placeholder,buttonLabel:r.buttonLabel,identifier:this.identifier,buttonRef:function(t){return e.datePickerButton=t},inputRef:function(t){return e.datePickerInput=t}}),h("div",{class:{"duet-date__dialog":true,"is-active":this.open},role:"dialog","aria-modal":"true","aria-labelledby":this.dialogLabelId,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("div",{class:"duet-date__dialog-content",onKeyDown:this.handleEscKey,ref:function(t){return e.dialogWrapperNode=t}},h("div",{class:"duet-date__mobile",onFocusin:this.disableActiveFocus},h("label",{class:"duet-date__mobile-heading"},r.calendarHeading),h("button",{class:"duet-date__close",ref:function(t){return e.firstFocusableElement=t},onKeyDown:this.handleFirstFocusableKeydown,onClick:function(){return e.hide()},"data-label":r.closeLabel,type:"button"},h("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},h("path",{d:"M0 0h24v24H0V0z",fill:"none"}),h("path",{d:"M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"})),h("span",{class:"duet-date__vhidden"},r.closeLabel))),h("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},h("div",null,h("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},r.monthLabels[i]," ",this.focusedDay.getFullYear()),h("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},r.monthSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.monthSelectId,ref:function(t){return e.monthSelectNode=t},onChange:this.handleMonthSelect},r.monthLabels.map((function(e,t){return h("option",{value:t,selected:t===i},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,r.monthLabelsShort[i]),h("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},h("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"})))),h("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},r.yearSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.yearSelectId,onChange:this.handleYearSelect},range(n-10,n+10).map((function(e){return h("option",{selected:e===o},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,this.focusedDay.getFullYear()),h("svg",{fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24"},h("path",{d:"M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"}))))),h("div",{class:"duet-date__nav"},h("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:l,"data-label":r.prevMonthLabel,type:"button"},h("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},h("path",{d:"M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z"})),h("span",{class:"duet-date__vhidden"},r.prevMonthLabel)),h("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:u,"data-label":r.nextMonthLabel,type:"button"},h("svg",{"aria-hidden":"true",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",viewBox:"0 0 24 24"},h("path",{d:"M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"})),h("span",{class:"duet-date__vhidden"},r.nextMonthLabel)))),h(DatePickerMonth,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,language:this.language,focusedDayRef:this.processFocusedDayNode,min:d,max:s}),h("div",{class:"duet-date__vhidden","aria-live":"polite"},r.keyboardInstruction)))))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();DuetDatePicker.style=duetDatePickerCss;export{DuetDatePicker as duet_date_picker};

dist/esm/duet-date-picker.entry.js

@@ -1,19 +0,19 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4824c12f.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-51ab19fe.js';
 
 const DatePickerInput = ({ onClick, placeholder, buttonLabel, name, value, identifier, disabled, role, buttonRef, inputRef, onInput, onBlur, onFocus, }) => {
-    return (h("div", { class: "duet-date__input-wrapper" },
-        h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
-        h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
-            h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
-                h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
-                    h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-                    h("g", { fill: "currentColor" },
-                        h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
-                        h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
-                        h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
-            h("span", { class: "duet-date__vhidden" }, buttonLabel))));
+  return (h("div", { class: "duet-date__input-wrapper" },
+    h("input", { class: "duet-date__input", name: name, value: value, placeholder: placeholder, id: identifier, disabled: disabled, role: role, "aria-autocomplete": "none", onInput: onInput, onFocus: onFocus, onBlur: onBlur, autoComplete: "off", ref: inputRef }),
+    h("button", { class: "duet-date__toggle", onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+      h("svg", { "aria-hidden": "true", height: "24", viewBox: "0 0 21 21", width: "24", xmlns: "http://www.w3.org/2000/svg" },
+        h("g", { fill: "none", "fill-rule": "evenodd", transform: "translate(2 2)" },
+          h("path", { d: "m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("path", { d: "m.5 4.5h16", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+          h("g", { fill: "currentColor" },
+            h("circle", { cx: "8.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "8.5", r: "1" }),
+            h("circle", { cx: "8.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "4.5", cy: "12.5", r: "1" }),
+            h("circle", { cx: "12.5", cy: "12.5", r: "1" })))),
+      h("span", { class: "duet-date__vhidden" }, buttonLabel))));
 };
@@ -26,16 +26,16 @@
 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);
+  }
 }
@@ -46,9 +46,9 @@ /**
 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]);
+  }
 }
@@ -59,9 +59,9 @@ /**
 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]);
+  }
 }
@@ -73,17 +73,17 @@ /**
 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);
 }
@@ -95,3 +95,3 @@ /**
 function printDate(date) {
-    return formatDate(date, DATE_OUTPUT_FORMAT);
+  return formatDate(date, DATE_OUTPUT_FORMAT);
 }
@@ -103,3 +103,3 @@ /**
 function printISODate(date) {
-    return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
+  return formatDate(date, DATE_ISO_OUTPUT_FORMAT);
 }
@@ -110,41 +110,41 @@ /**
 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;
 }
@@ -155,3 +155,3 @@ /**
 function inRange(date, min, max) {
-    return clamp(date, min, max) === date;
+  return clamp(date, min, max) === date;
 }
@@ -162,10 +162,10 @@ /**
 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;
 }
@@ -178,10 +178,10 @@ /**
 function getDaysInRange(start, end) {
-    const days = [];
-    let current = start;
-    while (!isEqual(current, end)) {
-        days.push(current);
-        current = addDays(current, 1);
-    }
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
     days.push(current);
-    return days;
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
 }
@@ -194,5 +194,5 @@ /**
 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);
 }
@@ -203,3 +203,3 @@ /**
 function chr4() {
-    return Math.random().toString(16).slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
@@ -211,149 +211,149 @@ /**
 function createIdentifier(prefix) {
-    return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
+  return `${prefix}-` + chr4() + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + "-" + chr4() + chr4() + chr4();
 }
 
 const i18n = {
-    en: {
-        locale: "en-GB",
-        buttonLabel: "Choose date",
-        prevMonthLabel: "Previous month",
-        nextMonthLabel: "Next month",
-        monthSelectLabel: "Month",
-        yearSelectLabel: "Year",
-        closeLabel: "Close window",
-        keyboardInstruction: "You can use arrow keys to navigate dates",
-        dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
-        calendarHeading: "Choose a date",
-        placeholder: "dd.mm.yyyy",
-        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"],
-    },
-    fi: {
-        locale: "fi-FI",
-        buttonLabel: "Valitse päivämäärä",
-        prevMonthLabel: "Edellinen kuukausi",
-        nextMonthLabel: "Seuraava kuukausi",
-        monthSelectLabel: "Kuukausi",
-        yearSelectLabel: "Vuosi",
-        closeLabel: "Sulje ikkuna",
-        keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
-        dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
-        placeholder: "pp.kk.vvvv",
-        calendarHeading: "Valitse päivämäärä",
-        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",
-        ],
-    },
-    sv: {
-        locale: "sv-SE",
-        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",
-        keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
-        dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
-        placeholder: "dd.mm.åååå",
-        calendarHeading: "Välj datum",
-        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"],
-    },
+  en: {
+    locale: "en-GB",
+    buttonLabel: "Choose date",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    monthSelectLabel: "Month",
+    yearSelectLabel: "Year",
+    closeLabel: "Close window",
+    keyboardInstruction: "You can use arrow keys to navigate dates",
+    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    calendarHeading: "Choose a date",
+    placeholder: "dd.mm.yyyy",
+    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"],
+  },
+  fi: {
+    locale: "fi-FI",
+    buttonLabel: "Valitse päivämäärä",
+    prevMonthLabel: "Edellinen kuukausi",
+    nextMonthLabel: "Seuraava kuukausi",
+    monthSelectLabel: "Kuukausi",
+    yearSelectLabel: "Vuosi",
+    closeLabel: "Sulje ikkuna",
+    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+    placeholder: "pp.kk.vvvv",
+    calendarHeading: "Valitse päivämäärä",
+    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",
+    ],
+  },
+  sv: {
+    locale: "sv-SE",
+    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",
+    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+    placeholder: "dd.mm.åååå",
+    calendarHeading: "Välj datum",
+    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"],
+  },
 };
 
 const DatePickerDay = ({ selectedDay, focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-    const isToday = isEqual(day, today);
-    const isFocused = isEqual(day, focusedDay);
-    const isSelected = isEqual(day, selectedDay);
-    const isDisabled = day.getMonth() !== focusedDay.getMonth();
-    const isOutsideRange = !inRange;
-    const { locale } = i18n[language];
-    function handleClick(e) {
-        onDaySelect(e, day);
-    }
-    return (h("button", { class: {
-            "duet-date__day": true,
-            "is-outside": isOutsideRange,
-            "is-disabled": isDisabled,
-            "is-today": isToday,
-        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
-            if (isFocused && el && focusedDayRef) {
-                focusedDayRef(el);
-            }
-        } },
-        h("span", { "aria-hidden": "true" }, day.getDate()),
-        h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isSelected = isEqual(day, selectedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  const { locale } = i18n[language];
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      "duet-date__day": true,
+      "is-outside": isOutsideRange,
+      "is-disabled": isDisabled,
+      "is-today": isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-selected": isSelected ? "true" : undefined, "data-label": day.toLocaleDateString(locale), disabled: isOutsideRange || isDisabled, type: "button", ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    h("span", { "aria-hidden": "true" }, day.getDate()),
+    h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(locale))));
 };
 
 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;
 }
 const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-    const { dayLabels } = i18n[language];
-    const today = new Date();
-    const days = getViewOfMonth(focusedDate);
-    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
-        // @ts-ignore
-        onFocusin: onFocusIn, onMouseDown: onMouseDown },
-        h("thead", null,
-            h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
-                h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
-                h("span", { class: "duet-date__vhidden" }, label)))))),
-        h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
-            h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+  const { dayLabels } = i18n[language];
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate);
+  return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+    h("thead", null,
+      h("tr", null, dayLabels.map(label => (h("th", { class: "duet-date__table-header", scope: "col" },
+        h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+        h("span", { class: "duet-date__vhidden" }, label)))))),
+    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date__row" }, week.map(day => (h("td", { class: "duet-date__cell" },
+      h(DatePickerDay, { day: day, today: today, language: language, selectedDay: selectedDate, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };
@@ -364,20 +364,20 @@
 function range(from, to) {
-    var result = [];
-    for (var i = 0; i <= to - from; i++) {
-        result.push(from + i);
-    }
-    return result;
+  var result = [];
+  for (var i = 0; i <= to - from; i++) {
+    result.push(from + i);
+  }
+  return result;
 }
 const keyCode = {
-    TAB: 9,
-    ESC: 27,
-    SPACE: 32,
-    PAGE_UP: 33,
-    PAGE_DOWN: 34,
-    END: 35,
-    HOME: 36,
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
 };
@@ -387,312 +387,312 @@ const DISALLOWED_CHARACTERS = /[^0-9\.]+/g;
 const DuetDatePicker = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.duetChange = createEvent(this, "duetChange", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.monthSelectId = createIdentifier("DuetDateMonth");
-        this.yearSelectId = createIdentifier("DuetDateYear");
-        this.dialogLabelId = createIdentifier("DuetDateLabel");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.activeFocus = false;
-        this.open = false;
-        this.focusedDay = new Date();
-        /**
-         * Name of the date picker input.
-         */
-        this.name = "";
-        /**
-         * Adds a unique identifier for the date picker input.
-         */
-        this.identifier = "";
-        /**
-         * The currently active language. This setting changes the month/year/day
-         * names and button labels as well as all screen reader labels.
-         */
-        this.language = "en";
-        /**
-         * Makes the date picker input component disabled. This prevents users from being able to
-         * interact with the input, and conveys its inactive state to assistive technologies.
-         */
-        this.disabled = false;
-        /**
-         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-         */
-        this.value = "";
-        /**
-         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-         * This setting can be used alone or together with the max property.
-         */
-        this.min = "";
-        /**
-         * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-         * This setting can be used alone or together with the min property.
-         */
-        this.max = "";
-        this.enableActiveFocus = () => {
-            this.activeFocus = true;
-        };
-        this.disableActiveFocus = () => {
-            this.activeFocus = false;
-        };
-        this.toggleOpen = (e) => {
-            e.preventDefault();
-            this.open ? this.hide(false) : this.show();
-        };
-        this.handleEscKey = (event) => {
-            if (event.keyCode === keyCode.ESC) {
-                this.hide();
-            }
-        };
-        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.handleFirstFocusableKeydown = (event) => {
-            // this ensures focus is trapped inside the dialog
-            if (event.keyCode === keyCode.TAB && event.shiftKey) {
-                this.focusedDayNode.focus();
-                event.preventDefault();
-            }
-        };
-        this.handleKeyboardNavigation = (event) => {
-            // handle tab separately, since it needs to be treated
-            // differently to other keyboard interactions
-            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-                event.preventDefault();
-                this.firstFocusableElement.focus();
-                return;
-            }
-            var handled = true;
-            switch (event.keyCode) {
-                case keyCode.RIGHT:
-                    this.addDays(1);
-                    break;
-                case keyCode.LEFT:
-                    this.addDays(-1);
-                    break;
-                case keyCode.DOWN:
-                    this.addDays(7);
-                    break;
-                case keyCode.UP:
-                    this.addDays(-7);
-                    break;
-                case keyCode.PAGE_UP:
-                    if (event.shiftKey) {
-                        this.addYears(-1);
-                    }
-                    else {
-                        this.addMonths(-1);
-                    }
-                    break;
-                case keyCode.PAGE_DOWN:
-                    if (event.shiftKey) {
-                        this.addYears(1);
-                    }
-                    else {
-                        this.addMonths(1);
-                    }
-                    break;
-                case keyCode.HOME:
-                    this.startOfWeek();
-                    break;
-                case keyCode.END:
-                    this.endOfWeek();
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                event.preventDefault();
-                this.enableActiveFocus();
-            }
-        };
-        this.handleDaySelect = (_event, day) => {
-            if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
-                return;
-            }
-            if (day.getMonth() === this.focusedDay.getMonth()) {
-                this.setValue(day);
-                this.hide();
-            }
-            else {
-                this.setFocusedDay(day);
-            }
-        };
-        this.handleMonthSelect = e => {
-            this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = e => {
-            this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = (e) => {
-            const target = e.target;
-            // clean up any invalid characters
-            target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-            const parsed = parseDate(target.value);
-            if (parsed || target.value === "") {
-                this.setValue(parsed);
-            }
-        };
-        this.processFocusedDayNode = (element) => {
-            this.focusedDayNode = element;
-            if (this.activeFocus && this.open) {
-                setTimeout(() => element.focus(), 0);
-            }
-        };
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetChange = createEvent(this, "duetChange", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.monthSelectId = createIdentifier("DuetDateMonth");
+    this.yearSelectId = createIdentifier("DuetDateYear");
+    this.dialogLabelId = createIdentifier("DuetDateLabel");
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.activeFocus = false;
+    this.open = false;
+    this.focusedDay = new Date();
     /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+     * Name of the date picker input.
      */
-    async setFocus() {
-        return this.datePickerInput.focus();
-    }
+    this.name = "";
     /**
-     * Show the calendar modal, moving focus to the calendar inside.
+     * Adds a unique identifier for the date picker input.
      */
-    async show() {
-        this.open = true;
-        this.setFocusedDay(parseISODate(this.value) || new Date());
-        clearTimeout(this.focusTimeoutId);
-        this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
-    }
+    this.identifier = "";
     /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
+     * The currently active language. This setting changes the month/year/day
+     * names and button labels as well as all screen reader labels.
      */
-    async hide(moveFocusToButton = true) {
-        this.open = false;
-        // in cases where calendar is quickly shown and hidden
-        // we should avoid moving focus to the button
-        clearTimeout(this.focusTimeoutId);
-        if (moveFocusToButton) {
-            // iOS VoiceOver needs to wait for all transitions to finish.
-            setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
-        }
+    this.language = "en";
+    /**
+     * Makes the date picker input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+     */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.toggleOpen = (e) => {
+      e.preventDefault();
+      this.open ? this.hide(false) : this.show();
+    };
+    this.handleEscKey = (event) => {
+      if (event.keyCode === keyCode.ESC) {
+        this.hide();
+      }
+    };
+    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.handleFirstFocusableKeydown = (event) => {
+      // this ensures focus is trapped inside the dialog
+      if (event.keyCode === keyCode.TAB && event.shiftKey) {
+        this.focusedDayNode.focus();
+        event.preventDefault();
+      }
+    };
+    this.handleKeyboardNavigation = (event) => {
+      // handle tab separately, since it needs to be treated
+      // differently to other keyboard interactions
+      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+        return;
+      }
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      if (!inRange(day, parseISODate(this.min), parseISODate(this.max))) {
+        return;
+      }
+      if (day.getMonth() === this.focusedDay.getMonth()) {
+        this.setValue(day);
+        this.hide();
+      }
+      else {
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.handleInputChange = (e) => {
+      const target = e.target;
+      // clean up any invalid characters
+      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
+      const parsed = parseDate(target.value);
+      if (parsed || target.value === "") {
+        this.setValue(parsed);
+      }
+    };
+    this.processFocusedDayNode = (element) => {
+      this.focusedDayNode = element;
+      if (this.activeFocus && this.open) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  async setFocus() {
+    return this.datePickerInput.focus();
+  }
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  async show() {
+    this.open = true;
+    this.setFocusedDay(parseISODate(this.value) || new Date());
+    clearTimeout(this.focusTimeoutId);
+    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
+  }
+  /**
+   * 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;
+    // in cases where calendar is quickly shown and hidden
+    // we should avoid moving focus to the button
+    clearTimeout(this.focusTimeoutId);
+    if (moveFocusToButton) {
+      // iOS VoiceOver needs to wait for all transitions to finish.
+      setTimeout(() => this.datePickerButton.focus(), TRANSITION_MS + 200);
     }
-    addDays(days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  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));
+  }
+  setValue(date) {
+    this.value = printISODate(date);
+    this.duetChange.emit({
+      component: "duet-date-picker",
+      value: this.value,
+      valueAsDate: date,
+    });
+  }
+  handleDocumentClick(e) {
+    if (!this.open) {
+      return;
     }
-    addMonths(months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
+    const target = e.target;
+    // TODO: stopPropagation only on open??
+    // 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
+    //
+    // this was the only satisfactory combination of things to get the above to work
+    if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
+      return;
     }
-    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));
-    }
-    setValue(date) {
-        this.value = printISODate(date);
-        this.duetChange.emit({
-            component: "duet-date-picker",
-            value: this.value,
-            valueAsDate: date,
-        });
-    }
-    handleDocumentClick(e) {
-        if (!this.open) {
-            return;
-        }
-        const target = e.target;
-        // TODO: stopPropagation only on open??
-        // 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
-        //
-        // this was the only satisfactory combination of things to get the above to work
-        if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) {
-            return;
-        }
-        this.hide(false);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const valueAsDate = parseISODate(this.value);
-        const formattedDate = printDate(valueAsDate);
-        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;
-        return (h(Host, null, h("div", { class: "duet-date" }, h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), h("div", { class: {
-                "duet-date__dialog": true,
-                "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), h("span", { class: "duet-date__vhidden" }, text.closeLabel))), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
-    }
-    get element() { return getElement(this); }
+    this.hide(false);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const formattedDate = printDate(valueAsDate);
+    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;
+    return (h(Host, null, h("div", { class: "duet-date" }, h(DatePickerInput, { value: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, role: this.role, placeholder: text.placeholder, buttonLabel: text.buttonLabel, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element) }), h("div", { class: {
+        "duet-date__dialog": true,
+        "is-active": this.open,
+      }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("div", { class: "duet-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "duet-date__mobile-heading" }, text.calendarHeading), h("button", { class: "duet-date__close", ref: element => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), "data-label": text.closeLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" })), h("span", { class: "duet-date__vhidden" }, text.closeLabel))), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, text.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { value: i, selected: i === focusedMonth }, month)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, text.monthLabelsShort[focusedMonth]), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" })))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, text.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, onChange: this.handleYearSelect }, range(selectedYear - 10, selectedYear + 10).map(year => (h("option", { selected: year === focusedYear }, year)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("svg", { fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z" }))))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "data-label": text.prevMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M14.71 15.88L10.83 12l3.88-3.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "data-label": text.nextMonthLabel, type: "button" }, h("svg", { "aria-hidden": "true", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", width: "21", height: "21", viewBox: "0 0 24 24" }, h("path", { d: "M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z" })), h("span", { class: "duet-date__vhidden" }, text.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }), h("div", { class: "duet-date__vhidden", "aria-live": "polite" }, text.keyboardInstruction))))));
+  }
+  get element() { return getElement(this); }
 };
@@ -699,0 +699,0 @@ DuetDatePicker.style = duetDatePickerCss;

dist/esm/polyfills/css-shim.js

@@ -1,1 +0,1 @@
-var StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return Object.assign(Object.assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return Object.assign(Object.assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);

dist/types/components/duet-date-picker/date-i18n.d.ts

@@ -5,17 +5,17 @@ import { DuetLanguage } from "./duet-date-picker";
 declare type I18nText = {
-    locale: string;
-    buttonLabel: string;
-    nextMonthLabel: string;
-    prevMonthLabel: string;
-    monthSelectLabel: string;
-    yearSelectLabel: string;
-    keyboardInstruction: string;
-    closeLabel: string;
-    dayLabels: DayLabels;
-    placeholder: string;
-    calendarHeading: string;
-    monthLabels: MonthsLabels;
-    monthLabelsShort: MonthsLabels;
+  locale: string;
+  buttonLabel: string;
+  nextMonthLabel: string;
+  prevMonthLabel: string;
+  monthSelectLabel: string;
+  yearSelectLabel: string;
+  keyboardInstruction: string;
+  closeLabel: string;
+  dayLabels: DayLabels;
+  placeholder: string;
+  calendarHeading: string;
+  monthLabels: MonthsLabels;
+  monthLabelsShort: MonthsLabels;
 };
 declare const i18n: Record<DuetLanguage, I18nText>;
 export default i18n;

dist/types/components/duet-date-picker/date-picker-day.d.ts

 import { FunctionalComponent } from "../../stencil-public-runtime";
 import { DuetLanguage } from "./duet-date-picker";
 export declare type DatePickerDayProps = {
-    selectedDay: Date;
-    focusedDay: Date;
-    today: Date;
-    language: DuetLanguage;
-    day: Date;
-    inRange: boolean;
-    onDaySelect: (event: MouseEvent, day: Date) => void;
-    onKeyboardNavigation: (event: KeyboardEvent) => void;
-    focusedDayRef?: (element: HTMLButtonElement) => void;
+  selectedDay: Date;
+  focusedDay: Date;
+  today: Date;
+  language: DuetLanguage;
+  day: Date;
+  inRange: boolean;
+  onDaySelect: (event: MouseEvent, day: Date) => void;
+  onKeyboardNavigation: (event: KeyboardEvent) => void;
+  focusedDayRef?: (element: HTMLButtonElement) => void;
 };
 export declare const DatePickerDay: FunctionalComponent<DatePickerDayProps>;

dist/types/components/duet-date-picker/date-picker-input.d.ts

 import { FunctionalComponent } from "../../stencil-public-runtime";
 declare type DatePickerInputProps = {
-    value: string;
-    placeholder: string;
-    name: string;
-    identifier: string;
-    buttonLabel: string;
-    disabled: boolean;
-    role: string;
-    onClick: (event: MouseEvent) => void;
-    onInput: (event: InputEvent) => void;
-    onBlur: (event: FocusEvent) => void;
-    onFocus: (event: FocusEvent) => void;
-    buttonRef: (element: HTMLButtonElement) => void;
-    inputRef: (element: HTMLInputElement) => void;
+  value: string;
+  placeholder: string;
+  name: string;
+  identifier: string;
+  buttonLabel: string;
+  disabled: boolean;
+  role: string;
+  onClick: (event: MouseEvent) => void;
+  onInput: (event: InputEvent) => void;
+  onBlur: (event: FocusEvent) => void;
+  onFocus: (event: FocusEvent) => void;
+  buttonRef: (element: HTMLButtonElement) => void;
+  inputRef: (element: HTMLInputElement) => void;
 };
 export declare const DatePickerInput: FunctionalComponent<DatePickerInputProps>;
 export {};

dist/types/components/duet-date-picker/date-picker-month.d.ts

@@ -5,15 +5,15 @@ import { FunctionalComponent } from "../../stencil-public-runtime";
 declare type DatePickerMonthProps = {
-    selectedDate: Date;
-    focusedDate: Date;
-    labelledById: string;
-    language: DuetLanguage;
-    min?: Date;
-    max?: Date;
-    onDateSelect: DatePickerDayProps["onDaySelect"];
-    onKeyboardNavigation: DatePickerDayProps["onKeyboardNavigation"];
-    focusedDayRef: (element: HTMLButtonElement) => void;
-    onFocusIn?: (e: FocusEvent) => void;
-    onMouseDown?: (e: MouseEvent) => void;
+  selectedDate: Date;
+  focusedDate: Date;
+  labelledById: string;
+  language: DuetLanguage;
+  min?: Date;
+  max?: Date;
+  onDateSelect: DatePickerDayProps["onDaySelect"];
+  onKeyboardNavigation: DatePickerDayProps["onKeyboardNavigation"];
+  focusedDayRef: (element: HTMLButtonElement) => void;
+  onFocusIn?: (e: FocusEvent) => void;
+  onMouseDown?: (e: MouseEvent) => void;
 };
 export declare const DatePickerMonth: FunctionalComponent<DatePickerMonthProps>;
 export {};

dist/types/components/duet-date-picker/duet-date-picker.d.ts

 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
 export declare type DuetLanguage = "fi" | "en" | "sv";
 export declare type DuetDatePickerChangeEvent = {
-    component: "duet-date-picker";
-    valueAsDate: Date;
-    value: string;
+  component: "duet-date-picker";
+  valueAsDate: Date;
+  value: string;
 };
 export declare type DuetDatePickerFocusEvent = {
-    component: "duet-date-picker";
+  component: "duet-date-picker";
 };
 export declare class DuetDatePicker implements ComponentInterface {
-    private monthSelectId;
-    private yearSelectId;
-    private dialogLabelId;
-    private datePickerButton;
-    private datePickerInput;
-    private firstFocusableElement;
-    private monthSelectNode;
-    private dialogWrapperNode;
-    private focusedDayNode;
-    private focusTimeoutId;
-    private initialTouchX;
-    private initialTouchY;
-    activeFocus: boolean;
-    open: boolean;
-    focusedDay: Date;
-    /**
-     * Reference to host HTML element.
-     */
-    element: HTMLElement;
-    /**
-     * Name of the date picker input.
-     */
-    name: string;
-    /**
-     * Adds a unique identifier for the date picker input.
-     */
-    identifier: string;
-    /**
-     * The currently active language. This setting changes the month/year/day
-     * names and button labels as well as all screen reader labels.
-     */
-    language: DuetLanguage;
-    /**
-     * Makes the date picker input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
-    disabled: boolean;
-    /**
-     * Defines a specific role attribute for the date picker input.
-     */
-    role: string;
-    /**
-     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
-     */
-    value: string;
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    min: string;
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
-     * This setting can be used alone or together with the min property.
-     */
-    max: string;
-    /**
-     * Event emitted when a date is selected.
-     */
-    duetChange: EventEmitter<DuetDatePickerChangeEvent>;
-    /**
-     * Event emitted the date picker input is blurred.
-     */
-    duetBlur: EventEmitter<DuetDatePickerFocusEvent>;
-    /**
-     * Event emitted the date picker input is focused.
-     */
-    duetFocus: EventEmitter<DuetDatePickerFocusEvent>;
-    /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-     */
-    setFocus(): Promise<void>;
-    /**
-     * Show the calendar modal, moving focus to the calendar inside.
-     */
-    show(): Promise<void>;
-    /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
-     */
-    hide(moveFocusToButton?: boolean): Promise<void>;
-    private enableActiveFocus;
-    private disableActiveFocus;
-    private addDays;
-    private addMonths;
-    private addYears;
-    private startOfWeek;
-    private endOfWeek;
-    private setMonth;
-    private setYear;
-    private setFocusedDay;
-    private toggleOpen;
-    private handleEscKey;
-    private handleBlur;
-    private handleFocus;
-    private handleTouchStart;
-    private handleTouchMove;
-    private handleTouchEnd;
-    private handleNextMonthClick;
-    private handlePreviousMonthClick;
-    private handleFirstFocusableKeydown;
-    private handleKeyboardNavigation;
-    private handleDaySelect;
-    private handleMonthSelect;
-    private handleYearSelect;
-    private handleInputChange;
-    private setValue;
-    handleDocumentClick(e: MouseEvent): void;
-    private processFocusedDayNode;
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render(): any;
+  private monthSelectId;
+  private yearSelectId;
+  private dialogLabelId;
+  private datePickerButton;
+  private datePickerInput;
+  private firstFocusableElement;
+  private monthSelectNode;
+  private dialogWrapperNode;
+  private focusedDayNode;
+  private focusTimeoutId;
+  private initialTouchX;
+  private initialTouchY;
+  activeFocus: boolean;
+  open: boolean;
+  focusedDay: Date;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Name of the date picker input.
+   */
+  name: string;
+  /**
+   * Adds a unique identifier for the date picker input.
+   */
+  identifier: string;
+  /**
+   * The currently active language. This setting changes the month/year/day
+   * names and button labels as well as all screen reader labels.
+   */
+  language: DuetLanguage;
+  /**
+   * Makes the date picker input component disabled. This prevents users from being able to
+   * interact with the input, and conveys its inactive state to assistive technologies.
+   */
+  disabled: boolean;
+  /**
+   * Defines a specific role attribute for the date picker input.
+   */
+  role: string;
+  /**
+   * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+   */
+  value: string;
+  /**
+   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   * This setting can be used alone or together with the max property.
+   */
+  min: string;
+  /**
+   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+   * This setting can be used alone or together with the min property.
+   */
+  max: string;
+  /**
+   * Event emitted when a date is selected.
+   */
+  duetChange: EventEmitter<DuetDatePickerChangeEvent>;
+  /**
+   * Event emitted the date picker input is blurred.
+   */
+  duetBlur: EventEmitter<DuetDatePickerFocusEvent>;
+  /**
+   * Event emitted the date picker input is focused.
+   */
+  duetFocus: EventEmitter<DuetDatePickerFocusEvent>;
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  show(): Promise<void>;
+  /**
+   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
+   * returning to the date picker's button. Default is true.
+   */
+  hide(moveFocusToButton?: boolean): Promise<void>;
+  private enableActiveFocus;
+  private disableActiveFocus;
+  private addDays;
+  private addMonths;
+  private addYears;
+  private startOfWeek;
+  private endOfWeek;
+  private setMonth;
+  private setYear;
+  private setFocusedDay;
+  private toggleOpen;
+  private handleEscKey;
+  private handleBlur;
+  private handleFocus;
+  private handleTouchStart;
+  private handleTouchMove;
+  private handleTouchEnd;
+  private handleNextMonthClick;
+  private handlePreviousMonthClick;
+  private handleFirstFocusableKeydown;
+  private handleKeyboardNavigation;
+  private handleDaySelect;
+  private handleMonthSelect;
+  private handleYearSelect;
+  private handleInputChange;
+  private setValue;
+  handleDocumentClick(e: MouseEvent): void;
+  private processFocusedDayNode;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
 }

dist/types/stencil-public-runtime.d.ts

@@ -46,6 +46,2 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     assetsDirs?: string[];
-    /**
-     * @deprecated Use `assetsDirs` instead
-     */
-    assetsDir?: string;
 }
@@ -85,10 +81,2 @@ export interface ShadowRootOptions {
     reflect?: boolean;
-    /** @deprecated: "attr" has been deprecated, please use "attribute" instead. */
-    attr?: string;
-    /** @deprecated "context" has been deprecated. */
-    context?: string;
-    /** @deprecated "connect" has been deprecated, please use ES modules and/or dynamic imports instead. */
-    connect?: string;
-    /** @deprecated "reflectToAttr" has been deprecated, please use "reflect" instead. */
-    reflectToAttr?: boolean;
 }
@@ -150,3 +138,3 @@ export interface MethodDecorator {
 }
-export declare type ListenTargetOptions = 'parent' | 'body' | 'document' | 'window';
+export declare type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
@@ -270,4 +258,2 @@ (): PropertyDecorator;
     componentOnReady(): Promise<this>;
-    /** @deprecated */
-    forceUpdate(): void;
 }
@@ -338,9 +324,2 @@ /**
 }
-export interface ComponentDidUnload {
-    /**
-     * The component did unload and the element
-     * will be destroyed.
-     */
-    componentDidUnload(): void;
-}
 export interface ComponentInterface {
@@ -347,0 +326,0 @@ connectedCallback?(): void;

dist/types/utils/test-utils.d.ts

@@ -5,6 +5,6 @@ import { E2EPage } from "@stencil/core/testing";
 declare type DuetE2EPageOptions = {
-    html: string;
-    viewportWidth: number;
+  html: string;
+  viewportWidth: number;
 };
 export declare function createPage(optionsOrHtml?: string | DuetE2EPageOptions): Promise<DuetE2EPage>;
 export {};

package.json

 {
   "name": "@duetds/date-picker",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "Duet Date Picker is an open source version of Duet Design System’s Date Picker. It’s a Web Component that lets user pick a single date using a special calendar like date picker interface.",
@@ -49,3 +49,3 @@ "author": "LocalTapiola Services Ltd <[e-mail]>",
   "devDependencies": {
-    "@stencil/core": "1.17.3",
+    "@stencil/core": "2.0.0-2",
     "@stencil/sass": "1.3.2",
@@ -52,0 +52,0 @@ "@stencil/utils": "latest",

New alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

2095669

decreased by-4.07%

Number of package files

87

decreased by-6.45%

Lines of code

17967

decreased by-14.57%

Number of low quality alerts

4

increased by100%

Number of low supply chain risk alerts

20

increased by185.71%

No dependency changes