@kdcloudjs/shoelace 1.0.0 → 1.0.1

package/cdn/chunks/chunk.7BCM4VPC.js

@@ -1,1124 +0,0 @@
-import {
-  SlButton
-} from "./chunk.4BOWZB3Y.js";
-import {
-  e
-} from "./chunk.ZLZKOPYV.js";
-import {
-  SlIcon
-} from "./chunk.EN6IZDYW.js";
-import {
-  watch
-} from "./chunk.OY5V3CPY.js";
-import {
-  component_styles_default
-} from "./chunk.EFE6XYM5.js";
-import {
-  ShoelaceElement,
-  n,
-  r
-} from "./chunk.U6LIZH2N.js";
-import {
-  i,
-  x
-} from "./chunk.ZKRJ3RUK.js";
-import {
-  __decorateClass
-} from "./chunk.IMHLNNT7.js";
-
-// src/internal/datepicker.ts
-function parseDatetime(datetimeStr, format = "datetime") {
-  if (format === "date" || format === "datetime") {
-    return parseLegacyDatetime(datetimeStr);
-  }
-  return parseDateWithFormat(datetimeStr, format);
-}
-function parseLegacyDatetime(datetimeStr) {
-  const regex = /^(\d{4})([-./])(\d{2})\2(\d{2})(?:\s+(\d{2}):(\d{2}):(\d{2}))?$/;
-  const match = datetimeStr.trim().match(regex);
-  if (!match) {
-    return null;
-  }
-  const year = parseInt(match[1], 10);
-  const month = parseInt(match[3], 10);
-  const day = parseInt(match[4], 10);
-  const hours = match[5] ? parseInt(match[5], 10) : 0;
-  const minutes = match[6] ? parseInt(match[6], 10) : 0;
-  const seconds = match[7] ? parseInt(match[7], 10) : 0;
-  if (month < 1 || month > 12) return null;
-  if (day < 1 || day > 31) return null;
-  if (hours < 0 || hours > 23) return null;
-  if (minutes < 0 || minutes > 59) return null;
-  if (seconds < 0 || seconds > 59) return null;
-  const date = new Date(year, month - 1, day, hours, minutes, seconds);
-  if (year >= 0 && year < 100) {
-    date.setFullYear(year);
-  }
-  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
-    return null;
-  }
-  return date;
-}
-function parseDateWithFormat(dateString, format) {
-  const formatRegex = /yyyy|MM|dd|HH|mm|ss|hh|a|M|d|H|h|m|s/g;
-  const formatTokens = format.match(formatRegex);
-  if (!formatTokens) return null;
-  const regexString = format.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(formatRegex, (token) => {
-    switch (token) {
-      case "yyyy":
-        return "(\\d{4})";
-      case "MM":
-      case "dd":
-      case "HH":
-      case "mm":
-      case "ss":
-      case "hh":
-        return "(\\d{2})";
-      case "M":
-      case "d":
-      case "H":
-      case "h":
-      case "m":
-      case "s":
-        return "(\\d{1,2})";
-      case "a":
-        return "(am|pm|AM|PM)";
-      default:
-        return token;
-    }
-  });
-  const regex = new RegExp(`^${regexString}$`);
-  const match = dateString.trim().match(regex);
-  if (!match) return null;
-  const dateParts = {
-    year: 0,
-    month: 1,
-    day: 1,
-    hour: 0,
-    minute: 0,
-    second: 0
-  };
-  let isPm = false;
-  let is12Hour = false;
-  const today = /* @__PURE__ */ new Date();
-  dateParts.year = today.getFullYear();
-  dateParts.month = today.getMonth() + 1;
-  dateParts.day = today.getDate();
-  formatTokens.forEach((token, index) => {
-    const value = match[index + 1];
-    if (token === "a") {
-      if (value.toLowerCase() === "pm") isPm = true;
-    } else {
-      const intVal = parseInt(value, 10);
-      switch (token) {
-        case "yyyy":
-          dateParts.year = intVal;
-          break;
-        case "MM":
-        case "M":
-          dateParts.month = intVal;
-          break;
-        case "dd":
-        case "d":
-          dateParts.day = intVal;
-          break;
-        case "HH":
-        case "H":
-          dateParts.hour = intVal;
-          break;
-        case "mm":
-        case "m":
-          dateParts.minute = intVal;
-          break;
-        case "ss":
-        case "s":
-          dateParts.second = intVal;
-          break;
-        case "hh":
-        case "h":
-          dateParts.hour = intVal;
-          is12Hour = true;
-          break;
-      }
-    }
-  });
-  if (is12Hour) {
-    if (isPm && dateParts.hour < 12) dateParts.hour += 12;
-    if (!isPm && dateParts.hour === 12) dateParts.hour = 0;
-  }
-  const date = new Date(
-    dateParts.year,
-    dateParts.month - 1,
-    dateParts.day,
-    dateParts.hour,
-    dateParts.minute,
-    dateParts.second
-  );
-  if (date.getFullYear() !== dateParts.year || date.getMonth() !== dateParts.month - 1 || date.getDate() !== dateParts.day) {
-    const hasYear = format.includes("yyyy");
-    const hasMonth = format.includes("MM");
-    const hasDay = format.includes("dd");
-    if (hasYear && hasMonth && hasDay) {
-      return null;
-    }
-    if (format.includes("dd") && date.getDate() !== dateParts.day) return null;
-    if (format.includes("MM") && date.getMonth() !== dateParts.month - 1) return null;
-  }
-  return date;
-}
-function formatDatetime(date, format = "datetime") {
-  if (format === "date") {
-    return formatDateWithFormat(date, "yyyy-MM-dd");
-  }
-  if (format === "datetime") {
-    return formatDateWithFormat(date, "yyyy-MM-dd HH:mm:ss");
-  }
-  return formatDateWithFormat(date, format);
-}
-function formatDateWithFormat(date, format) {
-  const formatRegex = /yyyy|MM|dd|HH|mm|ss|hh|a|M|d|H|h|m|s/g;
-  const map = {
-    yyyy: String(date.getFullYear()).padStart(4, "0"),
-    MM: String(date.getMonth() + 1).padStart(2, "0"),
-    M: String(date.getMonth() + 1),
-    dd: String(date.getDate()).padStart(2, "0"),
-    d: String(date.getDate()),
-    HH: String(date.getHours()).padStart(2, "0"),
-    H: String(date.getHours()),
-    mm: String(date.getMinutes()).padStart(2, "0"),
-    m: String(date.getMinutes()),
-    ss: String(date.getSeconds()).padStart(2, "0"),
-    s: String(date.getSeconds()),
-    hh: String(date.getHours() % 12 || 12).padStart(2, "0"),
-    h: String(date.getHours() % 12 || 12),
-    a: date.getHours() >= 12 ? "PM" : "AM"
-  };
-  return format.replace(formatRegex, (match) => map[match]);
-}
-
-// src/components/calendar/calendar.style.ts
-var calendar_style_default = i`
-  :host {
-    display: inline-block;
-    font-family: var(--sl-font-sans);
-  }
-  .flex {
-    display: flex;
-  }
-
-  .calendar {
-    width: 100%;
-    max-width: 560px;
-    border: 1px solid var(--sl-color-neutral-200);
-    border-radius: var(--sl-border-radius-medium);
-    overflow: hidden;
-  }
-
-  .calendar__content {
-    display: block;
-  }
-
-  .calendar__content--has-time {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .calendar__date-section {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .calendar__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
-    background-color: var(--sl-color-neutral-50);
-    border-bottom: 1px solid var(--sl-color-neutral-200);
-    min-height: 40px; /* Ensure consistent height */
-    box-sizing: border-box;
-  }
-
-  .calendar__nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: var(--sl-border-radius-small);
-    color: var(--sl-color-neutral-700);
-    cursor: pointer;
-    padding: var(--sl-spacing-2x-small);
-  }
-
-  .calendar__nav-button:hover {
-    background-color: var(--sl-color-neutral-100);
-  }
-
-  .calendar__nav-button[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: none;
-    color: var(--sl-color-neutral-400);
-    pointer-events: none;
-  }
-
-  sl-button[disabled] {
-    pointer-events: none;
-  }
-
-  .calendar__title {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__title-year,
-  .calendar__title-month {
-    cursor: pointer;
-    padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__title-year:hover,
-  .calendar__title-month:hover {
-    background-color: var(--sl-color-neutral-100);
-  }
-
-  .calendar__nav-button--year {
-    font-size: var(--sl-font-size-small);
-    padding: 0 var(--sl-spacing-3x-small);
-    margin: 0 var(--sl-spacing-3x-small);
-  }
-
-  .calendar__grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 2px;
-  }
-
-  .calendar__day-header {
-    width: 32px;
-    line-height: 32px;
-    height: 32px;
-    background-color: var(--sl-color-neutral-0);
-    text-align: center;
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-600);
-  }
-
-  .calendar__day-footer {
-    padding: var(--sl-spacing-2x-small);
-    display: flex;
-    background-color: var(--sl-color-neutral-50);
-    justify-content: center;
-    border-top: 1px solid var(--sl-color-neutral-200);
-  }
-
-  .calendar__day {
-    width: 32px;
-    line-height: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .calendar__day-item {
-    width: 24px;
-    line-height: 24px;
-    height: 24px;
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--sl-font-size-small);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__day-item:not(.calendar__day--selected):hover {
-    background-color: var(--sl-color-neutral-50);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__day--other-month {
-    color: var(--sl-color-neutral-400);
-  }
-
-  .calendar__date--current {
-    position: relative;
-    // background-color: var(--sl-color-primary-100);
-    // color: var(--sl-color-primary-700);
-    // font-weight: var(--sl-font-weight-semibold);
-  }
-  .calendar__date--current:not(.calendar__day--selected):after {
-    position: absolute;
-    content: '';
-    bottom: -2px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .calendar__day--selected {
-    background-color: var(--sl-color-primary-600);
-    color: white;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__year-grid,
-  .calendar__month-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--sl-spacing-medium);
-    padding: var(--sl-spacing-small);
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .calendar__year-item,
-  .calendar__month-item {
-    width: 56px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    cursor: pointer;
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__year-item:not(.calendar__year-item--disabled):hover,
-  .calendar__month-item:hover {
-    background-color: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__year-item--disabled {
-    pointer-events: none;
-  }
-
-  .calendar__year-item--selected,
-  .calendar__month-item--selected {
-    background-color: var(--sl-color-primary-600);
-    color: white;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__body {
-    display: block;
-    padding: var(--sl-spacing-3x-small);
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .calendar__date-panel {
-    flex: 1 1 auto;
-  }
-
-  .calendar__time-panel {
-    width: 180px;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .calendar__time-header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
-    font-variant-numeric: tabular-nums;
-    border-bottom: 1px solid var(--sl-color-neutral-200);
-    background-color: var(--sl-color-neutral-50);
-    min-height: 40px; /* Match calendar__header min-height */
-    box-sizing: border-box;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__time-header-item {
-    min-width: 2ch;
-    text-align: center;
-  }
-
-  .calendar__time-header-separator {
-    padding: 0 var(--sl-spacing-3x-small);
-  }
-
-  .calendar__time-columns {
-    display: flex;
-    flex: 1 1 auto;
-    border-inline-start: 1px solid var(--sl-color-neutral-200);
-    /* Ensure it has a height limit if needed, but flex: 1 should handle it */
-    max-height: 240px; /* Optional constraint */
-  }
-
-  .calendar__time-column {
-    flex: 1 1 0;
-    overflow-y: hidden;
-    border-inline-start: 1px solid var(--sl-color-neutral-100);
-  }
-  .calendar__time-column:hover {
-    overflow-y: auto;
-  }
-  .calendar__time-column::-webkit-scrollbar {
-    display: none !important;
-  }
-
-  .calendar__time-column:first-child {
-    border-inline-start: none;
-  }
-
-  .calendar__time-item {
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--sl-font-size-small);
-  }
-
-  .calendar__time-item:hover {
-    background-color: var(--sl-color-neutral-50);
-  }
-
-  .calendar__time-item--selected {
-    background-color: var(--sl-color-primary-100);
-    color: var(--sl-color-primary-700);
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__time-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
-    border-top: 1px solid var(--sl-color-neutral-200);
-    background-color: var(--sl-color-neutral-0);
-    /* Ensure footer aligns at bottom */
-    margin-top: auto;
-  }
-`;
-
-// src/components/calendar/calendar.component.ts
-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"
-};
-var SlCalendar = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.type = "date";
-    this.currentDate = /* @__PURE__ */ new Date();
-    this.view = "days";
-    this.selectedDate = null;
-    this.isTimeUpdating = false;
-  }
-  parseValue(value) {
-    return parseDatetime(value);
-  }
-  async handleValueChange() {
-    if (!this.value) {
-      return;
-    }
-    const parsedDate = this.parseValue(this.value);
-    if (parsedDate) {
-      this.currentDate = new Date(parsedDate);
-      this.selectedDate = parsedDate;
-      if (this.type === "datetime" && !this.isTimeUpdating) {
-        await this.updateComplete;
-        this.scrollToTime("hour", "auto");
-        this.scrollToTime("minute", "auto");
-        this.scrollToTime("second", "auto");
-      }
-    }
-  }
-  async resetView() {
-    this.view = "days";
-    this.selectedDate = this.value ? this.parseValue(this.value) : null;
-    this.currentDate = this.selectedDate ? new Date(this.selectedDate) : /* @__PURE__ */ new Date();
-    if (this.type === "datetime") {
-      await this.updateComplete;
-      if (this.selectedDate) {
-        this.scrollToTime("hour", "auto");
-        this.scrollToTime("minute", "auto");
-        this.scrollToTime("second", "auto");
-      } else {
-        this.resetScrollTop();
-      }
-    }
-  }
-  // 获取当前月份的第一天是星期几
-  getFirstDayOfMonth(date) {
-    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
-    return firstDay.getDay();
-  }
-  // 获取当前月份的天数
-  getDaysInMonth(date) {
-    return new Date(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(new Date(year, month - 1));
-    const days = [];
-    for (let i2 = firstDay - 1; i2 >= 0; i2--) {
-      days.push({
-        day: daysInPrevMonth - i2,
-        month: month - 1,
-        year,
-        isCurrentMonth: false
-      });
-    }
-    for (let i2 = 1; i2 <= daysInMonth; i2++) {
-      days.push({
-        day: i2,
-        month,
-        year,
-        isCurrentMonth: true
-      });
-    }
-    const remainingDays = 42 - days.length;
-    for (let i2 = 1; i2 <= remainingDays; i2++) {
-      days.push({
-        day: i2,
-        month: month + 1,
-        year,
-        isCurrentMonth: false
-      });
-    }
-    return days;
-  }
-  // 获取年份范围
-  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 }, (_, i2) => rangeStart + i2);
-  }
-  // 月份名称
-  getMonthNames() {
-    return Array.from({ length: 12 }, (_, i2) => `${i2 + 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;
-  }
-  // 导航到下一个周期
-  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;
-  }
-  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";
-  }
-  // 选择月份
-  selectMonth(month) {
-    this.currentDate = new Date(this.currentDate);
-    this.currentDate.setMonth(month);
-    this.view = "days";
-  }
-  // 选择日期
-  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 = new Date(year, month, day, hours, minutes, seconds);
-    if (year >= 0 && year < 100) {
-      this.selectedDate.setFullYear(year);
-    }
-    this.currentDate = new Date(this.selectedDate);
-    this.view = "days";
-    if (this.type === "date") {
-      this.emit("sl-date-select", {
-        detail: { date: this.selectedDate }
-      });
-    } else {
-      this.emit("sl-date-change", {
-        detail: { date: this.selectedDate }
-      });
-    }
-  }
-  getActiveDateForTime() {
-    if (this.selectedDate) {
-      return new Date(this.selectedDate);
-    }
-    const today = /* @__PURE__ */ new Date();
-    return new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
-  }
-  async updateTime(part, value) {
-    if (this.type !== "datetime") {
-      return;
-    }
-    const base = this.getActiveDateForTime();
-    if (part === "hour") {
-      base.setHours(value);
-    } else if (part === "minute") {
-      base.setMinutes(value);
-    } else if (part === "second") {
-      base.setSeconds(value);
-    }
-    this.selectedDate = base;
-    this.currentDate = new Date(base);
-    this.isTimeUpdating = true;
-    this.emit("sl-date-change", {
-      detail: { date: this.selectedDate }
-    });
-    await this.updateComplete;
-    this.scrollToTime(part, "smooth");
-    setTimeout(() => {
-      this.isTimeUpdating = false;
-    }, 0);
-  }
-  selectHour(hour) {
-    this.updateTime("hour", hour);
-  }
-  selectMinute(minute) {
-    this.updateTime("minute", minute);
-  }
-  selectSecond(second) {
-    this.updateTime("second", second);
-  }
-  confirmSelection() {
-    if (!this.selectedDate) {
-      return;
-    }
-    this.emit("sl-date-select", {
-      detail: { date: this.selectedDate }
-    });
-  }
-  // 切换到年份选择视图
-  showYearSelector() {
-    this.view = "years";
-  }
-  // 切换到月份选择视图
-  showMonthSelector() {
-    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;
-  }
-  // 导航到下一年
-  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;
-  }
-  get isPrevYearDisabled() {
-    return this.currentDate.getFullYear() <= 1;
-  }
-  get isNextYearDisabled() {
-    return this.currentDate.getFullYear() >= 9999;
-  }
-  resetScrollTop() {
-    var _a, _b;
-    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".calendar__time-column")) == null ? void 0 : _b.forEach((column) => {
-      column.scrollTop = 0;
-    });
-  }
-  scrollToTime(part, behavior = "smooth") {
-    var _a;
-    const column = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`.calendar__time-column[part~="${part}"]`);
-    if (!column) return;
-    const selectedItem = column.querySelector(`.calendar__time-item--selected`);
-    if (selectedItem) {
-      const columnRect = column.getBoundingClientRect();
-      const itemRect = selectedItem.getBoundingClientRect();
-      const offset = itemRect.top - columnRect.top;
-      const targetScrollTop = column.scrollTop + offset;
-      column.scrollTo({
-        top: Math.max(0, targetScrollTop),
-        behavior
-      });
-    }
-  }
-  padStart(num, length = 2) {
-    return String(num).padStart(length, "0");
-  }
-  async updated(changedProperties) {
-    super.updated(changedProperties);
-    if (this.type === "datetime" && (changedProperties.has("type") || changedProperties.has("selectedDate"))) {
-      if (this.selectedDate) {
-        if (changedProperties.has("type")) {
-          await this.updateComplete;
-          this.scrollToTime("hour", "auto");
-          this.scrollToTime("minute", "auto");
-          this.scrollToTime("second", "auto");
-        }
-      }
-    }
-  }
-  handleMouseDown(event) {
-    event.preventDefault();
-  }
-  handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.stopPropagation();
-      this.confirmSelection();
-    }
-  }
-  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 x`
-      <div class="calendar" part="base" @mousedown=${this.handleMouseDown} @keydown=${this.handleKeyDown}>
-        <div class="calendar__content ${this.type === "datetime" ? "calendar__content--has-time" : ""}">
-          <div class="calendar__date-section">
-            <div class="calendar__header" part="header">
-              <div class="flex">
-                ${this.view !== "years" ? x`<button
-                      part="nav-button"
-                      class="calendar__nav-button calendar__nav-button--year"
-                      @click="${this.navigatePrevYear}"
-                      ?disabled="${this.isPrevYearDisabled}"
-                    >
-                      <sl-icon name="chevron-double-left"></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" ? x`
-                      <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" ? x`
-                      <span part="title-year" class="calendar__title-year" @click="${this.showYearSelector}"
-                        >${this.padStart(year, 4)}${locale.year}</span
-                      >
-                    ` : ""}
-                ${this.view === "years" ? x` ${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" ? x`<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" ? x`
-                    <div class="calendar__date-panel" part="date-panel">
-                      <div class="calendar__grid">
-                        ${weekdayHeaders.map(
-      (header) => x` <div class="calendar__day-header" part="day-header">${header}</div> `
-    )}
-                        ${days.map((day) => {
-      const isSelected = this.selectedDate ? this.selectedDate.getFullYear() === day.year && this.selectedDate.getMonth() === day.month && this.selectedDate.getDate() === day.day : false;
-      const isCurrent = todayDate.getFullYear() === day.year && todayDate.getMonth() === day.month && todayDate.getDate() === day.day;
-      return x`
-                            <div class="calendar__day" part="day">
-                              <div
-                                class="calendar__day-item ${e({
-        "calendar__day--other-month": !day.isCurrentMonth,
-        "calendar__day--selected": isSelected,
-        "calendar__date--current": isCurrent
-      })}"
-                                @click="${() => this.selectDay(day.day, day.month, day.year)}"
-                              >
-                                ${day.day}
-                              </div>
-                            </div>
-                          `;
-    })}
-                      </div>
-                      ${this.type !== "datetime" ? x`
-                            <div class="calendar__day-footer" part="day-footer">
-                              <sl-button
-                                variant="text"
-                                size="small"
-                                @click="${() => {
-      const today = /* @__PURE__ */ new Date();
-      this.selectDay(today.getDate(), today.getMonth(), today.getFullYear());
-    }}"
-                              >
-                                ${locale.today}
-                              </sl-button>
-                            </div>
-                          ` : ""}
-                    </div>
-                  ` : ""}
-              ${this.view === "months" ? x`
-                    <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 x`
-                          <div
-                            part="month-item"
-                            class="calendar__month-item ${e({
-        "calendar__date--current": isCurrent
-      })}"
-                            @click="${() => this.selectMonth(index)}"
-                          >
-                            ${name}
-                          </div>
-                        `;
-    })}
-                    </div>
-                  ` : ""}
-              ${this.view === "years" ? x`
-                    <div class="calendar__year-grid" part="year-grid">
-                      ${yearRange.map((y) => {
-      const today = /* @__PURE__ */ new Date();
-      const isCurrent = today.getFullYear() === y;
-      return x`
-                          <div
-                            part="year-item"
-                            class="calendar__year-item ${e({
-        "calendar__date--current": isCurrent
-      })}"
-                            @click="${() => this.selectYear(y)}"
-                          >
-                            ${this.padStart(y, 4)}
-                          </div>
-                        `;
-    })}
-                    </div>
-                  ` : ""}
-            </div>
-          </div>
-
-          ${this.type === "datetime" ? x`
-                <div class="calendar__time-panel" part="time-panel" style="${hiddenCss}">
-                  ${(() => {
-      const activeDate = this.selectedDate ? new Date(this.selectedDate) : null;
-      const activeHour = activeDate ? activeDate.getHours() : null;
-      const activeMinute = activeDate ? activeDate.getMinutes() : null;
-      const activeSecond = activeDate ? activeDate.getSeconds() : null;
-      const hours = Array.from({ length: 24 }, (_, index) => index);
-      const minutes = Array.from({ length: 60 }, (_, index) => index);
-      const seconds = Array.from({ length: 60 }, (_, index) => index);
-      return x`
-                      <div class="calendar__time-header" part="time-header">
-                        <span class="calendar__time-header-item">
-                          ${activeHour !== null ? this.padStart(activeHour) : "--"}
-                        </span>
-                        <span class="calendar__time-header-separator">:</span>
-                        <span class="calendar__time-header-item">
-                          ${activeMinute !== null ? this.padStart(activeMinute) : "--"}
-                        </span>
-                        <span class="calendar__time-header-separator">:</span>
-                        <span class="calendar__time-header-item">
-                          ${activeSecond !== null ? this.padStart(activeSecond) : "--"}
-                        </span>
-                      </div>
-                      <div class="calendar__time-columns" part="time-columns">
-                        <div class="calendar__time-column" part="time-column hour">
-                          ${hours.map(
-        (hour) => x`
-                              <div
-                                class="calendar__time-item ${e({
-          "calendar__time-item--selected": hour === activeHour
-        })}"
-                                part="time-item hour"
-                                @click="${() => this.selectHour(hour)}"
-                              >
-                                ${this.padStart(hour)}
-                              </div>
-                            `
-      )}
-                        </div>
-                        <div class="calendar__time-column" part="time-column minute">
-                          ${minutes.map(
-        (minute) => x`
-                              <div
-                                class="calendar__time-item ${e({
-          "calendar__time-item--selected": minute === activeMinute
-        })}"
-                                part="time-item minute"
-                                @click="${() => this.selectMinute(minute)}"
-                              >
-                                ${this.padStart(minute)}
-                              </div>
-                            `
-      )}
-                        </div>
-                        <div class="calendar__time-column" part="time-column second">
-                          ${seconds.map(
-        (second) => x`
-                              <div
-                                class="calendar__time-item ${e({
-          "calendar__time-item--selected": second === activeSecond
-        })}"
-                                part="time-item second"
-                                @click="${() => this.selectSecond(second)}"
-                              >
-                                ${this.padStart(second)}
-                              </div>
-                            `
-      )}
-                        </div>
-                      </div>
-                    `;
-    })()}
-                </div>
-              ` : ""}
-        </div>
-        ${this.type === "datetime" ? x`
-              <div class="calendar__time-footer" part="time-footer" style="${hiddenCss}">
-                <sl-button
-                  variant="primary"
-                  size="small"
-                  @click="${this.confirmSelection}"
-                  ?disabled=${!this.selectedDate}
-                >
-                  ${locale.confirmText}
-                </sl-button>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlCalendar.styles = [component_styles_default, calendar_style_default];
-SlCalendar.dependencies = { "sl-icon": SlIcon, "sl-button": SlButton };
-__decorateClass([
-  n()
-], SlCalendar.prototype, "value", 2);
-__decorateClass([
-  n({ reflect: true })
-], SlCalendar.prototype, "type", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "currentDate", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "view", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "selectedDate", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "isTimeUpdating", 2);
-__decorateClass([
-  watch("value")
-], SlCalendar.prototype, "handleValueChange", 1);
-
-export {
-  parseDatetime,
-  formatDatetime,
-  SlCalendar
-};