@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/components/six-datepicker.js

@@ -1,12 +1,17 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { i as isNil, a as isNumber, b as isDate, c as isString, S as SixTimePropertyName, d as defineCustomElement$2 } from './six-timepicker2.js';
 import { E as EventListeners } from './event-listeners.js';
 import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control.js';
 import { h as hasSlot } from './slot.js';
+import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens, d as defineCustomElement$2 } from './six-timepicker2.js';
 import { d as defineCustomElement$5 } from './six-icon2.js';
 import { d as defineCustomElement$4 } from './six-input2.js';
 import { d as defineCustomElement$3 } from './six-item-picker2.js';
 
+const isString = (value) => typeof value === 'string';
+// only use '==' instead of '===' to also catch undefined and void
+const isNil = (value) => value == null;
+
+/* eslint-disable */
 const i18nDate = {
   en: {
     months: [
@@ -118,20 +123,12 @@ const i18nDate = {
  * ```
  */
 const now = () => new Date();
+const removeTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 /**
  * Returns `true` if the given date is valid
  */
 const isValidDate = (value) => {
-  if (isNil(value)) {
-    return false;
-  }
-  if (isNumber(value)) {
-    return false;
-  }
-  if (isDate(value)) {
-    return !isNaN(value.getTime());
-  }
-  return new Date(value).toString() !== 'Invalid Date';
+  return value instanceof Date && !isNaN(value.getTime()) && new Date(value).toString() !== 'Invalid Date';
 };
 /**
  * Returns the year number of the given date
@@ -277,7 +274,7 @@ const formatNumber = (value, len) => {
   return num;
 };
 const formatDate = (date, format) => {
-  if (!date) {
+  if (date == null) {
     return '';
   }
   let output = '';
@@ -465,14 +462,12 @@ const toDate = (dirtyDateString, format) => {
   try {
     const { backupDate = new Date() } = {};
     const { year, month, day, hour, minute, second, date } = getDateParts(dirtyDateString, format);
-    if (date) {
+    if (date != null) {
       return date;
     }
     const inputArray = [year, month, day, hour, minute, second];
-    let parsedDate;
     const result = getFullInputArray(inputArray, backupDate);
-    parsedDate = createDate(...result);
-    return parsedDate;
+    return createDate(...result);
   }
   catch (e) {
     return new Date(NaN);
@@ -506,6 +501,23 @@ const createCalendarGrid = (calendarGridArguments) => {
   } while (isSameMonth(new Date(pointerDate.year, pointerDate.month, pointerDate.day), dayDatePointer));
   return calendar;
 };
+/**
+ * Returns a range of numbers around the given number grouped into buckets of 5.
+ * @param number the given number around which you want to get the other numbers
+ * @param range range of numbers to include in the result
+ */
+function rangeAround(number, range) {
+  const itemsPerGroup = 5;
+  return [...Array(range).keys()]
+    .map((n) => n + number - Math.floor(range / 2))
+    .reduce((curr, item, index) => {
+    if (index % itemsPerGroup === 0) {
+      curr.push([]);
+    }
+    curr[curr.length - 1].push(item);
+    return curr;
+  }, []);
+}
 
 var SixDateFormats;
 (function (SixDateFormats) {
@@ -531,21 +543,22 @@ var SixDateFormats;
   SixDateFormats["YYMMDD_SLASH_TIME"] = "yy/mm/dd hh:MM:ss";
 })(SixDateFormats || (SixDateFormats = {}));
 
-const MonthSelection = ({ locale, selectedDate, onClickMonthCell }) => {
+const MonthSelection = (monthSelectionParams) => {
+  const locale = monthSelectionParams.locale;
   const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
-  const isSelectedMonth = (value) => (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) === locale.monthsShort.findIndex((m) => m === value);
+  const isSelectedMonth = (value) => { var _a; return ((_a = monthSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getMonth()) === locale.monthsShort.findIndex((m) => m === value); };
   return (h("table", { class: "datepicker-table", part: "month-selection" },
-    h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => onClickMonthCell(month), class: {
+    h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => monthSelectionParams.onClickMonthCell(month), class: {
         'datepicker-table__cell': true,
         'datepicker-table__cell--is-today': isToday(month),
         'datepicker-table__cell--is-selected': isSelectedMonth(month),
       } }, month)))))))));
 };
 
-const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
+const DaySelection = (daySelectionParams) => {
   return (h("table", { class: "datepicker-table", part: "day-selection" },
-    h("thead", { part: "weekday-header" }, locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))),
-    h("tbody", null, calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => onClickDateCell(cell), class: {
+    h("thead", { part: "weekday-header" }, daySelectionParams.locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))),
+    h("tbody", null, daySelectionParams.calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => daySelectionParams.onClickDateCell(cell), class: {
         'datepicker-table__cell': true,
         'datepicker-table__cell--is-today': cell.isToday,
         'datepicker-table__cell--is-selected': cell.isSelected,
@@ -555,13 +568,16 @@ const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
       } }, cell.label)))))))));
 };
 
-const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {
+const YearSelection = (yearSelectionParams) => {
   return (h("table", { class: "datepicker-table", part: "year-selection" },
-    h("tbody", null, yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => (h("td", { onClick: () => onClickYearCell(year), class: {
-        'datepicker-table__cell': true,
-        'datepicker-table__cell--is-today': now().getFullYear() === year,
-        'datepicker-table__cell--is-selected': (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === year,
-      } }, year)))))))));
+    h("tbody", null, yearSelectionParams.yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => {
+      var _a;
+      return (h("td", { onClick: () => yearSelectionParams.onClickYearCell(year), class: {
+          'datepicker-table__cell': true,
+          'datepicker-table__cell--is-today': now().getFullYear() === year,
+          'datepicker-table__cell--is-selected': ((_a = yearSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getFullYear()) === year,
+        } }, year));
+    })))))));
 };
 
 const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
@@ -574,18 +590,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;
-  }, []);
-};
 const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker extends HTMLElement {
   constructor() {
     super();
@@ -595,35 +599,69 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     this.sixClear = createEvent(this, "six-datepicker-clear", 7);
     this.sixBlur = createEvent(this, "six-datepicker-blur", 7);
     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();
     };
@@ -642,6 +680,10 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       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;
@@ -650,38 +692,30 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       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;
+        this.sixSelect.emit(this.value);
       }
       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;
       }
@@ -697,21 +731,21 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     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';
@@ -720,29 +754,35 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
   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.sixSelect.emit(this.value);
     }
     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;
   }
@@ -750,32 +790,10 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     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({
@@ -789,30 +807,15 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       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 });
   }
@@ -834,17 +837,6 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       };
     }
   }
-  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 };
@@ -876,11 +868,6 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     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;
@@ -915,15 +902,14 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     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) {
@@ -932,17 +918,18 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       return;
     }
     this.value = newDate;
+    this.sixSelect.emit(this.value);
   }
   /**
    * 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();
@@ -951,8 +938,6 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     }
   }
   componentWillLoad() {
-    this.validateProps();
-    this.defaultValue = this.value;
     this.selectedDate = this.value;
     this.updatePointerDates();
     this.updateValue(this.value);
@@ -963,23 +948,17 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       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) {
@@ -988,7 +967,7 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
       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() {
@@ -1008,9 +987,9 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
   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()) +
         ':' +
@@ -1019,122 +998,16 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
         ((_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()),
@@ -1148,6 +1021,7 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
   get host() { return this; }
   static get watchers() { return {
     "debounce": ["debounceChanged"],
+    "invalid": ["invalidChanged"],
     "value": ["valueChanged"]
   }; }
   static get style() { return sixDatepickerCss; }
@@ -1164,16 +1038,16 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     "closeOnSelect": [4, "close-on-select"],
     "placement": [1],
     "size": [1],
-    "required": [516],
+    "required": [4],
     "defaultDate": [1, "default-date"],
     "placeholder": [1],
     "value": [1040],
+    "label": [1],
+    "errorText": [1, "error-text"],
+    "invalid": [516],
     "containingElement": [16],
     "dateFormat": [1, "date-format"],
     "debounce": [2],
-    "errorOnBlur": [4, "error-on-blur"],
-    "errorText": [1, "error-text"],
-    "label": [1],
     "name": [513],
     "clearable": [4],
     "iconPosition": [1, "icon-position"],
@@ -1181,10 +1055,7 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     "pointerDate": [32],
     "selectionMode": [32],
     "isDropDownContentUp": [32],
-    "reportValidity": [64],
-    "checkValidity": [64],
-    "setCustomValidity": [64],
-    "reset": [64],
+    "setFocus": [64],
     "select": [64]
   }, [[9, "resize", "resizeHandler"], [9, "scroll", "scrollHandler"]]]);
 function defineCustomElement$1() {