@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/esm/dso-date-picker-legacy.entry.js

@@ -1,124 +1,124 @@
-import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-528d5213.js';
-import { c as createIdentifier } from './create-identifier-479a4699.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-2e1b7388.js';
+import { c as createIdentifier } from './create-identifier-d61d46af.js';
 
 // eslint-disable-next-line @stencil-community/ban-exported-const-enums -- This enum is not part of public API
 var DaysOfWeek;
 (function (DaysOfWeek) {
-  DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
-  DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
-  DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
-  DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
-  DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
-  DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
-  DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
+    DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
+    DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
+    DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
+    DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
+    DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
+    DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
+    DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
 })(DaysOfWeek || (DaysOfWeek = {}));
 function createDate(year, month, day) {
-  const dayInt = parseInt(day, 10);
-  const monthInt = parseInt(month, 10);
-  const 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);
-  }
+    const dayInt = parseInt(day, 10);
+    const monthInt = parseInt(month, 10);
+    const 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 Dutch format D-M-YYYY
  */
 function parseDutchDate(value) {
-  if (!value) {
-    return;
-  }
-  const matches = value.split("-");
-  if (matches.length === 3 &&
-    typeof matches[0] === "string" &&
-    typeof matches[1] === "string" &&
-    typeof matches[2] === "string" &&
-    matches[2].length === 4) {
-    return createDate(matches[2], matches[1], matches[0]);
-  }
+    if (!value) {
+        return;
+    }
+    const matches = value.split("-");
+    if (matches.length === 3 &&
+        typeof matches[0] === "string" &&
+        typeof matches[1] === "string" &&
+        typeof matches[2] === "string" &&
+        matches[2].length === 4) {
+        return createDate(matches[2], matches[1], matches[0]);
+    }
 }
 /**
  * print date in format DD-MM-YYYY
  * @param date
  */
 function printDutchDate(date) {
-  if (!date) {
-    return "";
-  }
-  const d = date.getDate().toString(10).padStart(2, "0");
-  const m = (date.getMonth() + 1).toString(10).padStart(2, "0");
-  const y = date.getFullYear().toString(10).padStart(2, "0");
-  return `${d}-${m}-${y}`;
+    if (!date) {
+        return "";
+    }
+    const d = date.getDate().toString(10).padStart(2, "0");
+    const m = (date.getMonth() + 1).toString(10).padStart(2, "0");
+    const y = date.getFullYear().toString(10).padStart(2, "0");
+    return `${d}-${m}-${y}`;
 }
 /**
  * Compare if two dates are equal in terms of day, month, and year
  */
 function isEqual(a, b) {
-  if (!a || !b) {
-    return false;
-  }
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    if (!a || !b) {
+        return false;
+    }
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 function addDays(date, days) {
-  const d = new Date(date);
-  d.setDate(d.getDate() + days);
-  return d;
+    const d = new Date(date);
+    d.setDate(d.getDate() + days);
+    return d;
 }
 function startOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
-  const d = new Date(date);
-  const day = d.getDay();
-  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
-  d.setDate(d.getDate() - diff);
-  return d;
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+    d.setDate(d.getDate() - diff);
+    return d;
 }
 function endOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
-  const d = new Date(date);
-  const day = d.getDay();
-  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
-  d.setDate(d.getDate() + diff);
-  return d;
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
+    d.setDate(d.getDate() + diff);
+    return d;
 }
 function startOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1);
+    return new Date(date.getFullYear(), date.getMonth(), 1);
 }
 function endOfMonth(date) {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }
 function setMonth(date, month) {
-  const d = new Date(date);
-  d.setMonth(month);
-  return d;
+    const d = new Date(date);
+    d.setMonth(month);
+    return d;
 }
 function setYear(date, year) {
-  const d = new Date(date);
-  d.setFullYear(year);
-  return d;
+    const d = new Date(date);
+    d.setFullYear(year);
+    return d;
 }
 /**
  * Check if date is within a min and max
  */
 function inRange(date, min, max) {
-  return clamp(date, min, max) === date;
+    return clamp(date, min, max) === date;
 }
 /**
  * Ensures date is within range, returns min or max if out of bounds
  */
 function clamp(date, min, max) {
-  const time = date.getTime();
-  if (min && min instanceof Date && time < min.getTime()) {
-    return min;
-  }
-  if (max && max instanceof Date && time > max.getTime()) {
-    return max;
-  }
-  return date;
+    const time = date.getTime();
+    if (min && min instanceof Date && time < min.getTime()) {
+        return min;
+    }
+    if (max && max instanceof Date && time > max.getTime()) {
+        return max;
+    }
+    return date;
 }
 /**
  * given start and end date, return an (inclusive) array of all dates in between
@@ -126,14 +126,14 @@ function clamp(date, min, max) {
  * @param end
  */
 function getDaysInRange(start, end) {
-  const days = [];
-  let current = start;
-  while (!isEqual(current, end)) {
+    const days = [];
+    let current = start;
+    while (!isEqual(current, end)) {
+        days.push(current);
+        current = addDays(current, 1);
+    }
     days.push(current);
-    current = addDays(current, 1);
-  }
-  days.push(current);
-  return days;
+    return days;
 }
 /**
  * given a date, return an array of dates from a calendar perspective
@@ -141,559 +141,560 @@ function getDaysInRange(start, end) {
  * @param firstDayOfWeek
  */
 function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
-  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
-  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
-  return getDaysInRange(start, end);
+    const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
+    const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
+    return getDaysInRange(start, end);
 }
 
 const DatePickerLegacyDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, }) => {
-  const isToday = isEqual(day, today);
-  const isFocused = isEqual(day, focusedDay);
-  const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();
-  const isOutsideRange = !inRange;
-  function handleClick(e) {
-    onDaySelect(e, day);
-  }
-  return (h("button", { class: {
-      "dso-date__day": true,
-      "is-today": isToday,
-    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || notCurrentMonth, type: "button", ref: (el) => {
-      if (isFocused && el && focusedDayRef) {
-        focusedDayRef(el);
-      }
-    } },
-    h("span", { "aria-hidden": "true" }, day.getDate()),
-    h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
+    const isToday = isEqual(day, today);
+    const isFocused = isEqual(day, focusedDay);
+    const notCurrentMonth = day.getMonth() !== focusedDay.getMonth();
+    const isOutsideRange = !inRange;
+    function handleClick(e) {
+        onDaySelect(e, day);
+    }
+    return (h("button", { class: {
+            "dso-date__day": true,
+            "is-today": isToday,
+        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || notCurrentMonth, type: "button", ref: (el) => {
+            if (isFocused && el && focusedDayRef) {
+                focusedDayRef(el);
+            }
+        } },
+        h("span", { "aria-hidden": "true" }, day.getDate()),
+        h("span", { class: "dso-date__vhidden" }, printDutchDate(day))));
 };
 
 function chunk(array, chunkSize) {
-  const result = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    result.push(array.slice(i, i + chunkSize));
-  }
-  return result;
+    const result = [];
+    for (let i = 0; i < array.length; i += chunkSize) {
+        result.push(array.slice(i, i + chunkSize));
+    }
+    return result;
 }
 function mapWithOffset(array, startingOffset, mapFn) {
-  return array.map((_, i) => {
-    const adjustedIndex = (i + startingOffset) % array.length;
-    const item = array[adjustedIndex];
-    if (!item) {
-      throw new Error("No item found");
-    }
-    return mapFn(item);
-  });
+    return array.map((_, i) => {
+        const adjustedIndex = (i + startingOffset) % array.length;
+        const item = array[adjustedIndex];
+        if (!item) {
+            throw new Error("No item found");
+        }
+        return mapFn(item);
+    });
 }
 const DatePickerLegacyMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, }) => {
-  const today = new Date();
-  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
-  return (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
-    h("thead", null,
-      h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "dso-date__table-header", scope: "col" },
-        h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
-        h("span", { class: "dso-date__vhidden" }, dayName)))))),
-    h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "dso-date__row" }, week.map((day) => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
-      h(DatePickerLegacyDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+    const today = new Date();
+    const days = getViewOfMonth(focusedDate, firstDayOfWeek);
+    return (h("table", { class: "dso-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
+        h("thead", null,
+            h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "dso-date__table-header", scope: "col" },
+                h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
+                h("span", { class: "dso-date__vhidden" }, dayName)))))),
+        h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "dso-date__row" }, week.map((day) => (h("td", { class: "dso-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? "true" : undefined, "aria-current": isEqual(day, today) ? "date" : undefined },
+            h(DatePickerLegacyDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
 };
 
 const localization = {
-  buttonLabel: "Kies datum",
-  placeholder: "dd-mm-jjjj",
-  selectedDateMessage: "Geselecteerde datum is",
-  prevMonthLabel: "Vorige maand",
-  nextMonthLabel: "Volgende maand",
-  monthSelectLabel: "Maand",
-  yearSelectLabel: "Jaar",
-  closeLabel: "Sluiten",
-  keyboardInstruction: "Gebruik de pijltjestoetsen om een dag te kiezen",
-  calendarHeading: "Kies een datum",
-  dayNames: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
-  monthNames: [
-    "Januari",
-    "Februari",
-    "Maart",
-    "April",
-    "Mei",
-    "Juni",
-    "Juli",
-    "Augustus",
-    "September",
-    "Oktober",
-    "November",
-    "December",
-  ],
-  monthNamesShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
+    buttonLabel: "Kies datum",
+    placeholder: "dd-mm-jjjj",
+    selectedDateMessage: "Geselecteerde datum is",
+    prevMonthLabel: "Vorige maand",
+    nextMonthLabel: "Volgende maand",
+    monthSelectLabel: "Maand",
+    yearSelectLabel: "Jaar",
+    closeLabel: "Sluiten",
+    keyboardInstruction: "Gebruik de pijltjestoetsen om een dag te kiezen",
+    calendarHeading: "Kies een datum",
+    dayNames: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
+    monthNames: [
+        "Januari",
+        "Februari",
+        "Maart",
+        "April",
+        "Mei",
+        "Juni",
+        "Juli",
+        "Augustus",
+        "September",
+        "Oktober",
+        "November",
+        "December",
+    ],
+    monthNamesShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
 };
 
 function monthRange(localization, selectedYear, minDate, maxDate) {
-  if (minDate && maxDate) {
-    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
-    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
-    return localization.monthNames.filter((_month, index) => {
-      if (minYear === selectedYear && maxYear === selectedYear) {
-        return index >= minMonth && index >= maxMonth;
-      }
-      if (minYear === selectedYear) {
-        return index >= minMonth;
-      }
-      if (maxYear === selectedYear) {
-        return index <= maxMonth;
-      }
-      return true;
-    });
-  }
-  if (minDate) {
-    const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
-    return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);
-  }
-  if (maxDate) {
-    const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
-    return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);
-  }
-  return localization.monthNames;
+    if (minDate && maxDate) {
+        const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
+        const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
+        return localization.monthNames.filter((_month, index) => {
+            if (minYear === selectedYear && maxYear === selectedYear) {
+                return index >= minMonth && index >= maxMonth;
+            }
+            if (minYear === selectedYear) {
+                return index >= minMonth;
+            }
+            if (maxYear === selectedYear) {
+                return index <= maxMonth;
+            }
+            return true;
+        });
+    }
+    if (minDate) {
+        const { minYear, minMonth } = { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() };
+        return localization.monthNames.filter((_month, index) => minYear === selectedYear && index >= minMonth);
+    }
+    if (maxDate) {
+        const { maxYear, maxMonth } = { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() };
+        return localization.monthNames.filter((_month, index) => maxYear === selectedYear && index <= maxMonth);
+    }
+    return localization.monthNames;
 }
 
 function range(from, to) {
-  const result = [];
-  for (let i = from; i <= to; i++) {
-    result.push(i);
-  }
-  return result;
+    const result = [];
+    for (let i = from; i <= to; i++) {
+        result.push(i);
+    }
+    return result;
 }
 
 const datePickerLegacyCss = ".sc-dso-date-picker-legacy-h{display:block}[invalid].sc-dso-date-picker-legacy-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker-legacy{border-color:#ce3f51}.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::before,.dso-date.sc-dso-date-picker-legacy *.sc-dso-date-picker-legacy::after{box-sizing:border-box}.dso-date.sc-dso-date-picker-legacy{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date.sc-dso-date-picker-legacy:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker-legacy{display:none}.dso-date__input.sc-dso-date-picker-legacy{display:block;width:100%;height:40px;padding:6px 14px;font-size:1rem;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker-legacy::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker-legacy:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker-legacy::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker-legacy:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker-legacy,.dso-date__input[readonly].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker-legacy,fieldset[disabled].sc-dso-date-picker-legacy .dso-date__input.sc-dso-date-picker-legacy{cursor:default}.dso-date__input[disabled].sc-dso-date-picker-legacy{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker-legacy{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker-legacy{line-height:40px}.dso-date__input[size].sc-dso-date-picker-legacy{width:auto}.dso-date__toggle.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:101}.dso-date__toggle.sc-dso-date-picker-legacy:disabled{color:#afcf9d;cursor:default}.dso-date__dialog.sc-dso-date-picker-legacy{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker-legacy{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker-legacy{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker-legacy{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker-legacy{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker-legacy{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker-legacy .dso-date__dialog-content.sc-dso-date-picker-legacy{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker-legacy{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker-legacy{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker-legacy{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker-legacy{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker-legacy:hover,.dso-date__day.sc-dso-date-picker-legacy:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus{background:transparent}[aria-selected=true].sc-dso-date-picker-legacy .dso-date__day.sc-dso-date-picker-legacy:focus span[aria-hidden=true].sc-dso-date-picker-legacy{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.sc-dso-date-picker-legacy:disabled{background:#fff;color:#ccc;cursor:default}.dso-date__day.sc-dso-date-picker-legacy span[aria-hidden=true].sc-dso-date-picker-legacy{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker-legacy{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker-legacy{white-space:nowrap}.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker-legacy:hover,.dso-date__prev.sc-dso-date-picker-legacy:active,.dso-date__next.sc-dso-date-picker-legacy:hover,.dso-date__next.sc-dso-date-picker-legacy:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker-legacy:focus,.dso-date__next.sc-dso-date-picker-legacy:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker-legacy:disabled,.dso-date__prev.sc-dso-date-picker-legacy:disabled:hover,.dso-date__next.sc-dso-date-picker-legacy:disabled,.dso-date__next.sc-dso-date-picker-legacy:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{margin:0 auto}.dso-date__select.sc-dso-date-picker-legacy{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{margin-right:4px}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:101}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:focus+.dso-date__select-label.sc-dso-date-picker-legacy{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker-legacy{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:100}.dso-date__select-label.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker-legacy svg.sc-dso-date-picker-legacy{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker-legacy{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker-legacy{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:none}}.dso-date__close.sc-dso-date-picker-legacy{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker-legacy:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker-legacy{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
+const DsoDatePickerLegacyStyle0 = datePickerLegacyCss;
 
 const keyCode = {
-  TAB: 9,
-  ESC: 27,
-  SPACE: 32,
-  PAGE_UP: 33,
-  PAGE_DOWN: 34,
-  END: 35,
-  HOME: 36,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
+    TAB: 9,
+    ESC: 27,
+    SPACE: 32,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+    END: 35,
+    HOME: 36,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
 };
 const DISALLOWED_CHARACTERS = /[^0-9-]+/g;
 const TRANSITION_MS = 300;
 function cleanValue(input, regex) {
-  const value = input.value;
-  const cursor = input.selectionStart;
-  if (!cursor) {
-    return value;
-  }
-  const beforeCursor = value.slice(0, cursor);
-  const afterCursor = value.slice(cursor, value.length);
-  const filteredBeforeCursor = beforeCursor.replace(regex, "");
-  const filterAfterCursor = afterCursor.replace(regex, "");
-  const newValue = filteredBeforeCursor + filterAfterCursor;
-  const newCursor = filteredBeforeCursor.length;
-  input.value = newValue;
-  input.selectionStart = input.selectionEnd = newCursor;
-  return newValue;
+    const value = input.value;
+    const cursor = input.selectionStart;
+    if (!cursor) {
+        return value;
+    }
+    const beforeCursor = value.slice(0, cursor);
+    const afterCursor = value.slice(cursor, value.length);
+    const filteredBeforeCursor = beforeCursor.replace(regex, "");
+    const filterAfterCursor = afterCursor.replace(regex, "");
+    const newValue = filteredBeforeCursor + filterAfterCursor;
+    const newCursor = filteredBeforeCursor.length;
+    input.value = newValue;
+    input.selectionStart = input.selectionEnd = newCursor;
+    return newValue;
 }
 const DsoDatePickerLegacy = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dsoDateChange = createEvent(this, "dsoDateChange", 7);
-    this.dsoBlur = createEvent(this, "dsoBlur", 7);
-    this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
-    this.dsoKeyDown = createEvent(this, "dsoKeyDown", 7);
-    this.dsoFocus = createEvent(this, "dsoFocus", 7);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoDateChange = createEvent(this, "dsoDateChange", 7);
+        this.dsoBlur = createEvent(this, "dsoBlur", 7);
+        this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
+        this.dsoKeyDown = createEvent(this, "dsoKeyDown", 7);
+        this.dsoFocus = createEvent(this, "dsoFocus", 7);
+        /**
+         * Own Properties
+         */
+        this.monthSelectId = createIdentifier("DsoDateMonth");
+        this.yearSelectId = createIdentifier("DsoDateYear");
+        this.dialogLabelId = createIdentifier("DsoDateLabel");
+        this.localization = localization;
+        this.firstDayOfWeek = DaysOfWeek.Monday;
+        /**
+         * Local methods.
+         */
+        this.enableActiveFocus = () => {
+            this.activeFocus = true;
+        };
+        this.disableActiveFocus = () => {
+            this.activeFocus = false;
+        };
+        this.toggleOpen = (e) => {
+            e.preventDefault();
+            this.open ? this.hide(false) : this.show();
+        };
+        this.handleEscKey = (event) => {
+            if (event.keyCode === keyCode.ESC) {
+                this.hide();
+            }
+        };
+        this.handleBlur = (event) => {
+            event.stopPropagation();
+            this.dsoBlur.emit({
+                component: "dso-date-picker-legacy",
+            });
+        };
+        this.handleKeyUp = (event) => {
+            event.stopPropagation();
+            this.dsoKeyUp.emit({
+                component: "dso-date-picker-legacy",
+                originalEvent: event,
+            });
+        };
+        this.handleKeyDown = (event) => {
+            event.stopPropagation();
+            this.dsoKeyDown.emit({
+                component: "dso-date-picker-legacy",
+                originalEvent: event,
+            });
+        };
+        this.handleFocus = (event) => {
+            event.stopPropagation();
+            this.dsoFocus.emit({
+                component: "dso-date-picker-legacy",
+            });
+        };
+        this.handleTouchStart = (event) => {
+            const touch = event.changedTouches[0];
+            if (!touch) {
+                throw new Error("No touch found");
+            }
+            this.initialTouchX = touch.pageX;
+            this.initialTouchY = touch.pageY;
+        };
+        this.handleTouchMove = (event) => {
+            event.preventDefault();
+        };
+        this.handleTouchEnd = (event) => {
+            var _a, _b;
+            const touch = event.changedTouches[0];
+            if (!touch) {
+                throw new Error("No touch found");
+            }
+            const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
+            const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // 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(false);
+                event.preventDefault();
+            }
+            this.initialTouchY = undefined;
+            this.initialTouchX = undefined;
+        };
+        this.handleNextMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(1);
+        };
+        this.handlePreviousMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(-1);
+        };
+        this.handleFirstFocusableKeydown = (event) => {
+            var _a;
+            // this ensures focus is trapped inside the dialog
+            if (event.keyCode === keyCode.TAB && event.shiftKey) {
+                (_a = this.focusedDayNode) === null || _a === void 0 ? void 0 : _a.focus();
+                event.preventDefault();
+            }
+        };
+        this.handleKeyboardNavigation = (event) => {
+            var _a;
+            // handle tab separately, since it needs to be treated
+            // differently to other keyboard interactions
+            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+                event.preventDefault();
+                (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            let handled = true;
+            switch (event.keyCode) {
+                case keyCode.RIGHT:
+                    this.addDays(1);
+                    break;
+                case keyCode.LEFT:
+                    this.addDays(-1);
+                    break;
+                case keyCode.DOWN:
+                    this.addDays(7);
+                    break;
+                case keyCode.UP:
+                    this.addDays(-7);
+                    break;
+                case keyCode.PAGE_UP:
+                    if (event.shiftKey) {
+                        this.addYears(-1);
+                    }
+                    else {
+                        this.addMonths(-1);
+                    }
+                    break;
+                case keyCode.PAGE_DOWN:
+                    if (event.shiftKey) {
+                        this.addYears(1);
+                    }
+                    else {
+                        this.addMonths(1);
+                    }
+                    break;
+                case keyCode.HOME:
+                    this.startOfWeek();
+                    break;
+                case keyCode.END:
+                    this.endOfWeek();
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                event.preventDefault();
+                this.enableActiveFocus();
+            }
+        };
+        this.handleDaySelect = (_event, day) => {
+            if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {
+                return;
+            }
+            if (day.getMonth() === this.focusedDay.getMonth()) {
+                this.setValue(day);
+                this.hide();
+            }
+            else {
+                this.setFocusedDay(day);
+            }
+        };
+        this.handleMonthSelect = (e) => {
+            // Todo
+            if (e.target instanceof HTMLSelectElement) {
+                this.setMonth(parseInt(e.target.value, 10));
+            }
+        };
+        this.handleYearSelect = (e) => {
+            if (e.target instanceof HTMLSelectElement) {
+                this.setYear(parseInt(e.target.value, 10));
+            }
+        };
+        this.handleInputChange = (e) => {
+            const target = e.target;
+            const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
+            this.setValue(cleanedValue);
+        };
+        this.prepareEvent = (value) => {
+            const event = {
+                component: "dso-date-picker-legacy",
+                value: "",
+                valueAsDate: undefined,
+            };
+            if (value instanceof Date) {
+                event.valueAsDate = value;
+            }
+            else {
+                event.value = value;
+                event.valueAsDate = parseDutchDate(value);
+            }
+            if (event.valueAsDate) {
+                event.value = printDutchDate(event.valueAsDate);
+            }
+            if (!event.valueAsDate && this.required) {
+                event.error = "required";
+            }
+            if (event.value && !event.valueAsDate) {
+                event.error = "invalid";
+            }
+            if (event.valueAsDate && (this.min || this.max)) {
+                const min = parseDutchDate(this.min);
+                const max = parseDutchDate(this.max);
+                const clampValue = clamp(event.valueAsDate, min, max);
+                if (clampValue !== event.valueAsDate && clampValue === min) {
+                    event.valueAsDate = undefined;
+                    event.error = "min-range";
+                }
+                else if (clampValue !== event.valueAsDate && clampValue === max) {
+                    event.valueAsDate = undefined;
+                    event.error = "max-range";
+                }
+            }
+            return event;
+        };
+        this.processFocusedDayNode = (element) => {
+            this.focusedDayNode = element;
+            if (this.activeFocus && this.open) {
+                setTimeout(() => element.focus(), 0);
+            }
+        };
+        this.activeFocus = false;
+        this.focusedDay = new Date();
+        this.open = false;
+        this.visible = false;
+        this.name = "date";
+        this.identifier = undefined;
+        this.disabled = false;
+        this.role = null;
+        this.direction = "right";
+        this.required = false;
+        this.invalid = undefined;
+        this.describedBy = undefined;
+        this.dsoAutofocus = false;
+        this.value = "";
+        this.min = undefined;
+        this.max = undefined;
+    }
     /**
-     * Own Properties
+     * Component event handling.
      */
-    this.monthSelectId = createIdentifier("DsoDateMonth");
-    this.yearSelectId = createIdentifier("DsoDateYear");
-    this.dialogLabelId = createIdentifier("DsoDateLabel");
-    this.localization = localization;
-    this.firstDayOfWeek = DaysOfWeek.Monday;
+    handleDocumentClick(e) {
+        if (!this.open) {
+            return;
+        }
+        const path = e.composedPath();
+        for (const target of path) {
+            if (target instanceof Node && this.element.contains(target)) {
+                return;
+            }
+        }
+        this.hide(false);
+    }
     /**
-     * Local methods.
+     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
      */
-    this.enableActiveFocus = () => {
-      this.activeFocus = true;
-    };
-    this.disableActiveFocus = () => {
-      this.activeFocus = false;
-    };
-    this.toggleOpen = (e) => {
-      e.preventDefault();
-      this.open ? this.hide(false) : this.show();
-    };
-    this.handleEscKey = (event) => {
-      if (event.keyCode === keyCode.ESC) {
-        this.hide();
-      }
-    };
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.dsoBlur.emit({
-        component: "dso-date-picker-legacy",
-      });
-    };
-    this.handleKeyUp = (event) => {
-      event.stopPropagation();
-      this.dsoKeyUp.emit({
-        component: "dso-date-picker-legacy",
-        originalEvent: event,
-      });
-    };
-    this.handleKeyDown = (event) => {
-      event.stopPropagation();
-      this.dsoKeyDown.emit({
-        component: "dso-date-picker-legacy",
-        originalEvent: event,
-      });
-    };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.dsoFocus.emit({
-        component: "dso-date-picker-legacy",
-      });
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    this.handleTouchMove = (event) => {
-      event.preventDefault();
-    };
-    this.handleTouchEnd = (event) => {
-      var _a, _b;
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
-      const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // 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(false);
-        event.preventDefault();
-      }
-      this.initialTouchY = undefined;
-      this.initialTouchX = undefined;
-    };
-    this.handleNextMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(1);
-    };
-    this.handlePreviousMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(-1);
-    };
-    this.handleFirstFocusableKeydown = (event) => {
-      var _a;
-      // this ensures focus is trapped inside the dialog
-      if (event.keyCode === keyCode.TAB && event.shiftKey) {
-        (_a = this.focusedDayNode) === null || _a === void 0 ? void 0 : _a.focus();
-        event.preventDefault();
-      }
-    };
-    this.handleKeyboardNavigation = (event) => {
-      var _a;
-      // handle tab separately, since it needs to be treated
-      // differently to other keyboard interactions
-      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-        event.preventDefault();
-        (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-        return;
-      }
-      let handled = true;
-      switch (event.keyCode) {
-        case keyCode.RIGHT:
-          this.addDays(1);
-          break;
-        case keyCode.LEFT:
-          this.addDays(-1);
-          break;
-        case keyCode.DOWN:
-          this.addDays(7);
-          break;
-        case keyCode.UP:
-          this.addDays(-7);
-          break;
-        case keyCode.PAGE_UP:
-          if (event.shiftKey) {
-            this.addYears(-1);
-          }
-          else {
-            this.addMonths(-1);
-          }
-          break;
-        case keyCode.PAGE_DOWN:
-          if (event.shiftKey) {
-            this.addYears(1);
-          }
-          else {
-            this.addMonths(1);
-          }
-          break;
-        case keyCode.HOME:
-          this.startOfWeek();
-          break;
-        case keyCode.END:
-          this.endOfWeek();
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.enableActiveFocus();
-      }
-    };
-    this.handleDaySelect = (_event, day) => {
-      if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {
-        return;
-      }
-      if (day.getMonth() === this.focusedDay.getMonth()) {
-        this.setValue(day);
-        this.hide();
-      }
-      else {
-        this.setFocusedDay(day);
-      }
-    };
-    this.handleMonthSelect = (e) => {
-      // Todo
-      if (e.target instanceof HTMLSelectElement) {
-        this.setMonth(parseInt(e.target.value, 10));
-      }
-    };
-    this.handleYearSelect = (e) => {
-      if (e.target instanceof HTMLSelectElement) {
-        this.setYear(parseInt(e.target.value, 10));
-      }
-    };
-    this.handleInputChange = (e) => {
-      const target = e.target;
-      const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
-      this.setValue(cleanedValue);
-    };
-    this.prepareEvent = (value) => {
-      const event = {
-        component: "dso-date-picker-legacy",
-        value: "",
-        valueAsDate: undefined,
-      };
-      if (value instanceof Date) {
-        event.valueAsDate = value;
-      }
-      else {
-        event.value = value;
-        event.valueAsDate = parseDutchDate(value);
-      }
-      if (event.valueAsDate) {
-        event.value = printDutchDate(event.valueAsDate);
-      }
-      if (!event.valueAsDate && this.required) {
-        event.error = "required";
-      }
-      if (event.value && !event.valueAsDate) {
-        event.error = "invalid";
-      }
-      if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDutchDate(this.min);
-        const max = parseDutchDate(this.max);
-        const clampValue = clamp(event.valueAsDate, min, max);
-        if (clampValue !== event.valueAsDate && clampValue === min) {
-          event.valueAsDate = undefined;
-          event.error = "min-range";
+    async setFocus() {
+        var _a;
+        return (_a = this.datePickerLegacyInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Public methods API
+     */
+    /**
+     * Show the calendar modal, moving focus to the calendar inside.
+     */
+    async show() {
+        if (typeof this.hideTimeoutId !== "undefined") {
+            clearTimeout(this.hideTimeoutId);
         }
-        else if (clampValue !== event.valueAsDate && clampValue === max) {
-          event.valueAsDate = undefined;
-          event.error = "max-range";
+        this.visible = true;
+        setTimeout(() => {
+            this.open = true;
+            this.setFocusedDay(parseDutchDate(this.value) || new Date());
+            if (typeof this.focusTimeoutId !== "undefined") {
+                clearTimeout(this.focusTimeoutId);
+            }
+            this.focusTimeoutId = setTimeout(() => { var _a; return (_a = this.monthSelectNode) === null || _a === void 0 ? void 0 : _a.focus(); }, TRANSITION_MS);
+        });
+    }
+    /**
+     * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
+     * returning to the date picker's button. Default is true.
+     */
+    async hide(moveFocusToButton = true) {
+        this.open = false;
+        // in cases where calendar is quickly shown and hidden
+        // we should avoid moving focus to the button
+        if (typeof this.focusTimeoutId !== "undefined") {
+            clearTimeout(this.focusTimeoutId);
         }
-      }
-      return event;
-    };
-    this.processFocusedDayNode = (element) => {
-      this.focusedDayNode = element;
-      if (this.activeFocus && this.open) {
-        setTimeout(() => element.focus(), 0);
-      }
-    };
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    this.name = "date";
-    this.identifier = undefined;
-    this.disabled = false;
-    this.role = null;
-    this.direction = "right";
-    this.required = false;
-    this.invalid = undefined;
-    this.describedBy = undefined;
-    this.dsoAutofocus = false;
-    this.value = "";
-    this.min = undefined;
-    this.max = undefined;
-  }
-  /**
-   * Component event handling.
-   */
-  handleDocumentClick(e) {
-    if (!this.open) {
-      return;
-    }
-    const path = e.composedPath();
-    for (const target of path) {
-      if (target instanceof Node && this.element.contains(target)) {
-        return;
-      }
-    }
-    this.hide(false);
-  }
-  /**
-   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-   */
-  async setFocus() {
-    var _a;
-    return (_a = this.datePickerLegacyInput) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  /**
-   * Public methods API
-   */
-  /**
-   * Show the calendar modal, moving focus to the calendar inside.
-   */
-  async show() {
-    if (typeof this.hideTimeoutId !== "undefined") {
-      clearTimeout(this.hideTimeoutId);
-    }
-    this.visible = true;
-    setTimeout(() => {
-      this.open = true;
-      this.setFocusedDay(parseDutchDate(this.value) || new Date());
-      if (typeof this.focusTimeoutId !== "undefined") {
-        clearTimeout(this.focusTimeoutId);
-      }
-      this.focusTimeoutId = setTimeout(() => { var _a; return (_a = this.monthSelectNode) === null || _a === void 0 ? void 0 : _a.focus(); }, TRANSITION_MS);
-    });
-  }
-  /**
-   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-   * returning to the date picker's button. Default is true.
-   */
-  async hide(moveFocusToButton = true) {
-    this.open = false;
-    // in cases where calendar is quickly shown and hidden
-    // we should avoid moving focus to the button
-    if (typeof this.focusTimeoutId !== "undefined") {
-      clearTimeout(this.focusTimeoutId);
-    }
-    this.hideTimeoutId = setTimeout(() => {
-      if (moveFocusToButton && this.datePickerLegacyButton) {
-        this.datePickerLegacyButton.focus();
-      }
-      this.visible = false;
-    }, TRANSITION_MS + 200);
-  }
-  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, this.firstDayOfWeek));
-  }
-  endOfWeek() {
-    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
-  }
-  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, parseDutchDate(this.min), parseDutchDate(this.max));
-  }
-  setValue(value) {
-    const event = this.prepareEvent(value);
-    this.value = typeof value === "string" ? value : event.value;
-    if (this.value !== this.previousValue) {
-      this.dsoDateChange.emit(event);
-      this.previousValue = this.value;
-    }
-  }
-  componentWillLoad() {
-    const minDate = parseDutchDate(this.min);
-    const maxDate = parseDutchDate(this.max);
-    if (minDate && minDate > this.focusedDay) {
-      this.focusedDay = minDate;
-    }
-    if (maxDate && maxDate < this.focusedDay) {
-      this.focusedDay = maxDate;
-    }
-  }
-  componentDidLoad() {
-    const valueAsDate = parseDutchDate(this.value);
-    if (valueAsDate) {
-      this.previousValue = this.value = printDutchDate(valueAsDate);
-    }
-    if (this.dsoAutofocus) {
-      this.setFocus();
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    var _a, _b;
-    const valueAsDate = parseDutchDate(this.value);
-    const formattedDate = valueAsDate && printDutchDate(valueAsDate);
-    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
-    const focusedMonth = this.focusedDay.getMonth();
-    const focusedYear = this.focusedDay.getFullYear();
-    const minDate = parseDutchDate(this.min);
-    const maxDate = parseDutchDate(this.max);
-    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-    let minYear = selectedYear - 10;
-    let maxYear = selectedYear + 10;
-    if (minDate) {
-      minYear = Math.max(minYear, minDate.getFullYear());
+        this.hideTimeoutId = setTimeout(() => {
+            if (moveFocusToButton && this.datePickerLegacyButton) {
+                this.datePickerLegacyButton.focus();
+            }
+            this.visible = false;
+        }, TRANSITION_MS + 200);
     }
-    if (maxDate) {
-      maxYear = Math.min(maxYear, maxDate.getFullYear());
-    }
-    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
-        "dso-date__dialog": true,
-        "is-left": this.direction === "left",
-        "is-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("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
-      const index = this.localization.monthNames.indexOf(month);
-      return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-    })), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
-  }
-  get element() { return getElement(this); }
+    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, this.firstDayOfWeek));
+    }
+    endOfWeek() {
+        this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
+    }
+    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, parseDutchDate(this.min), parseDutchDate(this.max));
+    }
+    setValue(value) {
+        const event = this.prepareEvent(value);
+        this.value = typeof value === "string" ? value : event.value;
+        if (this.value !== this.previousValue) {
+            this.dsoDateChange.emit(event);
+            this.previousValue = this.value;
+        }
+    }
+    componentWillLoad() {
+        const minDate = parseDutchDate(this.min);
+        const maxDate = parseDutchDate(this.max);
+        if (minDate && minDate > this.focusedDay) {
+            this.focusedDay = minDate;
+        }
+        if (maxDate && maxDate < this.focusedDay) {
+            this.focusedDay = maxDate;
+        }
+    }
+    componentDidLoad() {
+        const valueAsDate = parseDutchDate(this.value);
+        if (valueAsDate) {
+            this.previousValue = this.value = printDutchDate(valueAsDate);
+        }
+        if (this.dsoAutofocus) {
+            this.setFocus();
+        }
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        var _a, _b;
+        const valueAsDate = parseDutchDate(this.value);
+        const formattedDate = valueAsDate && printDutchDate(valueAsDate);
+        const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+        const focusedMonth = this.focusedDay.getMonth();
+        const focusedYear = this.focusedDay.getFullYear();
+        const minDate = parseDutchDate(this.min);
+        const maxDate = parseDutchDate(this.max);
+        const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+        const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+        let minYear = selectedYear - 10;
+        let maxYear = selectedYear + 10;
+        if (minDate) {
+            minYear = Math.max(minYear, minDate.getFullYear());
+        }
+        if (maxDate) {
+            maxYear = Math.min(maxYear, maxDate.getFullYear());
+        }
+        return (h(Host, { key: '0d44852b99b1006f832d6152ae1b87e50217ec6e' }, h("div", { key: '4e755890cac5c88b652b26502e9d6c62c3c937ee', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'ee6c9f4148c6e596e0e9048e54a9def781bdc305', class: "dso-date__input-wrapper" }, h("input", { key: 'd5b42b063f766f9da27be35ef0322e38732692a2', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'a0261139cf4d0711eedc8c9d72753d511300c3d6', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '87aaec0f14c6daa6916d6c0a9e61b04ef14ce246', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'fec0416f1f93f5092d4e836afe69481c3ad9044c', icon: "calendar" })), h("span", { key: 'dfd3fbef9642d501844678308cc6d886622a936d', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'eae56bddc49e78aa4e170a62133ec9949a40e5f3' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'a0bbde0cc7570ea2464de4984c92e64b187e8f3a', class: {
+                "dso-date__dialog": true,
+                "is-left": this.direction === "left",
+                "is-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("div", { key: '8f9cb9231fd88b0878d270871a2598e57929043c', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'ad7001f585453658356a2e8f2c3fa59e593b91b4', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '454aaebe38060202a2872bd9c1e8893a41ec40e1', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '114bb52abf3a2daaef6488825acad2f29aaa0540', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '59d9ba2a8a55cc266efb2694193fb0efcd9afffc', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'ca7a9db774c7474693664bb7daa99d9bce47695d', icon: "times" }), h("span", { key: '060ef03cec2db78e846e0858cc7700a5bb41b70e', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '97144b176487392f8f640156b694dc859b797b45', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '5918645d15cd79776d0f3ce0dce438417c993e5e' }, h("h2", { key: '03767b55b99b31eb727e7db5f0bc9067db4271a0', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'f048f03596e454982c2769e8049cea3086a4cc76', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'b3185f05873edd915a78cce1e2e6c70780a97bd9', class: "dso-date__select" }, h("select", { key: '09655b2da5551d17eae5d70b1db4425b643165ed', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            const index = this.localization.monthNames.indexOf(month);
+            return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
+        })), h("div", { key: '5208271a489ed99f5d874baafae4fae675138a93', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '0e1e526e9fee6367546142cfda834a31375c5634' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '1a790f9dfb8d4ea4a41bb286a7a125534922c95b', icon: "chevron-down" }))), h("label", { key: 'de5f0145a3c317a6eb390d01e41e9dd73e720e7e', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '877369c7d3b8b060c0d02f1e822f725d320f14b2', class: "dso-date__select" }, h("select", { key: 'b591672b9c3f307fca7e2a6313a38d4cce391bb2', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '684aec6cba9eff6e0f9766e2196a3fe534a40a0f', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'f39c5042ef1924d1652f010ca81c2f506b9b37fe' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '04adcae74bc190c443490dfc464b2be52f221c14', icon: "chevron-down" })))), h("div", { key: 'c3900f0e93e22eda46450cf898eb4e847c81a2c2', class: "dso-date__nav" }, h("button", { key: 'da36bdc09cba1daa3b4eba282f4ee5b829c393fa', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'c8f5fb75ddb06106081f2674ecbecf0f05bf0f76', icon: "chevron-left" }), h("span", { key: 'ec76f5492eaeaac4a8f80c1de158688a70f4da65', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6441cdaa0bbc797e56279a86cfc53741df63d517', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '927ddbfac72287e32f0b09d6347f6e46787c7e3b', icon: "chevron-right" }), h("span", { key: 'a3fed3e29cb71f53e5be193503ea275dcea61b7c', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'f2bfde3fa648e0f00cff22ed58d84347dcc01d56', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+    }
+    get element() { return getElement(this); }
 };
-DsoDatePickerLegacy.style = datePickerLegacyCss;
+DsoDatePickerLegacy.style = DsoDatePickerLegacyStyle0;
 
 export { DsoDatePickerLegacy as dso_date_picker_legacy };