@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.ec3ffc2

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

@@ -1,110 +1,140 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-5c0f6628.js';
-import { i as isNil, a as isNumber, b as isDate, c as isString, S as SixTimePropertyName } from './six-timepicker.types-e161a447.js';
-import { E as EventListeners } from './event-listeners-570a24ea.js';
-import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-1a60d709.js';
-import { h as hasSlot } from './slot-6f3984c7.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a7bee415.js';
+import { E as EventListeners } from './event-listeners-706d4309.js';
+import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-2ebaf4ef.js';
+import { h as hasSlot } from './slot-56531341.js';
+import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens } from './popup-7209e9d5.js';
 
+const isString = (value) => typeof value === 'string';
+// only use '==' instead of '===' to also catch undefined and void
+const isNil = (value) => value == null;
+
+/* eslint-disable */
 const i18nDate = {
-  en: {
-    months: [
-      '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'],
-  },
+    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'],
+    },
+    es: {
+        months: [
+            'enero',
+            'febrero',
+            'marzo',
+            'abril',
+            'mayo',
+            'junio',
+            'julio',
+            'agosto',
+            'septiembre',
+            'octubre',
+            'noviembre',
+            'diciembre',
+        ],
+        monthsShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+        monthsShortGrouped: [
+            ['ene', 'feb', 'mar', 'abr'],
+            ['may', 'jun', 'jul', 'ago'],
+            ['sep', 'oct', 'nov', 'dic'],
+        ],
+        weekdays: ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'],
+        weekdaysShort: ['lun', 'mar', 'mié', 'jue', 'vie', 'sáb', 'dom'],
+        weekdaysMin: ['lu', 'ma', 'mi', 'ju', 'vi', 'sa', 'do'],
+    },
 };
 /**
  * Returns a JS Date instance of the exact moment
@@ -115,20 +145,12 @@ const i18nDate = {
  * ```
  */
 const now = () => new Date();
+const removeTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 /**
  * Returns `true` if the given date is valid
  */
 const isValidDate = (value) => {
-  if (isNil(value)) {
-    return false;
-  }
-  if (isNumber(value)) {
-    return false;
-  }
-  if (isDate(value)) {
-    return !isNaN(value.getTime());
-  }
-  return new Date(value).toString() !== 'Invalid Date';
+    return value instanceof Date && !isNaN(value.getTime()) && new Date(value).toString() !== 'Invalid Date';
 };
 /**
  * Returns the year number of the given date
@@ -138,10 +160,10 @@ const isValidDate = (value) => {
  * ```
  */
 const year = (date) => {
-  if (date && isValidDate(date)) {
-    return date.getFullYear();
-  }
-  throw new Error('Not a valid date');
+    if (date && isValidDate(date)) {
+        return date.getFullYear();
+    }
+    throw new Error('Not a valid date');
 };
 /**
  * Returns the month number of the given date
@@ -151,10 +173,10 @@ const year = (date) => {
  * ```
  */
 const month = (date) => {
-  if (date && isValidDate(date)) {
-    return date.getMonth();
-  }
-  throw new Error('Not a valid date');
+    if (date && isValidDate(date)) {
+        return date.getMonth();
+    }
+    throw new Error('Not a valid date');
 };
 /**
  * Returns the day number of the given date
@@ -164,46 +186,46 @@ const month = (date) => {
  * ```
  */
 const day = (date) => {
-  if (date && isValidDate(date)) {
-    return date.getDate();
-  }
-  throw new Error('Not a valid 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');
+    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');
+    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');
+    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;
+    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
@@ -225,21 +247,21 @@ const isSameWeek = (a, b) => isSameDay(getFirstDayOfTheWeek(a), getFirstDayOfThe
  * 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';
+    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.
@@ -249,97 +271,97 @@ const isValidDateString = (datestring, format) => {
  * ```
  */
 const isInRange = (date, minDate, maxDate) => {
-  if (!date) {
+    if (!date) {
+        return true;
+    }
+    if (minDate && date < minDate) {
+        return false;
+    }
+    if (maxDate && maxDate < date) {
+        return false;
+    }
     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 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;
+    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());
+    if (date == null) {
+        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);
         }
-        break;
-      default:
-        output += format.charAt(iFormat);
     }
-  }
-  return output;
+    return output;
 };
 const FORMATTING_TOKENS = /(\[[^\[]*\])|(mm|dd|yyyy|yy|hh|MM|ss|.)/g;
 const TWO_NUMERICS_REGEX = /\d\d/; // 00 - 99
@@ -353,27 +375,27 @@ 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];
-  });
+    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 };
+    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 }));
@@ -382,771 +404,647 @@ 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;
+    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;
+    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;
+    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');
-      }
+    const tokens = format.match(FORMATTING_TOKENS);
+    if (!tokens) {
+        throw new Error();
     }
-    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 { 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);
+    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 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);
-  }
+    try {
+        const { backupDate = new Date() } = {};
+        const { year, month, day, hour, minute, second, date } = getDateParts(dirtyDateString, format);
+        if (date != null) {
+            return date;
+        }
+        const inputArray = [year, month, day, hour, minute, second];
+        const result = getFullInputArray(inputArray, backupDate);
+        return createDate(...result);
+    }
+    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 = [];
+    const { firstDateOfBox, allowedDates, dateFormat, selectedDate, minDate, maxDate, pointerDate } = calendarGridArguments;
+    const weekDatePointer = new Date(firstDateOfBox);
+    const dayDatePointer = new Date(firstDateOfBox);
+    let calendar = [];
     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;
+        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;
 };
+/**
+ * Returns a range of numbers around the given number grouped into buckets of 5.
+ * @param number the given number around which you want to get the other numbers
+ * @param range range of numbers to include in the result
+ */
+function rangeAround(number, range) {
+    const itemsPerGroup = 5;
+    return [...Array(range).keys()]
+        .map((n) => n + number - Math.floor(range / 2))
+        .reduce((curr, item, index) => {
+        if (index % itemsPerGroup === 0) {
+            curr.push([]);
+        }
+        curr[curr.length - 1].push(item);
+        return curr;
+    }, []);
+}
 
+// eslint-disable-next-line @stencil-community/ban-exported-const-enums
 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["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 MonthSelection = (monthSelectionParams) => {
+    const locale = monthSelectionParams.locale;
+    const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
+    const isSelectedMonth = (value) => { var _a; return ((_a = monthSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getMonth()) === locale.monthsShort.findIndex((m) => m === value); };
+    return (h("table", { class: "datepicker-table", part: "month-selection" },
+        h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => monthSelectionParams.onClickMonthCell(month), class: {
+                'datepicker-table__cell': true,
+                'datepicker-table__cell--is-today': isToday(month),
+                'datepicker-table__cell--is-selected': isSelectedMonth(month),
+            } }, month)))))))));
 };
 
-const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
-  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 DaySelection = (daySelectionParams) => {
+    return (h("table", { class: "datepicker-table", part: "day-selection" },
+        h("thead", { part: "weekday-header" }, daySelectionParams.locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))),
+        h("tbody", null, daySelectionParams.calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => daySelectionParams.onClickDateCell(cell), class: {
+                'datepicker-table__cell': true,
+                'datepicker-table__cell--is-today': cell.isToday,
+                'datepicker-table__cell--is-selected': cell.isSelected,
+                '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 YearSelection = (yearSelectionParams) => {
+    return (h("table", { class: "datepicker-table", part: "year-selection" },
+        h("tbody", null, yearSelectionParams.yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => {
+            var _a;
+            return (h("td", { onClick: () => yearSelectionParams.onClickYearCell(year), class: {
+                    'datepicker-table__cell': true,
+                    'datepicker-table__cell--is-today': now().getFullYear() === year,
+                    'datepicker-table__cell--is-selected': ((_a = yearSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getFullYear()) === year,
+                } }, year));
+        })))))));
 };
 
-const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
+const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
+const SixDatepickerStyle0 = sixDatepickerCss;
 
 const NUMBER_OF_YEARS_SHOWN = 25;
 const MIN_POPUP_HEIGHT = 400;
 var SelectionMode;
 (function (SelectionMode) {
-  SelectionMode["DAY"] = "day";
-  SelectionMode["MONTH"] = "month";
-  SelectionMode["YEAR"] = "year";
+    SelectionMode["DAY"] = "day";
+    SelectionMode["MONTH"] = "month";
+    SelectionMode["YEAR"] = "year";
 })(SelectionMode || (SelectionMode = {}));
-const getYearSelectionAroundYear = (year) => {
-  const numberOfElementsPerRow = 5;
-  return Array.from(new Array(NUMBER_OF_YEARS_SHOWN).keys())
-    .map((n) => n + year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2))
-    .reduce((curr, item, index) => {
-    if (index % numberOfElementsPerRow === 0) {
-      curr.push([]);
-    }
-    curr[curr.length - 1].push(item);
-    return curr;
-  }, []);
-};
 const SixDatepicker = 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.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)) {
+    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.previousUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.previousMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.previousYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.previousYearGroup();
+            }
+        };
+        this.nextUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.nextMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.nextYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.nextYearGroup();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            var _a;
+            const keyboardEvent = event;
+            // Close when escape is pressed
+            if (this.open && keyboardEvent.key === 'Escape') {
+                keyboardEvent.stopPropagation();
+                this.closePopup();
+                void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                this.closePopup();
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.container)) {
+                this.closePopup();
+                return;
+            }
+        };
+        this.handleClearClick = async (event) => {
+            event.stopPropagation();
+            await this.select(undefined);
+            this.sixClear.emit();
+        };
+        this.onTimepickerChange = (sixTimepickerChange) => {
+            const time = sixTimepickerChange.detail.value;
+            const newDate = new Date();
+            if (this.selectedDate != null) {
+                newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
+            }
+            if (time != null) {
+                const hours = time.hours;
+                const minutes = time.minutes;
+                const seconds = time.seconds;
+                if (hours != null) {
+                    newDate.setHours(hours, minutes, seconds);
+                }
+            }
+            this.updateValue(newDate);
+            this.updatePointerDates();
+        };
+        this.onClickDateCell = (cell) => {
+            if (!cell.isDisabled) {
+                void this.select(cell.dateString);
+            }
+        };
+        this.onClickMonthCell = (selectedMonth) => {
+            const month = i18nDate[this.locale].monthsShort.findIndex((monthShort) => monthShort === selectedMonth);
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.onClickYearCell = (year) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.handleInputChange = (event) => {
+            if (this.inputElement == null) {
+                return;
+            }
+            event.stopPropagation();
+            const inputValue = this.inputElement.value;
+            if (!isValidDateString(inputValue, this.dateFormat)) {
+                return;
+            }
+            const inputValueDate = toDate(inputValue, this.dateFormat);
+            if (inputValueDate === undefined) {
+                return;
+            }
+            this.updateIfChanged(inputValueDate);
+            const datesOnly = inputValue.replace(/[^\d]/g, '');
+            if (datesOnly.length >= 6) {
+                const date = toDate(inputValue, this.dateFormat);
+                const dateAsString = formatDate(date, this.dateFormat);
+                if (isValidDateString(dateAsString, this.dateFormat)) {
+                    this.selectedDate = toDate(dateAsString, this.dateFormat);
+                    this.updatePointerDates();
+                    this.updateValue(this.selectedDate);
+                }
+            }
+        };
+        this.handleOnBlur = (event) => {
+            var _a, _b, _c;
+            event.stopPropagation();
+            // clear the value if the user deleted the date
+            if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
+                this.value = undefined;
+                this.sixSelect.emit(this.value);
+            }
+            const currentDate = toDate((_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value, this.dateFormat);
+            if (isValidDate(currentDate) && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.getTime()) !== (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime())) {
+                // Set the value if the input field's value has changed. This can happen if the blur occurs
+                // before the change event had a chance to fire due to its debouncing.
+                this.value = currentDate;
+            }
+            if (this.inputElement != null) {
+                this.inputElement.value = formatDate(this.value, this.dateFormat);
+            }
+            this.sixBlur.emit(this.value);
+        };
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        this.type = 'date';
+        this.locale = 'en';
+        this.open = false;
+        this.inline = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.allowedDates = () => true;
+        this.min = undefined;
+        this.max = undefined;
+        this.closeOnSelect = this.type === 'date';
+        this.placement = undefined;
+        this.size = 'medium';
+        this.required = false;
+        this.defaultDate = undefined;
+        this.placeholder = undefined;
         this.value = undefined;
-      }
-      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);
-    };
-    this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
-    this.selectionMode = SelectionMode.DAY;
-    this.isDropDownContentUp = false;
-    this.type = 'date';
-    this.locale = 'en';
-    this.open = false;
-    this.inline = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.allowedDates = () => true;
-    this.min = null;
-    this.max = null;
-    this.closeOnSelect = this.type === 'date';
-    this.placement = undefined;
-    this.size = 'medium';
-    this.required = undefined;
-    this.defaultDate = undefined;
-    this.placeholder = undefined;
-    this.value = null;
-    this.containingElement = undefined;
-    this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.errorOnBlur = false;
-    this.errorText = '';
-    this.label = '';
-    this.name = '';
-    this.clearable = false;
-    this.iconPosition = 'left';
-    this.hoist = false;
-  }
-  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 };
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+        this.containingElement = undefined;
+        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this.name = '';
+        this.clearable = false;
+        this.iconPosition = 'left';
+        this.hoist = false;
     }
-    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 };
+    debounceChanged() {
+        this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
     }
-    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();
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        if (this.value != null && !isValidDate(this.value)) {
+            console.warn('invalid date value: ', this.value);
+            this.value = undefined;
+            this.sixSelect.emit(this.value);
+        }
+        this.selectedDate = this.value;
+        this.updatePointerDates();
     }
-    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);
+    async resizeHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+        this.adjustPopupPosition();
     }
-    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`;
+    async scrollHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
     }
-    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`;
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    get container() {
+        return this.containingElement || this.host;
+    }
+    get firstDateOfBox() {
+        const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
+        return getFirstDayOfTheWeek(date);
+    }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    get calendarGrid() {
+        return createCalendarGrid({
+            firstDateOfBox: this.firstDateOfBox,
+            allowedDates: this.allowedDates,
+            dateFormat: this.dateFormat,
+            locale: this.locale,
+            selectedDate: this.selectedDate,
+            minDate: this.min,
+            maxDate: this.max,
+            pointerDate: this.pointerDate,
         });
-      };
-      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"]
-  }; }
+    updateDropdownDirection() {
+        if (this.inputElement == null || this.wrapper == null) {
+            return;
+        }
+        this.isDropDownContentUp = calcIsDropDownContentUp(this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    getMonthStringForIndex(index) {
+        return i18nDate[this.locale].months[index];
+    }
+    previousYear() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
+    }
+    previousYearGroup() {
+        this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
+    }
+    previousMonth() {
+        if (this.pointerDate.month === 0) {
+            this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1, hours: 0, minutes: 0, seconds: 0 };
+        }
+        else {
+            this.pointerDate = {
+                year: this.pointerDate.year,
+                month: this.pointerDate.month - 1,
+                day: 1,
+                hours: 0,
+                minutes: 0,
+                seconds: 0,
+            };
+        }
+    }
+    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);
+    }
+    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 (this.defaultDate == null) {
+            return this.type === 'date' ? removeTime(now()) : now();
+        }
+        else {
+            return toDate(this.defaultDate, this.dateFormat);
+        }
+    }
+    updateValue(newDate) {
+        this.updateIfChanged(newDate);
+    }
+    updateIfChanged(newDate) {
+        var _a;
+        if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime()) === (newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+            return;
+        }
+        this.value = newDate;
+        this.sixSelect.emit(this.value);
+    }
+    /**
+     * Selects an option
+     */
+    async select(datestring) {
+        if (datestring == null) {
+            this.updateValue(undefined);
+        }
+        else {
+            const newDate = toDate(datestring, this.dateFormat);
+            newDate === null || newDate === void 0 ? void 0 : newDate.setHours(this.pointerDate.hours, this.pointerDate.minutes, this.pointerDate.seconds);
+            this.updateValue(newDate);
+        }
+        this.updatePointerDates();
+        if (this.closeOnSelect) {
+            this.closePopup();
+        }
+    }
+    componentWillLoad() {
+        this.selectedDate = this.value;
+        this.updatePointerDates();
+        this.updateValue(this.value);
+        if (this.inline) {
+            this.open = true;
+        }
+        if (this.open) {
+            this.setupEventListenersForOpenPopup();
+        }
+    }
+    componentDidLoad() {
+        if (this.inputElement != null) {
+            this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+            this.eventListeners.add(this.inputElement, 'six-input-blur', this.handleOnBlur);
+        }
+    }
+    componentDidRender() {
+        this.adjustPopupPosition();
+    }
+    renderHeader() {
+        return (h("header", { class: "datepicker-header", part: "header" }, h("div", { class: "datepicker-header__btn prev", onClick: this.previousUnit }, h("svg", { viewBox: "0 5 13 13", width: "14", height: "23" }, h("path", { d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" }))), h("div", { class: "datepicker-header__label" }, this.selectionMode === SelectionMode.DAY && (h("div", { onClick: () => (this.selectionMode = SelectionMode.MONTH) }, h("span", { class: "datepicker-header__label-month" }, this.getMonthStringForIndex(this.pointerDate.month)), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode !== SelectionMode.YEAR && (h("div", { onClick: () => (this.selectionMode = SelectionMode.YEAR) }, h("span", { class: "datepicker-header__label-year" }, this.pointerDate.year), h("span", null, h("svg", { viewBox: "-3 -4 24 24", width: "20", height: "20" }, h("polyline", { points: "6 9 12 15 18 9" }))))), this.selectionMode === SelectionMode.YEAR && (h("div", null, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2)))), h("div", { class: "datepicker-header__btn next", onClick: this.nextUnit }, h("svg", { viewBox: "5 5 13 13", width: "14", height: "23" }, h("path", { d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z" })))));
+    }
+    renderBody() {
+        switch (this.selectionMode) {
+            case SelectionMode.DAY:
+                return (h(DaySelection, { locale: i18nDate[this.locale], calendarGrid: this.calendarGrid, onClickDateCell: this.onClickDateCell }));
+            case SelectionMode.MONTH:
+                return (h(MonthSelection, { locale: i18nDate[this.locale], selectedDate: this.selectedDate, onClickMonthCell: this.onClickMonthCell }));
+            case SelectionMode.YEAR:
+                return (h(YearSelection, { selectedDate: this.selectedDate, yearSelection: rangeAround(this.pointerDate.year, NUMBER_OF_YEARS_SHOWN), onClickYearCell: this.onClickYearCell }));
+        }
+    }
+    renderCustomIcon() {
+        const icon = hasSlot(this.host, 'custom-icon') ? (h("slot", { name: "custom-icon" })) : (h("six-icon", { size: this.size === 'large' ? 'medium' : this.size }, "today"));
+        return (h("span", { slot: "prefix", part: "icon", class: {
+                prefix: true,
+                'prefix--right': this.iconPosition === 'right',
+            } }, icon));
+    }
+    renderClearable() {
+        return (this.clearable && (h("button", { slot: "suffix", class: {
+                'datepicker-clear': true,
+                'datepicker-clear--right': this.iconPosition === 'left',
+                'datepicker-clear--left': this.iconPosition === 'right',
+            }, type: "button", onClick: this.handleClearClick, tabindex: "-1" }, h("six-icon", { size: "small" }, "clear"))));
+    }
+    render() {
+        var _a, _b, _c;
+        this.adjustPopupPosition();
+        return (h("div", { key: 'b5ba1d95babef5f6f47bd176f607756df09f293b', ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { key: 'bbc7941bb975cb5e66eda215fea89dc3455724a3', part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: 'ceaf12686b514b8708e1b254e8ed8990c519e19b', part: "popup", ref: (el) => (this.popup = el), class: {
+                datepicker__popup: true,
+                'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
+                'datepicker__popup--is-inline': this.inline,
+            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { key: 'c978d4bf39f7b212eb6f4f37acbfc2f5533e2ebc', debounce: this.debounce, 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", { key: 'ffaec9fff60951e6f8134437f31b359d93b3b91e', class: "datepicker__footer" }, h("slot", { key: '58655ebaf55d53e2524eee16e87ecf629fe9eb29' }))))));
+    }
+    adjustPopupPosition() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+        adjustPopupForSmallScreens(this.popup);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-datepicker-select', 'change', this.host);
+        this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    static getCurrentDateAsPointer() {
+        return {
+            year: year(now()),
+            month: month(now()),
+            day: day(now()),
+            hours: hours(now()),
+            minutes: minutes(now()),
+            seconds: seconds(now()),
+        };
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "debounce": ["debounceChanged"],
+        "value": ["valueChanged"]
+    }; }
 };
-SixDatepicker.style = sixDatepickerCss;
+SixDatepicker.style = SixDatepickerStyle0;
 
 export { SixDatepicker as six_datepicker };