@vonage/vivid 5.0.0 → 5.2.0

package/unbundled/calendar-picker.template.js

@@ -0,0 +1,906 @@
+import { formatISO, format, parse, addDays as addDays$1 } from 'date-fns';
+import { observable, volatile, DOM, attr, repeat, when, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { D as Divider } from './divider.js';
+import { B as Button } from './definition.js';
+import { VwcVisuallyHiddenElement as VisuallyHidden } from '../visually-hidden/definition.js';
+
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.button.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.button.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button.selected:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button.selected.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button.selected{border:1px solid var(--vvd-color-neutral-900)}";
+
+const formatDateStr = (date) => formatISO(date, { representation: "date" });
+const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);
+const parseDateStr = (dateStr) => {
+  const [year, month, day] = dateStr.split("-");
+  return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+};
+const addDays = (dateStr, days) => {
+  const date = parseDateStr(dateStr);
+  const resultDate = new Date(date);
+  resultDate.setDate(resultDate.getDate() + days);
+  return formatDateStr(resultDate);
+};
+const compareDateStr = (a, b) => a > b ? 1 : a < b ? -1 : 0;
+const hasThreeComponents = (components) => components.length === 3;
+const allComponentsAreNumbers = (components) => components.every((component) => /^\d+$/.test(component));
+const isValidDate = ([yearStr, monthStr, dayStr]) => {
+  const year = parseInt(yearStr);
+  const month = parseInt(monthStr) - 1;
+  const day = parseInt(dayStr);
+  const date = new Date(year, month, day);
+  return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day;
+};
+const isValidDateStr = (string) => {
+  const components = string.split("-");
+  return hasThreeComponents(components) && allComponentsAreNumbers(components) && isValidDate(components);
+};
+
+const formatPresentationDate = (dateStr, locale) => {
+  const date = parseDateStr(dateStr);
+  return format(date, locale.dateFormat);
+};
+const parsePresentationDate = (presentationDate, locale) => {
+  const date = parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date());
+  return formatDateStr(date);
+};
+
+const getCurrentMonth = (now = /* @__PURE__ */ new Date()) => ({
+  month: now.getMonth(),
+  year: now.getFullYear()
+});
+const monthOfDate = (dateStr) => {
+  const date = parseDateStr(dateStr);
+  return { month: date.getMonth(), year: date.getFullYear() };
+};
+const addMonths = ({ month, year }, months) => {
+  const date = new Date(year, month);
+  date.setMonth(date.getMonth() + months);
+  return { month: date.getMonth(), year: date.getFullYear() };
+};
+const compareMonths = (a, b) => a.year === b.year ? a.month - b.month : a.year - b.year;
+const areMonthsEqual = (a, b) => compareMonths(a, b) === 0;
+const monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(month + 1).toString().padStart(2, "0")}`;
+
+const yearOfDate = (dateStr) => {
+  const date = parseDateStr(dateStr);
+  return date.getFullYear();
+};
+
+const MonthsPerRow = 4;
+const buildMonthPickerGrid = (year, locale) => {
+  const grid = [];
+  let row = [];
+  for (let i = 0; i < 12; i++) {
+    const month = { month: i, year };
+    row.push({
+      label: locale.months.shorthand[i],
+      monthName: locale.months.name[i],
+      month
+    });
+    if (row.length === MonthsPerRow) {
+      grid.push(row);
+      row = [];
+    }
+  }
+  return grid;
+};
+
+const getWeekdays = (locale) => {
+  const firstDayOfWeek = locale.firstDayOfWeek;
+  const localeWeekdayToNative = (day) => (day + firstDayOfWeek) % 7;
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    days.push({
+      name: locale.weekdays.name[localeWeekdayToNative(i)],
+      shortName: locale.weekdays.shorthand[localeWeekdayToNative(i)]
+    });
+  }
+  return days;
+};
+const gridDate = (date, isOutsideMonth2) => ({
+  date: formatDateStr(date),
+  label: `${date.getDate()}`,
+  isOutsideMonth: isOutsideMonth2
+});
+function isOutsideMonth(dayIndexInMonth, daysInMonth) {
+  return dayIndexInMonth < 0 || dayIndexInMonth >= daysInMonth;
+}
+const buildDateGrid = ({ month, year }, getDay) => {
+  const grid = [];
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const firstDayInWeek = getDay(firstDay);
+  const daysInMonth = lastDay.getDate();
+  const daysOutsideMonthInLastWeek = 7 - getDay(lastDay);
+  const totalDaysInCalendar = daysInMonth + firstDayInWeek + daysOutsideMonthInLastWeek;
+  let week = [];
+  for (let i = 0; i < totalDaysInCalendar; i++) {
+    const dayIndexInMonth = i - firstDayInWeek;
+    week.push(
+      gridDate(
+        addDays$1(firstDay, dayIndexInMonth),
+        isOutsideMonth(dayIndexInMonth, daysInMonth)
+      )
+    );
+    if (week.length === 7) {
+      grid.push(week);
+      week = [];
+    }
+  }
+  return grid;
+};
+const buildCalendarGrid = (month, locale) => {
+  const { firstDayOfWeek } = locale;
+  const getShiftedDay = (date) => (date.getDay() - firstDayOfWeek + 7) % 7;
+  return {
+    weekdays: getWeekdays(locale),
+    grid: buildDateGrid(month, getShiftedDay)
+  };
+};
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+const CalendarPicker = (Base) => {
+  class CalendarPickerElement extends Base {
+    // --- Core ---
+    constructor(...args) {
+      super(...args);
+      this._selectedMonth = getCurrentMonth();
+      /**
+       * Today's date.
+       * @internal
+       */
+      this._currentDate = currentDateStr();
+      /**
+       * Today's month.
+       * @internal
+       */
+      this._currentMonth = getCurrentMonth();
+      this._numCalendars = 1;
+      // --- Date picker ---
+      /**
+       * @internal
+       */
+      this._hideDatesOutsideMonth = false;
+      this._lastFocussedDate = null;
+      this._monthPickerYear = null;
+      this._lastFocussedMonth = null;
+      this.value = "";
+    }
+    /**
+     * @internal
+     */
+    _adjustSelectedMonthToEnsureVisibilityOf(date) {
+      const month = monthOfDate(date);
+      const firstDisplayedMonth = this._selectedMonth;
+      const lastDisplayedMonth = addMonths(
+        this._selectedMonth,
+        this._numCalendars - 1
+      );
+      if (compareMonths(month, firstDisplayedMonth) < 0) {
+        this._selectedMonth = month;
+        return true;
+      } else if (compareMonths(month, lastDisplayedMonth) > 0) {
+        this._selectedMonth = addMonths(month, 1 - this._numCalendars);
+        return true;
+      }
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateInValidRange(date) {
+      return (!this._resolvedMinDate || compareDateStr(date, this._resolvedMinDate) >= 0) && (!this._resolvedMaxDate || compareDateStr(date, this._resolvedMaxDate) <= 0);
+    }
+    #isMonthAfterValidRange(month) {
+      return this._resolvedMaxDate && compareMonths(month, monthOfDate(this._resolvedMaxDate)) > 0;
+    }
+    #isMonthBeforeValidRange(month) {
+      return this._resolvedMinDate && compareMonths(month, monthOfDate(this._resolvedMinDate)) < 0;
+    }
+    /**
+     * @internal
+     */
+    _isMonthInValidRange(month) {
+      return !(this.#isMonthBeforeValidRange(month) || this.#isMonthAfterValidRange(month));
+    }
+    /**
+     * @internal
+     */
+    _closePopup(restoreFocusToTextField = true) {
+      super._closePopup(restoreFocusToTextField);
+      this._monthPickerYear = null;
+    }
+    /**
+     * @internal
+     */
+    _onPickerButtonClick() {
+      super._onPickerButtonClick();
+      if (this._popupOpen) {
+        DOM.processUpdates();
+        const tabbableDate = this._tabbableDate;
+        if (tabbableDate)
+          this.shadowRoot.querySelector(
+            `[data-date="${tabbableDate}"]`
+          ).focus();
+      }
+    }
+    // --- Calendar header ---
+    /**
+     * @internal
+     */
+    _onTitleActionClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = null;
+      } else {
+        this._monthPickerYear = this._selectedMonth.year;
+      }
+    }
+    get _isPrevYearDisabled() {
+      const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
+      const prevYear = currentYear - 1;
+      return this._resolvedMinDate && prevYear < yearOfDate(this._resolvedMinDate);
+    }
+    /**
+     * @internal
+     */
+    _onPrevYearClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = this._monthPickerYear - 1;
+      } else {
+        this._selectedMonth = {
+          year: this._selectedMonth.year - 1,
+          month: this._selectedMonth.month
+        };
+      }
+    }
+    get _isNextYearDisabled() {
+      const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
+      const nextYear = currentYear + 1;
+      return this._resolvedMaxDate && nextYear > yearOfDate(this._resolvedMaxDate);
+    }
+    /**
+     * @internal
+     */
+    _onNextYearClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = this._monthPickerYear + 1;
+      } else {
+        this._selectedMonth = {
+          year: this._selectedMonth.year + 1,
+          month: this._selectedMonth.month
+        };
+      }
+    }
+    /**
+     * @internal
+     */
+    get _isPrevMonthDisabled() {
+      return this.#isMonthBeforeValidRange(addMonths(this._selectedMonth, -1));
+    }
+    /**
+     * @internal
+     */
+    _onPrevMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, -1);
+    }
+    /**
+     * @internal
+     */
+    get _isNextMonthDisabled() {
+      return this.#isMonthAfterValidRange(addMonths(this._selectedMonth, 1));
+    }
+    /**
+     * @internal
+     */
+    _onNextMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, 1);
+    }
+    /**
+     * @internal
+     */
+    get _segments() {
+      const segments = [];
+      if (this._inMonthPicker) {
+        segments.push({
+          id: 0,
+          type: "month-picker",
+          title: `${this._monthPickerYear}`,
+          titleClickable: true,
+          titleAriaLabel: this.locale.calendarPicker.showCalendarForMonthLabel(
+            `${this.locale.calendarPicker.months.name[this._selectedMonth.month]} ${this._selectedMonth.year}`
+          ),
+          prevYearButton: true,
+          nextYearButton: true,
+          months: buildMonthPickerGrid(
+            this._monthPickerYear,
+            this.locale.calendarPicker
+          )
+        });
+      } else {
+        for (let i = 0; i < this._numCalendars; i++) {
+          const month = addMonths(this._selectedMonth, i);
+          const isSingle = this._numCalendars === 1;
+          const isFirst = i === 0;
+          const isLast = i === this._numCalendars - 1;
+          segments.push({
+            id: i,
+            type: "calendar",
+            title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
+            titleClickable: isSingle,
+            titleAriaLabel: this.locale.calendarPicker.changeMonthLabel(
+              `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`
+            ),
+            prevYearButton: isFirst && isSingle,
+            prevMonthButton: isFirst,
+            nextMonthButton: isLast,
+            nextYearButton: isLast && isSingle,
+            calendar: buildCalendarGrid(month, this.locale.calendarPicker)
+          });
+        }
+      }
+      return segments;
+    }
+    /**
+     * @internal
+     */
+    _isDateSelected(_) {
+      return false;
+    }
+    /**
+     * @internal
+     * @private
+     */
+    _isDateInSelectedRange(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateRangeStart(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateRangeEnd(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _onDateMouseEnter(_) {
+    }
+    /**
+     * @internal
+     */
+    _onDateMouseLeave(_) {
+    }
+    /**
+     * Handle keydown on a date in the calendar.
+     * @internal
+     */
+    _onDateKeydown(date, event) {
+      let newDate = null;
+      if (event.key === "ArrowUp") {
+        newDate = addDays(date, -7);
+      } else if (event.key === "ArrowDown") {
+        newDate = addDays(date, 7);
+      } else if (event.key === "ArrowLeft") {
+        newDate = addDays(date, -1);
+      } else if (event.key === "ArrowRight") {
+        newDate = addDays(date, 1);
+      }
+      if (newDate && this._isDateInValidRange(newDate)) {
+        if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
+          DOM.processUpdates();
+        }
+        this._dialogEl.querySelector(
+          `[data-date="${newDate}"]`
+        ).focus();
+        return false;
+      }
+      return true;
+    }
+    /**
+     * @internal
+     */
+    _onDateFocus(date) {
+      this._lastFocussedDate = date;
+    }
+    get _tabbableDate() {
+      const datesInSegments = this._segments.filter(
+        (segment) => segment.type === "calendar"
+      ).flatMap((segment) => segment.calendar.grid.flat().map((d) => d.date));
+      const candidates = [
+        this._lastFocussedDate,
+        ...this._getSelectedDates(),
+        currentDateStr(),
+        ...datesInSegments
+      ];
+      const firstVisibleMonth = this._selectedMonth;
+      const lastVisibleMonth = addMonths(
+        this._selectedMonth,
+        this._numCalendars - 1
+      );
+      return candidates.find(
+        (date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)
+      ) ?? null;
+    }
+    /**
+     * @internal
+     */
+    get _inMonthPicker() {
+      return this._monthPickerYear !== null;
+    }
+    /**
+     * Handle month selected in the month picker.
+     * @internal
+     */
+    _onMonthClick(month) {
+      this._selectedMonth = month;
+      this._monthPickerYear = null;
+    }
+    /**
+     * Handle keydown on a month in the month picker.
+     * @internal
+     */
+    _onMonthKeydown(month, event) {
+      let newMonth = null;
+      if (event.key === "ArrowUp") {
+        newMonth = addMonths(month, -4);
+      } else if (event.key === "ArrowDown") {
+        newMonth = addMonths(month, MonthsPerRow);
+      } else if (event.key === "ArrowLeft") {
+        newMonth = addMonths(month, -1);
+      } else if (event.key === "ArrowRight") {
+        newMonth = addMonths(month, 1);
+      }
+      if (newMonth && this._isMonthInValidRange(newMonth)) {
+        if (newMonth.year !== this._monthPickerYear) {
+          this._monthPickerYear = newMonth.year;
+          DOM.processUpdates();
+        }
+        this._dialogEl.querySelector(
+          `[data-month="${monthToStr(newMonth)}"]`
+        ).focus();
+        return false;
+      }
+      return true;
+    }
+    /**
+     * @internal
+     */
+    _onMonthFocus(month) {
+      this._lastFocussedMonth = month;
+    }
+    get _tabbableMonth() {
+      const monthsInSegments = this._segments.filter(
+        (segments) => segments.type === "month-picker"
+      ).flatMap((segment) => segment.months.flat().map((c) => c.month));
+      const candidates = [
+        this._lastFocussedMonth,
+        this._selectedMonth,
+        getCurrentMonth(),
+        ...monthsInSegments
+      ];
+      return candidates.find(
+        (month) => month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)
+      ) ?? null;
+    }
+  }
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_selectedMonth", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_isPrevYearDisabled", 1);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_isNextYearDisabled", 1);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_numCalendars", 2);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_lastFocussedDate", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_tabbableDate", 1);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_monthPickerYear", 2);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_lastFocussedMonth", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_tabbableMonth", 1);
+  return CalendarPickerElement;
+};
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const ValidDateFilter = {
+  fromView: (value) => {
+    if (value && isValidDateStr(value)) {
+      return value;
+    }
+    return "";
+  },
+  toView(value) {
+    return value;
+  }
+};
+const MinMaxCalendarPicker = (SuperClass) => {
+  class MinMaxDatePickerElement extends SuperClass {
+    /**
+     * @internal
+     */
+    minChanged(_, newMin) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.min = newMin;
+        this.validate();
+      }
+    }
+    /**
+     * @internal
+     */
+    get _resolvedMinDate() {
+      return this.min;
+    }
+    /**
+     * @internal
+     */
+    maxChanged(_, newMax) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.max = newMax;
+        this.validate();
+      }
+    }
+    /**
+     * The latest accepted date.
+     * @internal
+     */
+    get _resolvedMaxDate() {
+      return this.max;
+    }
+    constructor(...args) {
+      super(...args);
+      this.min = "";
+      this.max = "";
+    }
+  }
+  __decorateClass([
+    attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "min");
+  __decorateClass([
+    attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "max");
+  return MinMaxDatePickerElement;
+};
+
+function renderDialogHeader(context) {
+  const buttonTag = context.tagFor(Button);
+  return html`<div class="header" tabindex="-1">
+		${when(
+    (x) => x.prevYearButton,
+    html`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='${(_, c) => c.parent._inMonthPicker ? "chevron-left-line" : "double-chevron-left-line"}'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.prevYearLabel}'
+						?disabled='${(_, c) => c.parent._isPrevYearDisabled}'
+						@click='${(_, c) => c.parent._onPrevYearClick()}'
+					></${buttonTag}>
+				`
+  )}
+		${when(
+    (x) => x.prevMonthButton,
+    html`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='chevron-left-line'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.prevMonthLabel}'
+						?disabled='${(_, c) => c.parent._isPrevMonthDisabled}'
+						@click='${(_, c) => c.parent._onPrevMonthClick()}'
+					></${buttonTag}>
+				`
+  )}
+		<div class="title">
+			${when(
+    (x) => x.titleClickable,
+    html`
+					<button
+						tabindex="1"
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action button"
+						aria-live="polite"
+						aria-label="${(x) => x.titleAriaLabel}"
+						@click="${(_, c) => c.parent._onTitleActionClick()}"
+					>
+						${(x) => x.title}
+					</button>
+				`
+  )}
+			${when(
+    (x) => !x.titleClickable,
+    html`
+					<div
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action"
+						aria-live="polite"
+					>
+						${(x) => x.title}
+					</div>
+				`
+  )}
+		</div>
+
+		${when(
+    (x) => x.nextMonthButton,
+    html`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='chevron-right-line'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.nextMonthLabel}'
+						?disabled='${(_, c) => c.parent._isNextMonthDisabled}'
+						@click='${(_, c) => c.parent._onNextMonthClick()}'
+					></${buttonTag}>
+				`
+  )}
+		${when(
+    (x) => x.nextYearButton,
+    html`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='${(_, c) => c.parent._inMonthPicker ? "chevron-right-line" : "double-chevron-right-line"}'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.nextYearLabel}'
+						?disabled='${(_, c) => c.parent._isNextYearDisabled}'
+						@click='${(_, c) => c.parent._onNextYearClick()}'
+					></${buttonTag}>
+				`
+  )}
+	</div>`;
+}
+function renderCalendarGrid(context) {
+  const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+  return html`
+		<div
+			class='calendar'
+			role='grid'
+			aria-labelledby='${(x) => `grid-label-${x.id}`}'
+		>
+			<div class='calendar-weekdays' role='row'>
+				${repeat(
+    (x) => x.calendar.weekdays,
+    html`
+						<div
+							class="calendar-weekday"
+							role="columnheader"
+							aria-label="${(x) => x.name}"
+						>
+							${(x) => x.shortName}
+						</div>
+					`
+  )}
+			</div>
+			<${dividerTag} class='calendar-separator' role='presentation'></${dividerTag}>
+			${repeat(
+    (x) => x.calendar.grid,
+    html` <div class="calendar-week" role="row">
+					${repeat(
+      (x) => x,
+      html`
+								${when(
+        (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
+        html`<div class="calendar-day"></div>`
+      )}
+								${when(
+        (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
+        html` <span role="gridcell">
+										<button
+											class="${(x, c) => classNames(
+          "calendar-day",
+          "button",
+          [
+            "current",
+            x.date === c.parentContext.parentContext.parent._currentDate
+          ],
+          [
+            "selected",
+            c.parentContext.parentContext.parent._isDateSelected(
+              x.date
+            )
+          ],
+          [
+            "range",
+            c.parentContext.parentContext.parent._isDateInSelectedRange(
+              x.date
+            )
+          ],
+          [
+            "start",
+            c.parentContext.parentContext.parent._isDateRangeStart(
+              x.date
+            )
+          ],
+          [
+            "end",
+            c.parentContext.parentContext.parent._isDateRangeEnd(
+              x.date
+            )
+          ],
+          ["outside-month", x.isOutsideMonth]
+        )}"
+											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
+          x.date
+        )}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
+											data-date="${(x) => x.date}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
+											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
+          x.date
+        )}"
+											@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(
+          x.date
+        )}"
+											@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
+          x.date,
+          c.event
+        )}"
+										>
+											${(x) => x.label}
+											<${visuallyHiddenTag}>${(x, c) => {
+          const picker = c.parentContext.parentContext.parent;
+          const announcements = [];
+          if (x.date === picker._currentDate) {
+            announcements.push(
+              picker.locale.calendarPicker.todayLabel
+            );
+          }
+          if (picker._isDateAriaSelected(x.date)) {
+            announcements.push(
+              picker.locale.calendarPicker.selectedLabel
+            );
+          }
+          return announcements.join(" ");
+        }}</${visuallyHiddenTag}>
+										</button>
+									</span>`
+      )}
+								</div>
+							`
+    )}
+				</div>`
+  )}`;
+}
+function renderMonthPickerGrid(context) {
+  const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+  return html`
+		<${dividerTag}
+			class='months-separator'
+			role='presentation'
+		></${dividerTag}>
+		<div
+			class='month-grid'
+			role='grid'
+			aria-labelledby='grid-label'
+		>
+			${repeat(
+    (x) => x.months,
+    html`
+					<div class="months-row" role="row">
+						${repeat(
+      (x) => x,
+      html`
+								<span role="gridcell">
+									<button
+										class="${(x, c) => classNames(
+        "month",
+        "button",
+        [
+          "current",
+          areMonthsEqual(
+            x.month,
+            c.parentContext.parentContext.parent._currentMonth
+          )
+        ],
+        [
+          "selected",
+          areMonthsEqual(
+            x.month,
+            c.parentContext.parentContext.parent._selectedMonth
+          )
+        ]
+      )}"
+										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
+        x.month,
+        c.parentContext.parentContext.parent._tabbableMonth
+      ) ? 1 : -1}"
+										aria-label="${(x) => x.monthName}"
+										data-month="${(x) => monthToStr(x.month)}"
+										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
+        x.month
+      )}"
+										@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
+        x.month
+      )}"
+										@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
+        x.month
+      )}"
+										@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
+        x.month,
+        c.event
+      )}"
+									>
+										${(x) => x.label}
+										<${visuallyHiddenTag}>${(x, c) => {
+        const picker = c.parentContext.parentContext.parent;
+        const announcements = [];
+        if (areMonthsEqual(x.month, picker._currentMonth)) {
+          announcements.push(picker.locale.calendarPicker.currentLabel);
+        }
+        if (areMonthsEqual(x.month, picker._selectedMonth)) {
+          announcements.push(
+            picker.locale.calendarPicker.selectedLabel
+          );
+        }
+        return announcements.join(" ");
+      }}</${visuallyHiddenTag}>
+									</button>
+								</span>
+							`
+    )}
+					</div>
+				`
+  )}
+		</div>`;
+}
+const CalendarPickerTemplate = (context) => {
+  return html`
+		<div class="segments">
+			${repeat(
+    (x) => x._segments,
+    html` <div class="segment">
+					${renderDialogHeader(context)}
+					${when(
+      (x) => x.type === "month-picker",
+      html`${renderMonthPickerGrid(context)}`
+    )}
+					${when(
+      (x) => x.type === "calendar",
+      html`${renderCalendarGrid(context)}`
+    )}
+				</div>`
+  )}
+		</div>
+	`;
+};
+
+export { CalendarPicker as C, MinMaxCalendarPicker as M, ValidDateFilter as V, CalendarPickerTemplate as a, compareDateStr as b, calendarStyles as c, currentDateStr as d, formatPresentationDate as f, isValidDateStr as i, parsePresentationDate as p };