@six-group/ui-library 3.0.0-beta.1.7

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

@@ -0,0 +1,1343 @@
+import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { createCalendarGrid, day, formatDate, getFirstDayOfTheWeek, hours, i18nDate, isValidDate, isValidDateString, minutes, month, now, seconds, toDate, year, } from '../../utils/date-util';
+import { EventListeners } from '../../utils/event-listeners';
+import { isNil } from '../../utils/type-check';
+import { debounce, debounceEvent, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
+import { hasSlot } from '../../utils/slot';
+import { SixDateFormats } from './six-date-formats';
+import { MonthSelection } from './components/month-selection';
+import { DaySelection } from './components/day-selection';
+import { YearSelection } from './components/year-selection';
+import { SixTimePropertyName } from '../six-timepicker/six-timepicker.types';
+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 || (SelectionMode = {}));
+const getYearSelectionAroundYear = (year) => {
+  const numberOfElementsPerRow = 5;
+  return Array.from(new Array(NUMBER_OF_YEARS_SHOWN).keys())
+    .map((n) => n + year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2))
+    .reduce((curr, item, index) => {
+    if (index % numberOfElementsPerRow === 0) {
+      curr.push([]);
+    }
+    curr[curr.length - 1].push(item);
+    return curr;
+  }, []);
+};
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define a footer for the date picker.
+ */
+export class SixDatepicker {
+  constructor() {
+    this.eventListeners = new EventListeners();
+    this.selectedDate = null;
+    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+    this.selectionMode = SelectionMode.DAY;
+    this.isDropDownContentUp = false;
+    /**
+     * Set the type.
+     */
+    this.type = 'date';
+    /**
+     * The language used to render the weekdays and months.
+     */
+    this.locale = 'en';
+    /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Indicates whether or not the calendar should be shown as an inline (always open) component */
+    this.inline = false;
+    /**
+     * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+     */
+    this.readonly = false;
+    /**
+     * If `true` the component is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Callback to determine which date in the datepicker should be selectable.
+     * the callback function will get a datestring as an argument, e.g. '2021-07-04'
+     *
+     * Usage e.g.:
+     * const datepicker = document.getElementById('allowed-date-picker');
+     * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+     */
+    this.allowedDates = () => true;
+    /**
+     * The minimum datetime allowed. Value must be a date object
+     */
+    this.min = null;
+    /**
+     * The maximum datetime allowed. Value must be a date object
+     */
+    this.max = null;
+    /**
+     * Closes the datepicker dropdown after selection
+     */
+    this.closeOnSelect = this.type === 'date';
+    /** Datepicker size. */
+    this.size = 'medium';
+    /**
+     * The value of the form field, which accepts a date object.
+     */
+    this.value = null;
+    /** Define the dateFormat. Valid formats are:
+     * 'dd.mm.yyyy'
+     * 'yyyy-mm-dd'
+     * 'dd-mm-yyyy'
+     * 'dd/mm/yyyy'
+     * 'yyyy/mm/dd'
+     * 'dd.mm.yy'
+     * 'yy-mm-dd'
+     * 'dd-mm-yy'
+     * 'dd/mm/yy'
+     * 'yy/mm/dd'
+     * */
+    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+     */
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** The input's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** The input's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The input's name attribute. */
+    this.name = '';
+    /** Set to true to add a clear button when the input is populated. */
+    this.clearable = false;
+    /** Set the position of the icon */
+    this.iconPosition = 'left';
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    this.hoist = false;
+    this.defaultValue = null;
+    this.handleDocumentKeyDown = (event) => {
+      // Close when escape is pressed
+      if (this.open && event.key === 'Escape') {
+        event.stopPropagation();
+        this.closePopup();
+        void this.inputElement.setFocus();
+      }
+      // Handle tabbing
+      if (event.key === 'Tab') {
+        this.closePopup();
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      // Close when clicking outside of the containing element
+      const path = event.composedPath();
+      if (!path.includes(this.container)) {
+        this.closePopup();
+        return;
+      }
+    };
+    this.onTimepickerChange = (sixTimepickerChange) => {
+      const time = sixTimepickerChange.detail.value;
+      const newDate = new Date();
+      if (this.selectedDate) {
+        newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
+      }
+      newDate.setHours(time[SixTimePropertyName.HOURS], time[SixTimePropertyName.MINUTES], time[SixTimePropertyName.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) => {
+      const inputValue = this.inputElement.value;
+      if (!isValidDateString(inputValue, this.dateFormat)) {
+        return;
+      }
+      const inputValueDate = toDate(inputValue, this.dateFormat);
+      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) {
+        const date = toDate(inputValue, this.dateFormat);
+        const datestring = formatDate(date, this.dateFormat);
+        if (isValidDateString(datestring, this.dateFormat)) {
+          this.selectedDate = toDate(datestring, this.dateFormat);
+          this.updatePointerDates();
+          this.updateValue(this.selectedDate);
+          isDateValid = true;
+        }
+      }
+      this.displayCustomMessage(isDateValid);
+    };
+    this.handleOnBlur = (event) => {
+      // clear the value if the user deleted the date
+      if (this.inputElement.value === '' && isValidDate(this.value)) {
+        this.value = undefined;
+      }
+      event.stopPropagation();
+      const inputValue = this.inputElement.value;
+      const inputValueDate = toDate(inputValue, this.dateFormat);
+      const formattedDate = formatDate(this.value, this.dateFormat);
+      if (inputValueDate && inputValue !== formattedDate) {
+        // properly format date if necessary
+        this.inputElement.value = formattedDate;
+      }
+      this.sixBlur.emit(this.value);
+    };
+  }
+  debounceChanged() {
+    this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
+  }
+  /**
+   * 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);
+      this.value = undefined;
+      return;
+    }
+    this.selectedDate = this.value;
+    this.updatePointerDates();
+    this.sixSelect.emit(this.value);
+  }
+  async resizeHandler() {
+    this.calcIsDropDownContentUp();
+    this.moveOpenHoistedPopup();
+    this.adjustPopupPosition();
+  }
+  async scrollHandler() {
+    this.calcIsDropDownContentUp();
+    this.moveOpenHoistedPopup();
+  }
+  get container() {
+    return this.containingElement || this.host;
+  }
+  get firstDateOfBox() {
+    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);
+  }
+  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,
+    });
+  }
+  calcIsDropDownContentUp() {
+    if (!this.inputElement || !this.wrapper) {
+      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;
+  }
+  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 });
+  }
+  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 };
+    }
+    else {
+      this.pointerDate = {
+        year: this.pointerDate.year,
+        month: this.pointerDate.month - 1,
+        day: 1,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      };
+    }
+  }
+  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 };
+    }
+    else {
+      this.pointerDate = {
+        year: this.pointerDate.year,
+        month: this.pointerDate.month + 1,
+        day: 1,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      };
+    }
+  }
+  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();
+    }
+  }
+  setupEventListenersForOpenPopup() {
+    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;
+    }
+    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),
+      };
+    }
+  }
+  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;
+    }
+    if (isNil(this.defaultDate)) {
+      return now();
+    }
+    else {
+      return this.defaultDate && toDate(this.defaultDate, this.dateFormat);
+    }
+  }
+  updateValue(newDate) {
+    this.displayCustomMessage(true);
+    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;
+    }
+    this.value = newDate;
+  }
+  /**
+   * Selects an option
+   */
+  async select(datestring) {
+    if (!datestring) {
+      this.updateValue(undefined);
+    }
+    else {
+      const newDate = toDate(datestring, this.dateFormat);
+      newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
+      this.updateValue(newDate);
+    }
+    this.updatePointerDates();
+    if (this.closeOnSelect) {
+      this.closePopup();
+    }
+  }
+  componentWillLoad() {
+    this.validateProps();
+    this.defaultValue = this.value;
+    this.selectedDate = this.value;
+    this.updatePointerDates();
+    this.updateValue(this.value);
+    if (this.inline) {
+      this.open = true;
+    }
+    if (this.open) {
+      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() {
+    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+    this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
+  }
+  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: getYearSelectionAroundYear(this.pointerDate.year), 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, "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: {
+          datepicker__popup: true,
+          'datepicker__popup--is-up': this.placement ? 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() {
+    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);
+  }
+  connectedCallback() {
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+  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()),
+      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"
+          }
+        }
+      },
+      "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 | null",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The minimum datetime allowed. Value must be a date object"
+      },
+      "defaultValue": "null"
+    },
+    "max": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Date | null",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The maximum datetime allowed. Value must be a date object"
+      },
+      "defaultValue": "null"
+    },
+    "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\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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 make the input a required field."
+      },
+      "attribute": "required",
+      "reflect": true
+    },
+    "defaultDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "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 | null",
+        "resolved": "string",
+        "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 | null",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the form field, which accepts a date object."
+      },
+      "defaultValue": "null"
+    },
+    "containingElement": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The dropdown will close when the user interacts outside of this element (e.g. clicking)."
+      }
+    },
+    "dateFormat": {
+      "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"
+          }
+        }
+      },
+      "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"
+    },
+    "errorOnBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to display the error text on blur and not when typing"
+      },
+      "attribute": "error-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "errorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's error text. Alternatively, you can use the error-text slot."
+      },
+      "attribute": "error-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The input's label. Alternatively, you can use the label slot."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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",
+        "references": {
+          "SixDatepickerSelectPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "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"
+          }
+        }
+      }
+    }, {
+      "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",
+        "references": {
+          "SixDatepickerSelectPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "reportValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+        "tags": []
+      }
+    },
+    "checkValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity.",
+        "tags": []
+      }
+    },
+    "setCustomValidity": {
+      "complexType": {
+        "signature": "(message: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+        "tags": []
+      }
+    },
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the formcontrol",
+        "tags": []
+      }
+    },
+    "select": {
+      "complexType": {
+        "signature": "(datestring: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Selects an option",
+        "tags": []
+      }
+    }
+  }; }
+  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
+    }]; }
+}