@dso-toolkit/core 59.0.0 → 60.0.0

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

@@ -1,72 +1,18 @@
-import { Host, h, } from "@stencil/core";
-import { createIdentifier } from "../../utils/create-identifier";
-import { addDays, startOfWeek, endOfWeek, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printDutchDate, parseDutchDate, DaysOfWeek, } from "./date-utils";
-import { DatePickerMonth } from "./date-picker-month";
-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,
-};
-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;
-}
+import { h } from "@stencil/core";
+import { clamp, parseDate, parseToValueFormat, printDutchDate } from "./date-utils";
 export class DsoDatePicker {
   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({
+        originalEvent: event,
+        component: "dso-date-picker",
+      });
+    };
+    this.handleFocus = (event) => {
+      event.stopPropagation();
+      this.dsoFocus.emit({
+        originalEvent: event,
         component: "dso-date-picker",
       });
     };
@@ -84,154 +30,18 @@ export class DsoDatePicker {
         originalEvent: event,
       });
     };
-    this.handleFocus = (event) => {
-      event.stopPropagation();
-      this.dsoFocus.emit({
-        component: "dso-date-picker",
-      });
-    };
-    this.handleTouchStart = (event) => {
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      this.initialTouchX = touch.pageX;
-      this.initialTouchY = touch.pageY;
-    };
-    this.handleTouchMove = (event) => {
-      event.preventDefault();
-    };
-    this.handleTouchEnd = (event) => {
-      var _a, _b;
-      const touch = event.changedTouches[0];
-      if (!touch) {
-        throw new Error("No touch found");
-      }
-      const distX = touch.pageX - ((_a = this.initialTouchX) !== null && _a !== void 0 ? _a : 0); // get horizontal dist traveled
-      const distY = touch.pageY - ((_b = this.initialTouchY) !== null && _b !== void 0 ? _b : 0); // get vertical dist traveled
-      const threshold = 70;
-      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
-      const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
-      if (isHorizontalSwipe) {
-        this.addMonths(distX < 0 ? 1 : -1);
-      }
-      else if (isDownwardsSwipe) {
-        this.hide(false);
-        event.preventDefault();
-      }
-      this.initialTouchY = undefined;
-      this.initialTouchX = undefined;
-    };
-    this.handleNextMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(1);
-    };
-    this.handlePreviousMonthClick = (event) => {
-      event.preventDefault();
-      this.addMonths(-1);
-    };
-    this.handleFirstFocusableKeydown = (event) => {
-      var _a;
-      // this ensures focus is trapped inside the dialog
-      if (event.keyCode === keyCode.TAB && event.shiftKey) {
-        (_a = this.focusedDayNode) === null || _a === void 0 ? void 0 : _a.focus();
-        event.preventDefault();
-      }
-    };
-    this.handleKeyboardNavigation = (event) => {
-      var _a;
-      // handle tab separately, since it needs to be treated
-      // differently to other keyboard interactions
-      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
-        event.preventDefault();
-        (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-        return;
-      }
-      let handled = true;
-      switch (event.keyCode) {
-        case keyCode.RIGHT:
-          this.addDays(1);
-          break;
-        case keyCode.LEFT:
-          this.addDays(-1);
-          break;
-        case keyCode.DOWN:
-          this.addDays(7);
-          break;
-        case keyCode.UP:
-          this.addDays(-7);
-          break;
-        case keyCode.PAGE_UP:
-          if (event.shiftKey) {
-            this.addYears(-1);
-          }
-          else {
-            this.addMonths(-1);
-          }
-          break;
-        case keyCode.PAGE_DOWN:
-          if (event.shiftKey) {
-            this.addYears(1);
-          }
-          else {
-            this.addMonths(1);
-          }
-          break;
-        case keyCode.HOME:
-          this.startOfWeek();
-          break;
-        case keyCode.END:
-          this.endOfWeek();
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        this.enableActiveFocus();
-      }
-    };
-    this.handleDaySelect = (_event, day) => {
-      if (!inRange(day, parseDutchDate(this.min), parseDutchDate(this.max))) {
-        return;
-      }
-      if (day.getMonth() === this.focusedDay.getMonth()) {
-        this.setValue(day);
-        this.hide();
-      }
-      else {
-        this.setFocusedDay(day);
-      }
-    };
-    this.handleMonthSelect = (e) => {
-      // Todo
-      if (e.target instanceof HTMLSelectElement) {
-        this.setMonth(parseInt(e.target.value, 10));
-      }
-    };
-    this.handleYearSelect = (e) => {
-      if (e.target instanceof HTMLSelectElement) {
-        this.setYear(parseInt(e.target.value, 10));
-      }
-    };
     this.handleInputChange = (e) => {
       const target = e.target;
-      const cleanedValue = cleanValue(target, DISALLOWED_CHARACTERS);
-      this.setValue(cleanedValue);
-    };
-    this.prepareEvent = (value) => {
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      const { value } = target;
       const event = {
+        originalEvent: e,
         component: "dso-date-picker",
-        value: "",
-        valueAsDate: undefined,
+        value,
+        valueAsDate: parseDate(value),
       };
-      if (value instanceof Date) {
-        event.valueAsDate = value;
-      }
-      else {
-        event.value = value;
-        event.valueAsDate = parseDutchDate(value);
-      }
       if (event.valueAsDate) {
         event.value = printDutchDate(event.valueAsDate);
       }
@@ -242,8 +52,8 @@ export class DsoDatePicker {
         event.error = "invalid";
       }
       if (event.valueAsDate && (this.min || this.max)) {
-        const min = parseDutchDate(this.min);
-        const max = parseDutchDate(this.max);
+        const min = parseDate(this.min);
+        const max = parseDate(this.max);
         const clampValue = clamp(event.valueAsDate, min, max);
         if (clampValue !== event.valueAsDate && clampValue === min) {
           event.valueAsDate = undefined;
@@ -254,23 +64,15 @@ export class DsoDatePicker {
           event.error = "max-range";
         }
       }
-      return event;
-    };
-    this.processFocusedDayNode = (element) => {
-      this.focusedDayNode = element;
-      if (this.activeFocus && this.open) {
-        setTimeout(() => element.focus(), 0);
+      this.value = typeof value === "string" ? value : event.value;
+      if (this.value !== this.previousValue) {
+        this.dsoDateChange.emit(event);
+        this.previousValue = this.value;
       }
     };
-    this.activeFocus = false;
-    this.focusedDay = new Date();
-    this.open = false;
-    this.visible = false;
-    this.name = "date";
+    this.name = "dso-date";
     this.identifier = undefined;
     this.disabled = false;
-    this.role = null;
-    this.direction = "right";
     this.required = false;
     this.invalid = undefined;
     this.describedBy = undefined;
@@ -279,154 +81,9 @@ export class DsoDatePicker {
     this.min = undefined;
     this.max = undefined;
   }
-  /**
-   * Component event handling.
-   */
-  handleDocumentClick(e) {
-    if (!this.open) {
-      return;
-    }
-    const path = e.composedPath();
-    for (const target of path) {
-      if (target instanceof Node && this.element.contains(target)) {
-        return;
-      }
-    }
-    this.hide(false);
-  }
-  /**
-   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
-   */
-  async setFocus() {
-    var _a;
-    return (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  /**
-   * Public methods API
-   */
-  /**
-   * Show the calendar modal, moving focus to the calendar inside.
-   */
-  async show() {
-    if (typeof this.hideTimeoutId !== "undefined") {
-      clearTimeout(this.hideTimeoutId);
-    }
-    this.visible = true;
-    setTimeout(() => {
-      this.open = true;
-      this.setFocusedDay(parseDutchDate(this.value) || new Date());
-      if (typeof this.focusTimeoutId !== "undefined") {
-        clearTimeout(this.focusTimeoutId);
-      }
-      this.focusTimeoutId = setTimeout(() => { var _a; return (_a = this.monthSelectNode) === null || _a === void 0 ? void 0 : _a.focus(); }, TRANSITION_MS);
-    });
-  }
-  /**
-   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
-   * returning to the date picker's button. Default is true.
-   */
-  async hide(moveFocusToButton = true) {
-    this.open = false;
-    // in cases where calendar is quickly shown and hidden
-    // we should avoid moving focus to the button
-    if (typeof this.focusTimeoutId !== "undefined") {
-      clearTimeout(this.focusTimeoutId);
-    }
-    this.hideTimeoutId = setTimeout(() => {
-      if (moveFocusToButton && this.datePickerButton) {
-        this.datePickerButton.focus();
-      }
-      this.visible = false;
-    }, TRANSITION_MS + 200);
-  }
-  addDays(days) {
-    this.setFocusedDay(addDays(this.focusedDay, days));
-  }
-  addMonths(months) {
-    this.setMonth(this.focusedDay.getMonth() + months);
-  }
-  addYears(years) {
-    this.setYear(this.focusedDay.getFullYear() + years);
-  }
-  startOfWeek() {
-    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
-  }
-  endOfWeek() {
-    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
-  }
-  setMonth(month) {
-    const min = setMonth(startOfMonth(this.focusedDay), month);
-    const max = endOfMonth(min);
-    const date = setMonth(this.focusedDay, month);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  setYear(year) {
-    const min = setYear(startOfMonth(this.focusedDay), year);
-    const max = endOfMonth(min);
-    const date = setYear(this.focusedDay, year);
-    this.setFocusedDay(clamp(date, min, max));
-  }
-  setFocusedDay(day) {
-    this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
-  }
-  setValue(value) {
-    const event = this.prepareEvent(value);
-    this.value = typeof value === "string" ? value : event.value;
-    if (this.value !== this.previousValue) {
-      this.dsoDateChange.emit(event);
-      this.previousValue = this.value;
-    }
-  }
-  componentWillLoad() {
-    const minDate = parseDutchDate(this.min);
-    const maxDate = parseDutchDate(this.max);
-    if (minDate && minDate > this.focusedDay) {
-      this.focusedDay = minDate;
-    }
-    if (maxDate && maxDate < this.focusedDay) {
-      this.focusedDay = maxDate;
-    }
-  }
-  componentDidLoad() {
-    const valueAsDate = parseDutchDate(this.value);
-    if (valueAsDate) {
-      this.previousValue = this.value = printDutchDate(valueAsDate);
-    }
-    if (this.dsoAutofocus) {
-      this.setFocus();
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
   render() {
-    var _a, _b;
-    const valueAsDate = parseDutchDate(this.value);
-    const formattedDate = valueAsDate && printDutchDate(valueAsDate);
-    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
-    const focusedMonth = this.focusedDay.getMonth();
-    const focusedYear = this.focusedDay.getFullYear();
-    const minDate = parseDutchDate(this.min);
-    const maxDate = parseDutchDate(this.max);
-    const prevMonthDisabled = minDate && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
-    const nextMonthDisabled = maxDate && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
-    let minYear = selectedYear - 10;
-    let maxYear = selectedYear + 10;
-    if (minDate) {
-      minYear = Math.max(minYear, minDate.getFullYear());
-    }
-    if (maxDate) {
-      maxYear = Math.min(maxYear, maxDate.getFullYear());
-    }
-    return (h(Host, null, h("div", { class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
-        "dso-date__dialog": true,
-        "is-left": this.direction === "left",
-        "is-active": this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { icon: "times" }), h("span", { class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
-      const index = this.localization.monthNames.indexOf(month);
-      return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-    })), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { icon: "chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "dso-date__select" }, h("select", { id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "dso-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("dso-icon", { icon: "chevron-down" })))), h("div", { class: "dso-date__nav" }, h("button", { class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-left" }), h("span", { class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { icon: "chevron-right" }), h("span", { class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+    var _a;
+    return (h("input", { type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
   }
   static get is() { return "dso-date-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -458,7 +115,7 @@ export class DsoDatePicker {
         },
         "attribute": "name",
         "reflect": false,
-        "defaultValue": "\"date\""
+        "defaultValue": "\"dso-date\""
       },
       "identifier": {
         "type": "string",
@@ -495,48 +152,6 @@ export class DsoDatePicker {
         "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": "DsoDatePickerDirection",
-          "resolved": "\"left\" | \"right\"",
-          "references": {
-            "DsoDatePickerDirection": {
-              "location": "import",
-              "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerDirection"
-            }
-          }
-        },
-        "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,
@@ -552,7 +167,7 @@ export class DsoDatePicker {
           "text": "Should the input be marked as required?"
         },
         "attribute": "required",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "invalid": {
@@ -609,7 +224,7 @@ export class DsoDatePicker {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -622,7 +237,7 @@ export class DsoDatePicker {
           "text": "Date value. Must be in Dutch date format: DD-MM-YYYY."
         },
         "attribute": "value",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "\"\""
       },
       "min": {
@@ -661,14 +276,6 @@ export class DsoDatePicker {
       }
     };
   }
-  static get states() {
-    return {
-      "activeFocus": {},
-      "focusedDay": {},
-      "open": {},
-      "visible": {}
-    };
-  }
   static get events() {
     return [{
         "method": "dsoDateChange",
@@ -681,13 +288,13 @@ export class DsoDatePicker {
           "text": "Event emitted when a date is selected."
         },
         "complexType": {
-          "original": "DsoDatePickerChangeEvent",
-          "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
+          "original": "DatePickerChangeEvent",
+          "resolved": "DatePickerChangeEvent",
           "references": {
-            "DsoDatePickerChangeEvent": {
+            "DatePickerChangeEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerChangeEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerChangeEvent"
             }
           }
         }
@@ -702,13 +309,13 @@ export class DsoDatePicker {
           "text": "Event emitted the date picker input is blurred."
         },
         "complexType": {
-          "original": "DsoDatePickerFocusEvent",
-          "resolved": "{ component: \"dso-date-picker\"; }",
+          "original": "DatePickerFocusEvent",
+          "resolved": "DatePickerFocusEvent",
           "references": {
-            "DsoDatePickerFocusEvent": {
+            "DatePickerFocusEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerFocusEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerFocusEvent"
             }
           }
         }
@@ -723,13 +330,13 @@ export class DsoDatePicker {
           "text": "Event emitted on key up in the date picker input."
         },
         "complexType": {
-          "original": "DsoDatePickerKeyboardEvent",
-          "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
+          "original": "DatePickerKeyboardEvent",
+          "resolved": "DatePickerKeyboardEvent",
           "references": {
-            "DsoDatePickerKeyboardEvent": {
+            "DatePickerKeyboardEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerKeyboardEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
             }
           }
         }
@@ -744,13 +351,13 @@ export class DsoDatePicker {
           "text": "Event emitted on key down in the date picker input."
         },
         "complexType": {
-          "original": "DsoDatePickerKeyboardEvent",
-          "resolved": "{ component: \"dso-date-picker\"; originalEvent: KeyboardEvent; }",
+          "original": "DatePickerKeyboardEvent",
+          "resolved": "DatePickerKeyboardEvent",
           "references": {
-            "DsoDatePickerKeyboardEvent": {
+            "DatePickerKeyboardEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerKeyboardEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerKeyboardEvent"
             }
           }
         }
@@ -765,85 +372,18 @@ export class DsoDatePicker {
           "text": "Event emitted the date picker input is focused."
         },
         "complexType": {
-          "original": "DsoDatePickerFocusEvent",
-          "resolved": "{ component: \"dso-date-picker\"; }",
+          "original": "DatePickerFocusEvent",
+          "resolved": "DatePickerFocusEvent",
           "references": {
-            "DsoDatePickerFocusEvent": {
+            "DatePickerFocusEvent": {
               "location": "import",
               "path": "./date-picker.interfaces",
-              "id": "src/components/date-picker/date-picker.interfaces.ts::DsoDatePickerFocusEvent"
+              "id": "src/components/date-picker/date-picker.interfaces.ts::DatePickerFocusEvent"
             }
           }
         }
       }];
   }
-  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": [{
-              "tags": [],
-              "text": ""
-            }],
-          "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": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=date-picker.js.map