@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.cd0cd0d

package/dist/collection/components/six-datepicker/six-datepicker.js

@@ -1,14 +1,13 @@
 import { h } from '@stencil/core';
-import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, seconds, toDate, year, } from '../../utils/date-util';
+import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, rangeAround, removeTime, seconds, toDate, year, } from '../../utils/date-util';
 import { EventListeners } from '../../utils/event-listeners';
-import { isNil } from '../../utils/type-check';
 import { debounce, debounceEvent, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
 import { hasSlot } from '../../utils/slot';
 import { SixDateFormats } from './six-date-formats';
 import { MonthSelection } from './components/month-selection';
 import { DaySelection } from './components/day-selection';
 import { YearSelection } from './components/year-selection';
-import { SixTimePropertyName } from '../six-timepicker/six-timepicker.types';
+import { adjustPopupForHoisting, adjustPopupForSmallScreens, calcIsDropDownContentUp, movePopup, } from '../../utils/popup';
 const NUMBER_OF_YEARS_SHOWN = 25;
 const MIN_POPUP_HEIGHT = 400;
 var SelectionMode;
@@ -17,18 +16,6 @@ var SelectionMode;
   SelectionMode["MONTH"] = "month";
   SelectionMode["YEAR"] = "year";
 })(SelectionMode || (SelectionMode = {}));
-const getYearSelectionAroundYear = (year) => {
-  const numberOfElementsPerRow = 5;
-  return Array.from(new Array(NUMBER_OF_YEARS_SHOWN).keys())
-    .map((n) => n + year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2))
-    .reduce((curr, item, index) => {
-    if (index % numberOfElementsPerRow === 0) {
-      curr.push([]);
-    }
-    curr[curr.length - 1].push(item);
-    return curr;
-  }, []);
-};
 /**
  * @since 1.0
  * @status stable
@@ -38,35 +25,69 @@ const getYearSelectionAroundYear = (year) => {
 export class SixDatepicker {
   constructor() {
     this.eventListeners = new EventListeners();
-    this.selectedDate = null;
-    this.defaultValue = null;
+    this.previousUnit = () => {
+      if (this.selectionMode === SelectionMode.DAY) {
+        this.previousMonth();
+      }
+      else if (this.selectionMode === SelectionMode.MONTH) {
+        this.previousYear();
+      }
+      else if (this.selectionMode === SelectionMode.YEAR) {
+        this.previousYearGroup();
+      }
+    };
+    this.nextUnit = () => {
+      if (this.selectionMode === SelectionMode.DAY) {
+        this.nextMonth();
+      }
+      else if (this.selectionMode === SelectionMode.MONTH) {
+        this.nextYear();
+      }
+      else if (this.selectionMode === SelectionMode.YEAR) {
+        this.nextYearGroup();
+      }
+    };
     this.handleDocumentKeyDown = (event) => {
+      var _a;
+      const keyboardEvent = event;
       // Close when escape is pressed
-      if (this.open && event.key === 'Escape') {
-        event.stopPropagation();
+      if (this.open && keyboardEvent.key === 'Escape') {
+        keyboardEvent.stopPropagation();
         this.closePopup();
-        void this.inputElement.setFocus();
+        void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
       }
       // Handle tabbing
-      if (event.key === 'Tab') {
+      if (keyboardEvent.key === 'Tab') {
         this.closePopup();
       }
     };
     this.handleDocumentMouseDown = (event) => {
-      // Close when clicking outside of the containing element
+      // Close when clicking outside the containing element
       const path = event.composedPath();
       if (!path.includes(this.container)) {
         this.closePopup();
         return;
       }
     };
+    this.handleClearClick = async (event) => {
+      event.stopPropagation();
+      await this.select(undefined);
+      this.sixClear.emit();
+    };
     this.onTimepickerChange = (sixTimepickerChange) => {
       const time = sixTimepickerChange.detail.value;
       const newDate = new Date();
-      if (this.selectedDate) {
+      if (this.selectedDate != null) {
         newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
       }
-      newDate.setHours(time[SixTimePropertyName.HOURS], time[SixTimePropertyName.MINUTES], time[SixTimePropertyName.SECONDS]);
+      if (time != null) {
+        const hours = time.hours;
+        const minutes = time.minutes;
+        const seconds = time.seconds;
+        if (hours != null) {
+          newDate.setHours(hours, minutes, seconds);
+        }
+      }
       this.updateValue(newDate);
       this.updatePointerDates();
     };
@@ -85,6 +106,10 @@ export class SixDatepicker {
       this.selectionMode = SelectionMode.DAY;
     };
     this.handleInputChange = (event) => {
+      if (this.inputElement == null) {
+        return;
+      }
+      event.stopPropagation();
       const inputValue = this.inputElement.value;
       if (!isValidDateString(inputValue, this.dateFormat)) {
         return;
@@ -93,38 +118,29 @@ export class SixDatepicker {
       if (inputValueDate === undefined) {
         return;
       }
-      if (this.min && this.min.getTime() > inputValueDate.getTime()) {
-        return;
-      }
-      if (this.max && this.max.getTime() < inputValueDate.getTime()) {
-        return;
-      }
       this.updateIfChanged(inputValueDate);
-      event.stopPropagation();
       const datesOnly = inputValue.replace(/[^\d]/g, '');
-      let isDateValid = !inputValue;
-      if (inputValue && datesOnly.length >= 6) {
+      if (datesOnly.length >= 6) {
         const date = toDate(inputValue, this.dateFormat);
-        const datestring = formatDate(date, this.dateFormat);
-        if (isValidDateString(datestring, this.dateFormat)) {
-          this.selectedDate = toDate(datestring, this.dateFormat);
+        const dateAsString = formatDate(date, this.dateFormat);
+        if (isValidDateString(dateAsString, this.dateFormat)) {
+          this.selectedDate = toDate(dateAsString, this.dateFormat);
           this.updatePointerDates();
           this.updateValue(this.selectedDate);
-          isDateValid = true;
         }
       }
-      this.displayCustomMessage(isDateValid);
     };
     this.handleOnBlur = (event) => {
+      var _a, _b;
       // clear the value if the user deleted the date
-      if (this.inputElement.value === '' && isValidDate(this.value)) {
+      if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
         this.value = undefined;
       }
       event.stopPropagation();
-      const inputValue = this.inputElement.value;
+      const inputValue = (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value;
       const inputValueDate = toDate(inputValue, this.dateFormat);
       const formattedDate = formatDate(this.value, this.dateFormat);
-      if (inputValueDate && inputValue !== formattedDate) {
+      if (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
         // properly format date if necessary
         this.inputElement.value = formattedDate;
       }
@@ -140,21 +156,21 @@ export class SixDatepicker {
     this.readonly = false;
     this.disabled = false;
     this.allowedDates = () => true;
-    this.min = null;
-    this.max = null;
+    this.min = undefined;
+    this.max = undefined;
     this.closeOnSelect = this.type === 'date';
     this.placement = undefined;
     this.size = 'medium';
-    this.required = undefined;
+    this.required = false;
     this.defaultDate = undefined;
     this.placeholder = undefined;
-    this.value = null;
+    this.value = undefined;
+    this.label = '';
+    this.errorText = '';
+    this.invalid = false;
     this.containingElement = undefined;
     this.dateFormat = SixDateFormats.DDMMYYY_DOT;
     this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.errorOnBlur = false;
-    this.errorText = '';
-    this.label = '';
     this.name = '';
     this.clearable = false;
     this.iconPosition = 'left';
@@ -163,29 +179,35 @@ export class SixDatepicker {
   debounceChanged() {
     this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
   }
+  invalidChanged(invalid) {
+    if (this.inputElement) {
+      this.inputElement.invalid = invalid;
+    }
+  }
   /**
    * Update the native input element when the value changes
    */
   valueChanged() {
-    // map unreadable values to undefined to make the datepicker fault-tolerant
-    if (this.isValidValue()) {
-      console.warn('Encountered unreadable date, will map to undefined. Received value', this.value);
+    if (this.value != null && !isValidDate(this.value)) {
+      console.warn('invalid date value: ', this.value);
       this.value = undefined;
-      return;
     }
     this.selectedDate = this.value;
     this.updatePointerDates();
     this.sixSelect.emit(this.value);
   }
   async resizeHandler() {
-    this.calcIsDropDownContentUp();
+    this.updateDropdownDirection();
     this.moveOpenHoistedPopup();
     this.adjustPopupPosition();
   }
   async scrollHandler() {
-    this.calcIsDropDownContentUp();
+    this.updateDropdownDirection();
     this.moveOpenHoistedPopup();
   }
+  moveOpenHoistedPopup() {
+    movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+  }
   get container() {
     return this.containingElement || this.host;
   }
@@ -193,32 +215,10 @@ export class SixDatepicker {
     const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
     return getFirstDayOfTheWeek(date);
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.inputElement.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.inputElement.checkValidity();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    await this.inputElement.setCustomValidity(message);
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.inputElement.value = formatDate(this.defaultValue, this.dateFormat);
-    await this.inputElement.reset();
-  }
-  isValidValue() {
-    if (this.value === undefined || this.value === null) {
-      return false;
-    }
-    if (!(this.value instanceof Date)) {
-      return true;
-    }
-    return this.value instanceof Date && isNaN(this.value);
+  /** Sets focus on the datepickers input. */
+  async setFocus(options) {
+    var _a;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
   }
   get calendarGrid() {
     return createCalendarGrid({
@@ -232,30 +232,15 @@ export class SixDatepicker {
       pointerDate: this.pointerDate,
     });
   }
-  calcIsDropDownContentUp() {
-    if (!this.inputElement || !this.wrapper) {
+  updateDropdownDirection() {
+    if (this.inputElement == null || this.wrapper == null) {
       return;
     }
-    const inputBoundingRect = this.inputElement.getBoundingClientRect();
-    const wrapperBoundingRect = this.wrapper.getBoundingClientRect();
-    const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);
-    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
-    this.isDropDownContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;
+    this.isDropDownContentUp = calcIsDropDownContentUp(this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
   }
   getMonthStringForIndex(index) {
     return i18nDate[this.locale].months[index];
   }
-  previousUnit() {
-    if (this.selectionMode === SelectionMode.DAY) {
-      this.previousMonth();
-    }
-    else if (this.selectionMode === SelectionMode.MONTH) {
-      this.previousYear();
-    }
-    else if (this.selectionMode === SelectionMode.YEAR) {
-      this.previousYearGroup();
-    }
-  }
   previousYear() {
     this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
   }
@@ -277,17 +262,6 @@ export class SixDatepicker {
       };
     }
   }
-  nextUnit() {
-    if (this.selectionMode === SelectionMode.DAY) {
-      this.nextMonth();
-    }
-    else if (this.selectionMode === SelectionMode.MONTH) {
-      this.nextYear();
-    }
-    else if (this.selectionMode === SelectionMode.YEAR) {
-      this.nextYearGroup();
-    }
-  }
   nextMonth() {
     if (this.pointerDate.month === 11) {
       this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1, hours: 0, minutes: 0, seconds: 0 };
@@ -319,11 +293,6 @@ export class SixDatepicker {
     this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
     this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
   }
-  handleClearClick(event) {
-    event.stopPropagation();
-    void this.select(undefined);
-    this.sixClear.emit();
-  }
   closePopup() {
     if (this.inline) {
       return;
@@ -358,15 +327,14 @@ export class SixDatepicker {
     if (this.selectedDate !== undefined && this.selectedDate !== null) {
       return this.selectedDate;
     }
-    if (isNil(this.defaultDate)) {
-      return now();
+    if (this.defaultDate == null) {
+      return this.type === 'date' ? removeTime(now()) : now();
     }
     else {
-      return this.defaultDate && toDate(this.defaultDate, this.dateFormat);
+      return toDate(this.defaultDate, this.dateFormat);
     }
   }
   updateValue(newDate) {
-    this.displayCustomMessage(true);
     this.updateIfChanged(newDate);
   }
   updateIfChanged(newDate) {
@@ -380,12 +348,12 @@ export class SixDatepicker {
    * Selects an option
    */
   async select(datestring) {
-    if (!datestring) {
+    if (datestring == null) {
       this.updateValue(undefined);
     }
     else {
       const newDate = toDate(datestring, this.dateFormat);
-      newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
+      newDate === null || newDate === void 0 ? void 0 : newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
       this.updateValue(newDate);
     }
     this.updatePointerDates();
@@ -394,8 +362,6 @@ export class SixDatepicker {
     }
   }
   componentWillLoad() {
-    this.validateProps();
-    this.defaultValue = this.value;
     this.selectedDate = this.value;
     this.updatePointerDates();
     this.updateValue(this.value);
@@ -406,23 +372,17 @@ export class SixDatepicker {
       this.setupEventListenersForOpenPopup();
     }
   }
-  validateProps() {
-    if (this.value !== null && this.value !== undefined && !(this.value instanceof Date)) {
-      throw new Error('Datepicker no longer supports strings as value. Use a date object instead!');
-    }
-    if (this.min !== null && this.min !== undefined && !(this.min instanceof Date)) {
-      throw new Error('Datepicker no longer supports strings as min. Use a date object instead!');
-    }
-    if (this.max !== null && this.max !== undefined && !(this.max instanceof Date)) {
-      throw new Error('Datepicker no longer supports strings as min. Use a date object instead!');
+  componentDidLoad() {
+    if (this.inputElement != null) {
+      this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+      this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
     }
   }
-  componentDidLoad() {
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
-    this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
+  componentDidRender() {
+    this.adjustPopupPosition();
   }
   renderHeader() {
-    return (h("header", { class: "datepicker-header", part: "header" }, h("div", { class: "datepicker-header__btn prev", onClick: () => this.previousUnit() }, h("svg", { viewBox: "0 5 13 13", width: "14", height: "23" }, h("path", { d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" }))), h("div", { class: "datepicker-header__label" }, this.selectionMode === SelectionMode.DAY && (h("div", { onClick: () => (this.selectionMode = SelectionMode.MONTH) }, h("span", { class: "datepicker-header__label-month" }, this.getMonthStringForIndex(this.pointerDate.month)), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode !== SelectionMode.YEAR && (h("div", { onClick: () => (this.selectionMode = SelectionMode.YEAR) }, h("span", { class: "datepicker-header__label-year" }, this.pointerDate.year), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode === SelectionMode.YEAR && (h("div", null, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2)))), h("div", { class: "datepicker-header__btn next", onClick: () => this.nextUnit() }, h("svg", { viewBox: "5 5 13 13", width: "14", height: "23" }, h("path", { d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z" })))));
+    return (h("header", { class: "datepicker-header", part: "header" }, h("div", { class: "datepicker-header__btn prev", onClick: this.previousUnit }, h("svg", { viewBox: "0 5 13 13", width: "14", height: "23" }, h("path", { d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" }))), h("div", { class: "datepicker-header__label" }, this.selectionMode === SelectionMode.DAY && (h("div", { onClick: () => (this.selectionMode = SelectionMode.MONTH) }, h("span", { class: "datepicker-header__label-month" }, this.getMonthStringForIndex(this.pointerDate.month)), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode !== SelectionMode.YEAR && (h("div", { onClick: () => (this.selectionMode = SelectionMode.YEAR) }, h("span", { class: "datepicker-header__label-year" }, this.pointerDate.year), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode === SelectionMode.YEAR && (h("div", null, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2)))), h("div", { class: "datepicker-header__btn next", onClick: this.nextUnit }, h("svg", { viewBox: "5 5 13 13", width: "14", height: "23" }, h("path", { d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z" })))));
   }
   renderBody() {
     switch (this.selectionMode) {
@@ -431,7 +391,7 @@ export class SixDatepicker {
       case SelectionMode.MONTH:
         return (h(MonthSelection, { locale: i18nDate[this.locale], selectedDate: this.selectedDate, onClickMonthCell: this.onClickMonthCell }));
       case SelectionMode.YEAR:
-        return (h(YearSelection, { selectedDate: this.selectedDate, yearSelection: getYearSelectionAroundYear(this.pointerDate.year), onClickYearCell: this.onClickYearCell }));
+        return (h(YearSelection, { selectedDate: this.selectedDate, yearSelection: rangeAround(this.pointerDate.year, NUMBER_OF_YEARS_SHOWN), onClickYearCell: this.onClickYearCell }));
     }
   }
   renderCustomIcon() {
@@ -451,9 +411,9 @@ export class SixDatepicker {
   render() {
     var _a, _b, _c;
     this.adjustPopupPosition();
-    return (h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, "error-on-blur": this.errorOnBlur, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': !this.value } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+    return (h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, "error-text": this.errorText, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
         datepicker__popup: true,
-        'datepicker__popup--is-up': this.placement ? this.placement === 'top' : this.isDropDownContentUp,
+        'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
         'datepicker__popup--is-inline': this.inline,
       } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
         ':' +
@@ -462,122 +422,16 @@ export class SixDatepicker {
         ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { class: "datepicker__footer" }, h("slot", null))))));
   }
   adjustPopupPosition() {
-    this.adjustPopupForHoisting();
-    this.adjustPopupForSmallScreens();
-  }
-  /*
-   * The position of the hoisted datepicker needs to be correctly calculated since the position changes to fixed.
-   * Thus if the user scrolls or adjusts the screen size we need to recalculate the datepicker position.
-   */
-  moveOpenHoistedPopup() {
-    if (!this.hoist || !this.open) {
-      return;
-    }
-    const popupBoundingClientRect = this.popup.getBoundingClientRect();
-    const popupHeight = popupBoundingClientRect.height;
-    const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-    const inputTop = inputBoundingClientRect.top;
-    const inputHeight = inputBoundingClientRect.height;
-    this.calcIsDropDownContentUp();
-    if (this.isDropDownContentUp) {
-      this.popup.style.top = `${inputTop - popupHeight}px`;
-    }
-    else {
-      this.popup.style.top = `${inputTop + inputHeight}px`;
-    }
-  }
-  /*
-   * For small screens the datepicker popup could be cut-off even though there might still be space within the viewport.
-   * This is because the popup is always aligned with the trigger input field. However in the scenario of small screens
-   * we should reposition the popup to use the space available.
-   */
-  adjustPopupForSmallScreens() {
-    // execute after dropdown has been rendered to make sure the popup reference is correctly set
-    setTimeout(() => {
-      if (!this.popup) {
-        return;
-      }
-      const popupBoundingClientRect = this.popup.getBoundingClientRect();
-      const setPopupAsFixPosition = () => {
-        // apply screen position to fixed popup
-        this.popup.style.position = 'fixed';
-        ['top', 'left', 'width', 'height'].forEach((property) => {
-          this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
-        });
-      };
-      if (popupBoundingClientRect.y < 0 &&
-        window.innerHeight - popupBoundingClientRect.height > 0 &&
-        Math.abs(popupBoundingClientRect.y) <= popupBoundingClientRect.height) {
-        // handle case where popup is cut-off on top but there is still space available
-        setPopupAsFixPosition();
-        this.popup.style.top = '0px';
-      }
-      else if (window.innerHeight < popupBoundingClientRect.y + popupBoundingClientRect.height &&
-        window.innerHeight > popupBoundingClientRect.height &&
-        Math.abs(popupBoundingClientRect.y - window.innerHeight) <= popupBoundingClientRect.height) {
-        // handle case where popup is cut-off at the bottom but there is still space available above
-        // apply screen position to fixed popup
-        setPopupAsFixPosition();
-        this.popup.style.top = `${window.innerHeight - popupBoundingClientRect.height}px`;
-      }
-      if (window.innerWidth < popupBoundingClientRect.x + popupBoundingClientRect.width &&
-        window.innerWidth > popupBoundingClientRect.width &&
-        Math.abs(popupBoundingClientRect.x - window.innerWidth) <= popupBoundingClientRect.width) {
-        // handle case where popup is cut-off to the right
-        setPopupAsFixPosition();
-        this.popup.style.left = `${window.innerWidth - popupBoundingClientRect.width}px`;
-      }
-    }, 0);
-  }
-  /*
-   * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
-   * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
-   */
-  adjustPopupForHoisting() {
-    if (!this.hoist) {
-      return;
-    }
-    // execute after dropdown has been rendered to make sure the popup reference is correctly set
-    setTimeout(() => {
-      if (!this.popup) {
-        return;
-      }
-      // take a snapshot of normally rendered popup
-      const popupBoundingClientRect = this.popup.getBoundingClientRect();
-      // apply screen position to fixed popup
-      this.popup.style.position = 'fixed';
-      ['top', 'left', 'width', 'height'].forEach((property) => {
-        this.popup.style[property] = `${popupBoundingClientRect[property]}px`;
-      });
-      const inputBoundingClientRect = this.inputElement.getBoundingClientRect();
-      const inputTop = inputBoundingClientRect.top;
-      const popupTop = popupBoundingClientRect.top;
-      this.calcIsDropDownContentUp();
-      // check screen position to check whether the popup should be moved above or below the trigger element
-      if (this.isDropDownContentUp && inputTop < popupTop) {
-        //  move popup above input field if datepicker is at bottom of screen
-        this.popup.style.top = `${popupTop - popupBoundingClientRect.height - inputBoundingClientRect.height}px`;
-      }
-    }, 0);
+    adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+    adjustPopupForSmallScreens(this.popup);
   }
   connectedCallback() {
-    this.handleClearClick = this.handleClearClick.bind(this);
+    this.eventListeners.forward('six-datepicker-select', 'change', this.host);
+    this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
   }
   disconnectedCallback() {
     this.eventListeners.removeAll();
   }
-  displayCustomMessage(valid) {
-    if (!this.inputElement) {
-      return;
-    }
-    if (valid) {
-      void this.setCustomValidity('');
-    }
-    else {
-      const message = this.errorText ? this.errorText : 'Invalid date format';
-      void this.setCustomValidity(message);
-    }
-  }
   static getCurrentDateAsPointer() {
     return {
       year: year(now()),
@@ -734,8 +588,8 @@ export class SixDatepicker {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "Date | null",
-          "resolved": "Date",
+          "original": "Date",
+          "resolved": "Date | undefined",
           "references": {
             "Date": {
               "location": "global"
@@ -747,15 +601,14 @@ export class SixDatepicker {
         "docs": {
           "tags": [],
           "text": "The minimum datetime allowed. Value must be a date object"
-        },
-        "defaultValue": "null"
+        }
       },
       "max": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "Date | null",
-          "resolved": "Date",
+          "original": "Date",
+          "resolved": "Date | undefined",
           "references": {
             "Date": {
               "location": "global"
@@ -767,8 +620,7 @@ export class SixDatepicker {
         "docs": {
           "tags": [],
           "text": "The maximum datetime allowed. Value must be a date object"
-        },
-        "defaultValue": "null"
+        }
       },
       "closeOnSelect": {
         "type": "boolean",
@@ -793,11 +645,11 @@ export class SixDatepicker {
         "mutable": false,
         "complexType": {
           "original": "'top' | 'bottom'",
-          "resolved": "\"bottom\" | \"top\"",
+          "resolved": "\"bottom\" | \"top\" | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The enforced placement of the dropdown panel."
@@ -835,17 +687,18 @@ export class SixDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to true to make the input a required field."
+          "text": "Set to true to show an asterisk beneath the label."
         },
         "attribute": "required",
-        "reflect": true
+        "reflect": false,
+        "defaultValue": "false"
       },
       "defaultDate": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | null",
-          "resolved": "string",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -861,8 +714,8 @@ export class SixDatepicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | null",
-          "resolved": "string",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -878,8 +731,8 @@ export class SixDatepicker {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Date | null",
-          "resolved": "Date",
+          "original": "Date",
+          "resolved": "Date | undefined",
           "references": {
             "Date": {
               "location": "global"
@@ -891,70 +744,45 @@ export class SixDatepicker {
         "docs": {
           "tags": [],
           "text": "The value of the form field, which accepts a date object."
-        },
-        "defaultValue": "null"
-      },
-      "containingElement": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
         }
       },
-      "dateFormat": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "SixDateFormats",
-          "resolved": "SixDateFormats.DDMMYYYY_DASH | SixDateFormats.DDMMYYYY_DASH_TIME | SixDateFormats.DDMMYYYY_SLASH | SixDateFormats.DDMMYYYY_SLASH_TIME | SixDateFormats.DDMMYYY_DOT | SixDateFormats.DDMMYYY_DOT_TIME | SixDateFormats.DDMMYY_DASH | SixDateFormats.DDMMYY_DASH_TIME | SixDateFormats.DDMMYY_DOT | SixDateFormats.DDMMYY_DOT_TIME | SixDateFormats.DDMMYY_SLASH | SixDateFormats.DDMMYY_SLASH_TIME | SixDateFormats.YYMMDD_DASH | SixDateFormats.YYMMDD_DASH_TIME | SixDateFormats.YYMMDD_SLASH | SixDateFormats.YYMMDD_SLASH_TIME | SixDateFormats.YYYYMMDD_DASH | SixDateFormats.YYYYMMDD_DASH_TIME | SixDateFormats.YYYYMMDD_SLASH | SixDateFormats.YYYYMMDD_SLASH_TIME",
-          "references": {
-            "SixDateFormats": {
-              "location": "import",
-              "path": "./six-date-formats"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define the dateFormat. Valid formats are:\n'dd.mm.yyyy'\n'yyyy-mm-dd'\n'dd-mm-yyyy'\n'dd/mm/yyyy'\n'yyyy/mm/dd'\n'dd.mm.yy'\n'yy-mm-dd'\n'dd-mm-yy'\n'dd/mm/yy'\n'yy/mm/dd'"
+          "text": "The label text."
         },
-        "attribute": "date-format",
+        "attribute": "label",
         "reflect": false,
-        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
+        "defaultValue": "''"
       },
-      "debounce": {
-        "type": "number",
+      "errorText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
+          "text": "The error message shown, if `invalid` is set to true."
         },
-        "attribute": "debounce",
+        "attribute": "error-text",
         "reflect": false,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+        "defaultValue": "''"
       },
-      "errorOnBlur": {
+      "invalid": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -966,47 +794,71 @@ export class SixDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to display the error text on blur and not when typing"
+          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
         },
-        "attribute": "error-on-blur",
-        "reflect": false,
+        "attribute": "invalid",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "errorText": {
+      "containingElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
+        }
+      },
+      "dateFormat": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "SixDateFormats",
+          "resolved": "SixDateFormats.DDMMYYYY_DASH | SixDateFormats.DDMMYYYY_DASH_TIME | SixDateFormats.DDMMYYYY_SLASH | SixDateFormats.DDMMYYYY_SLASH_TIME | SixDateFormats.DDMMYYY_DOT | SixDateFormats.DDMMYYY_DOT_TIME | SixDateFormats.DDMMYY_DASH | SixDateFormats.DDMMYY_DASH_TIME | SixDateFormats.DDMMYY_DOT | SixDateFormats.DDMMYY_DOT_TIME | SixDateFormats.DDMMYY_SLASH | SixDateFormats.DDMMYY_SLASH_TIME | SixDateFormats.YYMMDD_DASH | SixDateFormats.YYMMDD_DASH_TIME | SixDateFormats.YYMMDD_SLASH | SixDateFormats.YYMMDD_SLASH_TIME | SixDateFormats.YYYYMMDD_DASH | SixDateFormats.YYYYMMDD_DASH_TIME | SixDateFormats.YYYYMMDD_SLASH | SixDateFormats.YYYYMMDD_SLASH_TIME",
+          "references": {
+            "SixDateFormats": {
+              "location": "import",
+              "path": "./six-date-formats"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The input's error text. Alternatively, you can use the error-text slot."
+          "text": "Define the dateFormat. Valid formats are:\n'dd.mm.yyyy'\n'yyyy-mm-dd'\n'dd-mm-yyyy'\n'dd/mm/yyyy'\n'yyyy/mm/dd'\n'dd.mm.yy'\n'yy-mm-dd'\n'dd-mm-yy'\n'dd/mm/yy'\n'yy/mm/dd'"
         },
-        "attribute": "error-text",
+        "attribute": "date-format",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
       },
-      "label": {
-        "type": "string",
+      "debounce": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The input's label. Alternatively, you can use the label slot."
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
         },
-        "attribute": "label",
+        "attribute": "debounce",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
       },
       "name": {
         "type": "string",
@@ -1102,7 +954,7 @@ export class SixDatepicker {
         },
         "complexType": {
           "original": "SixDatepickerSelectPayload",
-          "resolved": "Date",
+          "resolved": "Date | null | undefined",
           "references": {
             "SixDatepickerSelectPayload": {
               "location": "local",
@@ -1142,7 +994,7 @@ export class SixDatepicker {
         },
         "complexType": {
           "original": "SixDatepickerSelectPayload",
-          "resolved": "Date",
+          "resolved": "Date | null | undefined",
           "references": {
             "SixDatepickerSelectPayload": {
               "location": "local",
@@ -1154,41 +1006,9 @@ export class SixDatepicker {
   }
   static get methods() {
     return {
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-          "tags": []
-        }
-      },
-      "checkValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Checks for validity.",
-          "tags": []
-        }
-      },
-      "setCustomValidity": {
+      "setFocus": {
         "complexType": {
-          "signature": "(message: string) => Promise<void>",
+          "signature": "(options?: FocusOptions) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -1196,34 +1016,21 @@ export class SixDatepicker {
           "references": {
             "Promise": {
               "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-          "tags": []
-        }
-      },
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
+            },
+            "FocusOptions": {
               "location": "global"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Resets the formcontrol",
+          "text": "Sets focus on the datepickers input.",
           "tags": []
         }
       },
       "select": {
         "complexType": {
-          "signature": "(datestring: string) => Promise<void>",
+          "signature": "(datestring?: string) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -1247,6 +1054,9 @@ export class SixDatepicker {
     return [{
         "propName": "debounce",
         "methodName": "debounceChanged"
+      }, {
+        "propName": "invalid",
+        "methodName": "invalidChanged"
       }, {
         "propName": "value",
         "methodName": "valueChanged"