@expressivecss/expressive 0.9.1 → 0.10.1

package/dist/js/chunks/chunk-QYCYP443.mjs

@@ -0,0 +1,1111 @@
+import {
+  DockedDisplayPlugin
+} from "./chunk-SLFNPY5M.mjs";
+import {
+  FormSelect
+} from "./chunk-G576EP5O.mjs";
+import {
+  Utils
+} from "./chunk-MISGHDUU.mjs";
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/datepicker.ts
+var _defaults = {
+  // the default output format for the input field value
+  format: "mmm dd, yyyy",
+  // Used to create date object from current input string
+  parse: null,
+  // The initial condition if the datepicker is based on date range
+  isDateRange: false,
+  // The selector of the user specified date range end element
+  dateRangeEndEl: null,
+  // The initial condition if the datepicker is based on multiple date selection
+  isMultipleSelection: false,
+  // The initial date to view when first opened
+  defaultDate: null,
+  // The initial end date to view when first opened
+  defaultEndDate: null,
+  // Make the `defaultDate` the initial selected value
+  setDefaultDate: false,
+  // Make the `defaultEndDate` the initial selected value
+  setDefaultEndDate: false,
+  disableWeekends: false,
+  disableDayFn: null,
+  // First day of week (0: Sunday, 1: Monday etc)
+  firstDay: 0,
+  // The earliest date that can be selected
+  minDate: null,
+  // Thelatest date that can be selected
+  maxDate: null,
+  // Number of years either side, or array of upper/lower range
+  yearRange: 10,
+  // used internally (don't config outside)
+  minYear: 0,
+  maxYear: 9999,
+  minMonth: void 0,
+  maxMonth: void 0,
+  startRange: null,
+  endRange: null,
+  isRTL: false,
+  yearRangeReverse: false,
+  // Render the month after year in the calendar title
+  showMonthAfterYear: false,
+  // Render days of the calendar grid that fall in the next or previous month
+  showDaysInNextAndPreviousMonths: false,
+  // Specify if docked picker is in open state by default
+  openByDefault: false,
+  // Specify a DOM element to render the calendar in
+  container: null,
+  // Show clear button
+  showClearBtn: false,
+  // Autosubmit
+  autoSubmit: true,
+  // internationalization
+  i18n: {
+    cancel: "Cancel",
+    clear: "Clear",
+    done: "Ok",
+    previousMonth: "\u2039",
+    nextMonth: "\u203A",
+    months: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    monthsShort: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    weekdaysAbbrev: ["S", "M", "T", "W", "T", "F", "S"]
+  },
+  // events array
+  events: [],
+  // callback function
+  onSelect: null,
+  onDraw: null,
+  onInputInteraction: null,
+  displayPlugin: null,
+  displayPluginOptions: null,
+  onConfirm: null,
+  onCancel: null
+};
+var _Datepicker = class _Datepicker extends Component {
+  constructor(el, options) {
+    super(el, options, _Datepicker);
+    this.multiple = false;
+    /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
+    this._drawDepth = 0;
+    /** Whether a draw was requested while batching. */
+    this._drawDirty = false;
+    /** Shape of the currently rendered controls; see {@link _controlsCacheKey}. */
+    this._controlsKey = null;
+    /** id linking the controls element to the table's aria-labelledby. */
+    this._randId = null;
+    this._focusedDate = null;
+    this._handleInputClick = (e) => {
+      if (e.type == "date") {
+        e.preventDefault();
+      }
+      this._batchDraws(() => {
+        this.setDateFromInput(e.target);
+        this.draw();
+        this.gotoDate(e.target === this.el ? this.date : this.endDate);
+      });
+      if (this.displayPlugin) this.displayPlugin.show();
+      if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
+    };
+    this._handleInputKeydown = (e) => {
+      if (e.key === Utils.keys.ENTER) {
+        e.preventDefault();
+        this._batchDraws(() => {
+          this.setDateFromInput(e.target);
+          this._focusedDate = e.target === this.endDateEl ? this.endDate : this.date;
+          this.draw();
+        });
+        if (this.displayPlugin) this.displayPlugin.show();
+        this._syncCalendarFocus(true);
+        if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
+      }
+    };
+    this._handleCalendarFocus = (event) => {
+      const button = event.target;
+      if (!button.matches(".datepicker-day-button")) return;
+      this._focusedDate = this._dayDate(button);
+      this._syncCalendarFocus();
+    };
+    this._handleCalendarKeydown = (event) => {
+      const button = event.target;
+      if (!button.matches(".datepicker-day-button") || event.altKey || event.ctrlKey || event.metaKey) return;
+      const date = this._dayDate(button);
+      const weekday = (date.getDay() - this.options.firstDay + 7) % 7;
+      const offsets = {
+        ArrowLeft: this.options.isRTL ? 1 : -1,
+        ArrowRight: this.options.isRTL ? -1 : 1,
+        ArrowUp: -7,
+        ArrowDown: 7,
+        Home: -weekday,
+        End: 6 - weekday
+      };
+      if (Object.hasOwn(offsets, event.key)) date.setDate(date.getDate() + offsets[event.key]);
+      else if (event.key === "PageUp" || event.key === "PageDown") {
+        const day = date.getDate();
+        date.setDate(1);
+        date.setMonth(date.getMonth() + (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1));
+        const last = new Date(date.getTime());
+        last.setMonth(last.getMonth() + 1, 0);
+        date.setDate(Math.min(day, last.getDate()));
+      } else return;
+      event.preventDefault();
+      const { minDate, maxDate, minYear, maxYear, minMonth, maxMonth } = this.options;
+      if (minDate && date < minDate) date.setTime(minDate.getTime());
+      if (maxDate && date > maxDate) date.setTime(maxDate.getTime());
+      if (date.getFullYear() < minYear || date.getFullYear() > maxYear || date.getFullYear() === minYear && date.getMonth() < (minMonth ?? 0) || date.getFullYear() === maxYear && date.getMonth() > (maxMonth ?? 11)) return;
+      this._focusedDate = date;
+      this.gotoDate(date);
+    };
+    this._handleCalendarClick = (e) => {
+      const target = e.target;
+      if (target.classList.contains("is-disabled")) return;
+      this._batchDraws(() => {
+        if (target.classList.contains("datepicker-day-button") && !target.classList.contains("is-empty") && !target.parentElement.classList.contains("is-disabled") && !target.parentElement.classList.contains("is-selection-disabled")) {
+          const selectedDate = new Date(
+            e.target.getAttribute("data-year"),
+            e.target.getAttribute("data-month"),
+            e.target.getAttribute("data-day")
+          );
+          if (!this.multiple || this.multiple && this.options.isMultipleSelection) {
+            this.setDate(selectedDate);
+          }
+          if (this.options.isDateRange) {
+            this._handleDateRangeCalendarClick(selectedDate);
+          }
+          if (this.options.autoSubmit) this._finishSelection();
+        } else if (target.closest(".month-prev")) {
+          this.prevMonth();
+        } else if (target.closest(".month-next")) {
+          this.nextMonth();
+        }
+      });
+    };
+    this._handleDateRangeCalendarClick = (date) => {
+      if (this.endDate == null || !_Datepicker._compareDates(date, this.endDate)) {
+        if (_Datepicker._isDate(this.date) && _Datepicker._comparePastDate(date, this.date)) {
+          return;
+        }
+        this.setDate(date, false, _Datepicker._isDate(this.date));
+        return;
+      }
+      this._clearDates();
+      this.draw();
+    };
+    this._handleClearClick = () => {
+      this._clearDates();
+      this.setInputValues();
+    };
+    this._clearDates = () => {
+      this.date = null;
+      this.endDate = null;
+      this.dates?.splice(0);
+      this.draw();
+    };
+    this._handleMonthChange = (e) => {
+      this.gotoMonth(e.target.value);
+    };
+    this._handleYearChange = (e) => {
+      this.gotoYear(e.target.value);
+    };
+    this._handleInputChange = (e) => {
+      let date;
+      const el = e.target;
+      if (e["detail"]?.firedBy === this) return;
+      if (el == this.endDateEl && !this.date) return;
+      if (this.options.parse) {
+        date = this.options.parse(
+          e.target.value,
+          typeof this.options.format === "function" ? this.options.format(new Date(this.el.value)) : this.options.format
+        );
+      } else {
+        date = new Date(Date.parse(e.target.value));
+      }
+      if (_Datepicker._isDate(date)) {
+        if (el == this.endDateEl && date < this.date) return this.setInputValue(el, this.endDate);
+        this.setDate(date, false, el == this.endDateEl, true);
+        if (e.type == "date") {
+          this.setDataDate(e, date);
+          this.setInputValues();
+        }
+      }
+    };
+    this._finishSelection = () => {
+      this.setInputValues();
+    };
+    this._confirm = () => {
+      this._finishSelection();
+      if (typeof this.options.onConfirm === "function") this.options.onConfirm.call(this);
+    };
+    this._cancel = () => {
+      if (typeof this.options.onCancel === "function") this.options.onCancel.call(this);
+    };
+    this.el["Expressive_Datepicker"] = this;
+    this.options = {
+      ..._Datepicker.defaults,
+      ...options
+    };
+    if (!!options && options.hasOwnProperty("i18n") && typeof options.i18n === "object") {
+      this.options.i18n = { ..._Datepicker.defaults.i18n, ...options.i18n };
+    }
+    if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0);
+    if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0);
+    this.id = Utils.guid();
+    if (this.options.isMultipleSelection) {
+      this.multiple = true;
+      this.dates = [];
+      this.dateEls = [el];
+    }
+    this._setupVariables();
+    this._insertHTMLIntoDOM();
+    this._setupEventHandlers();
+    if (!this.options.defaultDate) {
+      this.options.defaultDate = new Date(Date.parse(this.el.value));
+    }
+    const defDate = this.options.defaultDate;
+    if (_Datepicker._isDate(defDate)) {
+      if (this.options.setDefaultDate) {
+        this.setDate(defDate, true);
+        this.setInputValue(this.el, defDate);
+      } else {
+        this.gotoDate(defDate);
+      }
+    } else {
+      this.gotoDate(/* @__PURE__ */ new Date());
+    }
+    if (this.options.isDateRange) {
+      this.multiple = true;
+      const defEndDate = this.options.defaultEndDate;
+      if (_Datepicker._isDate(defEndDate)) {
+        if (this.options.setDefaultEndDate) {
+          this.setDate(defEndDate, true, true);
+          this.setInputValue(this.endDateEl, defEndDate);
+        }
+      }
+    }
+    if (this.options.displayPlugin) {
+      if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+    }
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of Datepicker.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _Datepicker);
+  }
+  /**
+   * Escape a value for interpolation into the calendar markup.
+   *
+   * `draw()` assembles the calendar as an HTML string, so every value that is
+   * not a number this class computed itself has to go through here. In
+   * practice that means the i18n strings: month and weekday names are the one
+   * part of a datepicker that routinely comes from a translation file, and a
+   * translation file is as trustworthy as whatever wrote it.
+   */
+  static _escape(value) {
+    return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  static _isDate(obj) {
+    return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+  }
+  static _isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+  }
+  /**
+   * @deprecated as this function has no effect without any return statement or global parameter setter.
+   */
+  static _setToStartOfDay(date) {
+    if (_Datepicker._isDate(date)) date.setHours(0, 0, 0, 0);
+  }
+  static _getDaysInMonth(year, month) {
+    return [31, _Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+  }
+  static _isLeapYear(year) {
+    return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
+  }
+  static _compareDates(a, b) {
+    return a.getTime() === b.getTime();
+  }
+  static _compareWithinRange(day, date, dateEnd) {
+    return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
+  }
+  static _comparePastDate(a, b) {
+    return a.getTime() < b.getTime();
+  }
+  static getInstance(el) {
+    return el["Expressive_Datepicker"];
+  }
+  destroy() {
+    this._removeEventHandlers();
+    this.dateEls?.slice(1).forEach((input) => this._removeDateInput(input));
+    if (!this.options.dateRangeEndEl && this.endDateEl) this._removeDateInput(this.endDateEl);
+    this.displayPlugin?.destroy();
+    this.containerEl.remove();
+    this.destroySelects();
+    this.el["Expressive_Datepicker"] = void 0;
+  }
+  destroySelects() {
+    const oldYearSelect = this.calendarEl.querySelector(".orig-select-year");
+    if (oldYearSelect) {
+      FormSelect.getInstance(oldYearSelect).destroy();
+    }
+    const oldMonthSelect = this.calendarEl.querySelector(".orig-select-month");
+    if (oldMonthSelect) {
+      FormSelect.getInstance(oldMonthSelect).destroy();
+    }
+  }
+  _insertHTMLIntoDOM() {
+    if (this.el.type == "date") {
+      this.el.classList.add("datepicker-date-input");
+    }
+    this._renderDateInputFormat(this.el);
+    if (this.options.isDateRange) {
+      this.containerEl.classList.add("daterange");
+      if (!this.options.dateRangeEndEl) {
+        this.endDateEl = this.createDateInput();
+        this.endDateEl.classList.add("datepicker-end-date");
+      } else {
+        this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+        if (!this.endDateEl) {
+          console.warn("Specified date range end input element in dateRangeEndEl not found");
+        } else {
+          this._renderDateInputFormat(this.endDateEl);
+        }
+      }
+    }
+    Utils.createButton(this.footer, this.options.i18n.clear, ["datepicker-clear"], this.options.showClearBtn, this._handleClearClick);
+    if (!this.options.autoSubmit) {
+      Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this._confirm, this._cancel);
+    }
+    if (this.options.container) {
+      const optEl = this.options.container;
+      this.options.container = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+      this.options.container.append(this.containerEl);
+    } else {
+      const appendTo = !this.endDateEl ? this.el : this.endDateEl;
+      if (!this.options.openByDefault) this.containerEl.setAttribute("style", "display: none; visibility: hidden;");
+      appendTo.parentElement.after(this.containerEl);
+    }
+  }
+  /**
+   * Renders the date input format into the optional `.datepicker-format` hint
+   * next to the input, if the consumer provided one.
+   */
+  _renderDateInputFormat(el) {
+    const formatEl = el.parentElement?.querySelector(".datepicker-format");
+    if (!formatEl) return;
+    formatEl.textContent = typeof this.options.format === "function" ? "" : String(this.options.format);
+  }
+  /**
+   * Gets a string representation of the given date.
+   */
+  toString(date = this.date, format = null) {
+    format = format || this.options.format;
+    if (typeof format === "function") return format(date);
+    if (!_Datepicker._isDate(date)) return "";
+    return this.formatDate(date, format);
+  }
+  /**
+   * Returns the formatted date.
+   */
+  formatDate(date, format) {
+    const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+    return formatArray.map((label) => this.formats[label] ? this.formats[label](date) : label).join("");
+  }
+  /**
+   * Sets date from input field.
+   */
+  setDateFromInput(el) {
+    const date = new Date(Date.parse(el.value));
+    this.setDate(date, false, el == this.endDateEl, true);
+  }
+  /**
+   * Set a date on the datepicker.
+   * @param date Date to set on the datepicker.
+   * @param preventOnSelect Undocumented as of 5 March 2018.
+   * @param isEndDate
+   * @param fromUserInput
+   */
+  setDate(date = null, preventOnSelect = false, isEndDate = false, fromUserInput = false) {
+    const selectedDate = this.validateDate(date);
+    if (!selectedDate) {
+      return;
+    }
+    _Datepicker._setToStartOfDay(selectedDate);
+    if (!this.options.isMultipleSelection) this.setSingleDate(selectedDate, isEndDate);
+    else if (!fromUserInput) this.setMultiDate(selectedDate);
+    this.gotoDate(selectedDate);
+    if (!preventOnSelect && typeof this.options.onSelect === "function") {
+      this.options.onSelect.call(this, selectedDate);
+    }
+  }
+  validateDate(date) {
+    if (!date) {
+      this._renderDateDisplay(date);
+      return this.draw();
+    }
+    if (typeof date === "string") {
+      date = new Date(Date.parse(date));
+    }
+    if (!_Datepicker._isDate(date)) {
+      return;
+    }
+    const min = this.options.minDate, max = this.options.maxDate;
+    if (_Datepicker._isDate(min) && date < min) {
+      date = min;
+    } else if (_Datepicker._isDate(max) && date > max) {
+      date = max;
+    }
+    return new Date(date.getTime());
+  }
+  /**
+   * Set a single date on the datepicker.
+   * @param date Date to set on the datepicker.
+   * @param isEndDate
+   */
+  setSingleDate(date, isEndDate) {
+    if (!isEndDate) {
+      this.date = date;
+    } else if (isEndDate) {
+      this.endDate = date;
+    }
+  }
+  /**
+   * Set a multi date on the datepicker.
+   * @param date Date to set on the datepicker.
+   */
+  setMultiDate(date) {
+    const selectedDate = this.dates?.find((item) => {
+      return item.getTime() === date.getTime() ? item : false;
+    });
+    if (!selectedDate) {
+      this.dates.push(date);
+    } else {
+      this.dates.splice(this.dates.indexOf(selectedDate), 1);
+    }
+    this.dates.sort((a, b) => a.getTime() < b.getTime() ? -1 : 0);
+  }
+  /**
+   * Sets the data-date attribute on the date input field
+   */
+  setDataDate(el, date) {
+    el.setAttribute("data-date", this.toString(date));
+  }
+  /**
+   * Sets dates on the input values.
+   */
+  setInputValues() {
+    if (!this.options?.isMultipleSelection) {
+      this.setInputValue(this.el, this.date);
+      if (this.options?.isDateRange) {
+        this.setInputValue(this.endDateEl, this.endDate);
+      }
+      return;
+    }
+    this.setMultipleSelectionInputValues();
+  }
+  setMultipleSelectionInputValues() {
+    const count = Math.max(1, this.dates.length);
+    for (const input of this.dateEls.splice(count)) this._removeDateInput(input);
+    while (this.dateEls.length < count) this.dateEls.push(this.createDateInput());
+    this.dateEls.forEach((input, index) => this.setInputValue(input, this.dates[index] ?? null));
+  }
+  /**
+   * Sets given date as the input value on the given element.
+   */
+  setInputValue(el, date) {
+    if (!el) return;
+    if (!_Datepicker._isDate(date)) {
+      el.value = "";
+      if (el.type === "date") el.setAttribute("data-date", "");
+    } else if (el.type == "date") {
+      this.setDataDate(el, date);
+      el.value = this.formatDate(date, "yyyy-mm-dd");
+    } else {
+      el.value = this.toString(date);
+    }
+    this.el.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: { firedBy: this }
+      })
+    );
+  }
+  /**
+   * Renders the date in the modal head section.
+   */
+  _renderDateDisplay(date, endDate = null) {
+    const displayDate = _Datepicker._isDate(date) ? date : /* @__PURE__ */ new Date();
+    if (!this.options.isDateRange) {
+      this.dateTextEl.textContent = this.formatDate(displayDate, "ddd, mmm d");
+    } else {
+      const displayEndDate = _Datepicker._isDate(endDate) ? endDate : /* @__PURE__ */ new Date();
+      this.dateTextEl.textContent = `${this.formatDate(displayDate, "mmm d")} - ${this.formatDate(displayEndDate, "mmm d")}`;
+    }
+  }
+  /**
+   * Change date view to a specific date on the datepicker.
+   * @param date Date to show on the datepicker.
+   */
+  gotoDate(date) {
+    let newCalendar = true;
+    if (!_Datepicker._isDate(date)) {
+      return;
+    }
+    if (this.calendars) {
+      const firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(
+        this.calendars[this.calendars.length - 1].year,
+        this.calendars[this.calendars.length - 1].month,
+        1
+      ), visibleDate = date.getTime();
+      lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
+      lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
+      newCalendar = visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate;
+    }
+    if (newCalendar) {
+      this.calendars = [
+        {
+          month: date.getMonth(),
+          year: date.getFullYear()
+        }
+      ];
+    }
+    this.adjustCalendars();
+  }
+  adjustCalendars() {
+    this.calendars[0] = this.adjustCalendar(this.calendars[0]);
+    this.draw();
+  }
+  adjustCalendar(calendar) {
+    if (calendar.month < 0) {
+      calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+      calendar.month += 12;
+    }
+    if (calendar.month > 11) {
+      calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+      calendar.month -= 12;
+    }
+    return calendar;
+  }
+  nextMonth() {
+    this.calendars[0].month++;
+    this.adjustCalendars();
+  }
+  prevMonth() {
+    this.calendars[0].month--;
+    this.adjustCalendars();
+  }
+  render(year, month, randId) {
+    const now = /* @__PURE__ */ new Date(), days = _Datepicker._getDaysInMonth(year, month), data = [];
+    let before = new Date(year, month, 1).getDay(), row = [];
+    _Datepicker._setToStartOfDay(now);
+    if (this.options.firstDay > 0) {
+      before -= this.options.firstDay;
+      if (before < 0) {
+        before += 7;
+      }
+    }
+    const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = _Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
+    let cells = days + before, after = cells;
+    while (after > 7) {
+      after -= 7;
+    }
+    cells += 7 - after;
+    let isWeekSelected = false;
+    for (let i = 0, r = 0; i < cells; i++) {
+      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
+      let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
+      let isSelected = false;
+      if (_Datepicker._isDate(this.date)) {
+        isSelected = _Datepicker._compareDates(day, this.date);
+      }
+      if (!isSelected && _Datepicker._isDate(this.endDate)) {
+        isSelected = _Datepicker._compareDates(day, this.endDate);
+      }
+      if (this.options.isMultipleSelection && this.dates?.some((item) => item.getTime() === day.getTime())) {
+        isSelected = true;
+      }
+      if (isEmpty) {
+        if (i < before) {
+          dayNumber = daysInPreviousMonth + dayNumber;
+          monthNumber = previousMonth;
+          yearNumber = yearOfPreviousMonth;
+        } else {
+          dayNumber = dayNumber - days;
+          monthNumber = nextMonth;
+          yearNumber = yearOfNextMonth;
+        }
+      }
+      const dayConfig = {
+        day: dayNumber,
+        month: monthNumber,
+        year: yearNumber,
+        hasEvent,
+        isSelected,
+        isToday,
+        isDisabled,
+        isEmpty,
+        isStartRange,
+        isEndRange,
+        isInRange,
+        showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+        isDateRangeStart,
+        isDateRangeEnd,
+        isDateRange
+      };
+      row.push(this.renderDay(dayConfig));
+      if (++r === 7) {
+        data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+        row = [];
+        r = 0;
+        isWeekSelected = false;
+      }
+    }
+    return this.renderTable(this.options, data, randId);
+  }
+  renderDay(opts) {
+    const classMap = {
+      isDisabled: "is-disabled",
+      isToday: "is-today",
+      isSelected: "is-selected",
+      hasEvent: "has-event",
+      isInRange: "is-inrange",
+      isStartRange: "is-startrange",
+      isEndRange: "is-endrange",
+      isDateRangeStart: "is-daterange-start",
+      isDateRangeEnd: "is-daterange-end",
+      isDateRange: "is-daterange"
+    }, ariaSelected = !(["isSelected", "isDateRange"].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ["datepicker-day"];
+    if (opts.isEmpty) {
+      if (opts.showDaysInNextAndPreviousMonths) {
+        arr.push("is-outside-current-month");
+        arr.push("is-selection-disabled");
+      } else {
+        return '<td class="is-empty"></td>';
+      }
+    }
+    for (const [property, className] of Object.entries(classMap)) {
+      if (opts.hasOwnProperty(property) && opts[property]) {
+        arr.push(className);
+      }
+    }
+    const day = _Datepicker._escape(opts.day);
+    const month = _Datepicker._escape(opts.month);
+    const year = _Datepicker._escape(opts.year);
+    return `<td data-day="${day}" class="${arr.join(" ")}" aria-selected="${ariaSelected}"><button class="datepicker-day-button" type="button" data-year="${year}" data-month="${month}" data-day="${day}">${day}</button></td>`;
+  }
+  /** Assemble calendar cells; reject unsupported elements and attributes. */
+  renderRow(days, isRTL, isRowSelected) {
+    return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
+  }
+  /** Assemble calendar rows; reject unsupported elements and attributes. */
+  renderTable(opts, data, randId) {
+    return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + _Datepicker._escape(randId) + '">' + this.renderHead(opts) + this.renderBody(data) + "</table></div>";
+  }
+  renderHead(opts) {
+    const arr = [];
+    let i;
+    for (i = 0; i < 7; i++) {
+      const full = _Datepicker._escape(this.renderDayName(opts, i));
+      const abbrev = _Datepicker._escape(this.renderDayName(opts, i, true));
+      arr.push(`<th scope="col"><abbr title="${full}">${abbrev}</abbr></th>`);
+    }
+    return "<thead><tr>" + (opts.isRTL ? arr.reverse() : arr).join("") + "</tr></thead>";
+  }
+  /** Wrap calendar rows after validating and encoding their contents. */
+  renderBody(rows) {
+    return "<tbody>" + _Datepicker._calendarMarkup(rows.join(""), "tbody") + "</tbody>";
+  }
+  static _calendarMarkup(html, parent) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const attributes = {
+      tr: ["class"],
+      td: ["class", "data-day", "aria-selected"],
+      button: ["class", "type", "data-year", "data-month", "data-day", "aria-label", "disabled", "tabindex"]
+    };
+    const render = (node, container) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (container === "tbody" || container === "tr") {
+          if (node.textContent.trim()) throw new TypeError("Unsupported calendar row content");
+        }
+        return _Datepicker._escape(node.textContent);
+      }
+      if (!(node instanceof HTMLElement)) throw new TypeError("Unsupported calendar row content");
+      const tag = node.localName === "tr" ? "tr" : node.localName === "td" ? "td" : node.localName === "button" ? "button" : null;
+      if (!tag || !(container === "tbody" && tag === "tr" || container === "tr" && tag === "td" || container === "td" && tag === "button")) {
+        throw new TypeError("Unsupported calendar row element");
+      }
+      if ([...node.attributes].some((attr) => !attributes[tag].includes(attr.name))) {
+        throw new TypeError("Unsupported calendar row attribute");
+      }
+      if (tag === "button" && node.getAttribute("type") !== "button") {
+        throw new TypeError('Calendar day buttons require type="button"');
+      }
+      const attrs = attributes[tag].filter((name) => node.hasAttribute(name)).map((name) => ` ${name}="${_Datepicker._escape(node.getAttribute(name))}"`).join("");
+      return `<${tag}${attrs}>${[...node.childNodes].map((child) => render(child, tag)).join("")}</${tag}>`;
+    };
+    return [...template.content.childNodes].map((node) => render(node, parent)).join("");
+  }
+  /**
+   * Whether each month arrow is usable at this position in the allowed range.
+   *
+   * Depends on the month, which is deliberately *not* part of the controls
+   * cache key - so the reuse path has to recompute and reapply it.
+   */
+  _arrowState(year, month) {
+    const opts = this.options;
+    const isMinYear = year === opts.minYear;
+    const isMaxYear = year === opts.maxYear;
+    return {
+      prev: !(isMinYear && (month === 0 || opts.minMonth >= month)),
+      next: !(isMaxYear && (month === 11 || opts.maxMonth <= month))
+    };
+  }
+  /**
+   * Identifies the *shape* of the controls - everything that changes which
+   * options the month and year selects contain, as opposed to which one is
+   * picked. While this is stable the two FormSelects can be left alone.
+   *
+   * `year` is in the key because a numeric `yearRange` centres the year list
+   * on the displayed year, so paging across a year boundary does change it.
+   */
+  _controlsCacheKey(year) {
+    const o = this.options;
+    return [
+      year,
+      o.minYear,
+      o.maxYear,
+      o.minMonth,
+      o.maxMonth,
+      Array.isArray(o.yearRange) ? o.yearRange.join("-") : o.yearRange,
+      o.yearRangeReverse,
+      o.showMonthAfterYear
+    ].join("|");
+  }
+  renderTitle(instance, c, year, month, refYear, randId) {
+    const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
+    let i, j, arr = [], html = '<div id="' + _Datepicker._escape(randId) + '" class="datepicker-controls" role="heading" aria-live="assertive">';
+    const { prev, next } = this._arrowState(year, month);
+    for (i = 0; i < 12; i++) {
+      arr.push(
+        '<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' + (i === month ? ' selected="selected"' : "") + (isMinYear && i < opts.minMonth || isMaxYear && i > opts.maxMonth ? 'disabled="disabled"' : "") + ">" + _Datepicker._escape(opts.i18n.months[i]) + "</option>"
+      );
+    }
+    const monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr.join("") + "</select>";
+    if (Array.isArray(opts.yearRange)) {
+      i = opts.yearRange[0];
+      j = opts.yearRange[1] + 1;
+    } else {
+      i = year - opts.yearRange;
+      j = 1 + year + opts.yearRange;
+    }
+    for (arr = []; i < j && i <= opts.maxYear; i++) {
+      if (i >= opts.minYear) {
+        arr.push(`<option value="${i}" ${i === year ? 'selected="selected"' : ""}>${i}</option>`);
+      }
+    }
+    if (opts.yearRangeReverse) arr.reverse();
+    const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join("")}</select>`;
+    const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+    html += `<button class="month-prev${prev ? "" : " is-disabled"}" type="button">${leftArrow}</button>`;
+    html += '<div class="selects-container">';
+    if (opts.showMonthAfterYear) {
+      html += yearHtml + monthHtml;
+    } else {
+      html += monthHtml + yearHtml;
+    }
+    html += "</div>";
+    const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+    html += `<button class="month-next${next ? "" : " is-disabled"}" type="button">${rightArrow}</button>`;
+    return html += "</div>";
+  }
+  /**
+   * Run `fn`, collapsing every draw it triggers into a single one at the end.
+   *
+   * A single input click reaches draw() three times - once through
+   * setDateFromInput -> setDate -> gotoDate, once directly, and once through
+   * the trailing gotoDate - and each one destroys two FormSelect instances,
+   * reparses the calendar and builds two fresh FormSelects. The three calls
+   * cannot simply be deleted: the direct draw() is what covers an empty input
+   * (setDate bails before drawing when the value does not parse), and the
+   * trailing gotoDate re-centres on a date validateDate may have clamped to
+   * minDate/maxDate. So they are collected instead of removed.
+   *
+   * Deliberately synchronous: the constructor and callers read calendarEl
+   * immediately after init(), which a microtask-deferred draw would leave
+   * empty.
+   */
+  _batchDraws(fn) {
+    this._drawDepth++;
+    try {
+      fn();
+    } finally {
+      this._drawDepth--;
+      if (this._drawDepth === 0 && this._drawDirty) {
+        this._drawDirty = false;
+        this.draw();
+      }
+    }
+  }
+  // refresh HTML
+  draw() {
+    if (this._drawDepth > 0) {
+      this._drawDirty = true;
+      return;
+    }
+    const active = this.calendarEl.getRootNode().activeElement;
+    const restoreDayFocus = active?.matches(".datepicker-day-button") && this.calendarEl.contains(active);
+    const restoreArrow = this.calendarEl.contains(active) && active?.matches(".month-prev, .month-next") ? active.classList.contains("month-prev") ? ".month-prev" : ".month-next" : null;
+    const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
+    if (this._y <= minYear) {
+      this._y = minYear;
+      if (!isNaN(minMonth) && this._m < minMonth) {
+        this._m = minMonth;
+      }
+    }
+    if (this._y >= maxYear) {
+      this._y = maxYear;
+      if (!isNaN(maxMonth) && this._m > maxMonth) {
+        this._m = maxMonth;
+      }
+    }
+    const year = this.calendars[0].year;
+    const month = this.calendars[0].month;
+    if (!this.options.isDateRange) {
+      this._renderDateDisplay(this.date);
+    } else {
+      this._renderDateDisplay(this.date, this.endDate);
+    }
+    const key = this._controlsCacheKey(year);
+    if (key === this._controlsKey && this.calendarEl.querySelector(".datepicker-controls")) {
+      this._reuseControls(year, month);
+    } else {
+      this._controlsKey = key;
+      this._randId = "datepicker-title-" + Utils.guid();
+      this._rebuildControls(year, month);
+    }
+    this._renderCalendarTable(year, month);
+    this._syncCalendarFocus(!!restoreDayFocus);
+    if (restoreArrow) this.calendarEl.querySelector(restoreArrow)?.focus();
+    if (typeof this.options.onDraw === "function") {
+      this.options.onDraw.call(this);
+    }
+  }
+  /** Tear down the two FormSelects and render the controls from scratch. */
+  _rebuildControls(year, month) {
+    this.destroySelects();
+    this.calendarEl.innerHTML = this.renderTitle(this, 0, year, month, year, this._randId);
+    const yearSelect = this.calendarEl.querySelector(".orig-select-year");
+    const monthSelect = this.calendarEl.querySelector(".orig-select-month");
+    FormSelect.init(yearSelect, {
+      classes: "select-year",
+      menuOptions: { container: Utils.portalRoot(this.el), constrainWidth: false }
+    });
+    FormSelect.init(monthSelect, {
+      classes: "select-month",
+      menuOptions: { container: Utils.portalRoot(this.el), constrainWidth: false }
+    });
+    yearSelect.addEventListener("change", this._handleYearChange);
+    monthSelect.addEventListener("change", this._handleMonthChange);
+  }
+  /**
+   * Keep the existing controls and bring them up to date: the selected month,
+   * and the arrow states, which depend on the month rather than on the key.
+   */
+  _reuseControls(year, month) {
+    const monthSelect = this.calendarEl.querySelector(".orig-select-month");
+    if (monthSelect && monthSelect.value !== month.toString()) {
+      monthSelect.value = month.toString();
+      FormSelect.getInstance(monthSelect)?.refresh();
+    }
+    const { prev, next } = this._arrowState(year, month);
+    this.calendarEl.querySelector(".month-prev")?.classList.toggle("is-disabled", !prev);
+    this.calendarEl.querySelector(".month-next")?.classList.toggle("is-disabled", !next);
+  }
+  /** Replace just the day grid, leaving the controls in place. */
+  _renderCalendarTable(year, month) {
+    const html = this.render(year, month, this._randId);
+    const existing = this.calendarEl.querySelector(".datepicker-table-wrapper");
+    if (existing) existing.outerHTML = html;
+    else this.calendarEl.insertAdjacentHTML("beforeend", html);
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("click", this._handleInputClick);
+    this.el.addEventListener("keydown", this._handleInputKeydown);
+    this.el.addEventListener("change", this._handleInputChange);
+    this.endDateEl?.addEventListener("click", this._handleInputClick);
+    this.endDateEl?.addEventListener("keydown", this._handleInputKeydown);
+    this.endDateEl?.addEventListener("change", this._handleInputChange);
+    this.calendarEl.addEventListener("click", this._handleCalendarClick);
+    this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown);
+    this.calendarEl.addEventListener("focusin", this._handleCalendarFocus);
+  }
+  _setupVariables() {
+    const template = document.createElement("template");
+    template.innerHTML = _Datepicker._template.trim();
+    this.containerEl = template.content.firstChild;
+    this.calendarEl = this.containerEl.querySelector(".datepicker-calendar");
+    this.yearTextEl = this.containerEl.querySelector(".year-text");
+    this.dateTextEl = this.containerEl.querySelector(".date-text");
+    this.footer = this.containerEl.querySelector(".datepicker-footer");
+    this.formats = {
+      d: (date) => {
+        return date.getDate();
+      },
+      dd: (date) => {
+        const d = date.getDate();
+        return (d < 10 ? "0" : "") + d;
+      },
+      ddd: (date) => {
+        return this.options.i18n.weekdaysShort[date.getDay()];
+      },
+      dddd: (date) => {
+        return this.options.i18n.weekdays[date.getDay()];
+      },
+      m: (date) => {
+        return date.getMonth() + 1;
+      },
+      mm: (date) => {
+        const m = date.getMonth() + 1;
+        return (m < 10 ? "0" : "") + m;
+      },
+      mmm: (date) => {
+        return this.options.i18n.monthsShort[date.getMonth()];
+      },
+      mmmm: (date) => {
+        return this.options.i18n.months[date.getMonth()];
+      },
+      yy: (date) => {
+        return ("" + date.getFullYear()).slice(2);
+      },
+      yyyy: (date) => {
+        return date.getFullYear();
+      }
+    };
+  }
+  _removeEventHandlers() {
+    for (const input of this.dateEls ?? [this.el]) this._removeInputEventHandlers(input);
+    this.calendarEl.removeEventListener("click", this._handleCalendarClick);
+    this.calendarEl.removeEventListener("keydown", this._handleCalendarKeydown);
+    this.calendarEl.removeEventListener("focusin", this._handleCalendarFocus);
+    if (this.options.isDateRange && this.endDateEl) {
+      this._removeInputEventHandlers(this.endDateEl);
+    }
+  }
+  _removeInputEventHandlers(input) {
+    input.removeEventListener("click", this._handleInputClick);
+    input.removeEventListener("keydown", this._handleInputKeydown);
+    input.removeEventListener("change", this._handleInputChange);
+  }
+  _removeDateInput(input) {
+    const focused = input.getRootNode().activeElement === input;
+    this._removeInputEventHandlers(input);
+    input.remove();
+    if (focused && document.activeElement === document.body) this.el.focus();
+  }
+  _dayDate(button) {
+    const date = /* @__PURE__ */ new Date(0);
+    date.setFullYear(Number(button.dataset.year), Number(button.dataset.month), Number(button.dataset.day));
+    _Datepicker._setToStartOfDay(date);
+    return date;
+  }
+  _syncCalendarFocus(restore = false) {
+    const buttons = [...this.calendarEl.querySelectorAll(".datepicker-day-button")];
+    const current = buttons.filter((button) => !button.parentElement.classList.contains("is-selection-disabled"));
+    const preferred = this._focusedDate || this.date || /* @__PURE__ */ new Date();
+    const target = current.find((button) => _Datepicker._compareDates(this._dayDate(button), preferred)) || current.find((button) => button.parentElement.classList.contains("is-selected")) || current.find((button) => !button.parentElement.classList.contains("is-disabled")) || current[0];
+    for (const button of buttons) {
+      button.tabIndex = button === target ? 0 : -1;
+      button.setAttribute("aria-disabled", String(button.parentElement.matches(".is-disabled, .is-selection-disabled")));
+    }
+    if (target) {
+      this._focusedDate = this._dayDate(target);
+      if (restore) target.focus();
+    }
+  }
+  // change view to a specific month (zero-index, e.g. 0: January)
+  gotoMonth(month) {
+    if (!isNaN(month)) {
+      this.calendars[0].month = parseInt(month, 10);
+      this.adjustCalendars();
+    }
+  }
+  // change view to a specific full year (e.g. "2012")
+  gotoYear(year) {
+    if (!isNaN(year)) {
+      this.calendars[0].year = parseInt(year, 10);
+      this.adjustCalendars();
+    }
+  }
+  renderDayName(opts, day, abbr = false) {
+    day += opts.firstDay;
+    while (day >= 7) {
+      day -= 7;
+    }
+    return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
+  }
+  createDateInput() {
+    const dateInput = this.el.cloneNode(true);
+    dateInput.removeAttribute("id");
+    dateInput.addEventListener("click", this._handleInputClick);
+    dateInput.addEventListener("keydown", this._handleInputKeydown);
+    dateInput.addEventListener("change", this._handleInputChange);
+    this.el.parentElement.appendChild(dateInput);
+    return dateInput;
+  }
+};
+_Datepicker._template = `
+        <div class="datepicker-container">
+          <div class="datepicker-date-display">
+            <span class="year-text"></span>
+            <span class="date-text"></span>
+          </div>
+          <div class="datepicker-calendar-container">
+            <div class="datepicker-calendar"></div>
+            <div class="datepicker-footer"></div>
+          </div>
+        </div>`;
+var Datepicker = _Datepicker;
+
+export {
+  Datepicker
+};
+//# sourceMappingURL=chunk-QYCYP443.mjs.map