@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,1048 @@
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-79d4ef67.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'],
+    },
+    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
+ *
+ * ```typescript
+ * const date = now()
+ * // Wed Mar 10 2021 20:30:32 GMT+0100 (Central European Standard Time)
+ * ```
+ */
+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) => {
+    return value instanceof Date && !isNaN(value.getTime()) && 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 == 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);
+        }
+    }
+    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 != 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 = [];
+        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 || (SixDateFormats = {}));
+
+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 = (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 = (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: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 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 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.previousUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.previousMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.previousYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.previousYearGroup();
+            }
+        };
+        this.nextUnit = () => {
+            if (this.selectionMode === SelectionMode.DAY) {
+                this.nextMonth();
+            }
+            else if (this.selectionMode === SelectionMode.MONTH) {
+                this.nextYear();
+            }
+            else if (this.selectionMode === SelectionMode.YEAR) {
+                this.nextYearGroup();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            var _a;
+            const keyboardEvent = event;
+            // Close when escape is pressed
+            if (this.open && keyboardEvent.key === 'Escape') {
+                keyboardEvent.stopPropagation();
+                this.closePopup();
+                void ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
+            }
+            // Handle tabbing
+            if (keyboardEvent.key === 'Tab') {
+                this.closePopup();
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            // Close when clicking outside the containing element
+            const path = event.composedPath();
+            if (!path.includes(this.container)) {
+                this.closePopup();
+                return;
+            }
+        };
+        this.handleClearClick = async (event) => {
+            event.stopPropagation();
+            await this.select(undefined);
+            this.sixClear.emit();
+        };
+        this.onTimepickerChange = (sixTimepickerChange) => {
+            const time = sixTimepickerChange.detail.value;
+            const newDate = new Date();
+            if (this.selectedDate != null) {
+                newDate.setFullYear(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate());
+            }
+            if (time != null) {
+                const hours = time.hours;
+                const minutes = time.minutes;
+                const seconds = time.seconds;
+                if (hours != null) {
+                    newDate.setHours(hours, minutes, seconds);
+                }
+            }
+            this.updateValue(newDate);
+            this.updatePointerDates();
+        };
+        this.onClickDateCell = (cell) => {
+            if (!cell.isDisabled) {
+                void this.select(cell.dateString);
+            }
+        };
+        this.onClickMonthCell = (selectedMonth) => {
+            const month = i18nDate[this.locale].monthsShort.findIndex((monthShort) => monthShort === selectedMonth);
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { month });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.onClickYearCell = (year) => {
+            this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year });
+            this.selectionMode = SelectionMode.DAY;
+        };
+        this.handleInputChange = (event) => {
+            if (this.inputElement == null) {
+                return;
+            }
+            event.stopPropagation();
+            const inputValue = this.inputElement.value;
+            if (!isValidDateString(inputValue, this.dateFormat)) {
+                return;
+            }
+            const inputValueDate = toDate(inputValue, this.dateFormat);
+            if (inputValueDate === undefined) {
+                return;
+            }
+            this.updateIfChanged(inputValueDate);
+            const datesOnly = inputValue.replace(/[^\d]/g, '');
+            if (datesOnly.length >= 6) {
+                const date = toDate(inputValue, this.dateFormat);
+                const dateAsString = formatDate(date, this.dateFormat);
+                if (isValidDateString(dateAsString, this.dateFormat)) {
+                    this.selectedDate = toDate(dateAsString, this.dateFormat);
+                    this.updatePointerDates();
+                    this.updateValue(this.selectedDate);
+                }
+            }
+        };
+        this.handleOnBlur = (event) => {
+            var _a, _b;
+            // clear the value if the user deleted the date
+            if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
+                this.value = undefined;
+                this.sixSelect.emit(this.value);
+            }
+            event.stopPropagation();
+            const inputValue = (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value;
+            const inputValueDate = toDate(inputValue, this.dateFormat);
+            const formattedDate = formatDate(this.value, this.dateFormat);
+            if (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
+                // properly format date if necessary
+                this.inputElement.value = formattedDate;
+            }
+            this.sixBlur.emit(this.value);
+        };
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        this.type = 'date';
+        this.locale = 'en';
+        this.open = false;
+        this.inline = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.allowedDates = () => true;
+        this.min = undefined;
+        this.max = undefined;
+        this.closeOnSelect = this.type === 'date';
+        this.placement = undefined;
+        this.size = 'medium';
+        this.required = false;
+        this.defaultDate = undefined;
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.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;
+    }
+    debounceChanged() {
+        this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
+    }
+    /**
+     * 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();
+    }
+    async resizeHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+        this.adjustPopupPosition();
+    }
+    async scrollHandler() {
+        this.updateDropdownDirection();
+        this.moveOpenHoistedPopup();
+    }
+    moveOpenHoistedPopup() {
+        movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);
+    }
+    get container() {
+        return this.containingElement || this.host;
+    }
+    get firstDateOfBox() {
+        const date = new Date(this.pointerDate.year, this.pointerDate.month, 1);
+        return getFirstDayOfTheWeek(date);
+    }
+    /** Sets focus on the datepickers input. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+    }
+    get calendarGrid() {
+        return createCalendarGrid({
+            firstDateOfBox: this.firstDateOfBox,
+            allowedDates: this.allowedDates,
+            dateFormat: this.dateFormat,
+            locale: this.locale,
+            selectedDate: this.selectedDate,
+            minDate: this.min,
+            maxDate: this.max,
+            pointerDate: this.pointerDate,
+        });
+    }
+    updateDropdownDirection() {
+        if (this.inputElement == null || this.wrapper == null) {
+            return;
+        }
+        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", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+                datepicker__popup: true,
+                'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
+                'datepicker__popup--is-inline': this.inline,
+            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
+                ':' +
+                ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
+                ':' +
+                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { class: "datepicker__footer" }, h("slot", null))))));
+    }
+    adjustPopupPosition() {
+        adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
+        adjustPopupForSmallScreens(this.popup);
+    }
+    connectedCallback() {
+        this.eventListeners.forward('six-datepicker-select', 'change', this.host);
+        this.eventListeners.forward('six-datepicker-blur', 'blur', this.host);
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    static getCurrentDateAsPointer() {
+        return {
+            year: year(now()),
+            month: month(now()),
+            day: day(now()),
+            hours: hours(now()),
+            minutes: minutes(now()),
+            seconds: seconds(now()),
+        };
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "debounce": ["debounceChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+SixDatepicker.style = sixDatepickerCss;
+
+export { SixDatepicker as six_datepicker };
+
+//# sourceMappingURL=six-datepicker.entry.js.map