@dso-toolkit/core 79.1.0 → 81.0.0

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

@@ -1,730 +0,0 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-DxWmN7gh.js';
-import { c as createIdentifier } from './create-identifier-DSyv-znO.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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dsoDateChange = createEvent(this, "dsoDateChange", 7);
-        this.dsoBlur = createEvent(this, "dsoBlur", 7);
-        this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
-        this.dsoKeyDown = createEvent(this, "dsoKeyDown", 7);
-        this.dsoFocus = createEvent(this, "dsoFocus", 7);
-        /**
-         * 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: '396b32409bc093895e3f35d18dba8bd7e6777f46' }, h("div", { key: 'd5a5787fcc7f6a5126a266ff5add00b7ff586cba', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '85fd7e86974ab53580fb452ac1f18bc12a907c6d', class: "dso-date__input-wrapper" }, h("input", { key: 'b4f2997aa317cdf00396ff49d6c0a5f72764d503', 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: 'e2b34c1e6d804f6bf96aaea34daea995c59cbec5', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '578b0315ed115d28f7906d585914bc6dae2a40cc', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '90488726ea142805085372ed273ef6a10691f85a', icon: "calendar" })), h("span", { key: '34d925fe5facf889afa518e64150121df6e0ade7', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '53471bfd4a6d8a3dd7a27582fadbf847f824f1dd' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '6a292ed13e8dfa5b972c8f1133238a535511cb8e', 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: 'f8bb4ca24600a728f81e4247ef94641794ad84e3', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '1582c6e4e4d89c4339f791c43e3fc01e18f03989', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '3158d79a673e502aaa701fc41a2a15dd6ba5dc4b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fcc075c9782196ec11a77f5d6aa703b8e48cea78', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'bee7a83296c5f1f3bfe498c0392f41bebb9fd27d', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '3f66fe3d47a25baea3d7c148b1f5bec301f2bc29', icon: "times" }), h("span", { key: 'c5d4618409573374228a7e4489cdbfe1c66fdd7c', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'd9ba961084fb524b7f94139ce2a9857e9f7e1b0d', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '37d0dbcc0d777aafd31866d81dd758372585e908' }, h("h2", { key: 'de0e154dc96dc4e5cb3bcd2e588201a6cc5c9259', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'cd0ffce7c78da9bf2d49bdca4d0394341608e249', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '48230fd3e09c932282bbb4990eda095cb95fce06', class: "dso-date__select" }, h("select", { key: 'f00134b32f100aefd5c61a4de98e221ed09137a2', 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: 'a1670f7170408e13a577b9bb65ce222e02341af6', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c0878373562b07a3c4860c766219da9289734fd3' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '64b610f732f03334432be7ccdc60fa634b83b5b1', icon: "chevron-down" }))), h("label", { key: 'bb21bbcb63a45b503d26f9c50fa0ab987a7d7081', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9a2ecf4ed6c4396a15ccadd40f2c04d9bf60dcbc', class: "dso-date__select" }, h("select", { key: 'a1a935ba195eca516b0a94e129ed320c64dd43ef', 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: 'b16f15541e3637b65b39dd0b8e871710e36e59bb', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '64a6a5a00cbcf3ee9268c478cf2c1ff2d40e0abe' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'c0744674bcbba803aeaeca6ac1d684a1e7d3894a', icon: "chevron-down" })))), h("div", { key: '433d90659d6521b41a8cccd7683fad3da0bd4b2a', class: "dso-date__nav" }, h("button", { key: 'b40b6fd0c99e18e9f033cf1d41127194404408a1', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'e658b36996f0d2e3d9c164f746b66220a75dcbbf', icon: "chevron-left" }), h("span", { key: '499a5213ff977b13bd36ff4e91d83730a13ab51d', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'dcd28b6b36bfbf16de2fe529e5dbf4e65920c66b', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '034b916fa47349e82bdf2a95c9dab465784f1499', icon: "chevron-right" }), h("span", { key: '184cef66312cdcea2a50d0dcc218a55963577398', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '254d598e4ed0ca17332abef195292828262712c7', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
-    }
-    get element() { return getElement(this); }
-};
-DsoDatePickerLegacy.style = datePickerLegacyCss;
-
-export { DsoDatePickerLegacy as dso_date_picker_legacy };
-//# sourceMappingURL=dso-date-picker-legacy.entry.js.map
-
-//# sourceMappingURL=dso-date-picker-legacy.entry.js.map