@kdcloudjs/shoelace 1.0.4 → 1.0.5

package/cdn/chunks/chunk.BOPYDZIV.js

@@ -0,0 +1,817 @@
+import {
+  parseDatetime
+} from "./chunk.HA5BTJ4F.js";
+import {
+  SlTimePanel
+} from "./chunk.F5POJMOI.js";
+import {
+  SlButton
+} from "./chunk.OPV4LWDL.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  SlIcon
+} from "./chunk.Q2WKF37T.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.LQZ32GYA.js";
+import {
+  i,
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// 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;
+    box-shadow: var(--sl-shadow-large);
+    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-300);
+    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 {
+    color: var(--sl-color-primary-600);
+  }
+
+  .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;
+    border-radius: var(--sl-border-radius-small);
+  }
+
+  .calendar__title-year:hover,
+  .calendar__title-month:hover {
+    color: var(--sl-color-primary-600);
+  }
+
+  .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);
+    justify-items: center;
+    gap: 2px;
+    padding: var(--sl-spacing-3x-small);
+  }
+
+  .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-0);
+    justify-content: center;
+    border-top: 1px solid var(--sl-color-neutral-300);
+  }
+
+  .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-100);
+    color: var(--sl-color-neutral-900);
+  }
+
+  .calendar__day--other-month {
+    color: var(--sl-color-neutral-400);
+  }
+
+  .calendar__day--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    color: var(--sl-color-neutral-300);
+    pointer-events: none;
+  }
+
+  .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;
+    background-color: var(--sl-color-neutral-0);
+  }
+
+  .calendar__date-panel {
+    flex: 1 1 auto;
+  }
+
+  .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-300);
+    background-color: var(--sl-color-neutral-0);
+    /* Ensure footer aligns at bottom */
+    margin-top: auto;
+  }
+
+  /* 修改 time-panel 的根容器样式 */
+  sl-time-panel::part(base) {
+    box-shadow: none;
+    border-radius: none;
+  }
+
+  sl-time-panel::part(margin-cell-first) {
+    border-inline-start: 1px solid var(--sl-color-neutral-300);
+  }
+
+  /* 修改 time-panel 的 columns 栏样式 */
+  sl-time-panel::part(columns) {
+    border-inline-start: 1px solid var(--sl-color-neutral-300);
+  }
+`;
+
+// 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.min = "0001-01-01";
+    this.max = "9999-12-31";
+    this.currentDate = /* @__PURE__ */ new Date();
+    this.view = "days";
+    this.selectedDate = null;
+  }
+  parseValue(value) {
+    return parseDatetime(value);
+  }
+  handleValueChange() {
+    if (!this.value) {
+      return;
+    }
+    const parsedDate = this.parseValue(this.value);
+    if (parsedDate) {
+      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();
+      }
+    });
+  }
+  setCurrentDate(date) {
+    this.currentDate = new Date(date);
+    this.view = "days";
+  }
+  // 获取当前月份的第一天是星期几
+  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;
+  }
+  // Check if a specific day should be disabled
+  isDayDisabled(day, month, year) {
+    const minDate = this.parseValue(this.min);
+    const maxDate = this.parseValue(this.max);
+    if (minDate && maxDate && maxDate < minDate) {
+      return true;
+    }
+    const date = new Date(year, month, day);
+    if (year > 0 && year < 100) {
+      date.setFullYear(year);
+    }
+    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;
+      }
+    }
+    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 }, (_, 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 }
+      });
+    }
+  }
+  handleTimeChange(event) {
+    this.selectedDate = event.detail.value;
+    this.currentDate = new Date(this.selectedDate);
+    this.emit("sl-date-change", {
+      detail: { date: this.selectedDate }
+    });
+  }
+  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;
+  }
+  // 导航到下一年
+  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;
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  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;
+      const isDisabled = this.isDayDisabled(day.day, day.month, day.year);
+      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,
+        "calendar__day--disabled": isDisabled
+      })}"
+                                @click="${() => !isDisabled && 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"
+                                ?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" ? 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`
+                <sl-time-panel
+                  .value=${this.selectedDate}
+                  style="${hiddenCss}"
+                  @sl-change=${this.handleTimeChange}
+                ></sl-time-panel>
+              ` : ""}
+        </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 || this.selectedDate && this.isDayDisabled(
+      this.selectedDate.getDate(),
+      this.selectedDate.getMonth(),
+      this.selectedDate.getFullYear()
+    )}
+                >
+                  ${locale.confirmText}
+                </sl-button>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlCalendar.styles = [component_styles_default, calendar_style_default];
+SlCalendar.dependencies = { "sl-icon": SlIcon, "sl-button": SlButton, "sl-time-panel": SlTimePanel };
+__decorateClass([
+  n()
+], SlCalendar.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlCalendar.prototype, "type", 2);
+__decorateClass([
+  n()
+], SlCalendar.prototype, "min", 2);
+__decorateClass([
+  n()
+], SlCalendar.prototype, "max", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "currentDate", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "view", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "selectedDate", 2);
+__decorateClass([
+  e2("sl-time-panel")
+], SlCalendar.prototype, "timePanel", 2);
+__decorateClass([
+  watch("value")
+], SlCalendar.prototype, "handleValueChange", 1);
+
+export {
+  SlCalendar
+};