@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -1,939 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-f2c2f3d2.js';
-import { D as DuetInternalLabel } from './p-42619f94.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { F as FocusGuard } from './p-e30dc66d.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './p-ad615991.js';
-import { h } from './p-993aea39.js';
-import { d as defineCustomElement$c } from './p-c1e56f9a.js';
-import { d as defineCustomElement$b } from './p-42c1fc90.js';
-import { d as defineCustomElement$a } from './p-ef48f2c7.js';
-import { d as defineCustomElement$9 } from './p-7b6a89e9.js';
-import { d as defineCustomElement$8 } from './p-3695c0cf.js';
-import { d as defineCustomElement$7 } from './p-cd328521.js';
-import { d as defineCustomElement$6 } from './p-f8ba399b.js';
-import { d as defineCustomElement$5 } from './p-821de204.js';
-import { d as defineCustomElement$4 } from './p-91688dd8.js';
-import { d as defineCustomElement$3 } from './p-0cd28b7b.js';
-import { d as defineCustomElement$2 } from './p-4f6ac36d.js';
-
-const formatOptionsShort = { day: "numeric", month: "long", weekday: "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, inputLabel, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, hasFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
-    const { buttonLabel, selected, formatterLong } = i18n[language];
-    const classes = {
-        "duet-theme-turva": theme === "turva",
-        "duet-date-input": true,
-        "duet-date-input-has-focus": hasFocus,
-    };
-    return (h("div", { class: classes },
-        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", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetChange: e => e.stopImmediatePropagation(), onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" },
-            h("slot", { name: "tooltip" }),
-            h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden, "input-error": !!error }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "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))))))));
-};
-
-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("td", { "data-day": printISODate(day), class: "duet-date-table-cell", "aria-label": formatterShort.format(day), role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", ref: ref },
-        h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
-};
-
-/**
- * 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("div", { role: "application" },
-        h("table", { role: "presentation", 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("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (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 = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !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:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;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}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-date{position:relative;width:100%}.duet-date button,.duet-date-dialog button{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button{-webkit-user-select:none;user-select:none;position:relative;z-index:200;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:48px;color:rgb(8, 42, 77);cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-left-color:rgb(181, 198, 208);border-radius:0 4px 4px 0;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-theme-turva .duet-date-button{color:rgb(23, 28, 58);border-color:rgb(199, 202, 207)}.duet-date-button::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-date-button:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva .duet-date-button:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.duet-date-button:disabled{pointer-events:none;cursor:not-allowed;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva .duet-date-button:disabled{background:rgb(245, 247, 250) !important}.duet-date-button:disabled::before{display:none}.duet-date-button:disabled duet-icon{opacity:0.4}.duet-date-button duet-icon{transform:translateY(-1px)}.duet-date-button:active duet-icon{transform:translateY(0)}.duet-date-input-has-focus .duet-date-button,.duet-date-button:focus{height:46px;color:rgb(0, 119, 179);border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.duet-date-input-has-focus .duet-date-button,.duet-theme-turva .duet-date-button:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}.input-error{border-top-color:rgb(214, 28, 82);border-right-color:rgb(214, 28, 82);border-bottom-color:rgb(214, 28, 82)}.duet-date-dialog{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{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog{position:fixed;top:0;right:0;bottom:0;transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}}.duet-date-dialog.active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva .duet-date-dialog-wrapper{border-color:rgb(222, 224, 228)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper{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 .duet-date-dialog-wrapper{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-table th{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 .duet-date-table-cell{text-align:center}.duet-date-table .duet-date-table-cell:focus{outline:none}.duet-date-table-button{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:2.6 !important;color:rgb(8, 42, 77) !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva .duet-date-table-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button:hover{background:rgb(228, 241, 247) !important}.duet-theme-turva .duet-date-table-button:hover{background:rgb(255, 227, 228) !important}.duet-date-table-button.today{z-index:200;color:rgb(0, 75, 129) !important;background:rgb(240, 247, 250) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-date-table-button.today{color:rgb(126, 2, 35) !important;background:rgb(255, 241, 241) !important;box-shadow:0 0 0 1px #171c3a !important}[aria-pressed=true] .duet-date-table-button,:focus .duet-date-table-button{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;outline:0}.duet-theme-turva [aria-pressed=true] .duet-date-table-button,.duet-theme-turva :focus .duet-date-table-button{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}.duet-date-table-button:active{z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva .duet-date-table-button:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important;box-shadow:0 0 5px 0 #171c3a !important}:focus .duet-date-table-button{z-index:200;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva :focus .duet-date-table-button{box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.disabled{color:rgb(127, 150, 165) !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva .duet-date-table-button.disabled{color:rgb(143, 147, 158) !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside{color:rgb(127, 150, 165) !important;pointer-events:none;cursor:default;background:rgb(245, 248, 250) !important;box-shadow:none;opacity:0.75}.duet-theme-turva .duet-date-table-button.outside{color:rgb(143, 147, 158);background:rgb(245, 247, 250);box-shadow:none}.duet-date-dialog-header{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons{white-space:nowrap}.duet-date-dialog-buttons ::part(button){border:0}.duet-date-dialog-select{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select .duet-date-dialog-select-label{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);pointer-events:none;border-radius:4px}.duet-theme-turva .duet-date-dialog-select .duet-date-dialog-select-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-dialog-select span{margin-right:4px}.duet-date-dialog-select select{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select select:focus+.duet-date-dialog-select-label{box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva .duet-date-dialog-select select:focus+.duet-date-dialog-select-label{box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog-mobile-header{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(181, 198, 208)}@media (min-width: 36em){.duet-date-dialog-mobile-header{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva .duet-date-dialog-mobile-header{border-color:rgb(199, 202, 207)}.duet-date-dialog-mobile-header duet-label{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header duet-label{display:none}}.duet-date-picker-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(8, 42, 77) !important;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close{opacity:0}}.duet-theme-turva .duet-date-picker-close{background:rgb(245, 247, 250) !important}.duet-date-picker-close:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva .duet-date-picker-close:hover{background:rgb(245, 247, 250) !important}.duet-date-picker-close:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}@media (min-width: 36em){.duet-date-picker-close:focus{opacity:1}}.duet-theme-turva .duet-date-picker-close:focus{box-shadow:0 0 0 2px #171c3a !important}";
-const DuetDatePickerStyle0 = duetDatePickerCss;
-
-const DuetDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DuetDatePicker extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChange = createEvent(this, "duetChange", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.proxyId = createID("DuetDatePicker");
-        this.monthSelectId = createID("DuetDatePicker");
-        this.yearSelectId = createID("DuetDatePicker");
-        this.dialogLabelId = createID("DuetDatePicker");
-        this.initialTouchX = null;
-        this.initialTouchY = null;
-        this.focusTarget = null;
-        this.dateErrorMessages = {
-            badInput: {
-                en: "Wrong date format",
-                fi: "Väärä päivämäärämuoto",
-                sv: "Fel datumformat",
-            },
-            rangeUnderflow: {
-                en: "Date too early",
-                fi: "Liian aikainen päivämäärä",
-                sv: "Datum för tidigt",
-            },
-            rangeOverflow: {
-                en: "Date too late",
-                fi: "Liian myöhäinen päivämäärä",
-                sv: "Datum för sent",
-            },
-            valueMissing: {
-                en: "Date required",
-                fi: "Päivämäärä vaaditaan",
-                sv: "Datum krävs",
-            },
-        };
-        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.inputHasFocus = false;
-            if (!this._validity.valid) {
-                this.value = null;
-                const errorKey = Object.entries(this._validity).find(entry => !!entry[1])[0];
-                this.internalValidityError = getLocaleString(this.dateErrorMessages[errorKey]);
-            }
-            this.duetBlur.emit({
-                component: "duet-date-picker",
-            });
-        };
-        this.handleFocus = (event) => {
-            event.stopPropagation();
-            this.inputHasFocus = true;
-            this.duetFocus.emit({
-                component: "duet-date-picker",
-            });
-        };
-        this.handleTouchStart = (event) => {
-            const touch = event.changedTouches[0];
-            this.initialTouchX = touch.pageX;
-            this.initialTouchY = touch.pageY;
-        };
-        this.handleTouchMove = (event) => {
-            event.preventDefault();
-        };
-        this.handleTouchEnd = (event) => {
-            const touch = event.changedTouches[0];
-            const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
-            const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
-            const threshold = 70;
-            const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-            const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
-            if (isHorizontalSwipe) {
-                this.addMonths(distX < 0 ? 1 : -1);
-            }
-            else if (isDownwardsSwipe) {
-                this.hide();
-                event.preventDefault();
-            }
-            this.initialTouchY = null;
-            this.initialTouchX = null;
-        };
-        this.handleNextMonthClick = (event) => {
-            event.preventDefault();
-            this.addMonths(1);
-        };
-        this.handlePreviousMonthClick = (event) => {
-            event.preventDefault();
-            this.addMonths(-1);
-        };
-        this.handleEscKey = createShortcuts({
-            Escape: () => this.hide(),
-            Esc: () => this.hide(), // IE-specific
-        });
-        this.handleKeyboardNavigation = createShortcuts({
-            ArrowRight: () => this.addDays(1),
-            Right: () => this.addDays(1), // IE does not have "Arrow" prefix
-            ArrowLeft: () => this.addDays(-1),
-            Left: () => this.addDays(-1),
-            ArrowDown: () => this.addDays(7),
-            Down: () => this.addDays(7),
-            ArrowUp: () => this.addDays(-7),
-            Up: () => this.addDays(-7),
-            Home: () => this.startOfWeek(),
-            End: () => this.endOfWeek(),
-            PageUp: () => this.addMonths(-1),
-            PageDown: () => this.addMonths(1),
-            "Shift+PageUp": () => this.addYears(-1),
-            "Shift+PageDown": () => this.addYears(1),
-            Space: evt => this.handleKeyboardDaySelect(evt),
-            Enter: evt => this.handleKeyboardDaySelect(evt),
-        });
-        this.handleKeyboardDaySelect = (evt) => {
-            const el = evt.target;
-            const date = parseISODate(el.dataset.day);
-            this.handleDaySelect(evt, date);
-        };
-        this.handleDaySelect = (_event, day) => {
-            const min = parseISODate(this.min);
-            const max = parseISODate(this.max);
-            this.determineValidity(day);
-            if (inRange(day, min, max)) {
-                this.setValue(day);
-                this.hide();
-            }
-        };
-        this.handleMonthSelect = e => {
-            this.setMonth(parseInt(e.target.value, 10));
-        };
-        this.handleYearSelect = e => {
-            this.setYear(parseInt(e.target.value, 10));
-        };
-        this.handleInputChange = (e) => {
-            this.inputValue = e.detail.value;
-            const parsed = parseDate(this.inputValue);
-            this.determineValidity(parsed);
-            if (parsed || this.inputValue === "") {
-                this.setValue(parsed);
-            }
-        };
-        this.open = false;
-        this.focusedDay = new Date();
-        this.inputValue = "";
-        this.inputHasFocus = false;
-        this.internalValidityError = "";
-        this.theme = "";
-        this.expand = false;
-        this.name = "";
-        this.identifier = "";
-        this.label = "";
-        this.caption = undefined;
-        this.margin = "auto";
-        this.language = getLanguage();
-        this.placeholderDefaults = {
-            fi: "pp.kk.vvvv",
-            en: "dd.mm.yyyy",
-            sv: "dd.mm.åååå",
-        };
-        this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
-        this.echoPlaceholder = false;
-        this.disabled = false;
-        this.error = "";
-        this.disableBuiltInErrors = false;
-        this.labelHidden = false;
-        this.role = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.required = false;
-        this.direction = "right";
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.min = "";
-        this.max = "";
-        this.incrementYears = 10;
-        this.accessibleLiveError = "polite";
-    }
-    /**
-     * This offers information relating to the current validity of the component.
-     * It follow as closely as possible the behaviour of the native date input.
-     * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
-     */
-    get validity() {
-        return this._validity;
-    }
-    updateValidity(newValue, _oldValue, propName) {
-        if (propName === "value" && newValue === null) {
-            return;
-        }
-        this.determineValidity(parseISODate(this.value));
-        if (this._validity.valid) {
-            this.internalValidityError = "";
-        }
-    }
-    updateInternalValue() {
-        if (this.value === null) {
-            return;
-        }
-        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();
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
-    }
-    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;
-        }
-    }
-    componentDidRender() {
-        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, { prop: "placeholder", defaults: "placeholderDefaults" });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-    }
-    /**
-     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-     */
-    async setFocus(options) {
-        this.datePickerInput.setFocus(options);
-    }
-    /**
-     * Show the calendar modal, moving focus to the calendar inside.
-     */
-    async show() {
-        this.open = true;
-        this.focusTarget = "month-select";
-        this.setFocusedDay(parseISODate(this.value) || new Date());
-    }
-    /**
-     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-     * returning to the date picker's button. Default is true.
-     */
-    async hide(moveFocusToButton = true) {
-        this.open = false;
-        if (moveFocusToButton) {
-            this.focusTarget = "toggle-button";
-        }
-    }
-    addDays(days) {
-        this.setFocusedDay(addDays(this.focusedDay, days));
-    }
-    addMonths(months) {
-        this.setMonth(this.focusedDay.getMonth() + months);
-    }
-    addYears(years) {
-        this.setYear(this.focusedDay.getFullYear() + years);
-    }
-    startOfWeek() {
-        this.setFocusedDay(startOfWeek(this.focusedDay));
-    }
-    endOfWeek() {
-        this.setFocusedDay(endOfWeek(this.focusedDay));
-    }
-    setMonth(month) {
-        const min = setMonth(startOfMonth(this.focusedDay), month);
-        const max = endOfMonth(min);
-        const date = setMonth(this.focusedDay, month);
-        this.setFocusedDay(clamp(date, min, max));
-    }
-    setYear(year) {
-        const min = setYear(startOfMonth(this.focusedDay), year);
-        const max = endOfMonth(min);
-        const date = setYear(this.focusedDay, year);
-        this.setFocusedDay(clamp(date, min, max));
-    }
-    setFocusedDay(day) {
-        this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
-    }
-    determineValidity(date) {
-        var _a, _b;
-        const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-        const badInput = inputValue !== "" && date == null;
-        const valueMissing = this.required && date == null;
-        const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
-        const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
-        this._validity = {
-            patternMismatch: false,
-            customError: false,
-            stepMismatch: false,
-            tooLong: false,
-            tooShort: false,
-            typeMismatch: false,
-            badInput,
-            rangeUnderflow,
-            rangeOverflow,
-            valueMissing,
-            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, { key: '19c0a0a7ca3a67641f2e2fd47b1f66ef3942be00', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h$1("div", { key: '4c0294d785d5fbfc00d0b19369c365e03ec540a1', class: "duet-date" }, h$1(DatePickerInput, { key: '33285b02172cd08e881bbdb2fca5624b5a99f8cb', hasFocus: this.inputHasFocus, 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 || (!this.disableBuiltInErrors && this.internalValidityError) || null, 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, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h$1("div", { key: '2c9407fdc22f7f3f9345bf342d606483806cf0e6', 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("duet-overlay", { key: 'acfc613bbfb189023c734698aa31d8559adbcc7c', visible: this.open, "display-device": "x-small" }), h$1(FocusGuard, { key: '6a8197e6d5f96312d6f7c150ae5978334ee44af7', moveFocusTo: this.focusedDayNode }), h$1("div", { key: '16d4fd5169ce40f3bcd66805a28ed366891e88e7', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { key: 'eb26a4f9a803ce065946f742bdcb64db803a0b32', "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { key: '00ca0c13193e6443c4989582e3eb1f570fd3e113', class: "duet-date-dialog-mobile-header" }, h$1(DuetInternalLabel, { key: 'd3a5c701a6f1d8c2a2a99194fe1152a76133c9c6', margin: "none" }, this.label), h$1("button", { key: 'fb2a86e1f251a338a2cb6b4e30260995c485cced', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { key: '7ac51349e66f258160ecd1ca093c739555dbac8a', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", { key: 'd22d21a5ff614c658b83edb6631b893b8e9fefe4' }, text.closeLabel))), h$1("div", { key: 'dafd3a931c7efed8c5d36996e306635e130e5cc4', class: "duet-date-dialog-header" }, h$1("div", { key: '655b64aeb6eb804538da39d1540bd975dc0d42a8', class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", { key: 'ec0305c056c683a7e8cede20f22317e231b85bbd' }, h$1("h2", { key: '82779b7ba7a438b467a21ecb2871f64b7bce6714', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", { key: '9f050f46de2be9dc3c1f9d6965eb72901ca12d67' }, h$1("label", { key: '940dfb77c9440379d63297393a3cb7af96deba3e', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { key: '5d5c3bb349257c8e43f6e63ce1e142b6c630519f', class: "duet-date-dialog-select" }, h$1("select", { key: '74ef4df111f0793d17a3e4439fea8690f5c5169c', 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", { key: '894fdd48da75442d368a1101a5c4a8042b3cf418', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", { key: 'b3b88e90b0e690f29dcd72937b36ca2a027177e6' }, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { key: 'd030fc66e0e0fdcda78f26d7a117ea252932be5a', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", { key: '83f4b90e3d44537cb079f91f911385931d43f89c' }, h$1("label", { key: 'c2dfc3a34d2236e45726eff1523b22f22b532cfa', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { key: '708dad74eb23709ac341e0bb60ca2960a2fc2131', class: "duet-date-dialog-select" }, h$1("select", { key: 'ddda42ee0a550dac56dc85c5e96be637771b5f2e', 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", { key: 'ea037965dc2d924343aaac84ef2bd3afe3940b67', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", { key: '3c6bd199597d6635350ea348f90cf8d94f9c1121' }, this.focusedDay.getFullYear()), h$1("duet-icon", { key: 'cdd40b45f01e58dfdb1380aeef672632252c75a7', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { key: 'a23a3b6969f46d06bdbd80ce21adeeaa6705ad14', class: "duet-date-dialog-buttons" }, h$1("duet-action-button", { key: '2140b1f39112967e325f84f505880e582eb5f5f7', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h$1("duet-action-button", { key: '00a9ecf746d5a43e4c7f6bc66a77d00cfcbfb800', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h$1(DatePickerMonth, { key: 'ad33c40984a96557732fb910e1c640e6d09363e6', 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, { key: '117953981892ef42470c071ddbde955972a2461d', moveFocusTo: this.closeButtonNode }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "min": ["updateValidity"],
-        "max": ["updateValidity"],
-        "value": ["updateValidity", "updateInternalValue"],
-        "required": ["updateValidity"]
-    }; }
-    static get style() { return DuetDatePickerStyle0; }
-}, [1, "duet-date-picker", {
-        "theme": [1025],
-        "expand": [4],
-        "name": [1],
-        "identifier": [1],
-        "label": [1],
-        "caption": [1],
-        "margin": [1],
-        "language": [1537],
-        "placeholderDefaults": [1, "placeholder-default"],
-        "placeholder": [1025],
-        "echoPlaceholder": [1540, "echo-placeholder"],
-        "disabled": [516],
-        "error": [1],
-        "disableBuiltInErrors": [4, "disable-built-in-errors"],
-        "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": [2064],
-        "accessibleLiveError": [1, "accessible-live-error"],
-        "open": [32],
-        "focusedDay": [32],
-        "inputValue": [32],
-        "inputHasFocus": [32],
-        "internalValidityError": [32],
-        "setFocus": [64],
-        "show": [64],
-        "hide": [64]
-    }, [[4, "click", "handleDocumentClick"]], {
-        "min": ["updateValidity"],
-        "max": ["updateValidity"],
-        "value": ["updateValidity", "updateInternalValue"],
-        "required": ["updateValidity"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-date-picker", "duet-action-button", "duet-button", "duet-caption", "duet-icon", "duet-input", "duet-overlay", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-date-picker":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetDatePicker$1);
-            }
-            break;
-        case "duet-action-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "duet-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-overlay":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetDatePicker = DuetDatePicker$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetDatePicker, defineCustomElement };