@six-group/ui-library 0.0.0-insider.fa8b667 → 0.0.0-insider.faf050a

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

@@ -12,1084 +12,1095 @@ const NUMBER_OF_YEARS_SHOWN = 25;
 const MIN_POPUP_HEIGHT = 400;
 var SelectionMode;
 (function (SelectionMode) {
-  SelectionMode["DAY"] = "day";
-  SelectionMode["MONTH"] = "month";
-  SelectionMode["YEAR"] = "year";
+    SelectionMode["DAY"] = "day";
+    SelectionMode["MONTH"] = "month";
+    SelectionMode["YEAR"] = "year";
 })(SelectionMode || (SelectionMode = {}));
 /**
  * @since 1.0
  * @status stable
  *
  * @slot - Used to define a footer for the date picker.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
  */
 export class SixDatepicker {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    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 && keyboardEvent.key === 'Escape') {
-        keyboardEvent.stopPropagation();
-        this.closePopup();
-        void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
-      }
-      // Handle tabbing
-      if (keyboardEvent.key === 'Tab') {
-        this.closePopup();
-      }
-    };
-    this.handleDocumentMouseDown = (event) => {
-      // 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 != null) {
-        newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
-      }
-      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();
-    };
-    this.onClickDateCell = (cell) => {
-      if (!cell.isDisabled) {
-        void this.select(cell.dateString);
-      }
-    };
-    this.onClickMonthCell = (selectedMonth) => {
-      const month = i18nDate[this.locale].monthsShort.findIndex((monthShort) => monthShort === selectedMonth);
-      this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
-      this.selectionMode = SelectionMode.DAY;
-    };
-    this.onClickYearCell = (year) => {
-      this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
-      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;
-      }
-      const inputValueDate = toDate(inputValue, this.dateFormat);
-      if (inputValueDate === undefined) {
-        return;
-      }
-      this.updateIfChanged(inputValueDate);
-      const datesOnly = inputValue.replace(/[^\d]/g, '');
-      if (datesOnly.length >= 6) {
-        const date = toDate(inputValue, 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);
-        }
-      }
-    };
-    this.handleOnBlur = (event) => {
-      var _a, _b;
-      // clear the value if the user deleted the date
-      if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
+    constructor() {
+        this.eventListeners = new EventListeners();
+        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 && keyboardEvent.key === 'Escape') {
+                keyboardEvent.stopPropagation();
+                this.closePopup();
+                void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                this.closePopup();
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // 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 != null) {
+                newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
+            }
+            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();
+        };
+        this.onClickDateCell = (cell) => {
+            if (!cell.isDisabled) {
+                void this.select(cell.dateString);
+            }
+        };
+        this.onClickMonthCell = (selectedMonth) => {
+            const month = i18nDate[this.locale].monthsShort.findIndex((monthShort) => monthShort === selectedMonth);
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.onClickYearCell = (year) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
+            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;
+            }
+            const inputValueDate = toDate(inputValue, this.dateFormat);
+            if (inputValueDate === undefined) {
+                return;
+            }
+            this.updateIfChanged(inputValueDate);
+            const datesOnly = inputValue.replace(/[^\d]/g, '');
+            if (datesOnly.length >= 6) {
+                const date = toDate(inputValue, 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);
+                }
+            }
+        };
+        this.handleOnBlur = (event) => {
+            var _a, _b;
+            // clear the value if the user deleted the date
+            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 = (_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 (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
+                // properly format date if necessary
+                this.inputElement.value = formattedDate;
+            }
+            this.sixBlur.emit(this.value);
+        };
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        this.type = 'date';
+        this.locale = 'en';
+        this.open = false;
+        this.inline = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.allowedDates = () => true;
+        this.min = undefined;
+        this.max = undefined;
+        this.closeOnSelect = this.type === 'date';
+        this.placement = undefined;
+        this.size = 'medium';
+        this.required = false;
+        this.defaultDate = undefined;
+        this.placeholder = undefined;
         this.value = undefined;
-        this.sixSelect.emit(this.value);
-      }
-      event.stopPropagation();
-      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 (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
-        // properly format date if necessary
-        this.inputElement.value = formattedDate;
-      }
-      this.sixBlur.emit(this.value);
-    };
-    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
-    this.selectionMode = SelectionMode.DAY;
-    this.isDropDownContentUp = false;
-    this.type = 'date';
-    this.locale = 'en';
-    this.open = false;
-    this.inline = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.allowedDates = () => true;
-    this.min = undefined;
-    this.max = undefined;
-    this.closeOnSelect = this.type === 'date';
-    this.placement = undefined;
-    this.size = 'medium';
-    this.required = false;
-    this.defaultDate = undefined;
-    this.placeholder = undefined;
-    this.value = undefined;
-    this.label = '';
-    this.errorText = '';
-    this.invalid = false;
-    this.containingElement = undefined;
-    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.name = '';
-    this.clearable = false;
-    this.iconPosition = 'left';
-    this.hoist = false;
-  }
-  debounceChanged() {
-    this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
-  }
-  invalidChanged(invalid) {
-    if (this.inputElement) {
-      this.inputElement.invalid = invalid;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.containingElement = undefined;
+        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this.name = '';
+        this.clearable = false;
+        this.iconPosition = 'left';
+        this.hoist = false;
     }
-  }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    if (this.value != null && !isValidDate(this.value)) {
-      console.warn('invalid date value: ', this.value);
-      this.value = undefined;
-      this.sixSelect.emit(this.value);
+    debounceChanged() {
+        this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
     }
-    this.selectedDate = this.value;
-    this.updatePointerDates();
-  }
-  async resizeHandler() {
-    this.updateDropdownDirection();
-    this.moveOpenHoistedPopup();
-    this.adjustPopupPosition();
-  }
-  async scrollHandler() {
-    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;
-  }
-  get firstDateOfBox() {
-    const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
-    return getFirstDayOfTheWeek(date);
-  }
-  /** 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({
-      firstDateOfBox: this.firstDateOfBox,
-      allowedDates: this.allowedDates,
-      dateFormat: this.dateFormat,
-      locale: this.locale,
-      selectedDate: this.selectedDate,
-      minDate: this.min,
-      maxDate: this.max,
-      pointerDate: this.pointerDate,
-    });
-  }
-  updateDropdownDirection() {
-    if (this.inputElement == null || this.wrapper == null) {
-      return;
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        if (this.value != null && !isValidDate(this.value)) {
+            console.warn('invalid date value: ', this.value);
+            this.value = undefined;
+            this.sixSelect.emit(this.value);
+        }
+        this.selectedDate = this.value;
+        this.updatePointerDates();
     }
-    this.isDropDownContentUp = calcIsDropDownContentUp(this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
-  }
-  getMonthStringForIndex(index) {
-    return i18nDate[this.locale].months[index];
-  }
-  previousYear() {
-    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
-  }
-  previousYearGroup() {
-    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
-  }
-  previousMonth() {
-    if (this.pointerDate.month === 0) {
-      this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1, hours: 0, minutes: 0, seconds: 0 };
+    async resizeHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+        this.adjustPopupPosition();
     }
-    else {
-      this.pointerDate = {
-        year: this.pointerDate.year,
-        month: this.pointerDate.month - 1,
-        day: 1,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-      };
+    async scrollHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
     }
-  }
-  nextMonth() {
-    if (this.pointerDate.month === 11) {
-      this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1, hours: 0, minutes: 0, seconds: 0 };
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
     }
-    else {
-      this.pointerDate = {
-        year: this.pointerDate.year,
-        month: this.pointerDate.month + 1,
-        day: 1,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-      };
+    get container() {
+        return this.containingElement || this.host;
     }
-  }
-  nextYear() {
-    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
-  }
-  nextYearGroup() {
-    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
-  }
-  openCalendar() {
-    if (!this.open && !this.disabled) {
-      this.open = true;
-      this.setupEventListenersForOpenPopup();
+    get firstDateOfBox() {
+        const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
+        return getFirstDayOfTheWeek(date);
     }
-  }
-  setupEventListenersForOpenPopup() {
-    this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
-  }
-  closePopup() {
-    if (this.inline) {
-      return;
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
     }
-    this.open = false;
-    this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
-    this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
-    this.selectionMode = SelectionMode.DAY;
-  }
-  updatePointerDates() {
-    const date = this.getPointerDate();
-    if (this.differsFromPointerDate(date)) {
-      this.pointerDate = {
-        year: year(date),
-        month: month(date),
-        day: day(date),
-        hours: hours(date),
-        minutes: minutes(date),
-        seconds: seconds(date),
-      };
+    get calendarGrid() {
+        return createCalendarGrid({
+            firstDateOfBox: this.firstDateOfBox,
+            allowedDates: this.allowedDates,
+            dateFormat: this.dateFormat,
+            locale: this.locale,
+            selectedDate: this.selectedDate,
+            minDate: this.min,
+            maxDate: this.max,
+            pointerDate: this.pointerDate,
+        });
     }
-  }
-  differsFromPointerDate(date) {
-    return (this.pointerDate.day !== day(date) ||
-      this.pointerDate.month !== month(date) ||
-      this.pointerDate.year !== year(date) ||
-      this.pointerDate.hours !== hours(date) ||
-      this.pointerDate.minutes !== minutes(date) ||
-      this.pointerDate.seconds !== seconds(date));
-  }
-  getPointerDate() {
-    if (this.selectedDate !== undefined && this.selectedDate !== null) {
-      return this.selectedDate;
+    updateDropdownDirection() {
+        if (this.inputElement == null || this.wrapper == null) {
+            return;
+        }
+        this.isDropDownContentUp = calcIsDropDownContentUp(this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
     }
-    if (this.defaultDate == null) {
-      return this.type === 'date' ? removeTime(now()) : now();
+    getMonthStringForIndex(index) {
+        return i18nDate[this.locale].months[index];
     }
-    else {
-      return toDate(this.defaultDate, this.dateFormat);
+    previousYear() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
     }
-  }
-  updateValue(newDate) {
-    this.updateIfChanged(newDate);
-  }
-  updateIfChanged(newDate) {
-    var _a;
-    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
-      return;
+    previousYearGroup() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
     }
-    this.value = newDate;
-    this.sixSelect.emit(this.value);
-  }
-  /**
-   * Selects an option
-   */
-  async select(datestring) {
-    if (datestring == null) {
-      this.updateValue(undefined);
+    previousMonth() {
+        if (this.pointerDate.month === 0) {
+            this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1, hours: 0, minutes: 0, seconds: 0 };
+        }
+        else {
+            this.pointerDate = {
+                year: this.pointerDate.year,
+                month: this.pointerDate.month - 1,
+                day: 1,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+            };
+        }
     }
-    else {
-      const newDate = toDate(datestring, this.dateFormat);
-      newDate === null || newDate === void 0 ? void 0 : newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
-      this.updateValue(newDate);
+    nextMonth() {
+        if (this.pointerDate.month === 11) {
+            this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1, hours: 0, minutes: 0, seconds: 0 };
+        }
+        else {
+            this.pointerDate = {
+                year: this.pointerDate.year,
+                month: this.pointerDate.month + 1,
+                day: 1,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+            };
+        }
     }
-    this.updatePointerDates();
-    if (this.closeOnSelect) {
-      this.closePopup();
+    nextYear() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
     }
-  }
-  componentWillLoad() {
-    this.selectedDate = this.value;
-    this.updatePointerDates();
-    this.updateValue(this.value);
-    if (this.inline) {
-      this.open = true;
+    nextYearGroup() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
     }
-    if (this.open) {
-      this.setupEventListenersForOpenPopup();
+    openCalendar() {
+        if (!this.open && !this.disabled) {
+            this.open = true;
+            this.setupEventListenersForOpenPopup();
+        }
     }
-  }
-  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);
+    setupEventListenersForOpenPopup() {
+        this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
     }
-  }
-  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" })))));
-  }
-  renderBody() {
-    switch (this.selectionMode) {
-      case SelectionMode.DAY:
-        return (h(DaySelection, { locale: i18nDate[this.locale], calendarGrid: this.calendarGrid, onClickDateCell: this.onClickDateCell }));
-      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: rangeAround(this.pointerDate.year, NUMBER_OF_YEARS_SHOWN), onClickYearCell: this.onClickYearCell }));
+    closePopup() {
+        if (this.inline) {
+            return;
+        }
+        this.open = false;
+        this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);
+        this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
+        this.selectionMode = SelectionMode.DAY;
     }
-  }
-  renderCustomIcon() {
-    const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "today"));
-    return (h("span", { slot: "prefix", part: "icon", class: {
-        prefix: true,
-        'prefix--right': this.iconPosition === 'right',
-      } }, icon));
-  }
-  renderClearable() {
-    return (this.clearable && (h("button", { slot: "suffix", class: {
-        'datepicker-clear': true,
-        'datepicker-clear--right': this.iconPosition === 'left',
-        'datepicker-clear--left': this.iconPosition === 'right',
-      }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
-  }
-  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, 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 != 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()) +
-        ':' +
-        ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
-        ':' +
-        ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { class: "datepicker__footer" }, h("slot", null))))));
-  }
-  adjustPopupPosition() {
-    adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
-    adjustPopupForSmallScreens(this.popup);
-  }
-  connectedCallback() {
-    this.eventListeners.forward('six-datepicker-select', 'change', this.host);
-    this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  static getCurrentDateAsPointer() {
-    return {
-      year: year(now()),
-      month: month(now()),
-      day: day(now()),
-      hours: hours(now()),
-      minutes: minutes(now()),
-      seconds: seconds(now()),
-    };
-  }
-  static get is() { return "six-datepicker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-datepicker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-datepicker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'date' | 'date-time'",
-          "resolved": "\"date\" | \"date-time\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the type."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'date'"
-      },
-      "locale": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'en' | 'de' | 'fr' | 'it'",
-          "resolved": "\"de\" | \"en\" | \"fr\" | \"it\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The language used to render the weekdays and months."
-        },
-        "attribute": "locale",
-        "reflect": false,
-        "defaultValue": "'en'"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether or not the calendar should be shown as an inline (always open) component"
-        },
-        "attribute": "inline",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true` the user can only select a date via the component in the popup, but not directly edit the input field."
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true` the component is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "allowedDates": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(date: Date) => boolean",
-          "resolved": "(date: Date) => boolean",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Callback to determine which date in the datepicker should be selectable.\nthe callback function will get a datestring as an argument, e.g. '2021-07-04'\n\nUsage e.g.:\nconst datepicker = document.getElementById('allowed-date-picker');\ndatepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;"
-        },
-        "defaultValue": "() => true"
-      },
-      "min": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date | undefined",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The minimum datetime allowed. Value must be a date object"
+    updatePointerDates() {
+        const date = this.getPointerDate();
+        if (this.differsFromPointerDate(date)) {
+            this.pointerDate = {
+                year: year(date),
+                month: month(date),
+                day: day(date),
+                hours: hours(date),
+                minutes: minutes(date),
+                seconds: seconds(date),
+            };
         }
-      },
-      "max": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date | undefined",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The maximum datetime allowed. Value must be a date object"
+    }
+    differsFromPointerDate(date) {
+        return (this.pointerDate.day !== day(date) ||
+            this.pointerDate.month !== month(date) ||
+            this.pointerDate.year !== year(date) ||
+            this.pointerDate.hours !== hours(date) ||
+            this.pointerDate.minutes !== minutes(date) ||
+            this.pointerDate.seconds !== seconds(date));
+    }
+    getPointerDate() {
+        if (this.selectedDate !== undefined && this.selectedDate !== null) {
+            return this.selectedDate;
         }
-      },
-      "closeOnSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Closes the datepicker dropdown after selection"
-        },
-        "attribute": "close-on-select",
-        "reflect": false,
-        "defaultValue": "this.type === 'date'"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'bottom'",
-          "resolved": "\"bottom\" | \"top\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The enforced placement of the dropdown panel."
-        },
-        "attribute": "placement",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Datepicker size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to show an asterisk beneath the label."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "defaultDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD)."
-        },
-        "attribute": "default-date",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder defines what text to be shown on the input element"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "value": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date | undefined",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The value of the form field, which accepts a date object."
+        if (this.defaultDate == null) {
+            return this.type === 'date' ? removeTime(now()) : now();
         }
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label text."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "errorText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The error message shown, if `invalid` is set to true."
-        },
-        "attribute": "error-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "containingElement": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
+        else {
+            return toDate(this.defaultDate, this.dateFormat);
         }
-      },
-      "dateFormat": {
-        "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",
-              "id": "src/components/six-datepicker/six-date-formats.tsx::SixDateFormats"
-            }
-          }
-        },
-        "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'"
-        },
-        "attribute": "date-format",
-        "reflect": false,
-        "defaultValue": "SixDateFormats.DDMMYYY_DOT"
-      },
-      "debounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "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."
-        },
-        "attribute": "debounce",
-        "reflect": false,
-        "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The input's name attribute."
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to add a clear button when the input is populated."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "iconPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the position of the icon"
-        },
-        "attribute": "icon-position",
-        "reflect": false,
-        "defaultValue": "'left'"
-      },
-      "hoist": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
-        },
-        "attribute": "hoist",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "pointerDate": {},
-      "selectionMode": {},
-      "isDropDownContentUp": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixSelect",
-        "name": "six-datepicker-select",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a option got selected."
-        },
-        "complexType": {
-          "original": "SixDatepickerSelectPayload",
-          "resolved": "Date | null | undefined",
-          "references": {
-            "SixDatepickerSelectPayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
-              "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
-            }
-          }
+    }
+    updateValue(newDate) {
+        this.updateIfChanged(newDate);
+    }
+    updateIfChanged(newDate) {
+        var _a;
+        if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+            return;
         }
-      }, {
-        "method": "sixClear",
-        "name": "six-datepicker-clear",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the clear button is activated."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+        this.value = newDate;
+        this.sixSelect.emit(this.value);
+    }
+    /**
+     * Selects an option
+     */
+    async select(datestring) {
+        if (datestring == null) {
+            this.updateValue(undefined);
         }
-      }, {
-        "method": "sixBlur",
-        "name": "six-datepicker-blur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a option got selected."
-        },
-        "complexType": {
-          "original": "SixDatepickerSelectPayload",
-          "resolved": "Date | null | undefined",
-          "references": {
-            "SixDatepickerSelectPayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
-              "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
-            }
-          }
+        else {
+            const newDate = toDate(datestring, this.dateFormat);
+            newDate === null || newDate === void 0 ? void 0 : newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
+            this.updateValue(newDate);
+        }
+        this.updatePointerDates();
+        if (this.closeOnSelect) {
+            this.closePopup();
+        }
+    }
+    componentWillLoad() {
+        this.selectedDate = this.value;
+        this.updatePointerDates();
+        this.updateValue(this.value);
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.setupEventListenersForOpenPopup();
+        }
+    }
+    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);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    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" })))));
+    }
+    renderBody() {
+        switch (this.selectionMode) {
+            case SelectionMode.DAY:
+                return (h(DaySelection, { locale: i18nDate[this.locale], calendarGrid: this.calendarGrid, onClickDateCell: this.onClickDateCell }));
+            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: rangeAround(this.pointerDate.year, NUMBER_OF_YEARS_SHOWN), onClickYearCell: this.onClickYearCell }));
+        }
+    }
+    renderCustomIcon() {
+        const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "today"));
+        return (h("span", { slot: "prefix", part: "icon", class: {
+                prefix: true,
+                'prefix--right': this.iconPosition === 'right',
+            } }, icon));
+    }
+    renderClearable() {
+        return (this.clearable && (h("button", { slot: "suffix", class: {
+                'datepicker-clear': true,
+                'datepicker-clear--right': this.iconPosition === 'left',
+                'datepicker-clear--left': this.iconPosition === 'right',
+            }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
+    }
+    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, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, 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, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+                datepicker__popup: true,
+                '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()) +
+                ':' +
+                ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
+                ':' +
+                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { class: "datepicker__footer" }, h("slot", null))))));
+    }
+    adjustPopupPosition() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+        adjustPopupForSmallScreens(this.popup);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-datepicker-select', 'change', this.host);
+        this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    static getCurrentDateAsPointer() {
+        return {
+            year: year(now()),
+            month: month(now()),
+            day: day(now()),
+            hours: hours(now()),
+            minutes: minutes(now()),
+            seconds: seconds(now()),
+        };
+    }
+    static get is() { return "six-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'date' | 'date-time'",
+                    "resolved": "\"date\" | \"date-time\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the type."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'date'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'en' | 'de' | 'fr' | 'it'",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | \"it\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language used to render the weekdays and months."
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether or not the calendar should be shown as an inline (always open) component"
+                },
+                "attribute": "inline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the user can only select a date via the component in the popup, but not directly edit the input field."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the component is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "allowedDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to determine which date in the datepicker should be selectable.\nthe callback function will get a datestring as an argument, e.g. '2021-07-04'\n\nUsage e.g.:\nconst datepicker = document.getElementById('allowed-date-picker');\ndatepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;"
+                },
+                "defaultValue": "() => true"
+            },
+            "min": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum datetime allowed. Value must be a date object"
+                }
+            },
+            "max": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum datetime allowed. Value must be a date object"
+                }
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Closes the datepicker dropdown after selection"
+                },
+                "attribute": "close-on-select",
+                "reflect": false,
+                "defaultValue": "this.type === 'date'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The enforced placement of the dropdown panel."
+                },
+                "attribute": "placement",
+                "reflect": false
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Datepicker size."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "defaultDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD)."
+                },
+                "attribute": "default-date",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder defines what text to be shown on the input element"
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the form field, which accepts a date object."
+                }
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "containingElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "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": "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",
+                            "id": "src/components/six-datepicker/six-date-formats.tsx::SixDateFormats"
+                        }
+                    }
+                },
+                "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'"
+                },
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "SixDateFormats.DDMMYYY_DOT"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "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."
+                },
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's name attribute."
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to add a clear button when the input is populated."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the position of the icon"
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "hoist": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+                },
+                "attribute": "hoist",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the datepickers input.",
-          "tags": []
-        }
-      },
-      "select": {
-        "complexType": {
-          "signature": "(datestring?: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "pointerDate": {},
+            "selectionMode": {},
+            "isDropDownContentUp": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixSelect",
+                "name": "six-datepicker-select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a option got selected."
+                },
+                "complexType": {
+                    "original": "SixDatepickerSelectPayload",
+                    "resolved": "Date | null | undefined",
+                    "references": {
+                        "SixDatepickerSelectPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
+                            "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixClear",
+                "name": "six-datepicker-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button is activated."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixBlur",
+                "name": "six-datepicker-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a option got selected."
+                },
+                "complexType": {
+                    "original": "SixDatepickerSelectPayload",
+                    "resolved": "Date | null | undefined",
+                    "references": {
+                        "SixDatepickerSelectPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-datepicker/six-datepicker.tsx",
+                            "id": "src/components/six-datepicker/six-datepicker.tsx::SixDatepickerSelectPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the datepickers input.",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "(datestring?: string) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects an option",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Selects an option",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "debounce",
-        "methodName": "debounceChanged"
-      }, {
-        "propName": "invalid",
-        "methodName": "invalidChanged"
-      }, {
-        "propName": "value",
-        "methodName": "valueChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "resizeHandler",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "scroll",
-        "method": "scrollHandler",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "resizeHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "scrollHandler",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=six-datepicker.js.map