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

package/dist/esm/six-datepicker.entry.js

@@ -0,0 +1,1206 @@
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a2605a62.js';
+import { i as isNil, a as isNumber, b as isDate, c as isString, S as SixTimePropertyName } from './six-timepicker.types-cd6bac03.js';
+import { E as EventListeners } from './event-listeners-1bef934e.js';
+import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-235f5126.js';
+import { h as hasSlot } from './slot-5253e199.js';
+
+const i18nDate = {
+  en: {
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    monthsShortGrouped: [
+      ['Jan', 'Feb', 'Mar', 'Apr'],
+      ['May', 'Jun', 'Jul', 'Aug'],
+      ['Sep', 'Oct', 'Nov', 'Dec'],
+    ],
+    weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+    weekdaysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    weekdaysMin: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+  },
+  de: {
+    months: [
+      'Januar',
+      'Februar',
+      'März',
+      'April',
+      'Mai',
+      'Juni',
+      'Juli',
+      'August',
+      'September',
+      'Oktober',
+      'November',
+      'Dezember',
+    ],
+    monthsShort: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+    monthsShortGrouped: [
+      ['Jan.', 'Feb.', 'März', 'Apr.'],
+      ['Mai', 'Juni', 'Juli', 'Aug.'],
+      ['Sep.', 'Okt.', 'Nov.', 'Dez.'],
+    ],
+    weekdays: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'],
+    weekdaysShort: ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.'],
+    weekdaysMin: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+  },
+  fr: {
+    months: [
+      'janvier',
+      'février',
+      'mars',
+      'avril',
+      'mai',
+      'juin',
+      'juillet',
+      'août',
+      'septembre',
+      'octobre',
+      'novembre',
+      'décembre',
+    ],
+    monthsShort: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
+    monthsShortGrouped: [
+      ['janv.', 'févr.', 'mars', 'avr.'],
+      ['mai', 'juin', 'juil.', 'août'],
+      ['sept.', 'oct.', 'nov.', 'déc.'],
+    ],
+    weekdays: ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'],
+    weekdaysShort: ['lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.'],
+    weekdaysMin: ['lu', 'ma', 'me', 'je', 've', 'sa', 'di'],
+  },
+  it: {
+    months: [
+      'gennaio',
+      'febbraio',
+      'marzo',
+      'aprile',
+      'maggio',
+      'giugno',
+      'luglio',
+      'agosto',
+      'settembre',
+      'ottobre',
+      'novembre',
+      'dicembre',
+    ],
+    monthsShort: ['gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic'],
+    monthsShortGrouped: [
+      ['gen', 'feb', 'mar', 'apr'],
+      ['mag', 'giu', 'lug', 'ago'],
+      ['set', 'ott', 'nov', 'dic'],
+    ],
+    weekdays: ['lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato', 'domenica'],
+    weekdaysShort: ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'],
+    weekdaysMin: ['lu', 'ma', 'me', 'gi', 've', 'sa', 'do'],
+  },
+};
+/**
+ * Returns a JS Date instance of the exact moment
+ *
+ * ```typescript
+ * const date = now()
+ * // Wed Mar 10 2021 20:30:32 GMT+0100 (Central European Standard Time)
+ * ```
+ */
+const now = () => new Date();
+/**
+ * Returns `true` if the given date is valid
+ */
+const isValidDate = (value) => {
+  if (isNil(value)) {
+    return false;
+  }
+  if (isNumber(value)) {
+    return false;
+  }
+  if (isDate(value)) {
+    return !isNaN(value.getTime());
+  }
+  return new Date(value).toString() !== 'Invalid Date';
+};
+/**
+ * Returns the year number of the given date
+ *
+ * ```typescript
+ * year(new Date(2020, 0, 1)) // 2020
+ * ```
+ */
+const year = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getFullYear();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the month number of the given date
+ *
+ * ```typescript
+ * month(new Date(2020, 0, 1)) // 0
+ * ```
+ */
+const month = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getMonth();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the day number of the given date
+ *
+ * ```typescript
+ * day(new Date(2020, 0, 1)) // 1
+ * ```
+ */
+const day = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getDate();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the hours of the given date
+ */
+const hours = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getHours();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the minutes of the given date
+ */
+const minutes = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getMinutes();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the seconds of the given date
+ */
+const seconds = (date) => {
+  if (date && isValidDate(date)) {
+    return date.getSeconds();
+  }
+  throw new Error('Not a valid date');
+};
+/**
+ * Returns the first day of the week of the given date.
+ */
+const getFirstDayOfTheWeek = (date) => {
+  const weekdayDiff = [6, 0, 1, 2, 3, 4, 5];
+  const day = new Date(date);
+  day.setDate(day.getDate() - weekdayDiff[day.getDay()]);
+  return day;
+};
+/**
+ * Returns `true` when the year of the dates are the same
+ */
+const isSameYear = (a, b) => (a === null || a === void 0 ? void 0 : a.getFullYear()) === (b === null || b === void 0 ? void 0 : b.getFullYear());
+/**
+ * Returns `true` when the month of the dates are the same
+ */
+const isSameMonth = (a, b) => isSameYear(a, b) && (a === null || a === void 0 ? void 0 : a.getMonth()) === (b === null || b === void 0 ? void 0 : b.getMonth());
+/**
+ * Returns `true` when the day of the dates are the same
+ */
+const isSameDay = (a, b) => isSameMonth(a, b) && (a === null || a === void 0 ? void 0 : a.getDate()) === (b === null || b === void 0 ? void 0 : b.getDate());
+/**
+ * Returns `true` when the week of the dates are the same
+ */
+const isSameWeek = (a, b) => isSameDay(getFirstDayOfTheWeek(a), getFirstDayOfTheWeek(b));
+/**
+ * Returns `true` if the given datestring is valid
+ */
+const isValidDateString = (datestring, format) => {
+  if (!isString(datestring) || !isString(format)) {
+    return false;
+  }
+  if (datestring.length < 6 || format.length < 6) {
+    return false;
+  }
+  const { day, month } = getDateParts(datestring, format);
+  if (day > 31 || month > 11 || day <= 0 || month < 0) {
+    return false;
+  }
+  const date = toDate(datestring, format);
+  if (isNil(date)) {
+    return false;
+  }
+  return date.toString() !== 'Invalid Date';
+};
+/**
+ * Returns `true` when the given date is not smaller than the minDate and not bigger than the maxDate.
+ *
+ * ```typescript
+ * isInRange(new Date(2020, 1, 1), new Date(2020, 0, 1), new Date(2020, 2, 1)) // true
+ * ```
+ */
+const isInRange = (date, minDate, maxDate) => {
+  if (!date) {
+    return true;
+  }
+  if (minDate && date < minDate) {
+    return false;
+  }
+  if (maxDate && maxDate < date) {
+    return false;
+  }
+  return true;
+};
+const lookAhead = (iFormat, format, match, length = 2) => {
+  const increment = length - 1;
+  const followingCharacterMatches = format.charAt(iFormat + increment) === match;
+  const hasProperLength = iFormat + increment < format.length;
+  return hasProperLength && followingCharacterMatches;
+};
+const formatNumber = (value, len) => {
+  let num = String(value);
+  while (num.length < len) {
+    num = '0' + num;
+  }
+  return num;
+};
+const formatDate = (date, format) => {
+  if (!date) {
+    return '';
+  }
+  let output = '';
+  for (let iFormat = 0; iFormat < format.length; iFormat++) {
+    switch (format.charAt(iFormat)) {
+      case 'd':
+        if (lookAhead(iFormat, format, 'd')) {
+          output += formatNumber(date.getDate(), 2);
+          iFormat++;
+        }
+        else {
+          output += String(date.getDate());
+        }
+        break;
+      case 'm':
+        if (lookAhead(iFormat, format, 'm')) {
+          output += formatNumber(date.getMonth() + 1, 2);
+          iFormat++;
+        }
+        else {
+          output += String(date.getMonth() + 1);
+        }
+        break;
+      case 'y':
+        if (lookAhead(iFormat, format, 'y', 4)) {
+          iFormat += 3;
+          output += date.getFullYear();
+        }
+        else {
+          output += (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
+          iFormat++;
+        }
+        break;
+      case 'h':
+        if (lookAhead(iFormat, format, 'h')) {
+          output += formatNumber(date.getHours(), 2);
+          iFormat++;
+        }
+        else {
+          output += String(date.getHours());
+        }
+        break;
+      case 'M':
+        if (lookAhead(iFormat, format, 'M')) {
+          output += formatNumber(date.getMinutes(), 2);
+          iFormat++;
+        }
+        else {
+          output += String(date.getMinutes());
+        }
+        break;
+      case 's':
+        if (lookAhead(iFormat, format, 's')) {
+          output += formatNumber(date.getSeconds(), 2);
+          iFormat++;
+        }
+        else {
+          output += String(date.getSeconds());
+        }
+        break;
+      default:
+        output += format.charAt(iFormat);
+    }
+  }
+  return output;
+};
+const FORMATTING_TOKENS = /(\[[^\[]*\])|(mm|dd|yyyy|yy|hh|MM|ss|.)/g;
+const TWO_NUMERICS_REGEX = /\d\d/; // 00 - 99
+const FOUR_NUMERICS_REGEX = /\d{4}/; // 0000 - 9999
+const NON_NUMERIC_REGEX = /[^0-9]/g;
+const YEAR = 'year';
+const MONTH = 'month';
+const DAY = 'day';
+const HOUR = 'hour';
+const MINUTE = 'minute';
+const SECOND = 'second';
+const parseFlags = {};
+const addParseFlag = (token, regex, callback) => {
+  const tokens = Array.isArray(token) ? token : [token];
+  let func;
+  if (typeof callback === 'string') {
+    func = (input) => {
+      const value = parseInt(input, 10);
+      return { [callback]: value };
+    };
+  }
+  else {
+    func = callback;
+  }
+  tokens.forEach((key) => {
+    parseFlags[key] = [regex, func];
+  });
+};
+addParseFlag('yy', TWO_NUMERICS_REGEX, (input) => {
+  const year = new Date().getFullYear();
+  const cent = Math.floor(year / 100);
+  let value = parseInt(input, 10);
+  value = (value > 68 ? cent - 1 : cent) * 100 + value;
+  return { [YEAR]: value };
+});
+addParseFlag('yyyy', FOUR_NUMERICS_REGEX, YEAR);
+addParseFlag('mm', TWO_NUMERICS_REGEX, (input) => ({ [MONTH]: parseInt(input, 10) - 1 }));
+addParseFlag('dd', TWO_NUMERICS_REGEX, DAY);
+addParseFlag('hh', TWO_NUMERICS_REGEX, HOUR);
+addParseFlag('MM', TWO_NUMERICS_REGEX, MINUTE);
+addParseFlag('ss', TWO_NUMERICS_REGEX, SECOND);
+const getFullInputArray = (input, backupDate = new Date()) => {
+  const result = [0, 0, 1, 0, 0, 0];
+  const backupArr = [
+    backupDate.getFullYear(),
+    backupDate.getMonth(),
+    backupDate.getDate(),
+    backupDate.getHours(),
+    backupDate.getMinutes(),
+    backupDate.getSeconds(),
+  ];
+  let useBackup = true;
+  for (let i = 0; i < 7; i++) {
+    if (input[i] === undefined) {
+      result[i] = useBackup ? backupArr[i] : result[i];
+    }
+    else {
+      result[i] = input[i];
+      useBackup = false;
+    }
+  }
+  return result;
+};
+const createDate = (year, month, day, hour, minute, second) => {
+  if (!(year < 100 && year >= 0)) {
+    return new Date(year, month, day, hour, minute, second);
+  }
+  const date = new Date(year + 400, month, day, hour, minute, second);
+  if (isFinite(date.getFullYear())) {
+    date.setFullYear(year);
+  }
+  return date;
+};
+const makeParser = (dateString, format) => {
+  const tokens = format.match(FORMATTING_TOKENS);
+  if (!tokens) {
+    throw new Error();
+  }
+  const { length } = tokens;
+  let mark = {};
+  for (let i = 0; i < length; i += 1) {
+    const token = tokens[i];
+    const parseTo = parseFlags[token];
+    if (!parseTo) {
+      const word = token.replace(/^\[|\]$/g, '');
+      if (dateString.indexOf(word) === 0) {
+        dateString = dateString.substr(word.length);
+      }
+      else {
+        throw new Error('not match');
+      }
+    }
+    else {
+      const regex = parseTo[0];
+      const parser = parseTo[1];
+      const value = (regex.exec(dateString) || [])[0];
+      const obj = parser(value);
+      mark = Object.assign(Object.assign({}, mark), obj);
+      dateString = dateString.replace(value, '');
+    }
+  }
+  return mark;
+};
+const getCleanDateString = (dirtyDateString, format) => {
+  if (dirtyDateString.length === format.length) {
+    return dirtyDateString;
+  }
+  const separator = dirtyDateString.match(NON_NUMERIC_REGEX)[0];
+  // pad signle digits to follow supported dateformats
+  return dirtyDateString
+    .split(separator)
+    .map((s) => (s.length === 1 ? '0' + s : s))
+    .join(separator);
+};
+const getDateParts = (dirtyDateString, format) => {
+  const dateString = getCleanDateString(dirtyDateString, format);
+  return makeParser(dateString, format);
+};
+const toDate = (dirtyDateString, format) => {
+  try {
+    const { backupDate = new Date() } = {};
+    const { year, month, day, hour, minute, second, date } = getDateParts(dirtyDateString, format);
+    if (date) {
+      return date;
+    }
+    const inputArray = [year, month, day, hour, minute, second];
+    let parsedDate;
+    const result = getFullInputArray(inputArray, backupDate);
+    parsedDate = createDate(...result);
+    return parsedDate;
+  }
+  catch (e) {
+    return new Date(NaN);
+  }
+};
+const createCalendarGrid = (calendarGridArguments) => {
+  const { firstDateOfBox, allowedDates, dateFormat, selectedDate, minDate, maxDate, pointerDate } = calendarGridArguments;
+  const weekDatePointer = new Date(firstDateOfBox);
+  const dayDatePointer = new Date(firstDateOfBox);
+  let calendar = [];
+  do {
+    let row = [];
+    do {
+      row = [
+        ...row,
+        {
+          date: new Date(dayDatePointer),
+          display: formatDate(dayDatePointer, dateFormat),
+          dateString: formatDate(dayDatePointer, dateFormat),
+          label: day(dayDatePointer).toString(),
+          isToday: isSameDay(dayDatePointer, now()),
+          isSelected: selectedDate && isSameDay(dayDatePointer, selectedDate),
+          isDisabled: !allowedDates(dayDatePointer) || !isInRange(dayDatePointer, minDate, maxDate),
+          isOutdated: pointerDate.month !== dayDatePointer.getMonth() || !isInRange(dayDatePointer, minDate, maxDate),
+        },
+      ];
+      dayDatePointer.setDate(dayDatePointer.getDate() + 1);
+    } while (isSameWeek(dayDatePointer, weekDatePointer));
+    calendar = [...calendar, row];
+    weekDatePointer.setDate(weekDatePointer.getDate() + 7);
+  } while (isSameMonth(new Date(pointerDate.year, pointerDate.month, pointerDate.day), dayDatePointer));
+  return calendar;
+};
+
+var SixDateFormats;
+(function (SixDateFormats) {
+  SixDateFormats["DDMMYYY_DOT"] = "dd.mm.yyyy";
+  SixDateFormats["YYYYMMDD_DASH"] = "yyyy-mm-dd";
+  SixDateFormats["DDMMYYYY_DASH"] = "dd-mm-yyyy";
+  SixDateFormats["DDMMYYYY_SLASH"] = "dd/mm/yyyy";
+  SixDateFormats["YYYYMMDD_SLASH"] = "yyyy/mm/dd";
+  SixDateFormats["DDMMYY_DOT"] = "dd.mm.yy";
+  SixDateFormats["YYMMDD_DASH"] = "yy-mm-dd";
+  SixDateFormats["DDMMYY_DASH"] = "dd-mm-yy";
+  SixDateFormats["DDMMYY_SLASH"] = "dd/mm/yy";
+  SixDateFormats["YYMMDD_SLASH"] = "yy/mm/dd";
+  SixDateFormats["DDMMYYY_DOT_TIME"] = "dd.mm.yyyy hh:MM:ss";
+  SixDateFormats["YYYYMMDD_DASH_TIME"] = "yyyy-mm-dd hh:MM:ss";
+  SixDateFormats["DDMMYYYY_DASH_TIME"] = "dd-mm-yyyy hh:MM:ss";
+  SixDateFormats["DDMMYYYY_SLASH_TIME"] = "dd/mm/yyyy hh:MM:ss";
+  SixDateFormats["YYYYMMDD_SLASH_TIME"] = "yyyy/mm/dd hh:MM:ss";
+  SixDateFormats["DDMMYY_DOT_TIME"] = "dd.mm.yy hh:MM:ss";
+  SixDateFormats["YYMMDD_DASH_TIME"] = "yy-mm-dd hh:MM:ss";
+  SixDateFormats["DDMMYY_DASH_TIME"] = "dd-mm-yy hh:MM:ss";
+  SixDateFormats["DDMMYY_SLASH_TIME"] = "dd/mm/yy hh:MM:ss";
+  SixDateFormats["YYMMDD_SLASH_TIME"] = "yy/mm/dd hh:MM:ss";
+})(SixDateFormats || (SixDateFormats = {}));
+
+const MonthSelection = ({ locale, selectedDate, onClickMonthCell }) => {
+  const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
+  const isSelectedMonth = (value) => (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) === locale.monthsShort.findIndex((m) => m === value);
+  return (h("table", { class: "datepicker-table", part: "month-selection" },
+    h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => onClickMonthCell(month), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': isToday(month),
+        'datepicker-table__cell--is-selected': isSelectedMonth(month),
+      } }, month)))))))));
+};
+
+const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
+  return (h("table", { class: "datepicker-table", part: "day-selection" },
+    h("thead", { part: "weekday-header" }, locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))),
+    h("tbody", null, calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => onClickDateCell(cell), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': cell.isToday,
+        'datepicker-table__cell--is-selected': cell.isSelected,
+        'datepicker-table__cell--is-outdated': cell.isOutdated,
+        'datepicker-table__cell--is-disabled': cell.isDisabled,
+        'datepicker-table__cell--is-selectable': !cell.isDisabled,
+      } }, cell.label)))))))));
+};
+
+const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {
+  return (h("table", { class: "datepicker-table", part: "year-selection" },
+    h("tbody", null, yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => (h("td", { onClick: () => onClickYearCell(year), class: {
+        'datepicker-table__cell': true,
+        'datepicker-table__cell--is-today': now().getFullYear() === year,
+        'datepicker-table__cell--is-selected': (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === year,
+      } }, year)))))))));
+};
+
+const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-table-row-background-color-hover)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
+
+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;
+  }, []);
+};
+let SixDatepicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixSelect = createEvent(this, "six-datepicker-select", 7);
+    this.sixClear = createEvent(this, "six-datepicker-clear", 7);
+    this.sixBlur = createEvent(this, "six-datepicker-blur", 7);
+    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()),
+    };
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+SixDatepicker.style = sixDatepickerCss;
+
+export { SixDatepicker as six_datepicker };