@kdcloudjs/shoelace 1.0.47 → 1.0.49

package/dist/chunks/chunk.Y45CBYMZ.js

@@ -0,0 +1,844 @@
+import {
+  SlTimePanel
+} from "./chunk.QWER4CDX.js";
+import {
+  calendar_picker_styles_default
+} from "./chunk.4RS2PT2Q.js";
+import {
+  SlButton
+} from "./chunk.NSEEU4YC.js";
+import {
+  SlIcon
+} from "./chunk.4UTIBB4G.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.W4I33UQ6.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/calendar-picker/calendar-picker.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+
+// src/internal/datepicker.ts
+import customParseFormat from "dayjs/plugin/customParseFormat.js";
+import dayjs from "dayjs";
+dayjs.extend(customParseFormat);
+function convertToDayjsFormat(format) {
+  return format.replace(/yyyy/g, "YYYY").replace(/dd/g, "DD");
+}
+function parseDatetime(datetimeStr, format = "datetime") {
+  if (!(datetimeStr == null ? void 0 : datetimeStr.trim())) {
+    return null;
+  }
+  const trimmedStr = datetimeStr.trim();
+  if (format === "date") {
+    const parsed2 = tryParseMultipleFormats(trimmedStr, ["YYYY-MM-DD", "YYYY/MM/DD", "YYYY.MM.DD"]);
+    return parsed2;
+  }
+  if (format === "datetime") {
+    const parsed2 = tryParseMultipleFormats(trimmedStr, [
+      "YYYY-MM-DD HH:mm:ss",
+      "YYYY/MM/DD HH:mm:ss",
+      "YYYY.MM.DD HH:mm:ss"
+    ]);
+    return parsed2;
+  }
+  const dayjsFormat = convertToDayjsFormat(format);
+  const parsed = dayjs(trimmedStr, dayjsFormat, true);
+  if (!parsed.isValid()) {
+    return null;
+  }
+  return parsed.toDate();
+}
+function tryParseMultipleFormats(dateString, formats) {
+  for (const format of formats) {
+    const parsed = dayjs(dateString, format, true);
+    if (parsed.isValid()) {
+      return parsed.toDate();
+    }
+  }
+  const fallback = dayjs(dateString);
+  if (fallback.isValid()) {
+    return fallback.toDate();
+  }
+  return null;
+}
+function formatDatetime(date, format = "datetime") {
+  if (!date) {
+    return "";
+  }
+  const d = dayjs(date);
+  if (format === "date") {
+    return d.format("YYYY-MM-DD");
+  }
+  if (format === "datetime") {
+    return d.format("YYYY-MM-DD HH:mm:ss");
+  }
+  const dayjsFormat = convertToDayjsFormat(format);
+  return d.format(dayjsFormat);
+}
+var LOCALE = {
+  today: "\u4ECA\u5929",
+  year: "\u5E74",
+  month: "\u6708",
+  monday: "\u4E00",
+  tuesday: "\u4E8C",
+  wednesday: "\u4E09",
+  thursday: "\u56DB",
+  friday: "\u4E94",
+  saturday: "\u516D",
+  sunday: "\u65E5",
+  confirmText: "\u786E\u5B9A",
+  cancelText: "\u53D6\u6D88",
+  hour: "\u65F6",
+  minute: "\u5206",
+  second: "\u79D2",
+  clearText: "\u6E05\u9664"
+};
+function getTimeColumnsFromFormat(format) {
+  if (!format || format === "date") {
+    return { showHour: false, showMinute: false, showSecond: false };
+  }
+  if (format === "datetime") {
+    return { showHour: true, showMinute: true, showSecond: true };
+  }
+  const dayjsFormat = convertToDayjsFormat(format);
+  const showHour = /HH|hh/.test(dayjsFormat);
+  const showMinute = /mm/.test(dayjsFormat) && showHour;
+  const showSecond = /ss/.test(dayjsFormat);
+  return { showHour, showMinute, showSecond };
+}
+
+// src/components/calendar-picker/calendar-picker.component.ts
+import { property, query, state } from "lit/decorators.js";
+var SlCalendarPicker = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.type = "date";
+    this.mode = "single";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+    this.startDate = null;
+    this.endDate = null;
+    this.hoverDate = null;
+    this.activeInput = "start";
+    this.currentDate = /* @__PURE__ */ new Date();
+    this.syncViewWithValue = true;
+    this.showHour = true;
+    this.showMinute = true;
+    this.showSecond = true;
+    this.isMobile = false;
+    this.view = "days";
+    this.selectedDate = null;
+  }
+  /**
+   * 是否需要显示时间选择器，取决于 type 和 showHour/showMinute/showSecond。
+   * 当 type='datetime' 但 format 中不包含任何时间占位符时，等同于 type='date'。
+   */
+  get hasTimePart() {
+    return this.type === "datetime" && (this.showHour || this.showMinute || this.showSecond);
+  }
+  /**
+   * 根据可见的时间列生成移动端时间显示文本
+   */
+  getTimeDisplayText() {
+    if (!this.selectedDate) return "--:--";
+    const parts = [];
+    if (this.showHour) parts.push(this.padStart(this.selectedDate.getHours()));
+    if (this.showMinute) parts.push(this.padStart(this.selectedDate.getMinutes()));
+    if (this.showSecond) parts.push(this.padStart(this.selectedDate.getSeconds()));
+    return parts.join(":");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleResize = this.handleResize.bind(this);
+    window.addEventListener("resize", this.handleResize);
+    this.handleResize();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("resize", this.handleResize);
+  }
+  handleResize() {
+    this.isMobile = window.matchMedia("(max-width: 500px)").matches;
+  }
+  parseValue(value) {
+    return parseDatetime(value, this.type);
+  }
+  handleValueChange() {
+    if (!this.value) {
+      this.selectedDate = null;
+      return;
+    }
+    const parsedDate = this.parseValue(this.value);
+    if (parsedDate) {
+      if (this.syncViewWithValue) {
+        this.currentDate = new Date(parsedDate);
+      }
+      this.selectedDate = parsedDate;
+      this.view = "days";
+    }
+  }
+  resetView() {
+    this.view = "days";
+    this.selectedDate = this.value ? this.parseValue(this.value) : null;
+    this.currentDate = this.selectedDate ? new Date(this.selectedDate) : /* @__PURE__ */ new Date();
+    this.updateComplete.then(() => {
+      if (this.timePanel) {
+        this.timePanel.resetScroll();
+      }
+    });
+  }
+  /** 仅重置时间面板的滚动位置，不影响 view 和 currentDate */
+  resetTimeScroll(behavior = "auto") {
+    this.updateComplete.then(() => {
+      if (this.timePanel) {
+        this.timePanel.resetScroll(behavior);
+      }
+    });
+  }
+  setCurrentDate(date) {
+    this.currentDate = new Date(date);
+    this.view = "days";
+  }
+  setView(view) {
+    this.view = view;
+  }
+  createDate(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+    const d = /* @__PURE__ */ new Date(0);
+    d.setFullYear(year, month, day);
+    d.setHours(hours, minutes, seconds, 0);
+    return d;
+  }
+  // 获取当前月份的第一天是星期几
+  getFirstDayOfMonth(date) {
+    const firstDay = this.createDate(date.getFullYear(), date.getMonth(), 1);
+    return firstDay.getDay();
+  }
+  // 获取当前月份的天数
+  getDaysInMonth(date) {
+    return this.createDate(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  }
+  // 获取当前月份的日期网格
+  getMonthDays(date) {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstDay = this.getFirstDayOfMonth(date);
+    const daysInMonth = this.getDaysInMonth(date);
+    const daysInPrevMonth = this.getDaysInMonth(this.createDate(year, month - 1, 1));
+    const days = [];
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        day: daysInPrevMonth - i,
+        month: month - 1,
+        year,
+        isCurrentMonth: false
+      });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({
+        day: i,
+        month,
+        year,
+        isCurrentMonth: true
+      });
+    }
+    const remainingDays = 42 - days.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      days.push({
+        day: i,
+        month: month + 1,
+        year,
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }
+  // Check if a specific day should be disabled
+  isDayDisabled(day, month, year) {
+    const minDate = this.min ? this.parseValue(this.min) : null;
+    const maxDate = this.max ? this.parseValue(this.max) : null;
+    if (minDate && maxDate && maxDate < minDate) {
+      return true;
+    }
+    const date = this.createDate(year, month, day);
+    date.setHours(0, 0, 0, 0);
+    if (minDate) {
+      minDate.setHours(0, 0, 0, 0);
+      if (date < minDate) {
+        return true;
+      }
+    }
+    if (maxDate) {
+      maxDate.setHours(0, 0, 0, 0);
+      if (date > maxDate) {
+        return true;
+      }
+    }
+    if (this.disabledDate && this.disabledDate(date)) {
+      return true;
+    }
+    return false;
+  }
+  // 获取年份范围
+  getYearRange() {
+    const currentYear = this.currentDate.getFullYear();
+    const startYear = Math.floor(currentYear / 10) * 10;
+    let rangeStart = startYear - 1;
+    const rangeLength = 12;
+    if (rangeStart < 1) {
+      rangeStart = 1;
+    }
+    if (rangeStart + rangeLength - 1 > 9999) {
+      rangeStart = 9999 - rangeLength + 1;
+    }
+    return Array.from({ length: rangeLength }, (_, i) => rangeStart + i);
+  }
+  // 月份名称
+  getMonthNames() {
+    return Array.from({ length: 12 }, (_, i) => `${i + 1}${LOCALE.month}`);
+  }
+  // 星期标题
+  getWeekdayHeaders() {
+    return [
+      LOCALE.sunday,
+      LOCALE.monday,
+      LOCALE.tuesday,
+      LOCALE.wednesday,
+      LOCALE.thursday,
+      LOCALE.friday,
+      LOCALE.saturday
+    ];
+  }
+  // 导航到上一个周期
+  navigatePrev() {
+    if (this.isPrevDisabled) return;
+    const newDate = new Date(this.currentDate);
+    if (this.view === "days") {
+      newDate.setMonth(newDate.getMonth() - 1);
+    } else if (this.view === "months") {
+      newDate.setFullYear(newDate.getFullYear() - 1);
+    } else if (this.view === "years") {
+      newDate.setFullYear(newDate.getFullYear() - 10);
+    }
+    if (newDate.getFullYear() < 1) {
+      newDate.setFullYear(1);
+    }
+    this.currentDate = newDate;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 导航到下一个周期
+  navigateNext() {
+    if (this.isNextDisabled) return;
+    const newDate = new Date(this.currentDate);
+    if (this.view === "days") {
+      newDate.setMonth(newDate.getMonth() + 1);
+    } else if (this.view === "months") {
+      newDate.setFullYear(newDate.getFullYear() + 1);
+    } else if (this.view === "years") {
+      newDate.setFullYear(newDate.getFullYear() + 10);
+    }
+    if (newDate.getFullYear() > 9999) {
+      newDate.setFullYear(9999);
+    }
+    this.currentDate = newDate;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  get isPrevDisabled() {
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+    if (this.view === "days") {
+      return year <= 1 && month === 0;
+    } else if (this.view === "months") {
+      return year <= 1;
+    } else if (this.view === "years") {
+      const yearRange = this.getYearRange();
+      return yearRange[0] <= 1;
+    }
+    return false;
+  }
+  get isNextDisabled() {
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+    if (this.view === "days") {
+      return year >= 9999 && month === 11;
+    } else if (this.view === "months") {
+      return year >= 9999;
+    } else if (this.view === "years") {
+      const yearRange = this.getYearRange();
+      return yearRange[yearRange.length - 1] >= 9999;
+    }
+    return false;
+  }
+  // 选择年份
+  selectYear(year) {
+    this.currentDate = new Date(this.currentDate);
+    this.currentDate.setFullYear(year);
+    this.view = "months";
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 选择月份
+  selectMonth(month) {
+    this.currentDate = new Date(this.currentDate);
+    this.currentDate.setMonth(month);
+    this.view = "days";
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 选择日期
+  selectDay(day, month, year) {
+    const baseDate = this.selectedDate;
+    const hours = baseDate ? baseDate.getHours() : 0;
+    const minutes = baseDate ? baseDate.getMinutes() : 0;
+    const seconds = baseDate ? baseDate.getSeconds() : 0;
+    this.selectedDate = this.createDate(year, month, day, hours, minutes, seconds);
+    this.currentDate = new Date(this.selectedDate);
+    this.view = "days";
+    if (this.type === "date" || !this.hasTimePart) {
+      this.emit("sl-date-select", {
+        detail: { date: this.selectedDate }
+      });
+    } else {
+      this.emit("sl-date-change", {
+        detail: { date: this.selectedDate }
+      });
+    }
+  }
+  handleTimeChange(event) {
+    this.selectedDate = event.detail.value;
+    this.currentDate = new Date(this.selectedDate);
+    this.emit("sl-date-change", {
+      detail: { date: this.selectedDate, column: event.detail.column }
+    });
+  }
+  confirmSelection() {
+    if (!this.selectedDate) {
+      return;
+    }
+    this.emit("sl-date-select", {
+      detail: { date: this.selectedDate }
+    });
+  }
+  // 切换到年份选择视图
+  showYearSelector() {
+    const event = this.emit("sl-view-change", { detail: { view: "years" }, cancelable: true });
+    if (!event.defaultPrevented) {
+      this.view = "years";
+    }
+  }
+  // 切换到月份选择视图
+  showMonthSelector() {
+    const event = this.emit("sl-view-change", { detail: { view: "months" }, cancelable: true });
+    if (!event.defaultPrevented) {
+      this.view = "months";
+    }
+  }
+  // 导航到上一年
+  navigatePrevYear() {
+    if (this.isPrevYearDisabled) return;
+    const newDate = new Date(this.currentDate);
+    newDate.setFullYear(newDate.getFullYear() - 1);
+    if (newDate.getFullYear() < 1) newDate.setFullYear(1);
+    this.currentDate = newDate;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 导航到下一年
+  navigateNextYear() {
+    if (this.isNextYearDisabled) return;
+    const newDate = new Date(this.currentDate);
+    newDate.setFullYear(newDate.getFullYear() + 1);
+    if (newDate.getFullYear() > 9999) newDate.setFullYear(9999);
+    this.currentDate = newDate;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  get isPrevYearDisabled() {
+    return this.currentDate.getFullYear() <= 1;
+  }
+  get isNextYearDisabled() {
+    return this.currentDate.getFullYear() >= 9999;
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  normalizeDay(value) {
+    if (!value) return null;
+    const normalized = new Date(value);
+    normalized.setHours(0, 0, 0, 0);
+    return normalized;
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+  }
+  handleDatePanelMouseLeave() {
+    this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date: null } }));
+  }
+  handleGridMouseMove(event) {
+    const hasDayItem = event.composedPath().some((element) => {
+      var _a;
+      return element instanceof HTMLElement && ((_a = element.classList) == null ? void 0 : _a.contains("calendar__day-item"));
+    });
+    if (!hasDayItem) {
+      this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date: null } }));
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.stopPropagation();
+      this.confirmSelection();
+    }
+  }
+  // 切换到时间选择视图
+  showTimeSelector() {
+    const event = this.emit("sl-view-change", { detail: { view: "time" }, cancelable: true });
+    if (!event.defaultPrevented) {
+      this.view = "time";
+    }
+  }
+  render() {
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+    const days = this.getMonthDays(this.currentDate);
+    const yearRange = this.getYearRange();
+    const monthNames = this.getMonthNames();
+    const weekdayHeaders = this.getWeekdayHeaders();
+    const todayDate = /* @__PURE__ */ new Date();
+    const isHiddenTimePicker = this.view !== "days";
+    const hiddenCss = isHiddenTimePicker ? "display: none;" : "";
+    return html`
+      <div class="calendar" part="base" @mousedown=${this.handleMouseDown} @keydown=${this.handleKeyDown}>
+        <div class="calendar__content ${this.hasTimePart ? "calendar__content--has-time" : ""}">
+          <div class="calendar__date-section">
+            <div class="calendar__header" part="header">
+              <div class="flex">
+                ${this.view !== "years" ? html`<button
+                      part="nav-button"
+                      class="calendar__nav-button calendar__nav-button--year"
+                      @click="${this.navigatePrevYear}"
+                      ?disabled="${this.isPrevYearDisabled}"
+                    >
+                      <sl-icon name="chevron-double-left-1"></sl-icon>
+                    </button>` : null}
+
+                <button
+                  part="nav-button"
+                  class="calendar__nav-button"
+                  @click="${this.navigatePrev}"
+                  ?disabled="${this.isPrevDisabled}"
+                >
+                  <sl-icon name="chevron-left"></sl-icon>
+                </button>
+              </div>
+
+              <div class="calendar__title" part="title">
+                ${this.view === "days" ? html`
+                      <span part="title-year" class="calendar__title-year" @click="${this.showYearSelector}"
+                        >${this.padStart(year, 4)}${LOCALE.year}</span
+                      >
+                      <span part="title-month" class="calendar__title-month" @click="${this.showMonthSelector}"
+                        >${this.padStart(month + 1)}${LOCALE.month}</span
+                      >
+                    ` : ""}
+                ${this.view === "months" ? html`
+                      <span part="title-year" class="calendar__title-year" @click="${this.showYearSelector}"
+                        >${this.padStart(year, 4)}${LOCALE.year}</span
+                      >
+                    ` : ""}
+                ${this.view === "years" ? html` ${this.padStart(yearRange[0], 4)}-${this.padStart(yearRange[yearRange.length - 1], 4)} ` : ""}
+              </div>
+
+              <div class="flex">
+                <button
+                  part="nav-button"
+                  class="calendar__nav-button"
+                  @click="${this.navigateNext}"
+                  ?disabled="${this.isNextDisabled}"
+                >
+                  <sl-icon name="chevron-right"></sl-icon>
+                </button>
+                ${this.view !== "years" ? html`<button
+                      part="nav-button"
+                      class="calendar__nav-button calendar__nav-button--year"
+                      @click="${this.navigateNextYear}"
+                      ?disabled="${this.isNextYearDisabled}"
+                    >
+                      <sl-icon name="chevron-double-right"></sl-icon>
+                    </button>` : null}
+              </div>
+            </div>
+
+            <div class="calendar__body" part="body">
+              ${this.view === "days" ? html`
+                    <div class="calendar__date-panel" part="date-panel" @mouseleave=${this.handleDatePanelMouseLeave}>
+                      <div class="calendar__grid" @mousemove=${this.handleGridMouseMove}>
+                        ${weekdayHeaders.map(
+      (header) => html` <div class="calendar__day-header" part="day-header">${header}</div> `
+    )}
+                        ${days.map((day) => {
+      const date = this.createDate(day.year, day.month, day.day);
+      date.setHours(0, 0, 0, 0);
+      const isRange = this.mode === "range";
+      const isCurrent = todayDate.getFullYear() === day.year && todayDate.getMonth() === day.month && todayDate.getDate() === day.day;
+      const isDisabled = this.isDayDisabled(day.day, day.month, day.year);
+      let confirmedRangeStart = isRange ? this.normalizeDay(this.startDate) : null;
+      let confirmedRangeEnd = isRange ? this.normalizeDay(this.endDate) : null;
+      if (confirmedRangeStart && confirmedRangeEnd && confirmedRangeStart > confirmedRangeEnd) {
+        [confirmedRangeStart, confirmedRangeEnd] = [confirmedRangeEnd, confirmedRangeStart];
+      }
+      let previewRangeStart = null;
+      let previewRangeEnd = null;
+      const hoverDate = isRange ? this.normalizeDay(this.hoverDate) : null;
+      if (isRange && hoverDate) {
+        if (this.activeInput === "start") {
+          if (confirmedRangeEnd && hoverDate > confirmedRangeEnd) {
+            previewRangeStart = hoverDate;
+            previewRangeEnd = null;
+          } else {
+            previewRangeStart = hoverDate;
+            previewRangeEnd = confirmedRangeEnd;
+          }
+        } else {
+          if (confirmedRangeStart && hoverDate < confirmedRangeStart) {
+            previewRangeStart = null;
+            previewRangeEnd = hoverDate;
+          } else {
+            previewRangeStart = confirmedRangeStart;
+            previewRangeEnd = hoverDate;
+          }
+        }
+      }
+      if (previewRangeStart && previewRangeEnd && previewRangeStart > previewRangeEnd) {
+        [previewRangeStart, previewRangeEnd] = [previewRangeEnd, previewRangeStart];
+      }
+      if (isRange && hoverDate && !confirmedRangeStart && confirmedRangeEnd && !previewRangeStart) {
+        previewRangeStart = hoverDate;
+        previewRangeEnd = confirmedRangeEnd;
+      } else if (isRange && hoverDate && confirmedRangeStart && !confirmedRangeEnd && !previewRangeEnd) {
+        previewRangeStart = confirmedRangeStart;
+        previewRangeEnd = hoverDate;
+      }
+      if (previewRangeStart && previewRangeEnd && previewRangeStart > previewRangeEnd) {
+        [previewRangeStart, previewRangeEnd] = [previewRangeEnd, previewRangeStart];
+      }
+      const isConfirmedStart = isRange && confirmedRangeStart && date.getTime() === confirmedRangeStart.getTime();
+      const isConfirmedEnd = isRange && confirmedRangeEnd && date.getTime() === confirmedRangeEnd.getTime();
+      const normalizedSelected = this.normalizeDay(this.selectedDate);
+      const isConfirmedSelected = isRange ? isConfirmedStart || isConfirmedEnd : isConfirmedStart || isConfirmedEnd || normalizedSelected && date.getTime() === normalizedSelected.getTime();
+      const isHovered = isRange && hoverDate && date.getTime() === hoverDate.getTime();
+      const isConfirmedRangeCell = isRange && !!day.isCurrentMonth && !!confirmedRangeStart && !!confirmedRangeEnd && date >= confirmedRangeStart && date <= confirmedRangeEnd;
+      const isPreviewRangeCell = isRange && !!day.isCurrentMonth && !!previewRangeStart && !!previewRangeEnd && date >= previewRangeStart && date <= previewRangeEnd;
+      return html`
+                            <div
+                              class=${classMap({
+        calendar__day: true,
+        "calendar__day--in-range-hover": !!isPreviewRangeCell,
+        "calendar__day--in-range": !isPreviewRangeCell && !!isConfirmedRangeCell,
+        "calendar__day--range-start": isPreviewRangeCell && !!previewRangeStart && !!previewRangeEnd && previewRangeStart.getTime() !== previewRangeEnd.getTime() && date.getTime() === previewRangeStart.getTime() || !isPreviewRangeCell && !!isConfirmedRangeCell && !!confirmedRangeStart && !!confirmedRangeEnd && confirmedRangeStart.getTime() !== confirmedRangeEnd.getTime() && date.getTime() === confirmedRangeStart.getTime(),
+        "calendar__day--range-end": isPreviewRangeCell && !!previewRangeStart && !!previewRangeEnd && previewRangeStart.getTime() !== previewRangeEnd.getTime() && date.getTime() === previewRangeEnd.getTime() || !isPreviewRangeCell && !!isConfirmedRangeCell && !!confirmedRangeStart && !!confirmedRangeEnd && confirmedRangeStart.getTime() !== confirmedRangeEnd.getTime() && date.getTime() === confirmedRangeEnd.getTime()
+      })}
+                              part="day"
+                            >
+                              <div
+                                class=${classMap({
+        "calendar__day-item": true,
+        "calendar__day--other-month": !day.isCurrentMonth,
+        "calendar__day--selected": !!day.isCurrentMonth && !!isConfirmedSelected,
+        "calendar__day--hover-cell": !!day.isCurrentMonth && !!isHovered && !isConfirmedSelected && !!(this.startDate || this.endDate),
+        "calendar__date--current": isCurrent,
+        "calendar__day--disabled": isDisabled
+      })}
+                                @click="${() => !isDisabled && this.selectDay(day.day, day.month, day.year)}"
+                                @mouseenter="${() => !isDisabled && this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date } }))}"
+                              >
+                                ${day.day}
+                              </div>
+                            </div>
+                          `;
+    })}
+                      </div>
+                      ${!this.hasTimePart && this.mode !== "range" ? html`
+                            <div class="calendar__day-footer" part="day-footer">
+                              <sl-button
+                                variant="text"
+                                size="small"
+                                ?disabled=${this.isDayDisabled(
+      todayDate.getDate(),
+      todayDate.getMonth(),
+      todayDate.getFullYear()
+    )}
+                                @click="${() => {
+      this.selectDay(todayDate.getDate(), todayDate.getMonth(), todayDate.getFullYear());
+    }}"
+                              >
+                                ${LOCALE.today}
+                              </sl-button>
+                            </div>
+                          ` : ""}
+                    </div>
+                  ` : ""}
+              ${this.view === "months" ? html`
+                    <div class="calendar__month-grid" part="month-grid">
+                      ${monthNames.map((name, index) => {
+      const today = /* @__PURE__ */ new Date();
+      const isCurrent = today.getFullYear() === year && today.getMonth() === index;
+      return html`
+                          <div
+                            part="month-item"
+                            class="calendar__month-item ${classMap({
+        "calendar__date--current": isCurrent
+      })}"
+                            @click="${() => this.selectMonth(index)}"
+                          >
+                            ${name}
+                          </div>
+                        `;
+    })}
+                    </div>
+                  ` : ""}
+              ${this.view === "years" ? html`
+                    <div class="calendar__year-grid" part="year-grid">
+                      ${yearRange.map((y) => {
+      const today = /* @__PURE__ */ new Date();
+      const isCurrent = today.getFullYear() === y;
+      return html`
+                          <div
+                            part="year-item"
+                            class="calendar__year-item ${classMap({
+        "calendar__date--current": isCurrent
+      })}"
+                            @click="${() => this.selectYear(y)}"
+                          >
+                            ${this.padStart(y, 4)}
+                          </div>
+                        `;
+    })}
+                    </div>
+                  ` : ""}
+            </div>
+          </div>
+
+          ${this.hasTimePart && !this.isMobile ? html`
+                <sl-time-panel
+                  exportparts="
+                    base:time-panel-base,
+                    header:time-panel-header,
+                    margin-cell-first:time-panel-margin-cell-first,
+                    margin-cell:time-panel-margin-cell,
+                    columns:time-panel-columns,
+                    column:time-panel-column,
+                    hour:time-panel-hour,
+                    minute:time-panel-minute,
+                    second:time-panel-second,
+                    item:time-panel-item,
+                    footer:time-panel-footer
+                  "
+                  .value=${this.selectedDate}
+                  .showHour=${this.showHour}
+                  .showMinute=${this.showMinute}
+                  .showSecond=${this.showSecond}
+                  style="${hiddenCss}"
+                  @sl-change=${this.handleTimeChange}
+                ></sl-time-panel>
+              ` : ""}
+        </div>
+        ${this.hasTimePart ? html`
+              <div class="calendar__time-footer" part="time-footer" style="${hiddenCss}">
+                ${!this.isMobile ? html`
+                      <sl-button
+                        variant="primary"
+                        size="small"
+                        @click="${this.confirmSelection}"
+                        ?disabled=${!this.selectedDate || this.selectedDate && this.isDayDisabled(
+      this.selectedDate.getDate(),
+      this.selectedDate.getMonth(),
+      this.selectedDate.getFullYear()
+    )}
+                      >
+                        ${LOCALE.confirmText}
+                      </sl-button>
+                    ` : html`<div class="calendar__mobile-time-footer" @click=${this.showTimeSelector}>
+                      <span> ${this.selectedDate ? this.getTimeDisplayText() : "--:--"} </span>
+                      <sl-icon name="chevron-down"></sl-icon>
+                    </div>`}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlCalendarPicker.styles = [component_styles_default, calendar_picker_styles_default];
+SlCalendarPicker.dependencies = { "sl-icon": SlIcon, "sl-button": SlButton, "sl-time-panel": SlTimePanel };
+__decorateClass([
+  property()
+], SlCalendarPicker.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCalendarPicker.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCalendarPicker.prototype, "mode", 2);
+__decorateClass([
+  property()
+], SlCalendarPicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlCalendarPicker.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "disabledDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "endDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "hoverDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "activeInput", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendarPicker.prototype, "currentDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sync-view-with-value" })
+], SlCalendarPicker.prototype, "syncViewWithValue", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-hour" })
+], SlCalendarPicker.prototype, "showHour", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-minute" })
+], SlCalendarPicker.prototype, "showMinute", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-second" })
+], SlCalendarPicker.prototype, "showSecond", 2);
+__decorateClass([
+  state()
+], SlCalendarPicker.prototype, "isMobile", 2);
+__decorateClass([
+  state()
+], SlCalendarPicker.prototype, "view", 2);
+__decorateClass([
+  state()
+], SlCalendarPicker.prototype, "selectedDate", 2);
+__decorateClass([
+  query("sl-time-panel")
+], SlCalendarPicker.prototype, "timePanel", 2);
+__decorateClass([
+  watch("value")
+], SlCalendarPicker.prototype, "handleValueChange", 1);
+
+export {
+  parseDatetime,
+  formatDatetime,
+  LOCALE,
+  getTimeColumnsFromFormat,
+  SlCalendarPicker
+};