@dso-toolkit/core 73.2.1 → 73.3.0

package/dist/bundle/dso-date-picker-legacy.js

@@ -0,0 +1,773 @@
+import { h, p as proxyCustomElement, H, e as createEvent, d as Host } from './p-DHO_Za64.js';
+import { c as createIdentifier } from './p-DSyv-znO.js';
+import { d as defineCustomElement$2 } from './p-D2nuXSd0.js';
+
+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"],
+};
+
+// 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 = {}));
+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 &&
+        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}`;
+}
+/**
+ * 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 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))));
+};
+
+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 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 }))))))))));
+};
+
+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 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:start;inline-size: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;inline-size:100%;block-size:40px;padding-block:6px;padding-inline: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{inline-size: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-end-end-radius:4px;border-start-end-radius:4px;color:#39870c;cursor:pointer;display:flex;block-size:38px;justify-content:center;padding:0;position:absolute;inset-inline-end:0;transform:translateY(-50%);inset-block-start:50%;user-select:none;inline-size: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;inset-inline-end:0;min-inline-size:320px;opacity:0;position:absolute;inset-block-start: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);inset-block-end:0;position:fixed;inset-inline-start:0;inset-inline-end:0;inset-block-start:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker-legacy{inset-inline-start:-11px;inset-inline-end:auto;inline-size: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-inline-start:auto;margin-inline-end:-1px;margin-block-start:8px;max-inline-size:310px;min-inline-size:290px;padding:16px;position:relative;transform:none;inline-size:100%;z-index:210}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker-legacy{border:0;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px;inset-block-end:0;inset-inline-start:0;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding-block:0 20px;padding-inline:8%;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-inline-size:280px;table-layout:fixed;text-align:center;inline-size:100%}.dso-date__table-header.sc-dso-date-picker-legacy{font-size:0.875em;font-weight:600;block-size:36px;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker-legacy{block-size:40px;padding:1px;text-align:center;inline-size: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;block-size:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;inline-size:38px;z-index:100}.dso-date__day.is-today.sc-dso-date-picker-legacy{background:transparent;block-size:36px;box-shadow:0 0 0 1px #39870c;inline-size: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;block-size:34px;outline:0;inline-size: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;block-size:34px;line-height:34px;inline-size:34px}.dso-date__header.sc-dso-date-picker-legacy{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size: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;block-size:32px;justify-content:center;margin-inline-start:8px;padding:0;inline-size:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker-legacy,.dso-date__next.sc-dso-date-picker-legacy{block-size:40px;inline-size: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-block:0;margin-inline:auto}.dso-date__select.sc-dso-date-picker-legacy{display:inline-flex;block-size:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker-legacy span.sc-dso-date-picker-legacy{margin-inline-end:4px}.dso-date__select.sc-dso-date-picker-legacy select.sc-dso-date-picker-legacy{color:#275937;cursor:pointer;font-size:1rem;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size: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-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size: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{inline-size:16px;block-size:16px}.dso-date__mobile.sc-dso-date-picker-legacy{align-items:center;border-block-end:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding-block:12px;padding-inline:20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker-legacy{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-16px;inset-block-start:-16px;inline-size:auto}}.dso-date__mobile-heading.sc-dso-date-picker-legacy{display:inline-block;font-weight:600;max-inline-size: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;block-size:32px;justify-content:center;margin-inline-end:-4px;padding:0;inline-size:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker-legacy{margin-inline-end: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);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
+
+const keyCode = {
+    TAB: 9,
+    ESC: 27,
+    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 DsoDatePickerLegacy$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePickerLegacy extends H {
+    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;
+        /**
+         * State() variables
+         */
+        this.activeFocus = false;
+        this.focusedDay = new Date();
+        this.open = false;
+        this.visible = false;
+        /**
+         * Public Property API
+         */
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "date";
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Defines a specific role attribute for the date picker input.
+         */
+        this.role = null;
+        /**
+         * Forces the opening direction of the calendar modal to be always left or right.
+         * This setting can be useful when the input is smaller than the opening date picker
+         * would be as by default the picker always opens towards right.
+         */
+        this.direction = "right";
+        /**
+         * Should the input be marked as required?
+         */
+        this.required = false;
+        /**
+         * Should the input be focused on load?
+         */
+        this.dsoAutofocus = false;
+        /**
+         * Date value. Must be in Dutch date format: DD-MM-YYYY.
+         */
+        this.value = "";
+        /**
+         * Local methods.
+         */
+        this.enableActiveFocus = () => {
+            this.activeFocus = true;
+        };
+        this.disableActiveFocus = () => {
+            this.activeFocus = false;
+        };
+        this.toggleOpen = (e) => {
+            e.preventDefault();
+            if (this.open) {
+                this.hide(false);
+            }
+            else {
+                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);
+            }
+        };
+    }
+    /**
+     * 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());
+        }
+        if (maxDate) {
+            maxYear = Math.min(maxYear, maxDate.getFullYear());
+        }
+        return (h(Host, { key: '957cb5ecd6d41aa4080fdc413ecd3ec720e6f2f5' }, h("div", { key: '7a6fd28aca5e525a44db67316ea232111dd78d83', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '738c2f5561053e525732b03db48f767018186df1', class: "dso-date__input-wrapper" }, h("input", { key: 'be60893ee6894c6872f4a8b11e1a5329592a9cb3', 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: '64a1581be9c55c14278206fc8bec3516fe9588c3', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '0abea68907579095ed9a0f30cd3fe66f1e99adf7', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '80acee7a48d20a2314a8bbfeba478ffe49bdc2f1', icon: "calendar" })), h("span", { key: 'e8734da932112b02a3d40135b9a0ae7c53762c0a', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'd64fb70897d08a11c6ab4130686128f36ede3635' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'eb265922641b7bbb69ffae331ea25663246865e7', 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: '0652c8515f40627399a4d2c8e572188d4a272866', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'ffd05e410fb85956e9157325b55c50f6c13ffd2f', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'cba925b52839e002c6725e213e5cd1e4bb9527cc', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9e5c185d36e1b36c5f434e2f4ba84f9fe05f34ab', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'cb2d54a595e5937dbdfa2493c2a78f3232a694fe', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'caa97ca69898a421dc2be65d0b72d506784b46b3', icon: "times" }), h("span", { key: '53c8e6ed325069aa3f469d2c882749b1a7c6a73a', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '01a8aff75b3f2760466e9a8d1a98183cfc54c5f6', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '014941383091917d6db3b4ef61697feb50f9ca89' }, h("h2", { key: '5bc5c6226ca3e62965d44cb7213c1b3b595d1fed', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '4a8cfec86a434dee22a6e692c3a221f649f2b165', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e0ccf6cda124982e9193f882300d3883a88979ba', class: "dso-date__select" }, h("select", { key: 'a98658e03f28e9e82224b69d754df240183c2cd9', 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: '2c430302075f436442d64aad4804936d7f47d417', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c53a91bf0f52839fa4aa87c0ef9e2dacbe0df8bb' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '19b52d0d3f0c1a71402515b97e7d13f98f12a105', icon: "chevron-down" }))), h("label", { key: '246fd6c2fb5c7771c139d5786346e12ef8693c3d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9b2583586116004567611ecfac87d6a98261c157', class: "dso-date__select" }, h("select", { key: '06b592e2eb87d41c85ee5bf4efaed35b51144fd8', 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: 'ef7b607dfc1e493077d79aeffe3dc687b3991e28', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '36d1dec13260dbc32feaf4c9875bdc5e9ca68118' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '34e5fba7b8152bf66b65eecc7ca6469ac09bec34', icon: "chevron-down" })))), h("div", { key: 'b075a1c3c963e89f7aa7708834e9a697fe3aedd9', class: "dso-date__nav" }, h("button", { key: 'ac333335f9a4a81b659d5ca787a594bcc227314b', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '3802f14d7336beabcbd2e22d76c605d6a1610ae3', icon: "chevron-left" }), h("span", { key: 'fd06635f86a685a0e25fa19f911151dc98017cd0', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a6c10604bd06923d4230452a629c4a585651a6e0', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '1d43e6494d836b954eafd7b3d22efe1183e06526', icon: "chevron-right" }), h("span", { key: '4b880ddc1b3dbf49171b4e71ad6949296ce90d91', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '54c119f2a06e35cd6143994eca4a718a917f6638', 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 datePickerLegacyCss; }
+}, [2, "dso-date-picker-legacy", {
+        "name": [1],
+        "identifier": [1],
+        "disabled": [516],
+        "role": [1],
+        "direction": [1],
+        "required": [4],
+        "invalid": [516],
+        "describedBy": [1, "described-by"],
+        "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-legacy", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-date-picker-legacy":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsoDatePickerLegacy$1);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoDatePickerLegacy = DsoDatePickerLegacy$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoDatePickerLegacy, defineCustomElement };
+//# sourceMappingURL=dso-date-picker-legacy.js.map
+
+//# sourceMappingURL=dso-date-picker-legacy.js.map