@dso-toolkit/core 47.0.1 → 49.0.0

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

@@ -0,0 +1,682 @@
+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';
+
+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 = {}));
+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);
+  }
+}
+/**
+ * @param value date string in Dutch format D-M-YYYY
+ */
+function parseDutchDate(value) {
+  if (!value) {
+    return;
+  }
+  const matches = value.split("-");
+  if (matches.length === 3 && 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}`;
+}
+/**
+ * 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
+ */
+function clamp(date, min, max) {
+  const time = date.getTime();
+  if (min && min instanceof Date && time < min.getTime()) {
+    return min;
+  }
+  if (max && max instanceof Date && time > max.getTime()) {
+    return max;
+  }
+  return date;
+}
+/**
+ * given start and end date, return an (inclusive) array of all dates in between
+ * @param start
+ * @param end
+ */
+function getDaysInRange(start, end) {
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
+    days.push(current);
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
+}
+/**
+ * given a date, return an array of dates from a calendar perspective
+ * @param date
+ * @param firstDayOfWeek
+ */
+function getViewOfMonth(date, firstDayOfWeek = 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 isDisabled = day.getMonth() !== focusedDay.getMonth();
+  const isOutsideRange = !inRange;
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      "dso-date__day": true,
+      "is-outside": isOutsideRange,
+      "is-disabled": isDisabled,
+      "is-today": isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange || isDisabled, 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;
+    return mapFn(array[adjustedIndex]);
+  });
+}
+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 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"],
+};
+
+const datePickerCss = ".sc-dso-date-picker-h{display:block}.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:pointer}.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-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.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.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}";
+
+function range(from, to) {
+  const result = [];
+  for (let i = from; i <= to; i++) {
+    result.push(i);
+  }
+  return result;
+}
+const keyCode = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+};
+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 extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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",
+      });
+    };
+    this.handleKeyUp = (event) => {
+      event.stopPropagation();
+      this.dsoKeyUp.emit({
+        component: "dso-date-picker",
+        originalEvent: event,
+      });
+    };
+    this.handleKeyDown = (event) => {
+      event.stopPropagation();
+      this.dsoKeyDown.emit({
+        component: "dso-date-picker",
+        originalEvent: event,
+      });
+    };
+    this.handleFocus = (event) => {
+      event.stopPropagation();
+      this.dsoFocus.emit({
+        component: "dso-date-picker",
+      });
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    this.handleTouchMove = (event) => {
+      event.preventDefault();
+    };
+    this.handleTouchEnd = (event) => {
+      var _a, _b;
+      const touch = event.changedTouches[0];
+      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",
+        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.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.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;
+    }
+  }
+  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;
+    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", 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 }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === 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 }))))));
+  }
+  get element() { return this; }
+  static get style() { return datePickerCss; }
+}, [2, "dso-date-picker", {
+    "name": [1],
+    "identifier": [1],
+    "disabled": [516],
+    "role": [1],
+    "direction": [1],
+    "required": [4],
+    "dsoAutofocus": [4, "dso-autofocus"],
+    "value": [1537],
+    "min": [1],
+    "max": [1],
+    "activeFocus": [32],
+    "focusedDay": [32],
+    "open": [32],
+    "visible": [32],
+    "setFocus": [64],
+    "show": [64],
+    "hide": [64]
+  }, [[6, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-date-picker", "dso-icon"];
+  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;
+  } });
+}
+
+const DsoDatePicker = DsoDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoDatePicker, defineCustomElement };