@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/wc-datepicker2.js

@@ -1,656 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-function addDays(date, days) {
-  const newDate = new Date(date);
-  newDate.setDate(newDate.getDate() + days);
-  return newDate;
-}
-function getDaysOfMonth(date, padded, firstDayOfWeek) {
-  const days = [];
-  const firstOfMonth = getFirstOfMonth(date);
-  const firstDayMonth = firstOfMonth.getDay() === 0 ? 7 : firstOfMonth.getDay();
-  const lastOfMonth = getLastOfMonth(date);
-  const lastDayOfMonth = lastOfMonth.getDay() === 0 ? 7 : lastOfMonth.getDay();
-  const lastDayOfWeek = firstDayOfWeek === 1 ? 7 : firstDayOfWeek - 1;
-  const leftPaddingDays = [];
-  const rightPaddingDays = [];
-  {
-    const leftPadding = (7 - firstDayOfWeek + firstDayMonth) % 7;
-    let leftPaddingAmount = leftPadding;
-    let leftPaddingDay = getPreviousDay(firstOfMonth);
-    while (leftPaddingAmount > 0) {
-      leftPaddingDays.push(leftPaddingDay);
-      leftPaddingDay = getPreviousDay(leftPaddingDay);
-      leftPaddingAmount -= 1;
-    }
-    leftPaddingDays.reverse();
-    const rightPadding = (7 - lastDayOfMonth + lastDayOfWeek) % 7;
-    let rightPaddingAmount = rightPadding;
-    let rightPaddingDay = getNextDay(lastOfMonth);
-    while (rightPaddingAmount > 0) {
-      rightPaddingDays.push(rightPaddingDay);
-      rightPaddingDay = getNextDay(rightPaddingDay);
-      rightPaddingAmount -= 1;
-    }
-  }
-  let currentDay = firstOfMonth;
-  while (currentDay.getMonth() === date.getMonth()) {
-    days.push(currentDay);
-    currentDay = getNextDay(currentDay);
-  }
-  return [...leftPaddingDays, ...days, ...rightPaddingDays];
-}
-function getFirstOfMonth(date) {
-  const firstOfMonth = removeTimezoneOffset(new Date(`${String(getYear(date)).padStart(4, '0')}-${String(getMonth(date)).padStart(2, '0')}-01`));
-  return firstOfMonth;
-}
-function getISODateString(date) {
-  if (!(date instanceof Date)) {
-    return;
-  }
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-}
-function getLastOfMonth(date) {
-  const newDate = getFirstOfMonth(date);
-  newDate.setMonth(newDate.getMonth() + 1);
-  newDate.setDate(newDate.getDate() - 1);
-  return newDate;
-}
-function getMonth(date) {
-  return date.getMonth() + 1;
-}
-function getMonths(locale) {
-  return new Array(12).fill(undefined).map((_, month) => {
-    const date = removeTimezoneOffset(new Date(`2006-${String(month + 1).padStart(2, '0')}-01`));
-    return Intl.DateTimeFormat(locale, {
-      month: 'long'
-    }).format(date);
-  });
-}
-function getNextDay(date) {
-  return addDays(date, 1);
-}
-function getNextMonth(date) {
-  const newDate = new Date(date);
-  newDate.setDate(1);
-  newDate.setMonth(newDate.getMonth() + 1);
-  return newDate;
-}
-function getNextYear(date) {
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() + 1);
-  return newDate;
-}
-function getPreviousDay(date) {
-  return subDays(date, 1);
-}
-function getPreviousMonth(date) {
-  const newDate = new Date(date);
-  newDate.setDate(1);
-  newDate.setMonth(newDate.getMonth() - 1);
-  return newDate;
-}
-function getPreviousYear(date) {
-  const newDate = new Date(date);
-  newDate.setFullYear(newDate.getFullYear() - 1);
-  return newDate;
-}
-function getWeekDays(firstDayOfWeek, locale) {
-  return new Array(7)
-    .fill(undefined)
-    .map((_, index) => ((firstDayOfWeek + index) % 7) + 1)
-    .map((day) => {
-    const date = removeTimezoneOffset(new Date(`2006-01-0${day}`));
-    return [
-      Intl.DateTimeFormat(locale, {
-        weekday: 'short'
-      })
-        .format(date)
-        .slice(0, 3),
-      Intl.DateTimeFormat(locale, {
-        weekday: 'long'
-      }).format(date)
-    ];
-  });
-}
-function getYear(date) {
-  return date.getFullYear();
-}
-function isDateInRange(date, range) {
-  if (!date || !range || !range.from || !range.to) {
-    return false;
-  }
-  const earlyDate = range.from < range.to ? range.from : range.to;
-  const laterDate = range.from < range.to ? range.to : range.from;
-  return date >= earlyDate && date <= laterDate;
-}
-function isSameDay(date1, date2) {
-  if (!date1 || !date2) {
-    return false;
-  }
-  return (date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate());
-}
-function removeTimezoneOffset(date) {
-  const newDate = new Date(date);
-  newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());
-  return newDate;
-}
-function subDays(date, days) {
-  const newDate = new Date(date);
-  newDate.setDate(newDate.getDate() - days);
-  return newDate;
-}
-
-const wcDatepickerCss = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}";
-
-const defaultLabels = {
-    clearButton: 'Clear value',
-    monthSelect: 'Select month',
-    nextMonthButton: 'Next month',
-    nextYearButton: 'Next year',
-    picker: 'Choose date',
-    previousMonthButton: 'Previous month',
-    previousYearButton: 'Previous year',
-    todayButton: 'Show today',
-    yearSelect: 'Select year'
-};
-const WCDatepicker = /*@__PURE__*/ proxyCustomElement(class WCDatepicker extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.selectDate = createEvent(this, "selectDate", 7);
-        this.changeMonth = createEvent(this, "changeMonth", 7);
-        this.disabled = false;
-        this.disableDate = () => false;
-        this.elementClassName = 'wc-datepicker';
-        this.firstDayOfWeek = 0;
-        this.labels = defaultLabels;
-        this.locale = (navigator === null || navigator === void 0 ? void 0 : navigator.language) || 'en-US';
-        this.showClearButton = false;
-        this.showMonthStepper = true;
-        this.showTodayButton = false;
-        this.showYearStepper = false;
-        this.startDate = getISODateString(new Date());
-        this.maxSearchDays = 365;
-        this.goToRangeStartOnSelect = true;
-        this.init = () => {
-            this.currentDate = this.startDate
-                ? removeTimezoneOffset(new Date(this.startDate))
-                : new Date();
-            this.updateWeekdays();
-        };
-        this.getAvailableDate = (date, direction) => {
-            let potentialDate;
-            let outOfRange = false;
-            switch (direction) {
-                case 'previousDay':
-                    potentialDate = getPreviousDay(date);
-                    break;
-                case 'nextDay':
-                    potentialDate = getNextDay(date);
-                    break;
-                case 'previousSameWeekDay':
-                    potentialDate = subDays(date, 7);
-                    break;
-                case 'nextSameWeekDay':
-                    potentialDate = addDays(date, 7);
-                    break;
-                case 'firstOfMonth':
-                    potentialDate = getFirstOfMonth(date);
-                    break;
-                case 'lastOfMonth':
-                    potentialDate = getLastOfMonth(date);
-                    break;
-                case 'previousMonth':
-                    potentialDate = getPreviousMonth(date);
-                    break;
-                case 'nextMonth':
-                    potentialDate = getNextMonth(date);
-                    break;
-                case 'previousYear':
-                    potentialDate = getPreviousYear(date);
-                    break;
-                case 'nextYear':
-                    potentialDate = getNextYear(date);
-                    break;
-            }
-            while (this.disableDate(potentialDate) && !outOfRange) {
-                switch (direction) {
-                    case 'previousDay':
-                    case 'lastOfMonth':
-                        potentialDate = getPreviousDay(potentialDate);
-                        break;
-                    case 'nextDay':
-                    case 'firstOfMonth':
-                    case 'previousMonth':
-                    case 'nextMonth':
-                    case 'previousYear':
-                    case 'nextYear':
-                        potentialDate = getNextDay(potentialDate);
-                        break;
-                    case 'previousSameWeekDay':
-                        potentialDate = subDays(potentialDate, 7);
-                        break;
-                    case 'nextSameWeekDay':
-                        potentialDate = addDays(potentialDate, 7);
-                        break;
-                }
-                switch (direction) {
-                    case 'firstOfMonth':
-                    case 'lastOfMonth':
-                    case 'previousYear':
-                    case 'nextYear':
-                        outOfRange = potentialDate.getMonth() !== date.getMonth();
-                        break;
-                    case 'previousMonth':
-                        outOfRange = potentialDate.getMonth() !== date.getMonth() - 1;
-                        break;
-                    case 'nextMonth':
-                        outOfRange = potentialDate.getMonth() !== date.getMonth() + 1;
-                        break;
-                    default:
-                        outOfRange = !isDateInRange(potentialDate, {
-                            from: subDays(date, this.maxSearchDays),
-                            to: addDays(date, this.maxSearchDays)
-                        });
-                        break;
-                }
-            }
-            if (outOfRange) {
-                return date;
-            }
-            return potentialDate;
-        };
-        this.nextMonth = () => {
-            this.updateCurrentDate(getNextMonth(this.currentDate));
-        };
-        this.nextYear = () => {
-            this.updateCurrentDate(getNextYear(this.currentDate));
-        };
-        this.previousMonth = () => {
-            this.updateCurrentDate(getPreviousMonth(this.currentDate));
-        };
-        this.previousYear = () => {
-            this.updateCurrentDate(getPreviousYear(this.currentDate));
-        };
-        this.showToday = () => {
-            this.updateCurrentDate(new Date());
-        };
-        this.clear = () => {
-            this.value = undefined;
-            this.selectDate.emit(undefined);
-        };
-        this.onClick = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = event.target.closest('[data-date]');
-            if (!Boolean(target)) {
-                return;
-            }
-            const date = removeTimezoneOffset(new Date(target.dataset.date));
-            this.updateCurrentDate(date);
-            this.onSelectDate(date);
-        };
-        this.onMonthSelect = (event) => {
-            const month = +event.target.value - 1;
-            const currentDay = this.currentDate.getDate();
-            const targetDate = new Date(this.currentDate.getFullYear(), month, 1);
-            const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
-            const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
-            const updatedDate = new Date(this.currentDate.getFullYear(), month, clampedDay);
-            this.updateCurrentDate(updatedDate);
-        };
-        this.onYearSelect = (event) => {
-            let year = +event.target.value;
-            const input = event.target;
-            if (isNaN(year)) {
-                year = new Date().getFullYear();
-                input.value = String(year);
-            }
-            else if (year < 0) {
-                year = 0;
-                input.value = String(year);
-            }
-            else if (year > 9999) {
-                year = 9999;
-                input.value = String(year);
-            }
-            const currentDay = this.currentDate.getDate();
-            const currentMonth = this.currentDate.getMonth();
-            const targetDate = new Date();
-            targetDate.setFullYear(year, currentMonth, 1);
-            const lastDayOfTargetMonth = getLastOfMonth(targetDate).getDate();
-            const clampedDay = Math.min(currentDay, lastDayOfTargetMonth);
-            const updatedDate = new Date();
-            updatedDate.setFullYear(year, currentMonth, clampedDay);
-            this.updateCurrentDate(updatedDate);
-        };
-        this.onKeyDown = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            if (event.code === 'ArrowLeft') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousDay'), true);
-            }
-            else if (event.code === 'ArrowRight') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextDay'), true);
-            }
-            else if (event.code === 'ArrowUp') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousSameWeekDay'), true);
-            }
-            else if (event.code === 'ArrowDown') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextSameWeekDay'), true);
-            }
-            else if (event.code === 'PageUp') {
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousYear'), true);
-                }
-                else {
-                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'previousMonth'), true);
-                }
-            }
-            else if (event.code === 'PageDown') {
-                event.preventDefault();
-                if (event.shiftKey) {
-                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextYear'), true);
-                }
-                else {
-                    this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'nextMonth'), true);
-                }
-            }
-            else if (event.code === 'Home') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'firstOfMonth'), true);
-            }
-            else if (event.code === 'End') {
-                event.preventDefault();
-                this.updateCurrentDate(this.getAvailableDate(this.currentDate, 'lastOfMonth'), true);
-            }
-            else if (event.code === 'Space' || event.code === 'Enter') {
-                event.preventDefault();
-                this.onSelectDate(this.currentDate);
-            }
-        };
-        this.onMouseEnter = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            const date = removeTimezoneOffset(new Date(event.target.closest('td').dataset.date));
-            this.hoveredDate = date;
-        };
-        this.onMouseLeave = () => {
-            this.hoveredDate = undefined;
-        };
-    }
-    componentWillLoad() {
-        this.init();
-    }
-    watchFirstDayOfWeek() {
-        this.updateWeekdays();
-    }
-    watchLocale() {
-        if (!Boolean(this.locale)) {
-            this.locale = (navigator === null || navigator === void 0 ? void 0 : navigator.language) || 'en-US';
-        }
-        this.updateWeekdays();
-    }
-    watchRange() {
-        this.value = undefined;
-        this.selectDate.emit(undefined);
-    }
-    watchStartDate() {
-        this.currentDate = this.startDate
-            ? removeTimezoneOffset(new Date(this.startDate))
-            : new Date();
-    }
-    watchValue() {
-        if (!Boolean(this.value)) {
-            return;
-        }
-        if (Array.isArray(this.value)) {
-            this.currentDate =
-                this.value.length > 1 && !this.goToRangeStartOnSelect
-                    ? this.value[1]
-                    : this.value[0];
-        }
-        else if (this.value instanceof Date) {
-            this.currentDate = this.value;
-        }
-    }
-    componentDidRender() {
-        if (this.moveFocusAfterMonthChanged) {
-            this.focusDate(this.currentDate);
-            this.moveFocusAfterMonthChanged = false;
-        }
-    }
-    updateWeekdays() {
-        this.weekdays = getWeekDays(this.firstDayOfWeek === 0 ? 7 : this.firstDayOfWeek, this.locale);
-    }
-    getClassName(element) {
-        return Boolean(element)
-            ? `${this.elementClassName}__${element}`
-            : this.elementClassName;
-    }
-    getCalendarRows() {
-        const daysOfMonth = getDaysOfMonth(this.currentDate, true, this.firstDayOfWeek === 0 ? 7 : this.firstDayOfWeek);
-        const calendarRows = [];
-        for (let i = 0; i < daysOfMonth.length; i += 7) {
-            const row = daysOfMonth.slice(i, i + 7);
-            calendarRows.push(row);
-        }
-        return calendarRows;
-    }
-    getTitle() {
-        if (!Boolean(this.value)) {
-            return;
-        }
-        if (this.isRangeValue(this.value)) {
-            const startDate = Intl.DateTimeFormat(this.locale, {
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric'
-            }).format(this.value[0]);
-            const endDate = this.value[1]
-                ? Intl.DateTimeFormat(this.locale, {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric'
-                }).format(this.value[1])
-                : undefined;
-            if (Boolean(endDate)) {
-                return `${startDate} - ${endDate}`;
-            }
-            else {
-                return startDate;
-            }
-        }
-        else {
-            return Intl.DateTimeFormat(this.locale, {
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric'
-            }).format(this.value);
-        }
-    }
-    focusDate(date) {
-        var _a;
-        (_a = this.el
-            .querySelector(`[data-date="${getISODateString(date)}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    updateCurrentDate(date, moveFocus) {
-        const month = date.getMonth();
-        const year = date.getFullYear();
-        if (year > 9999 || year < 0) {
-            return;
-        }
-        const monthChanged = month !== this.currentDate.getMonth() ||
-            year !== this.currentDate.getFullYear();
-        if (monthChanged) {
-            this.changeMonth.emit({
-                month: getMonth(date),
-                year: getYear(date),
-                day: date.getDate()
-            });
-            if (moveFocus) {
-                this.moveFocusAfterMonthChanged = true;
-            }
-        }
-        this.currentDate = date;
-        if (moveFocus) {
-            this.focusDate(this.currentDate);
-        }
-    }
-    onSelectDate(date) {
-        var _a, _b;
-        if (this.disableDate(date)) {
-            return;
-        }
-        if (this.isRangeValue(this.value)) {
-            const newValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a[0]) === undefined || this.value.length === 2
-                ? [date]
-                : [this.value[0], date];
-            if (newValue.length === 2 && newValue[0] > newValue[1]) {
-                newValue.reverse();
-            }
-            const isoValue = newValue[1] === undefined
-                ? [getISODateString(newValue[0])]
-                : [getISODateString(newValue[0]), getISODateString(newValue[1])];
-            this.value = newValue;
-            this.selectDate.emit(isoValue);
-        }
-        else {
-            if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.getTime()) === date.getTime()) {
-                return;
-            }
-            this.value = date;
-            this.selectDate.emit(getISODateString(date));
-        }
-    }
-    // @ts-ignore
-    isRangeValue(value) {
-        return this.range;
-    }
-    render() {
-        const showFooter = this.showTodayButton || this.showClearButton;
-        return (h(Host, null, h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
-                [this.getClassName()]: true,
-                [`${this.getClassName()}--disabled`]: this.disabled
-            }, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { title: this.labels.monthSelect, "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { title: this.labels.yearSelect, "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { "aria-label": weekday[1], abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
-            const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
-            return (h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
-                var _a, _b, _c, _d, _e;
-                const isCurrent = isSameDay(day, this.currentDate);
-                const isOverflowing = day.getMonth() !== this.currentDate.getMonth();
-                const isSelected = Array.isArray(this.value)
-                    ? isSameDay(day, this.value[0]) ||
-                        isSameDay(day, this.value[1])
-                    : isSameDay(day, this.value);
-                const isInRange = !this.isRangeValue
-                    ? false
-                    : isDateInRange(day, {
-                        from: (_a = this.value) === null || _a === void 0 ? void 0 : _a[0],
-                        to: ((_b = this.value) === null || _b === void 0 ? void 0 : _b[1]) ||
-                            this.hoveredDate ||
-                            this.currentDate
-                    });
-                const orderedValues = Boolean((_c = this.value) === null || _c === void 0 ? void 0 : _c[0])
-                    ? [
-                        (_d = this.value) === null || _d === void 0 ? void 0 : _d[0],
-                        ((_e = this.value) === null || _e === void 0 ? void 0 : _e[1]) || this.hoveredDate
-                    ].sort((a, b) => a - b)
-                    : [];
-                const isStart = this.range && isSameDay(orderedValues[0], day);
-                const isEnd = this.range && isSameDay(orderedValues[1], day);
-                const isToday = isSameDay(day, new Date());
-                const isDisabled = this.disableDate(day);
-                const cellKey = `cell-${day.getMonth()}-${day.getDate()}`;
-                const className = {
-                    [this.getClassName('date')]: true,
-                    [this.getClassName('date--current')]: isCurrent,
-                    [this.getClassName('date--disabled')]: isDisabled,
-                    [this.getClassName('date--overflowing')]: isOverflowing,
-                    [this.getClassName('date--today')]: isToday,
-                    [this.getClassName('date--selected')]: isSelected,
-                    [this.getClassName('date--in-range')]: isInRange,
-                    [this.getClassName('date--start')]: isStart,
-                    [this.getClassName('date--end')]: isEnd
-                };
-                const Tag = isSelected
-                    ? 'strong'
-                    : isToday
-                        ? 'em'
-                        : 'span';
-                return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, "aria-current": isToday ? 'date' : isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
-                        ? 0
-                        : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric'
-                }).format(day))));
-            })));
-        })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "firstDayOfWeek": ["watchFirstDayOfWeek"],
-        "locale": ["watchLocale"],
-        "range": ["watchRange"],
-        "startDate": ["watchStartDate"],
-        "value": ["watchValue"]
-    }; }
-    static get style() { return wcDatepickerCss; }
-}, [2, "wc-datepicker", {
-        "clearButtonContent": [1, "clear-button-content"],
-        "disabled": [4],
-        "disableDate": [16],
-        "elementClassName": [1, "element-class-name"],
-        "firstDayOfWeek": [2, "first-day-of-week"],
-        "range": [4],
-        "labels": [16],
-        "locale": [1],
-        "nextMonthButtonContent": [1, "next-month-button-content"],
-        "nextYearButtonContent": [1, "next-year-button-content"],
-        "previousMonthButtonContent": [1, "previous-month-button-content"],
-        "previousYearButtonContent": [1, "previous-year-button-content"],
-        "showClearButton": [4, "show-clear-button"],
-        "showMonthStepper": [4, "show-month-stepper"],
-        "showTodayButton": [4, "show-today-button"],
-        "showYearStepper": [4, "show-year-stepper"],
-        "startDate": [1, "start-date"],
-        "todayButtonContent": [1, "today-button-content"],
-        "value": [1040],
-        "maxSearchDays": [2, "max-search-days"],
-        "goToRangeStartOnSelect": [4, "go-to-range-start-on-select"],
-        "currentDate": [32],
-        "hoveredDate": [32],
-        "weekdays": [32]
-    }, undefined, {
-        "firstDayOfWeek": ["watchFirstDayOfWeek"],
-        "locale": ["watchLocale"],
-        "range": ["watchRange"],
-        "startDate": ["watchStartDate"],
-        "value": ["watchValue"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["wc-datepicker"];
-    components.forEach(tagName => { switch (tagName) {
-        case "wc-datepicker":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, WCDatepicker);
-            }
-            break;
-    } });
-}
-
-export { WCDatepicker as W, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as n,transformTag as a}from"@stencil/core/internal/client";function o(t,e){const i=new Date(t);return i.setDate(i.getDate()+e),i}function h(t){return D(new Date(`${String(b(t)).padStart(4,"0")}-${String(c(t)).padStart(2,"0")}-01`))}function r(t){if(t instanceof Date)return`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`}function l(t){const e=h(t);return e.setMonth(e.getMonth()+1),e.setDate(e.getDate()-1),e}function c(t){return t.getMonth()+1}function u(t){return o(t,1)}function d(t){const e=new Date(t);return e.setDate(1),e.setMonth(e.getMonth()+1),e}function v(t){const e=new Date(t);return e.setFullYear(e.getFullYear()+1),e}function w(t){return g(t,1)}function p(t){const e=new Date(t);return e.setDate(1),e.setMonth(e.getMonth()-1),e}function y(t){const e=new Date(t);return e.setFullYear(e.getFullYear()-1),e}function b(t){return t.getFullYear()}function f(t,e){return!!(t&&e&&e.from&&e.to)&&(t>=(e.from<e.to?e.from:e.to)&&t<=(e.from<e.to?e.to:e.from))}function k(t,e){return!(!t||!e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function D(t){const e=new Date(t);return e.setMinutes(e.getMinutes()+e.getTimezoneOffset()),e}function g(t,e){const i=new Date(t);return i.setDate(i.getDate()-e),i}const m={clearButton:"Clear value",monthSelect:"Select month",nextMonthButton:"Next month",nextYearButton:"Next year",picker:"Choose date",previousMonthButton:"Previous month",previousYearButton:"Previous year",todayButton:"Show today",yearSelect:"Select year"},x=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDate=i(this,"selectDate",7),this.changeMonth=i(this,"changeMonth",7),this.disabled=!1,this.disableDate=()=>!1,this.elementClassName="wc-datepicker",this.firstDayOfWeek=0,this.labels=m,this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.showClearButton=!1,this.showMonthStepper=!0,this.showTodayButton=!1,this.showYearStepper=!1,this.startDate=r(new Date),this.maxSearchDays=365,this.goToRangeStartOnSelect=!0,this.init=()=>{this.currentDate=this.startDate?D(new Date(this.startDate)):new Date,this.updateWeekdays()},this.getAvailableDate=(t,e)=>{let i,s=!1;switch(e){case"previousDay":i=w(t);break;case"nextDay":i=u(t);break;case"previousSameWeekDay":i=g(t,7);break;case"nextSameWeekDay":i=o(t,7);break;case"firstOfMonth":i=h(t);break;case"lastOfMonth":i=l(t);break;case"previousMonth":i=p(t);break;case"nextMonth":i=d(t);break;case"previousYear":i=y(t);break;case"nextYear":i=v(t)}for(;this.disableDate(i)&&!s;){switch(e){case"previousDay":case"lastOfMonth":i=w(i);break;case"nextDay":case"firstOfMonth":case"previousMonth":case"nextMonth":case"previousYear":case"nextYear":i=u(i);break;case"previousSameWeekDay":i=g(i,7);break;case"nextSameWeekDay":i=o(i,7)}switch(e){case"firstOfMonth":case"lastOfMonth":case"previousYear":case"nextYear":s=i.getMonth()!==t.getMonth();break;case"previousMonth":s=i.getMonth()!==t.getMonth()-1;break;case"nextMonth":s=i.getMonth()!==t.getMonth()+1;break;default:s=!f(i,{from:g(t,this.maxSearchDays),to:o(t,this.maxSearchDays)})}}return s?t:i},this.nextMonth=()=>{this.updateCurrentDate(d(this.currentDate))},this.nextYear=()=>{this.updateCurrentDate(v(this.currentDate))},this.previousMonth=()=>{this.updateCurrentDate(p(this.currentDate))},this.previousYear=()=>{this.updateCurrentDate(y(this.currentDate))},this.showToday=()=>{this.updateCurrentDate(new Date)},this.clear=()=>{this.value=void 0,this.selectDate.emit(void 0)},this.onClick=t=>{if(this.disabled)return;const e=t.target.closest("[data-date]");if(!Boolean(e))return;const i=D(new Date(e.dataset.date));this.updateCurrentDate(i),this.onSelectDate(i)},this.onMonthSelect=t=>{const e=+t.target.value-1,i=this.currentDate.getDate(),s=l(new Date(this.currentDate.getFullYear(),e,1)).getDate(),n=Math.min(i,s),a=new Date(this.currentDate.getFullYear(),e,n);this.updateCurrentDate(a)},this.onYearSelect=t=>{let e=+t.target.value;const i=t.target;isNaN(e)?(e=(new Date).getFullYear(),i.value=String(e)):e<0?(e=0,i.value=String(e)):e>9999&&(e=9999,i.value=String(e));const s=this.currentDate.getDate(),n=this.currentDate.getMonth(),a=new Date;a.setFullYear(e,n,1);const o=l(a).getDate(),h=Math.min(s,o),r=new Date;r.setFullYear(e,n,h),this.updateCurrentDate(r)},this.onKeyDown=t=>{this.disabled||("ArrowLeft"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"previousDay"),!0)):"ArrowRight"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"nextDay"),!0)):"ArrowUp"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"previousSameWeekDay"),!0)):"ArrowDown"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"nextSameWeekDay"),!0)):"PageUp"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,t.shiftKey?"previousYear":"previousMonth"),!0)):"PageDown"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,t.shiftKey?"nextYear":"nextMonth"),!0)):"Home"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"firstOfMonth"),!0)):"End"===t.code?(t.preventDefault(),this.updateCurrentDate(this.getAvailableDate(this.currentDate,"lastOfMonth"),!0)):"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),this.onSelectDate(this.currentDate)))},this.onMouseEnter=t=>{if(this.disabled)return;const e=D(new Date(t.target.closest("td").dataset.date));this.hoveredDate=e},this.onMouseLeave=()=>{this.hoveredDate=void 0}}componentWillLoad(){this.init()}watchFirstDayOfWeek(){this.updateWeekdays()}watchLocale(){Boolean(this.locale)||(this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US"),this.updateWeekdays()}watchRange(){this.value=void 0,this.selectDate.emit(void 0)}watchStartDate(){this.currentDate=this.startDate?D(new Date(this.startDate)):new Date}watchValue(){Boolean(this.value)&&(Array.isArray(this.value)?this.currentDate=this.value.length>1&&!this.goToRangeStartOnSelect?this.value[1]:this.value[0]:this.value instanceof Date&&(this.currentDate=this.value))}componentDidRender(){this.moveFocusAfterMonthChanged&&(this.focusDate(this.currentDate),this.moveFocusAfterMonthChanged=!1)}updateWeekdays(){var t,e;this.weekdays=(t=0===this.firstDayOfWeek?7:this.firstDayOfWeek,e=this.locale,new Array(7).fill(void 0).map(((e,i)=>(t+i)%7+1)).map((t=>{const i=D(new Date(`2006-01-0${t}`));return[Intl.DateTimeFormat(e,{weekday:"short"}).format(i).slice(0,3),Intl.DateTimeFormat(e,{weekday:"long"}).format(i)]})))}getClassName(t){return Boolean(t)?`${this.elementClassName}__${t}`:this.elementClassName}getCalendarRows(){const t=function(t,e,i){const s=[],n=h(t),a=0===n.getDay()?7:n.getDay(),o=l(t),r=0===o.getDay()?7:o.getDay(),c=1===i?7:i-1,d=[],v=[];{let t=(7-i+a)%7,e=w(n);for(;t>0;)d.push(e),e=w(e),t-=1;d.reverse();let s=(7-r+c)%7,h=u(o);for(;s>0;)v.push(h),h=u(h),s-=1}let p=n;for(;p.getMonth()===t.getMonth();)s.push(p),p=u(p);return[...d,...s,...v]}(this.currentDate,0,0===this.firstDayOfWeek?7:this.firstDayOfWeek),e=[];for(let i=0;i<t.length;i+=7){const s=t.slice(i,i+7);e.push(s)}return e}getTitle(){if(Boolean(this.value)){if(this.isRangeValue(this.value)){const t=Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(this.value[0]),e=this.value[1]?Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(this.value[1]):void 0;return Boolean(e)?`${t} - ${e}`:t}return Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(this.value)}}focusDate(t){var e;null===(e=this.el.querySelector(`[data-date="${r(t)}"]`))||void 0===e||e.focus()}updateCurrentDate(t,e){const i=t.getMonth(),s=t.getFullYear();s>9999||s<0||((i!==this.currentDate.getMonth()||s!==this.currentDate.getFullYear())&&(this.changeMonth.emit({month:c(t),year:b(t),day:t.getDate()}),e&&(this.moveFocusAfterMonthChanged=!0)),this.currentDate=t,e&&this.focusDate(this.currentDate))}onSelectDate(t){var e,i;if(!this.disableDate(t))if(this.isRangeValue(this.value)){const i=void 0===(null===(e=this.value)||void 0===e?void 0:e[0])||2===this.value.length?[t]:[this.value[0],t];2===i.length&&i[0]>i[1]&&i.reverse();const s=void 0===i[1]?[r(i[0])]:[r(i[0]),r(i[1])];this.value=i,this.selectDate.emit(s)}else{if((null===(i=this.value)||void 0===i?void 0:i.getTime())===t.getTime())return;this.value=t,this.selectDate.emit(r(t))}}isRangeValue(t){return this.range}render(){const t=this.showTodayButton||this.showClearButton;return s(n,null,s("div",{"aria-disabled":String(this.disabled),"aria-label":this.labels.picker,class:{[this.getClassName()]:!0,[`${this.getClassName()}--disabled`]:this.disabled},role:"group"},s("div",{class:this.getClassName("header")},s("span",{"aria-atomic":"true","aria-live":"polite",class:"visually-hidden"},this.getTitle()),this.showYearStepper&&s("button",{"aria-label":this.labels.previousYearButton,class:this.getClassName("previous-year-button"),disabled:this.disabled,innerHTML:this.previousYearButtonContent||void 0,onClick:this.previousYear,type:"button"},s("svg",{fill:"none",height:"24","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"24"},s("polyline",{points:"11 17 6 12 11 7"}),s("polyline",{points:"18 17 13 12 18 7"}))),this.showMonthStepper&&s("button",{"aria-label":this.labels.previousMonthButton,class:this.getClassName("previous-month-button"),disabled:this.disabled,innerHTML:this.previousMonthButtonContent||void 0,onClick:this.previousMonth,type:"button"},s("svg",{fill:"none",height:"24","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"24"},s("polyline",{points:"15 18 9 12 15 6"}))),s("span",{class:this.getClassName("current-month")},s("select",{title:this.labels.monthSelect,"aria-label":this.labels.monthSelect,class:this.getClassName("month-select"),disabled:this.disabled,name:"month",onChange:this.onMonthSelect},(e=this.locale,new Array(12).fill(void 0).map(((t,i)=>{const s=D(new Date(`2006-${String(i+1).padStart(2,"0")}-01`));return Intl.DateTimeFormat(e,{month:"long"}).format(s)}))).map(((t,e)=>s("option",{key:t,selected:this.currentDate.getMonth()===e,value:e+1},t)))),s("input",{title:this.labels.yearSelect,"aria-label":this.labels.yearSelect,class:this.getClassName("year-select"),disabled:this.disabled,max:9999,maxLength:4,min:1,name:"year",onChange:this.onYearSelect,type:"number",value:this.currentDate.getFullYear()})),this.showMonthStepper&&s("button",{"aria-label":this.labels.nextMonthButton,class:this.getClassName("next-month-button"),disabled:this.disabled,innerHTML:this.nextMonthButtonContent||void 0,onClick:this.nextMonth,type:"button"},s("svg",{fill:"none",height:"24","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"24"},s("polyline",{points:"9 18 15 12 9 6"}))),this.showYearStepper&&s("button",{"aria-label":this.labels.nextYearButton,class:this.getClassName("next-year-button"),disabled:this.disabled,innerHTML:this.nextYearButtonContent||void 0,onClick:this.nextYear,type:"button"},s("svg",{fill:"none",height:"24","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"24"},s("polyline",{points:"13 17 18 12 13 7"}),s("polyline",{points:"6 17 11 12 6 7"})))),s("div",{class:this.getClassName("body")},s("table",{class:this.getClassName("calendar"),onKeyDown:this.onKeyDown,role:"grid"},s("thead",{class:this.getClassName("calendar-header")},s("tr",{class:this.getClassName("weekday-row")},this.weekdays.map((t=>s("th",{"aria-label":t[1],abbr:t[1],class:this.getClassName("weekday"),key:t[0],scope:"col"},s("span",null,t[0])))))),s("tbody",null,this.getCalendarRows().map((t=>{const e=`row-${t[0].getMonth()}-${t[0].getDate()}`;return s("tr",{class:this.getClassName("calendar-row"),key:e},t.map((t=>{var e,i,n,a,o;const h=k(t,this.currentDate),l=t.getMonth()!==this.currentDate.getMonth(),c=Array.isArray(this.value)?k(t,this.value[0])||k(t,this.value[1]):k(t,this.value),u=!!this.isRangeValue&&f(t,{from:null===(e=this.value)||void 0===e?void 0:e[0],to:(null===(i=this.value)||void 0===i?void 0:i[1])||this.hoveredDate||this.currentDate}),d=Boolean(null===(n=this.value)||void 0===n?void 0:n[0])?[null===(a=this.value)||void 0===a?void 0:a[0],(null===(o=this.value)||void 0===o?void 0:o[1])||this.hoveredDate].sort(((t,e)=>t-e)):[],v=this.range&&k(d[0],t),w=this.range&&k(d[1],t),p=k(t,new Date),y=this.disableDate(t),b=`cell-${t.getMonth()}-${t.getDate()}`,D={[this.getClassName("date")]:!0,[this.getClassName("date--current")]:h,[this.getClassName("date--disabled")]:y,[this.getClassName("date--overflowing")]:l,[this.getClassName("date--today")]:p,[this.getClassName("date--selected")]:c,[this.getClassName("date--in-range")]:u,[this.getClassName("date--start")]:v,[this.getClassName("date--end")]:w},g=c?"strong":p?"em":"span";return s("td",{"aria-disabled":String(y),"aria-selected":c?"true":void 0,"aria-current":p?"date":c?"true":void 0,class:D,"data-date":r(t),key:b,onClick:this.onClick,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,role:"gridcell",tabIndex:k(t,this.currentDate)&&!this.disabled?0:-1},s(g,{"aria-hidden":"true"},t.getDate()),s("span",{class:"visually-hidden"},Intl.DateTimeFormat(this.locale,{day:"numeric",month:"long",year:"numeric"}).format(t)))})))}))))),t&&s("div",{class:this.getClassName("footer")},this.showTodayButton&&s("button",{class:this.getClassName("today-button"),disabled:this.disabled,innerHTML:this.todayButtonContent||void 0,onClick:this.showToday,type:"button"},this.labels.todayButton),this.showClearButton&&s("button",{class:this.getClassName("clear-button"),disabled:this.disabled,innerHTML:this.clearButtonContent||void 0,onClick:this.clear,type:"button"},this.labels.clearButton))));var e}get el(){return this}static get watchers(){return{firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}}static get style(){return".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}"}},[2,"wc-datepicker",{clearButtonContent:[1,"clear-button-content"],disabled:[4],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],range:[4],labels:[16],locale:[1],nextMonthButtonContent:[1,"next-month-button-content"],nextYearButtonContent:[1,"next-year-button-content"],previousMonthButtonContent:[1,"previous-month-button-content"],previousYearButtonContent:[1,"previous-year-button-content"],showClearButton:[4,"show-clear-button"],showMonthStepper:[4,"show-month-stepper"],showTodayButton:[4,"show-today-button"],showYearStepper:[4,"show-year-stepper"],startDate:[1,"start-date"],todayButtonContent:[1,"today-button-content"],value:[1040],maxSearchDays:[2,"max-search-days"],goToRangeStartOnSelect:[4,"go-to-range-start-on-select"],currentDate:[32],hoveredDate:[32],weekdays:[32]},void 0,{firstDayOfWeek:[{watchFirstDayOfWeek:0}],locale:[{watchLocale:0}],range:[{watchRange:0}],startDate:[{watchStartDate:0}],value:[{watchValue:0}]}]);function S(){"undefined"!=typeof customElements&&["wc-datepicker"].forEach((t=>{"wc-datepicker"===t&&(customElements.get(a(t))||customElements.define(a(t),x))}))}export{x as W,S as d}