@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,906 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { F as FocusGuard } from './p-0b8f16f1.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { h } from './p-b9058029.js';
+import { d as defineCustomElement$8 } from './p-0a928609.js';
+import { d as defineCustomElement$7 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$6 } from './p-7739604d.js';
+import { d as defineCustomElement$5 } from './p-65d3ead5.js';
+import { d as defineCustomElement$4 } from './p-16d518fd.js';
+import { d as defineCustomElement$3 } from './p-88511d7a.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const formatOptionsShort = { day: "numeric", month: "long" };
+const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
+const i18n = {
+  fi: {
+    buttonLabel: "Valitse päivämäärä",
+    prevMonthLabel: "Edellinen kuukausi",
+    nextMonthLabel: "Seuraava kuukausi",
+    monthSelectLabel: "Kuukausi",
+    yearSelectLabel: "Vuosi",
+    closeLabel: "Sulje ikkuna",
+    selected: "Valittu päivämäärä on",
+    keyboardInstruction: "Voit navigoida päivämääriä nuolinäppäimillä",
+    dayLabels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
+    monthLabels: [
+      "Tammikuu",
+      "Helmikuu",
+      "Maaliskuu",
+      "Huhtikuu",
+      "Toukokuu",
+      "Kesäkuu",
+      "Heinäkuu",
+      "Elokuu",
+      "Syyskuu",
+      "Lokakuu",
+      "Marraskuu",
+      "Joulukuu",
+    ],
+    monthLabelsShort: [
+      "Tammi",
+      "Helmi",
+      "Maalis",
+      "Huhti",
+      "Touko",
+      "Kesä",
+      "Heinä",
+      "Elo",
+      "Syys",
+      "Loka",
+      "Marras",
+      "Joulu",
+    ],
+    formatterShort: new Intl.DateTimeFormat("fi-FI", formatOptionsShort),
+    formatterLong: new Intl.DateTimeFormat("fi-FI", formatOptionsLong),
+  },
+  en: {
+    buttonLabel: "Choose date",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    monthSelectLabel: "Month",
+    yearSelectLabel: "Year",
+    closeLabel: "Close window",
+    selected: "Selected date is",
+    keyboardInstruction: "You can use arrow keys to navigate dates",
+    dayLabels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    monthLabels: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+    monthLabelsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    formatterShort: new Intl.DateTimeFormat("en-GB", formatOptionsShort),
+    formatterLong: new Intl.DateTimeFormat("en-GB", formatOptionsLong),
+  },
+  sv: {
+    buttonLabel: "Välj datum",
+    prevMonthLabel: "Föregående månad",
+    nextMonthLabel: "Nästa månad",
+    monthSelectLabel: "Månad",
+    yearSelectLabel: "År",
+    closeLabel: "Stäng fönstret",
+    selected: "Valt datum är",
+    keyboardInstruction: "Använd piltangenterna för att navigera i kalender",
+    dayLabels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
+    monthLabels: [
+      "Januari",
+      "Februari",
+      "Mars",
+      "April",
+      "Maj",
+      "Juni",
+      "Juli",
+      "Augusti",
+      "September",
+      "Oktober",
+      "November",
+      "December",
+    ],
+    monthLabelsShort: ["Jan", "Feb", "Mars", "April", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"],
+    formatterShort: new Intl.DateTimeFormat("sv-SE", formatOptionsShort),
+    formatterLong: new Intl.DateTimeFormat("sv-SE", formatOptionsLong),
+  },
+};
+
+var formDate={"title":"form-date","tags":"form date calendar date picker","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M2.25 24A2.252 2.252 0 0 1 0 21.75V5.25A2.252 2.252 0 0 1 2.25 3H6V.75a.75.75 0 0 1 1.5 0V3h9V.75a.75.75 0 0 1 1.5 0V3h3.75A2.252 2.252 0 0 1 24 5.25v16.5A2.252 2.252 0 0 1 21.75 24zm-.75-2.25c0 .414.336.75.75.75h19.5a.75.75 0 0 0 .75-.75V10.5h-21zM22.5 9V5.25a.75.75 0 0 0-.75-.75H18V6a.75.75 0 0 1-1.5 0V4.5h-9V6A.75.75 0 0 1 6 6V4.5H2.25a.75.75 0 0 0-.75.75V9z\"/><circle cx=\"5.625\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"5.625\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"12\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"12\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"18.375\" cy=\"13.875\" r=\"1.125\"/><path d=\"M18.375 20.25c-.62 0-1.125-.505-1.125-1.125a1.127 1.127 0 0 1 1.171-1.122l.027.003a1.118 1.118 0 0 1 1.052 1.12c0 .619-.505 1.124-1.125 1.124z\"/></svg>"};
+
+const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, echoPlaceholder, caption, }) => {
+  const { buttonLabel, selected, formatterLong } = i18n[language];
+  return (h("div", { class: {
+      "duet-theme-turva": theme === "turva",
+      "duet-date-input": true,
+    } },
+    h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption },
+      h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" },
+        h("duet-icon", { icon: formDate.svg, margin: "none", size: "small", color: "currentColor" }),
+        h("duet-visually-hidden", null,
+          buttonLabel,
+          valueAsDate && (h("span", null,
+            ", ",
+            selected,
+            " ",
+            formatterLong.format(valueAsDate)))))),
+    h("input", { type: "hidden", name: name, value: value })));
+};
+
+const DATE_FORMAT = /^(\d{1,2})[\.\-\/](\d{1,2})[\.\-\/](\d{4})$/;
+const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
+const DATE_OUTPUT_FORMAT = "dd.mm.yyyy";
+const DATE_ISO_OUTPUT_FORMAT = "YYYY-MM-DD";
+function createDate(year, month, day) {
+  var dayInt = parseInt(day, 10);
+  var monthInt = parseInt(month, 10);
+  var yearInt = parseInt(year, 10);
+  const isValid = Number.isInteger(yearInt) && // all parts should be integers
+    Number.isInteger(monthInt) &&
+    Number.isInteger(dayInt) &&
+    monthInt > 0 && // month must be 1-12
+    monthInt <= 12 &&
+    dayInt > 0 && // day must be 1-31
+    dayInt <= 31 &&
+    yearInt > 0;
+  if (isValid) {
+    return new Date(yearInt, monthInt - 1, dayInt);
+  }
+}
+/**
+ * @param value date string in format dd.mm.yyyy
+ */
+function parseDate(value) {
+  if (!value) {
+    return;
+  }
+  const matches = value.match(DATE_FORMAT);
+  if (matches) {
+    return createDate(matches[3], matches[2], matches[1]);
+  }
+}
+/**
+ * @param value date string in ISO format YYYY-MM-DD
+ */
+function parseISODate(value) {
+  if (!value) {
+    return;
+  }
+  const matches = value.match(ISO_DATE_FORMAT);
+  if (matches) {
+    return createDate(matches[1], matches[2], matches[3]);
+  }
+}
+/**
+ * @param date the date to format as a Date
+ * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
+ */
+function formatDate(date, format) {
+  if (!date) {
+    return "";
+  }
+  var d = date.getDate().toString(10);
+  var m = (date.getMonth() + 1).toString(10);
+  var y = date.getFullYear().toString(10);
+  // days are not zero-indexed, so pad if less than 10
+  if (date.getDate() < 10) {
+    d = `0${d}`;
+  }
+  // months *are* zero-indexed, pad if less than 9!
+  if (date.getMonth() < 9) {
+    m = `0${m}`;
+  }
+  return format.replace(/MM/i, m).replace(/YYYY/i, y).replace(/DD/i, d);
+}
+/**
+ * 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 = 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 = 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) {
+  const d = new Date(date);
+  d.setMonth(month);
+  return d;
+}
+function setYear(date, year) {
+  const d = new Date(date);
+  d.setFullYear(year);
+  return d;
+}
+/**
+ * Check if date is within a min and max
+ */
+function inRange(date, min, max) {
+  return clamp(date, min, max) === date;
+}
+/**
+ * Ensures date is within range, returns min or max if out of bounds
+ */
+function clamp(date, min, max) {
+  const time = date.getTime();
+  if (min && min instanceof Date && time < min.getTime()) {
+    return min;
+  }
+  if (max && max instanceof Date && time > max.getTime()) {
+    return max;
+  }
+  return date;
+}
+/**
+ * given start and end date, return an (inclusive) array of all dates in between
+ * @param start
+ * @param end
+ */
+function getDaysInRange(start, end) {
+  const days = [];
+  let 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 = 1) {
+  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
+  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
+  return getDaysInRange(start, end);
+}
+
+const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  const { formatterShort } = i18n[language];
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref },
+    h("span", { "aria-hidden": "true" }, day.getDate()),
+    h("duet-visually-hidden", null, formatterShort.format(day))));
+};
+
+/**
+ * Creates an array representing an inclusive numeric range.
+ * `from` must be less than `to`
+ * @param from
+ * @param to
+ */
+function range(from, to) {
+  var result = [];
+  for (var i = from; i <= to; i++) {
+    result.push(i);
+  }
+  return result;
+}
+/**
+ * Splits an array into smaller arrays of given chunk size
+ * @param array
+ * @param chunkSize
+ */
+function chunk(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+function parseShortcut(str) {
+  var _a;
+  const press = str.trim().split("+");
+  const key = press.pop();
+  return [((_a = press[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "shift", key];
+}
+/**
+ * Creates a keyboard event handler for handling keyboard shortcuts.
+ * It currently only handles shift key as a modifier.
+ * @param shortcuts a hash where keys are keyboard shortcuts, and values are handlers for those shortcuts
+ * @example
+ * element.addEventListener("keydown", createShortcuts({
+ *  "PageDown": () => this.addMonths(1)
+ *  "Shift+PageDown": () => this.addYears(1)
+ * }))
+ */
+function createShortcuts(shortcuts) {
+  const keyBindings = Object.keys(shortcuts).map(key => [parseShortcut(key), shortcuts[key]]);
+  return function handleShortcuts(event) {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
+    // we need to check both event.code and event.key
+    // for browser support back to IE11
+    const shortcut = keyBindings.find(([[shift, key]]) => {
+      return (key.toUpperCase() === event.key.toUpperCase() || key === event.code) && shift === event.shiftKey;
+    });
+    if (shortcut) {
+      shortcut[1](event);
+      event.preventDefault();
+    }
+  };
+}
+
+const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
+  const { dayLabels } = i18n[language];
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate);
+  function handleFocusOut(e) {
+    const table = e.currentTarget;
+    const relatedTarget = e.relatedTarget;
+    if (relatedTarget && !table.contains(relatedTarget)) {
+      onFocusExit(e);
+    }
+  }
+  return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusEnter, onFocusout: handleFocusOut },
+    h("thead", null,
+      h("tr", null, dayLabels.map(label => (h("th", { scope: "col" },
+        h("span", { "aria-hidden": "true" }, label.substr(0, 2)),
+        h("duet-visually-hidden", null, label)))))),
+    h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" },
+      h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+          if (el && isEqual(day, focusedDate)) {
+            focusedDayRef(el);
+          }
+        } }))))))))));
+};
+
+const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;display:flex;align-items:center;justify-content:center;width:48px;height:calc(100% - 2px);color:#00294d;cursor:pointer;background:transparent !important;border-left:1px solid #cfd2d4 !important;border-radius:0 4px 4px 0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:#171c3a;border-color:#cfcfd1}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:default;background:#f5f8fa !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:#f5f5f7 !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-button.sc-duet-date-picker:focus{color:#0077b3;border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:#171c3a;box-shadow:0 0 0 2px #171c3a}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;background:rgba(0, 41, 77, 0.75);transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}.duet-date-dialog.duet-theme-turva.sc-duet-date-picker{background:rgba(23, 28, 58, 0.75)}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:#e4e4e6}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:#00294d;text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25 !important;color:#00294d !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:#171c3a !important}.duet-date-table-button.sc-duet-date-picker:hover{background:#e6f2f8 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:#f9e6ea !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:#004d80 !important;background:#f3f9fc !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:#940925 !important;background:#fcf3f4 !important;box-shadow:0 0 0 1px #c60c30 !important}.duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#0077b3 !important;outline:0}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#c60c30 !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:white !important;background:#0077b3 !important;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:white !important;background:#c60c30 !important;box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.sc-duet-date-picker:focus{z-index:200;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:#909599 !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:#747475 !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:#909599 !important;pointer-events:none;cursor:default;background:#f5f8fa !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:#747475;background:#f5f5f7;box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker .sc-duet-date-picker::part(button){border:0}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:600;line-height:1.25;color:#00294d;pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #cfd2d4}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:#cfcfd1}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:#00294d !important;cursor:pointer;background:#f5f8fa !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f8fa !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a}";
+
+const DuetDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.monthSelectId = createID("DuetDatePicker");
+    this.yearSelectId = createID("DuetDatePicker");
+    this.dialogLabelId = createID("DuetDatePicker");
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.focusTarget = null;
+    this.open = false;
+    this.focusedDay = new Date();
+    this.inputValue = "";
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Expands the date picker input to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Name of the date picker input.
+     */
+    this.name = "";
+    /**
+     * Adds a unique identifier for the date picker input.
+     */
+    this.identifier = "";
+    /**
+     * Label for the date picker input.
+     */
+    this.label = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * The currently active language. This setting changes the month/year/day.
+     * names and button labels as well as all screen reader labels.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Placeholder defaults.
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.placeholderDefaults = {
+      fi: "pp.kk.vvvv",
+      en: "dd.mm.yyyy",
+      sv: "dd.mm.åååå",
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
+    /**
+     * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+     */
+    this.echoPlaceholder = false;
+    /**
+     * Makes the date picker input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Display the date picker input in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Forces the opening direction of the calendar modal to be always left or right.
+     * This setting can be useful when the input is smaller than the opening date picker
+     * would be as by default the picker always opens towards right.
+     */
+    this.direction = "right";
+    /**
+     * Tooltip to display next to the label of the date picker input.
+     */
+    this.tooltip = "";
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+     */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    /**
+     * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+     */
+    this.incrementYears = 10;
+    this.enableActiveFocus = () => {
+      this.focusTarget = "day-button";
+    };
+    this.disableActiveFocus = () => {
+      this.focusTarget = null;
+    };
+    this.toggleOpen = (e) => {
+      e.preventDefault();
+      this.open ? this.hide(false) : this.show();
+    };
+    this.handleBlur = (event) => {
+      event.stopPropagation();
+      this.duetBlur.emit({
+        component: "duet-date-picker",
+      });
+    };
+    this.handleFocus = (event) => {
+      event.stopPropagation();
+      this.duetFocus.emit({
+        component: "duet-date-picker",
+      });
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    this.handleTouchMove = (event) => {
+      event.preventDefault();
+    };
+    this.handleTouchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+      const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
+      if (isHorizontalSwipe) {
+        this.addMonths(distX < 0 ? 1 : -1);
+      }
+      else if (isDownwardsSwipe) {
+        this.hide();
+        event.preventDefault();
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+    this.handleNextMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(1);
+    };
+    this.handlePreviousMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(-1);
+    };
+    this.handleEscKey = createShortcuts({
+      Escape: () => this.hide(),
+      Esc: () => this.hide(), // IE-specific
+    });
+    this.handleKeyboardNavigation = createShortcuts({
+      ArrowRight: () => this.addDays(1),
+      Right: () => this.addDays(1),
+      ArrowLeft: () => this.addDays(-1),
+      Left: () => this.addDays(-1),
+      ArrowDown: () => this.addDays(7),
+      Down: () => this.addDays(7),
+      ArrowUp: () => this.addDays(-7),
+      Up: () => this.addDays(-7),
+      Home: () => this.startOfWeek(),
+      End: () => this.endOfWeek(),
+      PageUp: () => this.addMonths(-1),
+      PageDown: () => this.addMonths(1),
+      "Shift+PageUp": () => this.addYears(-1),
+      "Shift+PageDown": () => this.addYears(1),
+    });
+    this.handleDaySelect = (_event, day) => {
+      const min = parseISODate(this.min);
+      const max = parseISODate(this.max);
+      this.determineValidity(day);
+      if (inRange(day, min, max)) {
+        this.setValue(day);
+        this.hide();
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.handleInputChange = (e) => {
+      this.inputValue = e.detail.value;
+      const parsed = parseDate(this.inputValue);
+      this.determineValidity(parsed);
+      if (parsed || this.inputValue === "") {
+        this.setValue(parsed);
+      }
+    };
+  }
+  updateValidity() {
+    this.determineValidity(parseISODate(this.value));
+  }
+  updateInternalValue() {
+    const parsedValue = parseISODate(this.value);
+    const parsedInputValue = parseDate(this.inputValue);
+    // an invalid or empty value should clear the input
+    if (!parsedValue) {
+      this.inputValue = "";
+    }
+    // but otherwise only update user's input if the new value is different to user's input
+    else if (!isEqual(parsedValue, parsedInputValue)) {
+      this.inputValue = printDate(parsedValue);
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.determineValidity(parseISODate(this.value));
+    this.updateInternalValue();
+  }
+  componentDidUpdate() {
+    // we want to run this code _after_ render
+    // to ensure all elements are visible (and thus focusable)
+    // hence using componentDidUpdate
+    switch (this.focusTarget) {
+      case "toggle-button":
+        this.datePickerButton.focus();
+        this.focusTarget = null;
+        break;
+      case "day-button":
+        // we don't clear focusTarget here since this is cleared
+        // already when focus is moved out of calendar table
+        this.focusedDayNode.focus();
+        break;
+      case "month-select":
+        this.monthSelectNode.focus();
+        this.focusTarget = null;
+        break;
+    }
+  }
+  /**
+   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
+   */
+  async setFocus(options) {
+    this.datePickerInput.setFocus(options);
+  }
+  /**
+   * Show the calendar modal, moving focus to the calendar inside.
+   */
+  async show() {
+    this.open = true;
+    this.focusTarget = "month-select";
+    this.setFocusedDay(parseISODate(this.value) || new Date());
+  }
+  /**
+   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
+   * returning to the date picker's button. Default is true.
+   */
+  async hide(moveFocusToButton = true) {
+    this.open = false;
+    if (moveFocusToButton) {
+      this.focusTarget = "toggle-button";
+    }
+  }
+  addDays(days) {
+    this.setFocusedDay(addDays(this.focusedDay, days));
+  }
+  addMonths(months) {
+    this.setMonth(this.focusedDay.getMonth() + months);
+  }
+  addYears(years) {
+    this.setYear(this.focusedDay.getFullYear() + years);
+  }
+  startOfWeek() {
+    this.setFocusedDay(startOfWeek(this.focusedDay));
+  }
+  endOfWeek() {
+    this.setFocusedDay(endOfWeek(this.focusedDay));
+  }
+  setMonth(month) {
+    const min = setMonth(startOfMonth(this.focusedDay), month);
+    const max = endOfMonth(min);
+    const date = setMonth(this.focusedDay, month);
+    this.setFocusedDay(clamp(date, min, max));
+  }
+  setYear(year) {
+    const min = setYear(startOfMonth(this.focusedDay), year);
+    const max = endOfMonth(min);
+    const date = setYear(this.focusedDay, year);
+    this.setFocusedDay(clamp(date, min, max));
+  }
+  setFocusedDay(day) {
+    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
+  }
+  determineValidity(date) {
+    var _a, _b;
+    const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+    const badInput = inputValue !== "" && date == null;
+    const valueMissing = this.required && date == null;
+    const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
+    const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
+    this.validity = {
+      patternMismatch: false,
+      customError: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valueMissing,
+      badInput,
+      rangeUnderflow,
+      rangeOverflow,
+      valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
+    };
+  }
+  setValue(date) {
+    const newValue = printISODate(date);
+    if (newValue === this.value) {
+      return;
+    }
+    this.value = newValue;
+    this.duetChange.emit({
+      component: "duet-date-picker",
+      value: this.value,
+      valueAsDate: date,
+    });
+  }
+  handleDocumentClick(e) {
+    if (!this.open) {
+      return;
+    }
+    // the dialog and the button aren't considered clicks outside.
+    // dialog for obvious reasons, but the button needs to be skipped
+    // so that two things are possible:
+    //
+    // a) clicking again on the button when dialog is open should close the modal.
+    //    without skipping the button here, we would see a click outside
+    //    _and_ a click on the button, so the `open` state goes
+    //    open -> close (click outside) -> open (click button)
+    //
+    // b) clicking another date picker's button should close the current calendar
+    //    and open the new one. this means we can't stopPropagation() on the button itself
+    const isClickOutside = e
+      .composedPath()
+      .every(node => node !== this.dialogWrapperNode && node !== this.datePickerButton);
+    if (isClickOutside) {
+      this.hide(false);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const valueAsDate = parseISODate(this.value);
+    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+    const focusedMonth = this.focusedDay.getMonth();
+    const focusedYear = this.focusedDay.getFullYear();
+    const text = i18n[this.language];
+    const minDate = parseISODate(this.min);
+    const maxDate = parseISODate(this.max);
+    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+    let minYear = selectedYear - this.incrementYears;
+    let maxYear = selectedYear + this.incrementYears;
+    if (minDate) {
+      minYear = Math.max(minYear, minDate.getFullYear());
+    }
+    if (maxDate) {
+      maxYear = Math.min(maxYear, maxDate.getFullYear());
+    }
+    return (h$1(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h$1("div", { class: "duet-date" }, h$1(DatePickerInput, { value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h$1("div", { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-date-dialog": true,
+        left: this.direction === "left",
+        error: !!this.error,
+        active: this.open,
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h$1(FocusGuard, { moveFocusTo: this.focusedDayNode }), h$1("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { class: "duet-date-dialog-mobile-header" }, h$1("duet-label", { margin: "none" }, this.label), h$1("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", null, text.closeLabel))), h$1("div", { class: "duet-date-dialog-header" }, h$1("div", { class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", null, h$1("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h$1("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h$1("option", { key: year, selected: year === focusedYear }, year)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, this.focusedDay.getFullYear()), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { class: "duet-date-dialog-buttons" }, h$1("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h$1("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h$1(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h$1(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "min": ["updateValidity"],
+    "max": ["updateValidity"],
+    "value": ["updateValidity", "updateInternalValue"],
+    "required": ["updateValidity"]
+  }; }
+  static get style() { return duetDatePickerCss; }
+}, [2, "duet-date-picker", {
+    "theme": [1025],
+    "expand": [4],
+    "name": [1],
+    "identifier": [1],
+    "label": [1],
+    "caption": [1],
+    "margin": [1],
+    "language": [1],
+    "placeholderDefaults": [1, "placeholder-default"],
+    "placeholder": [1],
+    "echoPlaceholder": [1540, "echo-placeholder"],
+    "disabled": [516],
+    "error": [1],
+    "labelHidden": [4, "label-hidden"],
+    "role": [1],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "required": [4],
+    "direction": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "value": [1537],
+    "min": [1],
+    "max": [1],
+    "incrementYears": [2, "increment"],
+    "validity": [1040],
+    "open": [32],
+    "focusedDay": [32],
+    "inputValue": [32],
+    "setFocus": [64],
+    "show": [64],
+    "hide": [64]
+  }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-date-picker", "duet-action-button", "duet-caption", "duet-icon", "duet-input", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetDatePicker$1);
+      }
+      break;
+    case "duet-action-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetDatePicker = DuetDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetDatePicker, defineCustomElement };