@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/calendar-picker.template.js

@@ -1,605 +1,523 @@
-import { formatISO, format, parse, addDays as addDays$1 } from 'date-fns';
-import { observable, volatile, Updates, 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 './definition2.js';
-import { VwcVisuallyHiddenElement as VisuallyHidden } from '../visually-hidden/definition.js';
-
-const calendarStyles = ".segments{gap:24px}@media(width>=648px){.segments{display:inline-flex}}.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(--focus-stroke-color, 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));
+import { r as VisuallyHidden } from "./definition.js";
+import { t as __decorate } from "./decorate.js";
+import { i as Button } from "./definition7.js";
+import { t as Divider } from "./divider.js";
+import { Updates, attr, html, observable, repeat, volatile, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+import { addDays, format, formatISO, parse } from "date-fns";
+//#region src/shared/picker-field/mixins/calendar-picker.scss?inline
+var calendar_picker_default = ".segments{gap:24px}@media (width>=648px){.segments{display:inline-flex}}.segment{flex-direction:column;gap:12px;display:flex}.segment .header{align-items:center;padding-block:8px;display:flex}.segment .title{flex-grow:1;justify-content:center;display:flex}.segment .title-action{block-size:24px;font:var(--vvd-typography-base-extended);border-radius:8px;padding-inline:8px}.calendar{flex-direction:column;gap:4px;margin-top:8px;display:flex}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{justify-content:center;display:flex}.calendar .calendar-weekday{block-size:16px;font:var(--vvd-typography-base-condensed);justify-content:center;align-items:center;inline-size:40px;display:inline-flex}.calendar .calendar-week{justify-content:center;display:flex}.calendar .calendar-day{aspect-ratio:1;block-size:28px;font:var(--vvd-typography-base);border-radius:50%;justify-content:center;align-items:center;margin-inline:6px;display:inline-flex}.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{z-index:-1;width:20px;height:28px;display:block;position:absolute}.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{flex-direction:column;gap:34px;display:flex}.month-grid .months-row{justify-content:center;gap:29px;display:flex}.month-grid .month{aspect-ratio:1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.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));--_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)),.button.active:where(:not(.disabled,:disabled)),.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,.button.selected.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:transparent}.button{background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;border:none;padding:0;position:relative}.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(--focus-stroke-color,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)}";
+//#endregion
+//#region src/shared/datetime/dateStr.ts
+var formatDateStr = (date) => formatISO(date, { representation: "date" });
+var currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);
+var 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);
+var addDays$1 = (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;
+var compareDateStr = (a, b) => a > b ? 1 : a < b ? -1 : 0;
+var hasThreeComponents = (components) => components.length === 3;
+var allComponentsAreNumbers = (components) => components.every((component) => /^\d+$/.test(component));
+var 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);
+var 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);
+//#endregion
+//#region src/shared/datetime/presentationDate.ts
+var formatPresentationDate = (dateStr, locale) => {
+	return format(parseDateStr(dateStr), locale.dateFormat);
 };
-const parsePresentationDate = (presentationDate, locale) => {
-  const date = parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date());
-  return formatDateStr(date);
+/**
+* Parse a presentation date, which is the locale specific format (e.g. DD/MM/YYYY for en-GB).
+* Accepts partial dates, e.g. 1/1/2021 will be parsed as 01/01/2021.
+* Will throw if the date is can't be parsed
+*/
+var parsePresentationDate = (presentationDate, locale) => {
+	return formatDateStr(parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date()));
 };
-
-const getCurrentMonth = (now = /* @__PURE__ */ new Date()) => ({
-  month: now.getMonth(),
-  year: now.getFullYear()
+//#endregion
+//#region src/shared/datetime/month.ts
+var 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() };
+var 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() };
+var 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();
+var compareMonths = (a, b) => a.year === b.year ? a.month - b.month : a.year - b.year;
+var areMonthsEqual = (a, b) => compareMonths(a, b) === 0;
+var monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(month + 1).toString().padStart(2, "0")}`;
+//#endregion
+//#region src/shared/datetime/year.ts
+var yearOfDate = (dateStr) => {
+	return parseDateStr(dateStr).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;
+var 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 === 4) {
+			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;
+//#endregion
+//#region src/shared/picker-field/mixins/calendar-segments/calendarGrid.ts
+var 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
+var gridDate = (date, isOutsideMonth) => ({
+	date: formatDateStr(date),
+	label: `${date.getDate()}`,
+	isOutsideMonth
 });
 function isOutsideMonth(dayIndexInMonth, daysInMonth) {
-  return dayIndexInMonth < 0 || 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;
+var 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(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 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) {
-        Updates.process();
-        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)) {
-          Updates.process();
-        }
-        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, -MonthsPerRow);
-      } 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;
-          Updates.process();
-        }
-        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;
+//#endregion
+//#region src/shared/picker-field/mixins/calendar-picker.ts
+/**
+* Mixin for pickers that show a calendar. Subclasses need to override the
+* abstract methods to control the calendar.
+*/
+var CalendarPicker = (Base) => {
+	class CalendarPickerElement extends Base {
+		/**
+		* @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));
+		}
+		constructor(...args) {
+			super(...args);
+			this._selectedMonth = getCurrentMonth();
+			this._currentDate = currentDateStr();
+			this._currentMonth = getCurrentMonth();
+			this._numCalendars = 1;
+			this._hideDatesOutsideMonth = false;
+			this._lastFocussedDate = null;
+			this._monthPickerYear = null;
+			this._lastFocussedMonth = null;
+			this.value = "";
+		}
+		/**
+		* @internal
+		*/
+		_closePopup(restoreFocusToTextField = true) {
+			super._closePopup(restoreFocusToTextField);
+			this._monthPickerYear = null;
+		}
+		/**
+		* @internal
+		*/
+		_onPickerButtonClick() {
+			super._onPickerButtonClick();
+			if (this._popupOpen) {
+				Updates.process();
+				const tabbableDate = this._tabbableDate;
+				if (tabbableDate) this.shadowRoot.querySelector(`[data-date="${tabbableDate}"]`).focus();
+			}
+		}
+		/**
+		* @internal
+		*/
+		_onTitleActionClick() {
+			if (this._inMonthPicker) this._monthPickerYear = null;
+			else this._monthPickerYear = this._selectedMonth.year;
+		}
+		/**
+		* @internal
+		*/
+		get _isPrevYearDisabled() {
+			const prevYear = (this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year) - 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
+			};
+		}
+		/**
+		* @internal
+		*/
+		get _isNextYearDisabled() {
+			const nextYear = (this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year) + 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$1(date, -7);
+			else if (event.key === "ArrowDown") newDate = addDays$1(date, 7);
+			else if (event.key === "ArrowLeft") newDate = addDays$1(date, -1);
+			else if (event.key === "ArrowRight") newDate = addDays$1(date, 1);
+			if (newDate && this._isDateInValidRange(newDate)) {
+				if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) Updates.process();
+				this._dialogEl.querySelector(`[data-date="${newDate}"]`).focus();
+				return false;
+			}
+			return true;
+		}
+		/**
+		* @internal
+		*/
+		_onDateFocus(date) {
+			this._lastFocussedDate = date;
+		}
+		/**
+		* Only one date should be in the tab order at a time (tab roving).
+		* @internal
+		*/
+		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, 4);
+			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;
+					Updates.process();
+				}
+				this._dialogEl.querySelector(`[data-month="${monthToStr(newMonth)}"]`).focus();
+				return false;
+			}
+			return true;
+		}
+		/**
+		* @internal
+		*/
+		_onMonthFocus(month) {
+			this._lastFocussedMonth = month;
+		}
+		/**
+		* Only one month should be in the tab order at a time (tab roving).
+		* @internal
+		*/
+		get _tabbableMonth() {
+			const monthsInSegments = this._segments.filter((segments) => segments.type === "month-picker").flatMap((segment) => segment.months.flat().map((c) => c.month));
+			return [
+				this._lastFocussedMonth,
+				this._selectedMonth,
+				getCurrentMonth(),
+				...monthsInSegments
+			].find((month) => month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)) ?? null;
+		}
+	}
+	__decorate([observable], CalendarPickerElement.prototype, "_selectedMonth", void 0);
+	__decorate([volatile], CalendarPickerElement.prototype, "_isPrevYearDisabled", null);
+	__decorate([volatile], CalendarPickerElement.prototype, "_isNextYearDisabled", null);
+	__decorate([observable], CalendarPickerElement.prototype, "_numCalendars", void 0);
+	__decorate([observable], CalendarPickerElement.prototype, "_lastFocussedDate", void 0);
+	__decorate([volatile], CalendarPickerElement.prototype, "_tabbableDate", null);
+	__decorate([observable], CalendarPickerElement.prototype, "_monthPickerYear", void 0);
+	__decorate([observable], CalendarPickerElement.prototype, "_lastFocussedMonth", void 0);
+	__decorate([volatile], CalendarPickerElement.prototype, "_tabbableMonth", null);
+	return CalendarPickerElement;
 };
-const ValidDateFilter = {
-  fromView: (value) => {
-    if (value && isValidDateStr(value)) {
-      return value;
-    }
-    return "";
-  },
-  toView(value) {
-    return value;
-  }
+//#endregion
+//#region src/shared/picker-field/mixins/min-max-calendar-picker.ts
+var 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;
+/**
+* Mixin for calendar pickers where min/max is a date.
+*/
+var MinMaxCalendarPicker = (SuperClass) => {
+	class MinMaxDatePickerElement extends SuperClass {
+		/**
+		* @internal
+		*/
+		minChanged(_, newMin) {
+			/* v8 ignore if -- @preserve */
+			if (this.proxy instanceof HTMLInputElement) {
+				this.proxy.min = newMin;
+				this.validate();
+			}
+		}
+		/**
+		* @internal
+		*/
+		get _resolvedMinDate() {
+			return this.min;
+		}
+		/**
+		* @internal
+		*/
+		maxChanged(_, newMax) {
+			/* v8 ignore if -- @preserve */
+			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 = "";
+		}
+	}
+	__decorate([attr({ converter: ValidDateFilter })], MinMaxDatePickerElement.prototype, "min", void 0);
+	__decorate([attr({ converter: ValidDateFilter })], MinMaxDatePickerElement.prototype, "max", void 0);
+	return MinMaxDatePickerElement;
 };
-
+//#endregion
+//#region src/shared/picker-field/mixins/calendar-picker.template.ts
 function renderDialogHeader(context) {
-  const buttonTag = context.tagFor(Button);
-  return html`<div class="header" tabindex="-1">
-		${when(
-    (x) => x.prevYearButton,
-    html`
+	const buttonTag = context.tagFor(Button);
+	return html`<div class="header" tabindex="-1">
+		${when((x) => x.prevYearButton, html`
 					<${buttonTag}
 						tabindex='1'
 						class='vwc-button'
@@ -609,11 +527,8 @@ function renderDialogHeader(context) {
 						?disabled='${(_, c) => c.parent._isPrevYearDisabled}'
 						@click='${(_, c) => c.parent._onPrevYearClick()}'
 					></${buttonTag}>
-				`
-  )}
-		${when(
-    (x) => x.prevMonthButton,
-    html`
+				`)}
+		${when((x) => x.prevMonthButton, html`
 					<${buttonTag}
 						tabindex='1'
 						class='vwc-button'
@@ -623,12 +538,9 @@ function renderDialogHeader(context) {
 						?disabled='${(_, c) => c.parent._isPrevMonthDisabled}'
 						@click='${(_, c) => c.parent._onPrevMonthClick()}'
 					></${buttonTag}>
-				`
-  )}
+				`)}
 		<div class="title">
-			${when(
-    (x) => x.titleClickable,
-    html`
+			${when((x) => x.titleClickable, html`
 					<button
 						tabindex="1"
 						id="${(x) => `grid-label-${x.id}`}"
@@ -639,11 +551,8 @@ function renderDialogHeader(context) {
 					>
 						${(x) => x.title}
 					</button>
-				`
-  )}
-			${when(
-    (x) => !x.titleClickable,
-    html`
+				`)}
+			${when((x) => !x.titleClickable, html`
 					<div
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action"
@@ -651,13 +560,10 @@ function renderDialogHeader(context) {
 					>
 						${(x) => x.title}
 					</div>
-				`
-  )}
+				`)}
 		</div>
 
-		${when(
-    (x) => x.nextMonthButton,
-    html`
+		${when((x) => x.nextMonthButton, html`
 					<${buttonTag}
 						tabindex='1'
 						class='vwc-button'
@@ -667,11 +573,8 @@ function renderDialogHeader(context) {
 						?disabled='${(_, c) => c.parent._isNextMonthDisabled}'
 						@click='${(_, c) => c.parent._onNextMonthClick()}'
 					></${buttonTag}>
-				`
-  )}
-		${when(
-    (x) => x.nextYearButton,
-    html`
+				`)}
+		${when((x) => x.nextYearButton, html`
 					<${buttonTag}
 						tabindex='1'
 						class='vwc-button'
@@ -681,23 +584,20 @@ function renderDialogHeader(context) {
 						?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`
+	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`
+				${repeat((x) => x.calendar.weekdays, html`
 						<div
 							class="calendar-weekday"
 							role="columnheader"
@@ -705,104 +605,42 @@ function renderCalendarGrid(context) {
 						>
 							${(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">
+			${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
-        )}"
+											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
-        )}"
+											@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}>
+		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>`
-      )}
+									</span>`)}
 								</div>
-							`
-    )}
-				</div>`
-  )}`;
+							`)}
+				</div>`)}`;
 }
 function renderMonthPickerGrid(context) {
-  const dividerTag = context.tagFor(Divider);
-  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
-  return html`
+	const dividerTag = context.tagFor(Divider);
+	const visuallyHiddenTag = context.tagFor(VisuallyHidden);
+	return html`
 		<${dividerTag}
 			class='months-separator'
 			role='presentation'
@@ -812,95 +650,45 @@ function renderMonthPickerGrid(context) {
 			role='grid'
 			aria-labelledby='grid-label'
 		>
-			${repeat(
-    (x) => x.months,
-    html`
+			${repeat((x) => x.months, html`
 					<div class="months-row" role="row">
-						${repeat(
-      (x) => x,
-      html`
+						${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}"
+										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
-      )}"
+										?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}>
+		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`
+var CalendarPickerTemplate = (context) => {
+	return html`
 		<div class="segments">
-			${repeat(
-    (x) => x._segments,
-    html` <div class="segment">
+			${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>`
-  )}
+					${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 };
+//#endregion
+export { formatPresentationDate as a, currentDateStr as c, CalendarPicker as i, isValidDateStr as l, MinMaxCalendarPicker as n, parsePresentationDate as o, ValidDateFilter as r, compareDateStr as s, CalendarPickerTemplate as t, calendar_picker_default as u };