@dso-toolkit/core 59.0.1 → 61.0.0

package/dist/components/dso-date-picker.js

@@ -1,18 +1,25 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { c as createIdentifier } from './create-identifier.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-// 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 = {}));
+/**
+ * @param value date string in Dutch format DD-MM-YYYY
+ */
+function parseToValueFormat(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 matches
+      .map((match) => (match.length === 1 ? `0${match}` : match))
+      .reverse()
+      .join("-");
+  }
+  return value;
+}
 function createDate(year, month, day) {
   const dayInt = parseInt(day, 10);
   const monthInt = parseInt(month, 10);
@@ -30,9 +37,9 @@ function createDate(year, month, day) {
   }
 }
 /**
- * @param value date string in Dutch format D-M-YYYY
+ * @param value date string in format D-M-YYYY
  */
-function parseDutchDate(value) {
+function parseDate(value) {
   if (!value) {
     return;
   }
@@ -41,8 +48,8 @@ function parseDutchDate(value) {
     typeof matches[0] === "string" &&
     typeof matches[1] === "string" &&
     typeof matches[2] === "string" &&
-    matches[2].length === 4) {
-    return createDate(matches[2], matches[1], matches[0]);
+    matches[0].length === 4) {
+    return createDate(matches[0], matches[1], matches[2]);
   }
 }
 /**
@@ -58,56 +65,6 @@ function printDutchDate(date) {
   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();
-}
-function addDays(date, days) {
-  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;
-}
-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;
-}
-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
  */
@@ -121,179 +78,9 @@ function clamp(date, min, 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 = DaysOfWeek.Monday) {
-  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
-  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
-  return getDaysInRange(start, end);
-}
 
-const DatePickerDay = ({ 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))));
-};
-
-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 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);
-  });
-}
-const DatePickerMonth = ({ 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(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
-};
+const datePickerCss = ".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date__input.sc-dso-date-picker{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::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__input.sc-dso-date-picker::-webkit-calendar-picker-indicator{position:relative;inset-inline-end:-8px;font-size:1.75rem;filter:invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%)}";
 
-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"],
-};
-
-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;
-}
-
-function range(from, to) {
-  const result = [];
-  for (let i = from; i <= to; i++) {
-    result.push(i);
-  }
-  return result;
-}
-
-const datePickerCss = ".sc-dso-date-picker-h{display:block}[invalid].sc-dso-date-picker-h:not([invalid=false]) .dso-date__input.sc-dso-date-picker{border-color:#ce3f51}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{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:not(.dso-visible) .dso-date__dialog.sc-dso-date-picker{display:none}.dso-date__input.sc-dso-date-picker{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::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-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:disabled{color:#afcf9d;cursor:default}.dso-date__dialog.sc-dso-date-picker{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{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{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{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{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 .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{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{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{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-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{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker: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 .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.sc-dso-date-picker:disabled{background:#fff;color:#ccc;cursor:default}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-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,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{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 select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{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 span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{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{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{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{display:none}}.dso-date__close.sc-dso-date-picker{-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{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
-
-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,
-};
-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 DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker extends HTMLElement {
   constructor() {
     super();
@@ -303,35 +90,17 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     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({
+        originalEvent: event,
+        component: "dso-date-picker",
+      });
+    };
+    this.handleFocus = (event) => {
+      event.stopPropagation();
+      this.dsoFocus.emit({
+        originalEvent: event,
         component: "dso-date-picker",
       });
     };
@@ -349,154 +118,18 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
         originalEvent: event,
       });
     };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.dsoFocus.emit({
-        component: "dso-date-picker",
-      });
-    };
-    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) => {
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      const { value } = target;
       const event = {
+        originalEvent: e,
         component: "dso-date-picker",
-        value: "",
-        valueAsDate: undefined,
+        value,
+        valueAsDate: parseDate(value),
       };
-      if (value instanceof Date) {
-        event.valueAsDate = value;
-      }
-      else {
-        event.value = value;
-        event.valueAsDate = parseDutchDate(value);
-      }
       if (event.valueAsDate) {
         event.value = printDutchDate(event.valueAsDate);
       }
@@ -507,8 +140,8 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
         event.error = "invalid";
       }
       if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDutchDate(this.min);
-        const max = parseDutchDate(this.max);
+        const min = parseDate(this.min);
+        const max = parseDate(this.max);
         const clampValue = clamp(event.valueAsDate, min, max);
         if (clampValue !== event.valueAsDate && clampValue === min) {
           event.valueAsDate = undefined;
@@ -519,23 +152,15 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
           event.error = "max-range";
         }
       }
-      return event;
-    };
-    this.processFocusedDayNode = (element) => {
-      this.focusedDayNode = element;
-      if (this.activeFocus && this.open) {
-        setTimeout(() => element.focus(), 0);
+      this.value = typeof value === "string" ? value : event.value;
+      if (this.value !== this.previousValue) {
+        this.dsoDateChange.emit(event);
+        this.previousValue = this.value;
       }
     };
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    this.name = "date";
+    this.name = "dso-date";
     this.identifier = undefined;
     this.disabled = false;
-    this.role = null;
-    this.direction = "right";
     this.required = false;
     this.invalid = undefined;
     this.describedBy = undefined;
@@ -544,154 +169,9 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     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.datePickerInput) === 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.datePickerButton) {
-        this.datePickerButton.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());
-    }
-    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.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = 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(DatePickerMonth, { 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 }))))));
+    var _a;
+    return (h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
   }
   get element() { return this; }
   static get style() { return datePickerCss; }
@@ -699,39 +179,25 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     "name": [1],
     "identifier": [1],
     "disabled": [516],
-    "role": [1],
-    "direction": [1],
-    "required": [4],
+    "required": [516],
     "invalid": [516],
     "describedBy": [1, "described-by"],
     "dsoAutofocus": [4, "dso-autofocus"],
-    "value": [1537],
+    "value": [1],
     "min": [1],
-    "max": [1],
-    "activeFocus": [32],
-    "focusedDay": [32],
-    "open": [32],
-    "visible": [32],
-    "setFocus": [64],
-    "show": [64],
-    "hide": [64]
-  }, [[6, "click", "handleDocumentClick"]]]);
+    "max": [1]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["dso-date-picker", "dso-icon"];
+  const components = ["dso-date-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "dso-date-picker":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, DsoDatePicker$1);
       }
       break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
   } });
 }