@kdcloudjs/shoelace 0.0.2 → 1.0.0

package/dist/chunks/chunk.LEQAHGT3.js

@@ -0,0 +1,1123 @@
+import {
+  SlButton
+} from "./chunk.DY7Q3C4A.js";
+import {
+  SlIcon
+} from "./chunk.HZY36HHO.js";
+import {
+  watch
+} from "./chunk.GMYPQTFK.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.YFUR5BLL.js";
+import {
+  __decorateClass
+} from "./chunk.KAW7D32O.js";
+
+// src/components/calendar/calendar.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+
+// 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.component.ts
+import { property, state } from "lit/decorators.js";
+
+// src/components/calendar/calendar.style.ts
+import { css } from "lit";
+var calendar_style_default = css`
+  :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 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;
+  }
+  // 获取年份范围
+  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;
+  }
+  // 导航到下一个周期
+  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 html`
+      <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" ? 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"></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">
+                      <div class="calendar__grid">
+                        ${weekdayHeaders.map(
+      (header) => html` <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 html`
+                            <div class="calendar__day" part="day">
+                              <div
+                                class="calendar__day-item ${classMap({
+        "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" ? html`
+                            <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" ? 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.type === "datetime" ? html`
+                <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 html`
+                      <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) => html`
+                              <div
+                                class="calendar__time-item ${classMap({
+          "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) => html`
+                              <div
+                                class="calendar__time-item ${classMap({
+          "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) => html`
+                              <div
+                                class="calendar__time-item ${classMap({
+          "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" ? html`
+              <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([
+  property()
+], SlCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCalendar.prototype, "type", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "currentDate", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "view", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "selectedDate", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "isTimeUpdating", 2);
+__decorateClass([
+  watch("value")
+], SlCalendar.prototype, "handleValueChange", 1);
+
+export {
+  parseDatetime,
+  formatDatetime,
+  SlCalendar
+};