@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/collection/components/date-picker-legacy/date-picker-legacy.js

@@ -6,844 +6,845 @@ import defaultLocalization from "./date-localization";
 import { monthRange } from "./utils/month-range";
 import { range } from "./utils/range";
 const keyCode = {
-  TAB: 9,
-  ESC: 27,
-  SPACE: 32,
-  PAGE_UP: 33,
-  PAGE_DOWN: 34,
-  END: 35,
-  HOME: 36,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
+    TAB: 9,
+    ESC: 27,
+    SPACE: 32,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+    END: 35,
+    HOME: 36,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
 };
 const DISALLOWED_CHARACTERS = /[^0-9-]+/g;
 const TRANSITION_MS = 300;
 function cleanValue(input, regex) {
-  const value = input.value;
-  const cursor = input.selectionStart;
-  if (!cursor) {
-    return value;
-  }
-  const beforeCursor = value.slice(0, cursor);
-  const afterCursor = value.slice(cursor, value.length);
-  const filteredBeforeCursor = beforeCursor.replace(regex, "");
-  const filterAfterCursor = afterCursor.replace(regex, "");
-  const newValue = filteredBeforeCursor + filterAfterCursor;
-  const newCursor = filteredBeforeCursor.length;
-  input.value = newValue;
-  input.selectionStart = input.selectionEnd = newCursor;
-  return newValue;
+    const value = input.value;
+    const cursor = input.selectionStart;
+    if (!cursor) {
+        return value;
+    }
+    const beforeCursor = value.slice(0, cursor);
+    const afterCursor = value.slice(cursor, value.length);
+    const filteredBeforeCursor = beforeCursor.replace(regex, "");
+    const filterAfterCursor = afterCursor.replace(regex, "");
+    const newValue = filteredBeforeCursor + filterAfterCursor;
+    const newCursor = filteredBeforeCursor.length;
+    input.value = newValue;
+    input.selectionStart = input.selectionEnd = newCursor;
+    return newValue;
 }
 export class DsoDatePickerLegacy {
-  constructor() {
+    constructor() {
+        /**
+         * Own Properties
+         */
+        this.monthSelectId = createIdentifier("DsoDateMonth");
+        this.yearSelectId = createIdentifier("DsoDateYear");
+        this.dialogLabelId = createIdentifier("DsoDateLabel");
+        this.localization = defaultLocalization;
+        this.firstDayOfWeek = DaysOfWeek.Monday;
+        /**
+         * Local methods.
+         */
+        this.enableActiveFocus = () => {
+            this.activeFocus = true;
+        };
+        this.disableActiveFocus = () => {
+            this.activeFocus = false;
+        };
+        this.toggleOpen = (e) => {
+            e.preventDefault();
+            this.open ? this.hide(false) : this.show();
+        };
+        this.handleEscKey = (event) => {
+            if (event.keyCode === keyCode.ESC) {
+                this.hide();
+            }
+        };
+        this.handleBlur = (event) => {
+            event.stopPropagation();
+            this.dsoBlur.emit({
+                component: "dso-date-picker-legacy",
+            });
+        };
+        this.handleKeyUp = (event) => {
+            event.stopPropagation();
+            this.dsoKeyUp.emit({
+                component: "dso-date-picker-legacy",
+                originalEvent: event,
+            });
+        };
+        this.handleKeyDown = (event) => {
+            event.stopPropagation();
+            this.dsoKeyDown.emit({
+                component: "dso-date-picker-legacy",
+                originalEvent: event,
+            });
+        };
+        this.handleFocus = (event) => {
+            event.stopPropagation();
+            this.dsoFocus.emit({
+                component: "dso-date-picker-legacy",
+            });
+        };
+        this.handleTouchStart = (event) => {
+            const touch = event.changedTouches[0];
+            if (!touch) {
+                throw new Error("No touch found");
+            }
+            this.initialTouchX = touch.pageX;
+            this.initialTouchY = touch.pageY;
+        };
+        this.handleTouchMove = (event) => {
+            event.preventDefault();
+        };
+        this.handleTouchEnd = (event) => {
+            var _a, _b;
+            const touch = event.changedTouches[0];
+            if (!touch) {
+                throw new Error("No touch found");
+            }
+            const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
+            const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // get vertical dist traveled
+            const threshold = 70;
+            const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+            const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
+            if (isHorizontalSwipe) {
+                this.addMonths(distX < 0 ? 1 : -1);
+            }
+            else if (isDownwardsSwipe) {
+                this.hide(false);
+                event.preventDefault();
+            }
+            this.initialTouchY = undefined;
+            this.initialTouchX = undefined;
+        };
+        this.handleNextMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(1);
+        };
+        this.handlePreviousMonthClick = (event) => {
+            event.preventDefault();
+            this.addMonths(-1);
+        };
+        this.handleFirstFocusableKeydown = (event) => {
+            var _a;
+            // this ensures focus is trapped inside the dialog
+            if (event.keyCode === keyCode.TAB && event.shiftKey) {
+                (_a = this.focusedDayNode) === null || _a === void 0 ? void 0 : _a.focus();
+                event.preventDefault();
+            }
+        };
+        this.handleKeyboardNavigation = (event) => {
+            var _a;
+            // handle tab separately, since it needs to be treated
+            // differently to other keyboard interactions
+            if (event.keyCode === keyCode.TAB && !event.shiftKey) {
+                event.preventDefault();
+                (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            let handled = true;
+            switch (event.keyCode) {
+                case keyCode.RIGHT:
+                    this.addDays(1);
+                    break;
+                case keyCode.LEFT:
+                    this.addDays(-1);
+                    break;
+                case keyCode.DOWN:
+                    this.addDays(7);
+                    break;
+                case keyCode.UP:
+                    this.addDays(-7);
+                    break;
+                case keyCode.PAGE_UP:
+                    if (event.shiftKey) {
+                        this.addYears(-1);
+                    }
+                    else {
+                        this.addMonths(-1);
+                    }
+                    break;
+                case keyCode.PAGE_DOWN:
+                    if (event.shiftKey) {
+                        this.addYears(1);
+                    }
+                    else {
+                        this.addMonths(1);
+                    }
+                    break;
+                case keyCode.HOME:
+                    this.startOfWeek();
+                    break;
+                case keyCode.END:
+                    this.endOfWeek();
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                event.preventDefault();
+                this.enableActiveFocus();
+            }
+        };
+        this.handleDaySelect = (_event, day) => {
+            if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {
+                return;
+            }
+            if (day.getMonth() === this.focusedDay.getMonth()) {
+                this.setValue(day);
+                this.hide();
+            }
+            else {
+                this.setFocusedDay(day);
+            }
+        };
+        this.handleMonthSelect = (e) => {
+            // Todo
+            if (e.target instanceof HTMLSelectElement) {
+                this.setMonth(parseInt(e.target.value, 10));
+            }
+        };
+        this.handleYearSelect = (e) => {
+            if (e.target instanceof HTMLSelectElement) {
+                this.setYear(parseInt(e.target.value, 10));
+            }
+        };
+        this.handleInputChange = (e) => {
+            const target = e.target;
+            const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
+            this.setValue(cleanedValue);
+        };
+        this.prepareEvent = (value) => {
+            const event = {
+                component: "dso-date-picker-legacy",
+                value: "",
+                valueAsDate: undefined,
+            };
+            if (value instanceof Date) {
+                event.valueAsDate = value;
+            }
+            else {
+                event.value = value;
+                event.valueAsDate = parseDutchDate(value);
+            }
+            if (event.valueAsDate) {
+                event.value = printDutchDate(event.valueAsDate);
+            }
+            if (!event.valueAsDate && this.required) {
+                event.error = "required";
+            }
+            if (event.value && !event.valueAsDate) {
+                event.error = "invalid";
+            }
+            if (event.valueAsDate && (this.min || this.max)) {
+                const min = parseDutchDate(this.min);
+                const max = parseDutchDate(this.max);
+                const clampValue = clamp(event.valueAsDate, min, max);
+                if (clampValue !== event.valueAsDate && clampValue === min) {
+                    event.valueAsDate = undefined;
+                    event.error = "min-range";
+                }
+                else if (clampValue !== event.valueAsDate && clampValue === max) {
+                    event.valueAsDate = undefined;
+                    event.error = "max-range";
+                }
+            }
+            return event;
+        };
+        this.processFocusedDayNode = (element) => {
+            this.focusedDayNode = element;
+            if (this.activeFocus && this.open) {
+                setTimeout(() => element.focus(), 0);
+            }
+        };
+        this.activeFocus = false;
+        this.focusedDay = new Date();
+        this.open = false;
+        this.visible = false;
+        this.name = "date";
+        this.identifier = undefined;
+        this.disabled = false;
+        this.role = null;
+        this.direction = "right";
+        this.required = false;
+        this.invalid = undefined;
+        this.describedBy = undefined;
+        this.dsoAutofocus = false;
+        this.value = "";
+        this.min = undefined;
+        this.max = undefined;
+    }
     /**
-     * Own Properties
+     * Component event handling.
      */
-    this.monthSelectId = createIdentifier("DsoDateMonth");
-    this.yearSelectId = createIdentifier("DsoDateYear");
-    this.dialogLabelId = createIdentifier("DsoDateLabel");
-    this.localization = defaultLocalization;
-    this.firstDayOfWeek = DaysOfWeek.Monday;
+    handleDocumentClick(e) {
+        if (!this.open) {
+            return;
+        }
+        const path = e.composedPath();
+        for (const target of path) {
+            if (target instanceof Node && this.element.contains(target)) {
+                return;
+            }
+        }
+        this.hide(false);
+    }
     /**
-     * Local methods.
+     * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
      */
-    this.enableActiveFocus = () => {
-      this.activeFocus = true;
-    };
-    this.disableActiveFocus = () => {
-      this.activeFocus = false;
-    };
-    this.toggleOpen = (e) => {
-      e.preventDefault();
-      this.open ? this.hide(false) : this.show();
-    };
-    this.handleEscKey = (event) => {
-      if (event.keyCode === keyCode.ESC) {
-        this.hide();
-      }
-    };
-    this.handleBlur = (event) => {
-      event.stopPropagation();
-      this.dsoBlur.emit({
-        component: "dso-date-picker-legacy",
-      });
-    };
-    this.handleKeyUp = (event) => {
-      event.stopPropagation();
-      this.dsoKeyUp.emit({
-        component: "dso-date-picker-legacy",
-        originalEvent: event,
-      });
-    };
-    this.handleKeyDown = (event) => {
-      event.stopPropagation();
-      this.dsoKeyDown.emit({
-        component: "dso-date-picker-legacy",
-        originalEvent: event,
-      });
-    };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.dsoFocus.emit({
-        component: "dso-date-picker-legacy",
-      });
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    this.handleTouchMove = (event) => {
-      event.preventDefault();
-    };
-    this.handleTouchEnd = (event) => {
-      var _a, _b;
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
-      const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // get vertical dist traveled
-      const threshold = 70;
-      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-      const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
-      if (isHorizontalSwipe) {
-        this.addMonths(distX < 0 ? 1 : -1);
-      }
-      else if (isDownwardsSwipe) {
-        this.hide(false);
-        event.preventDefault();
-      }
-      this.initialTouchY = undefined;
-      this.initialTouchX = undefined;
-    };
-    this.handleNextMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(1);
-    };
-    this.handlePreviousMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(-1);
-    };
-    this.handleFirstFocusableKeydown = (event) => {
-      var _a;
-      // this ensures focus is trapped inside the dialog
-      if (event.keyCode === keyCode.TAB && event.shiftKey) {
-        (_a = this.focusedDayNode) === null || _a === void 0 ? void 0 : _a.focus();
-        event.preventDefault();
-      }
-    };
-    this.handleKeyboardNavigation = (event) => {
-      var _a;
-      // handle tab separately, since it needs to be treated
-      // differently to other keyboard interactions
-      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-        event.preventDefault();
-        (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-        return;
-      }
-      let handled = true;
-      switch (event.keyCode) {
-        case keyCode.RIGHT:
-          this.addDays(1);
-          break;
-        case keyCode.LEFT:
-          this.addDays(-1);
-          break;
-        case keyCode.DOWN:
-          this.addDays(7);
-          break;
-        case keyCode.UP:
-          this.addDays(-7);
-          break;
-        case keyCode.PAGE_UP:
-          if (event.shiftKey) {
-            this.addYears(-1);
-          }
-          else {
-            this.addMonths(-1);
-          }
-          break;
-        case keyCode.PAGE_DOWN:
-          if (event.shiftKey) {
-            this.addYears(1);
-          }
-          else {
-            this.addMonths(1);
-          }
-          break;
-        case keyCode.HOME:
-          this.startOfWeek();
-          break;
-        case keyCode.END:
-          this.endOfWeek();
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.enableActiveFocus();
-      }
-    };
-    this.handleDaySelect = (_event, day) => {
-      if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {
-        return;
-      }
-      if (day.getMonth() === this.focusedDay.getMonth()) {
-        this.setValue(day);
-        this.hide();
-      }
-      else {
-        this.setFocusedDay(day);
-      }
-    };
-    this.handleMonthSelect = (e) => {
-      // Todo
-      if (e.target instanceof HTMLSelectElement) {
-        this.setMonth(parseInt(e.target.value, 10));
-      }
-    };
-    this.handleYearSelect = (e) => {
-      if (e.target instanceof HTMLSelectElement) {
-        this.setYear(parseInt(e.target.value, 10));
-      }
-    };
-    this.handleInputChange = (e) => {
-      const target = e.target;
-      const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
-      this.setValue(cleanedValue);
-    };
-    this.prepareEvent = (value) => {
-      const event = {
-        component: "dso-date-picker-legacy",
-        value: "",
-        valueAsDate: undefined,
-      };
-      if (value instanceof Date) {
-        event.valueAsDate = value;
-      }
-      else {
-        event.value = value;
-        event.valueAsDate = parseDutchDate(value);
-      }
-      if (event.valueAsDate) {
-        event.value = printDutchDate(event.valueAsDate);
-      }
-      if (!event.valueAsDate && this.required) {
-        event.error = "required";
-      }
-      if (event.value && !event.valueAsDate) {
-        event.error = "invalid";
-      }
-      if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDutchDate(this.min);
-        const max = parseDutchDate(this.max);
-        const clampValue = clamp(event.valueAsDate, min, max);
-        if (clampValue !== event.valueAsDate && clampValue === min) {
-          event.valueAsDate = undefined;
-          event.error = "min-range";
-        }
-        else if (clampValue !== event.valueAsDate && clampValue === max) {
-          event.valueAsDate = undefined;
-          event.error = "max-range";
+    async setFocus() {
+        var _a;
+        return (_a = this.datePickerLegacyInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Public methods API
+     */
+    /**
+     * Show the calendar modal, moving focus to the calendar inside.
+     */
+    async show() {
+        if (typeof this.hideTimeoutId !== "undefined") {
+            clearTimeout(this.hideTimeoutId);
         }
-      }
-      return event;
-    };
-    this.processFocusedDayNode = (element) => {
-      this.focusedDayNode = element;
-      if (this.activeFocus && this.open) {
-        setTimeout(() => element.focus(), 0);
-      }
-    };
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    this.name = "date";
-    this.identifier = undefined;
-    this.disabled = false;
-    this.role = null;
-    this.direction = "right";
-    this.required = false;
-    this.invalid = undefined;
-    this.describedBy = undefined;
-    this.dsoAutofocus = false;
-    this.value = "";
-    this.min = undefined;
-    this.max = undefined;
-  }
-  /**
-   * Component event handling.
-   */
-  handleDocumentClick(e) {
-    if (!this.open) {
-      return;
+        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);
+        });
     }
-    const path = e.composedPath();
-    for (const target of path) {
-      if (target instanceof Node && this.element.contains(target)) {
-        return;
-      }
+    /**
+     * 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);
     }
-    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);
+    addDays(days) {
+        this.setFocusedDay(addDays(this.focusedDay, days));
     }
-    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);
+    addMonths(months) {
+        this.setMonth(this.focusedDay.getMonth() + months);
     }
-    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;
+    addYears(years) {
+        this.setYear(this.focusedDay.getFullYear() + years);
     }
-  }
-  componentWillLoad() {
-    const minDate = parseDutchDate(this.min);
-    const maxDate = parseDutchDate(this.max);
-    if (minDate && minDate > this.focusedDay) {
-      this.focusedDay = minDate;
+    startOfWeek() {
+        this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
     }
-    if (maxDate && maxDate < this.focusedDay) {
-      this.focusedDay = maxDate;
+    endOfWeek() {
+        this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
     }
-  }
-  componentDidLoad() {
-    const valueAsDate = parseDutchDate(this.value);
-    if (valueAsDate) {
-      this.previousValue = this.value = printDutchDate(valueAsDate);
+    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));
     }
-    if (this.dsoAutofocus) {
-      this.setFocus();
+    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));
     }
-  }
-  /**
-   * 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());
+    setFocusedDay(day) {
+        this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
     }
-    if (maxDate) {
-      maxYear = Math.min(maxYear, maxDate.getFullYear());
+    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;
+        }
     }
-    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
-        "dso-date__dialog": true,
-        "is-left": this.direction === "left",
-        "is-active": this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
-      const index = this.localization.monthNames.indexOf(month);
-      return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-    })), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
-  }
-  static get is() { return "dso-date-picker-legacy"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["date-picker-legacy.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["date-picker-legacy.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the date picker input."
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "\"date\""
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the date picker input component disabled. This prevents users from being able to\r\ninteract with the input, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "null | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines a specific role attribute for the date picker input."
-        },
-        "attribute": "role",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DsoDatePickerLegacyDirection",
-          "resolved": "\"left\" | \"right\"",
-          "references": {
-            "DsoDatePickerLegacyDirection": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyDirection"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Forces the opening direction of the calendar modal to be always left or right.\r\nThis setting can be useful when the input is smaller than the opening date picker\r\nwould be as by default the picker always opens towards right."
-        },
-        "attribute": "direction",
-        "reflect": false,
-        "defaultValue": "\"right\""
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the input be marked as required?"
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Is input invalid?"
-        },
-        "attribute": "invalid",
-        "reflect": true
-      },
-      "describedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "ID of element that describes the input element"
-        },
-        "attribute": "described-by",
-        "reflect": false
-      },
-      "dsoAutofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the input be focused on load?"
-        },
-        "attribute": "dso-autofocus",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
-        },
-        "attribute": "max",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "activeFocus": {},
-      "focusedDay": {},
-      "open": {},
-      "visible": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoDateChange",
-        "name": "dsoDateChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when a date is selected."
-        },
-        "complexType": {
-          "original": "DsoDatePickerLegacyChangeEvent",
-          "resolved": "{ component: \"dso-date-picker-legacy\"; valueAsDate: Date | undefined; value: string; error?: \"required\" | \"min-range\" | \"max-range\" | \"invalid\" | undefined; }",
-          "references": {
-            "DsoDatePickerLegacyChangeEvent": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyChangeEvent"
-            }
-          }
+    componentWillLoad() {
+        const minDate = parseDutchDate(this.min);
+        const maxDate = parseDutchDate(this.max);
+        if (minDate && minDate > this.focusedDay) {
+            this.focusedDay = minDate;
         }
-      }, {
-        "method": "dsoBlur",
-        "name": "dsoBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted the date picker input is blurred."
-        },
-        "complexType": {
-          "original": "DsoDatePickerLegacyFocusEvent",
-          "resolved": "{ component: \"dso-date-picker-legacy\"; }",
-          "references": {
-            "DsoDatePickerLegacyFocusEvent": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyFocusEvent"
-            }
-          }
+        if (maxDate && maxDate < this.focusedDay) {
+            this.focusedDay = maxDate;
         }
-      }, {
-        "method": "dsoKeyUp",
-        "name": "dsoKeyUp",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted on key up in the date picker input."
-        },
-        "complexType": {
-          "original": "DsoDatePickerLegacyKeyboardEvent",
-          "resolved": "{ component: \"dso-date-picker-legacy\"; originalEvent: KeyboardEvent; }",
-          "references": {
-            "DsoDatePickerLegacyKeyboardEvent": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyKeyboardEvent"
-            }
-          }
+    }
+    componentDidLoad() {
+        const valueAsDate = parseDutchDate(this.value);
+        if (valueAsDate) {
+            this.previousValue = this.value = printDutchDate(valueAsDate);
         }
-      }, {
-        "method": "dsoKeyDown",
-        "name": "dsoKeyDown",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted on key down in the date picker input."
-        },
-        "complexType": {
-          "original": "DsoDatePickerLegacyKeyboardEvent",
-          "resolved": "{ component: \"dso-date-picker-legacy\"; originalEvent: KeyboardEvent; }",
-          "references": {
-            "DsoDatePickerLegacyKeyboardEvent": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyKeyboardEvent"
-            }
-          }
+        if (this.dsoAutofocus) {
+            this.setFocus();
         }
-      }, {
-        "method": "dsoFocus",
-        "name": "dsoFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted the date picker input is focused."
-        },
-        "complexType": {
-          "original": "DsoDatePickerLegacyFocusEvent",
-          "resolved": "{ component: \"dso-date-picker-legacy\"; }",
-          "references": {
-            "DsoDatePickerLegacyFocusEvent": {
-              "location": "import",
-              "path": "./date-picker-legacy.interfaces",
-              "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyFocusEvent"
-            }
-          }
+    }
+    /**
+     * 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());
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void | undefined>"
-        },
-        "docs": {
-          "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
-          "tags": []
+        if (maxDate) {
+            maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-      },
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        return (h(Host, { key: 'c98525f48cb8ba872c8d6f0d823009efcdd55392' }, h("div", { key: 'f1a24e2205a5e9bfe1cd00a305f584f38febda55', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '98b8d37b7c1026a4a6d96b7f197d45096db6b8d4', class: "dso-date__input-wrapper" }, h("input", { key: '0577a6601ef0d04131321be438857f21f488c690', 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: 'd371f57b0c1e7b5574cdb81e5525e9a12e7ae8d2', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '97404535df9458f5fb21c8337e93eddce31358dc', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '861e576ce77c45d51df737edec2d6a9327853085', icon: "calendar" })), h("span", { key: '60517906fefe6d02d7c0e172d4f86ad5de089398', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '7b14023d7aa6a9e3cbf936dd996d3a6315154207', 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: '85e88edf0cc993718a0a681b409103cb6b03dd91', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'df2b868a04173957062c99e00b53520653f21a12', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a3cd90aab2e1c1e81fd77b9b08a077cd1a718856', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'e71c9e0e600cfbad9404f368d618ac2adcda0547', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'a46acc356f33fdb0993f91b65f9734686a193830', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '7b768f4aec90a1af458e2086234a35cde08cd438', icon: "times" }), h("span", { key: '3986f47baaea087eaaa9fdd26fa5bbd59f120868', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '6f31ba07e6d35fd60605f2fd20dd5adc8fc1c301', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'e17ae4343d1611f216e97aa0d5db37d5769cdbc2' }, h("h2", { key: 'd2f774ef647670867a33e705396cb6211cadbedd', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '080741c15c08144dcfdd7948cd89b4835d1e411f', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e8e4aafb7993b2a4325541b000f9923c74f2c9db', class: "dso-date__select" }, h("select", { key: 'ad99a598cf1b49a0483c0feb9a863d53fa9c630e', 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: '8ea234a85870e6f09574187a897d3ed5c7d0174e', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '6bddd5b0c605071aceb13c270751ed1d64460f48' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '0a24743c79d22649c930538a01eb09a5cbb409bb', icon: "chevron-down" }))), h("label", { key: 'cd6126658338f90327bda893f843cd89ee04e011', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7e7e11aba63d80a139d73cde880dcb35f39b6ba9', class: "dso-date__select" }, h("select", { key: 'b36b8a505ab4d119d64d3c961a73f5af92a2a6b5', 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: '49e45b7b017aee094b7eba71cf4d6d09e09806e8', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c41367509566cbee7e47ebd8682cf5efbc2cd65a' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '19e620e7406fbe176deabc409266fe553caaa94e', icon: "chevron-down" })))), h("div", { key: '84857ea1cde41a1cf2ddd0571ed169af775dc55e', class: "dso-date__nav" }, h("button", { key: '735aa28fd6d15840bb21c84eaac9a744f9bade28', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'dcd15e30ee0c4964f4a8209eb791debf21256379', icon: "chevron-left" }), h("span", { key: '567303dca4686442b71622d6d6088f3e84e51265', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '5607c90c85dd225359ec5acba1086dc3e1d6d263', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '6253a5327e3787007b48df1d5a3ff4ee7d493c12', icon: "chevron-right" }), h("span", { key: 'a7689394108e8f335058dd1400e9618d895eece0', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '81a9fe62672878670e961c8172aedb4c65fb6782', 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 }))))));
+    }
+    static get is() { return "dso-date-picker-legacy"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker-legacy.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker-legacy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the date picker input."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "\"date\""
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the date picker input. Use this instead of html `id` attribute."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date picker input component disabled. This prevents users from being able to\r\ninteract with the input, and conveys its inactive state to assistive technologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a specific role attribute for the date picker input."
+                },
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsoDatePickerLegacyDirection",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "DsoDatePickerLegacyDirection": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces the opening direction of the calendar modal to be always left or right.\r\nThis setting can be useful when the input is smaller than the opening date picker\r\nwould be as by default the picker always opens towards right."
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "\"right\""
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the input be marked as required?"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is input invalid?"
+                },
+                "attribute": "invalid",
+                "reflect": true
+            },
+            "describedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that describes the input element"
+                },
+                "attribute": "described-by",
+                "reflect": false
+            },
+            "dsoAutofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should the input be focused on load?"
+                },
+                "attribute": "dso-autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the max property."
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.\r\nThis setting can be used alone or together with the min property."
+                },
+                "attribute": "max",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show the calendar modal, moving focus to the calendar inside.",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "(moveFocusToButton?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "activeFocus": {},
+            "focusedDay": {},
+            "open": {},
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoDateChange",
+                "name": "dsoDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a date is selected."
+                },
+                "complexType": {
+                    "original": "DsoDatePickerLegacyChangeEvent",
+                    "resolved": "{ component: \"dso-date-picker-legacy\"; valueAsDate: Date | undefined; value: string; error?: \"required\" | \"min-range\" | \"max-range\" | \"invalid\" | undefined; }",
+                    "references": {
+                        "DsoDatePickerLegacyChangeEvent": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoBlur",
+                "name": "dsoBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted the date picker input is blurred."
+                },
+                "complexType": {
+                    "original": "DsoDatePickerLegacyFocusEvent",
+                    "resolved": "{ component: \"dso-date-picker-legacy\"; }",
+                    "references": {
+                        "DsoDatePickerLegacyFocusEvent": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyFocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoKeyUp",
+                "name": "dsoKeyUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on key up in the date picker input."
+                },
+                "complexType": {
+                    "original": "DsoDatePickerLegacyKeyboardEvent",
+                    "resolved": "{ component: \"dso-date-picker-legacy\"; originalEvent: KeyboardEvent; }",
+                    "references": {
+                        "DsoDatePickerLegacyKeyboardEvent": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyKeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoKeyDown",
+                "name": "dsoKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on key down in the date picker input."
+                },
+                "complexType": {
+                    "original": "DsoDatePickerLegacyKeyboardEvent",
+                    "resolved": "{ component: \"dso-date-picker-legacy\"; originalEvent: KeyboardEvent; }",
+                    "references": {
+                        "DsoDatePickerLegacyKeyboardEvent": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyKeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoFocus",
+                "name": "dsoFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted the date picker input is focused."
+                },
+                "complexType": {
+                    "original": "DsoDatePickerLegacyFocusEvent",
+                    "resolved": "{ component: \"dso-date-picker-legacy\"; }",
+                    "references": {
+                        "DsoDatePickerLegacyFocusEvent": {
+                            "location": "import",
+                            "path": "./date-picker-legacy.interfaces",
+                            "id": "src/components/date-picker-legacy/date-picker-legacy.interfaces.ts::DsoDatePickerLegacyFocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void | undefined>"
+                },
+                "docs": {
+                    "text": "Sets focus on the date picker's input. Use this method instead of the global `focus()`.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show the calendar modal, moving focus to the calendar inside.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(moveFocusToButton?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "moveFocusToButton",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\nreturning to the date picker's button. Default is true.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\r\nreturning to the date picker's button. Default is true.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=date-picker-legacy.js.map