@kdcloudjs/shoelace 1.0.21 → 1.0.22

package/dist/chunks/chunk.3OB3LWMM.js

@@ -0,0 +1,577 @@
+import {
+  date_panel_styles_default
+} from "./chunk.IVV46OK7.js";
+import {
+  SlDrawer
+} from "./chunk.XOLD26HY.js";
+import {
+  LOCALE,
+  SlCalendar,
+  parseDatetime
+} from "./chunk.V5U4BI4B.js";
+import {
+  SlButton
+} from "./chunk.2GHXZAQI.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AG6MRYHQ.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/date-panel/date-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SlDatePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.value = "";
+    this.type = "date";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+    this.pickerView = "calendar";
+    this.wheelDate = /* @__PURE__ */ new Date();
+    this.yearScrollTop = 0;
+    this.format = "HH:mm:ss";
+  }
+  handleOpenChange() {
+    if (this.open) {
+      this.pickerView = this.type === "time" ? "time" : "calendar";
+      let currentDate;
+      if (this.type === "time") {
+        currentDate = this.parseValue(this.value, this.format);
+      } else {
+        currentDate = this.parseValue(this.value);
+      }
+      if (!currentDate) {
+        currentDate = /* @__PURE__ */ new Date();
+        if (this.type === "time" || this.pickerView === "time") {
+          currentDate.setHours(0, 0, 0, 0);
+        }
+      }
+      this.wheelDate = new Date(currentDate);
+      if (this.type === "time") {
+        this.updateComplete.then(async () => {
+          await new Promise((resolve) => requestAnimationFrame(resolve));
+          this.scrollToWheelDate();
+        });
+      } else if (this.calendar) {
+        this.calendar.resetView();
+      }
+    }
+  }
+  handleMobileCancel() {
+    this.pickerView = "calendar";
+    this.dispatchEvent(new CustomEvent("sl-cancel", { bubbles: true, composed: true }));
+  }
+  handleMobileClear() {
+    this.pickerView = "calendar";
+    if (this.calendar) {
+      this.calendar.value = "";
+      this.calendar.resetView();
+    }
+    this.dispatchEvent(new CustomEvent("sl-clear", { bubbles: true, composed: true }));
+  }
+  handleMobileConfirm() {
+    this.pickerView = "calendar";
+    this.dispatchEvent(new CustomEvent("sl-confirm", { bubbles: true, composed: true }));
+  }
+  handleDateSelect(event) {
+    this.dispatchEvent(
+      new CustomEvent("sl-date-change", {
+        detail: event.detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleDateChange(event) {
+    this.dispatchEvent(
+      new CustomEvent("sl-date-change", {
+        detail: event.detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleViewChange(event) {
+    event.preventDefault();
+    const view = event.detail.view;
+    if (view === "years" || view === "months") {
+      this.pickerView = "wheel";
+    } else if (view === "time") {
+      this.pickerView = "time";
+    }
+    let currentDate = this.parseValue(this.value);
+    if (!currentDate) {
+      currentDate = /* @__PURE__ */ new Date();
+      if (view === "time") {
+        currentDate.setHours(0, 0, 0, 0);
+      }
+    }
+    this.wheelDate = new Date(currentDate);
+    if (this.pickerView === "wheel") {
+      this.wheelDate.setDate(1);
+      const minDate = this.parseValue(String(this.min)) || new Date(1, 0, 1);
+      const minYear = minDate.getFullYear();
+      const yearIndex = this.wheelDate.getFullYear() - minYear;
+      if (yearIndex >= 0) {
+        this.yearScrollTop = yearIndex * 40;
+      }
+    }
+    this.updateComplete.then(() => {
+      this.scrollToWheelDate();
+    });
+  }
+  scrollToWheelDate() {
+    if (this.pickerView === "wheel") {
+      if (this.yearColumn) {
+        const minDate = this.parseValue(String(this.min)) || new Date(1, 0, 1);
+        const minYear = minDate.getFullYear();
+        const yearIndex = this.wheelDate.getFullYear() - minYear;
+        if (yearIndex >= 0) {
+          const scrollTop = yearIndex * 40;
+          this.yearColumn.scrollTop = scrollTop;
+          this.yearScrollTop = scrollTop;
+        }
+      }
+      if (this.monthColumn) {
+        const monthIndex = this.wheelDate.getMonth();
+        this.monthColumn.scrollTop = (108 + monthIndex) * 40;
+      }
+    } else if (this.pickerView === "time") {
+      const itemHeight = 40;
+      const centerSet = 9;
+      if (this.hourColumn) {
+        this.hourColumn.scrollTop = (centerSet * 24 + this.wheelDate.getHours()) * itemHeight;
+      }
+      if (this.minuteColumn) {
+        this.minuteColumn.scrollTop = (centerSet * 60 + this.wheelDate.getMinutes()) * itemHeight;
+      }
+      if (this.secondColumn) {
+        this.secondColumn.scrollTop = (centerSet * 60 + this.wheelDate.getSeconds()) * itemHeight;
+      }
+    }
+  }
+  handleWheelScroll(event, type) {
+    const target = event.target;
+    const itemHeight = 40;
+    const scrollTop = target.scrollTop;
+    const index = Math.round(scrollTop / itemHeight);
+    if (type === "year") {
+      const minDate = this.parseValue(String(this.min)) || new Date(1, 0, 1);
+      const minYear = minDate.getFullYear();
+      const year = minYear + index;
+      if (year !== this.wheelDate.getFullYear()) {
+        const maxDate = this.parseValue(String(this.max)) || new Date(9999, 11, 31);
+        const maxYear = maxDate.getFullYear();
+        const validYear = Math.max(minYear, Math.min(maxYear, year));
+        this.wheelDate = new Date(this.wheelDate.setFullYear(validYear));
+      }
+      if (Math.abs(scrollTop - this.yearScrollTop) > 80) {
+        this.yearScrollTop = scrollTop;
+      }
+    } else if (type === "month") {
+      const currentSet = Math.floor(index / 12);
+      const centerSet = 9;
+      if (Math.abs(currentSet - centerSet) > 5) {
+        const relativeMonthIndex = index % 12;
+        const targetIndex = centerSet * 12 + relativeMonthIndex;
+        target.scrollTop = targetIndex * itemHeight;
+      }
+      const newScrollTop = target.scrollTop;
+      const newIndex = Math.round(newScrollTop / itemHeight);
+      const monthIndex = newIndex % 12;
+      if (monthIndex !== this.wheelDate.getMonth()) {
+        this.wheelDate = new Date(this.wheelDate.setMonth(monthIndex));
+        this.requestUpdate();
+      }
+    } else {
+      const range = type === "hour" ? 24 : 60;
+      const currentSet = Math.floor(index / range);
+      const centerSet = 9;
+      if (Math.abs(currentSet - centerSet) > 5) {
+        const relativeIndex = index % range;
+        const targetIndex = centerSet * range + relativeIndex;
+        target.scrollTop = targetIndex * itemHeight;
+      }
+      const newScrollTop = target.scrollTop;
+      const newIndex = Math.round(newScrollTop / itemHeight);
+      const val = newIndex % range;
+      if (type === "hour" && val !== this.wheelDate.getHours()) {
+        this.wheelDate = new Date(this.wheelDate.setHours(val));
+      } else if (type === "minute" && val !== this.wheelDate.getMinutes()) {
+        this.wheelDate = new Date(this.wheelDate.setMinutes(val));
+      } else if (type === "second" && val !== this.wheelDate.getSeconds()) {
+        this.wheelDate = new Date(this.wheelDate.setSeconds(val));
+      }
+      this.requestUpdate();
+    }
+  }
+  async handleWheelConfirm() {
+    const newDate = new Date(this.wheelDate);
+    if (this.type === "time") {
+      this.dispatchEvent(
+        new CustomEvent("sl-date-change", {
+          detail: { date: newDate },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.handleMobileConfirm();
+      return;
+    }
+    const isTimeView = this.pickerView === "time";
+    this.pickerView = "calendar";
+    await this.updateComplete;
+    if (this.calendar) {
+      if (isTimeView) {
+        this.dispatchEvent(
+          new CustomEvent("sl-date-change", {
+            detail: { date: newDate },
+            bubbles: true,
+            composed: true
+          })
+        );
+      } else {
+        this.calendar.setCurrentDate(newDate);
+      }
+    }
+  }
+  handleWheelCancel() {
+    if (this.type === "time") {
+      this.handleMobileCancel();
+      return;
+    }
+    this.pickerView = "calendar";
+  }
+  parseValue(value, format) {
+    return parseDatetime(value, format);
+  }
+  renderMobileHeader() {
+    const isClearDisabled = !this.value;
+    const isConfirmDisabled = !this.value || this.value !== "" && !this.parseValue(this.value);
+    return html`
+      <div class="date-panel__header">
+        <div class="date-panel__left-buttons">
+          <sl-button variant="text" @click=${this.handleMobileCancel}>${LOCALE.cancelText}</sl-button>
+          <sl-button variant="text" @click=${this.handleMobileClear} ?disabled=${isClearDisabled}
+            >${LOCALE.clearText}</sl-button
+          >
+        </div>
+        <sl-button variant="text" @click=${this.handleMobileConfirm} ?disabled=${isConfirmDisabled}
+          >${LOCALE.confirmText}</sl-button
+        >
+      </div>
+    `;
+  }
+  renderCalendar() {
+    return html`
+      <sl-calendar
+        part="calendar"
+        exportparts="
+          base:calendar-base,
+          header:calendar-header,
+          nav-button:calendar-nav-button,
+          title:calendar-title,
+          title-year:calendar-title-year,
+          title-month:calendar-title-month,
+          body:calendar-body,
+          date-panel:calendar-date-panel,
+          day-header:calendar-day-header,
+          day:calendar-day,
+          day-footer:calendar-day-footer,
+          month-grid:calendar-month-grid,
+          month-item:calendar-month-item,
+          year-grid:calendar-year-grid,
+          year-item:calendar-year-item,
+          time-footer:calendar-time-footer,
+          time-panel-base,
+          time-panel-header,
+          time-panel-margin-cell-first,
+          time-panel-margin-cell,
+          time-panel-columns,
+          time-panel-column,
+          time-panel-hour,
+          time-panel-minute,
+          time-panel-second,
+          time-panel-item,
+          time-panel-footer
+        "
+        class="date-panel__calendar"
+        .value=${this.value}
+        type=${this.type}
+        min=${this.min}
+        max=${this.max}
+        @sl-date-select=${this.handleDateSelect}
+        @sl-date-change=${this.handleDateChange}
+        @sl-view-change=${this.handleViewChange}
+        @click=${(event) => event.stopPropagation()}
+      ></sl-calendar>
+    `;
+  }
+  renderWheelPicker() {
+    const minDate = this.parseValue(String(this.min)) || new Date(1, 0, 1);
+    const maxDate = this.parseValue(String(this.max)) || new Date(9999, 11, 31);
+    const minYear = minDate.getFullYear();
+    const maxYear = maxDate.getFullYear();
+    const totalYears = maxYear - minYear + 1;
+    const itemHeight = 40;
+    const buffer = 50;
+    const scrollTop = this.yearScrollTop;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
+    const endIndex = Math.min(totalYears, Math.ceil((scrollTop + 500) / itemHeight) + buffer);
+    const visibleYears = [];
+    for (let i = startIndex; i < endIndex; i++) {
+      visibleYears.push({
+        year: minYear + i
+      });
+    }
+    const months = Array.from({ length: 12 }, (_, i) => i + 1);
+    const displayMonths = Array(19).fill(months).flat();
+    const currentYear = this.wheelDate.getFullYear();
+    const currentMonth = this.wheelDate.getMonth() + 1;
+    return html`
+      <div class="date-panel__wheel-picker">
+        <div class="date-panel__wheel-header">
+          <sl-button variant="text" @click=${this.handleWheelCancel}>${LOCALE.cancelText}</sl-button>
+          <sl-button variant="text" @click=${this.handleWheelConfirm}>${LOCALE.confirmText}</sl-button>
+        </div>
+        <div class="date-panel__wheel-current-date">
+          ${currentYear}${LOCALE.year}&nbsp;${currentMonth}${LOCALE.month}
+        </div>
+        <div class="date-panel__wheel-labels">
+          <div>${LOCALE.year}</div>
+          <div>${LOCALE.month}</div>
+        </div>
+        <div class="date-panel__wheel-body">
+          <div class="date-panel__wheel-translate-top"></div>
+          <div class="date-panel__wheel-highlight"></div>
+          <div class="date-panel__wheel-translate-bottom"></div>
+
+          <div
+            class="date-panel__wheel-column date-panel__wheel-column--year"
+            @scroll=${(e) => this.handleWheelScroll(e, "year")}
+          >
+            <div class="date-panel__wheel-spacer"></div>
+            <div style="height: ${startIndex * itemHeight}px; flex-shrink: 0;"></div>
+            ${visibleYears.map(
+      (item) => html`
+                <div
+                  class="date-panel__wheel-item ${classMap({
+        "date-panel__wheel-item--selected": item.year === currentYear
+      })}"
+                >
+                  ${item.year}
+                </div>
+              `
+    )}
+            <div style="height: ${(totalYears - endIndex) * itemHeight}px; flex-shrink: 0;"></div>
+            <div class="date-panel__wheel-spacer"></div>
+          </div>
+
+          <div
+            class="date-panel__wheel-column date-panel__wheel-column--month"
+            @scroll=${(e) => this.handleWheelScroll(e, "month")}
+          >
+            <div class="date-panel__wheel-spacer"></div>
+            ${displayMonths.map(
+      (month, index) => html`
+                <div
+                  class="date-panel__wheel-item ${classMap({
+        "date-panel__wheel-item--selected": index % 12 + 1 === currentMonth
+      })}"
+                >
+                  ${month}
+                </div>
+              `
+    )}
+            <div class="date-panel__wheel-spacer"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderTimeWheelPicker() {
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    const seconds = Array.from({ length: 60 }, (_, i) => i);
+    const displayHours = Array.from({ length: 19 }, () => hours).flat();
+    const displayMinutes = Array.from({ length: 19 }, () => minutes).flat();
+    const displaySeconds = Array.from({ length: 19 }, () => seconds).flat();
+    const currentHour = this.wheelDate.getHours();
+    const currentMinute = this.wheelDate.getMinutes();
+    const currentSecond = this.wheelDate.getSeconds();
+    const isClearDisabled = !this.value;
+    const renderClearBtn = () => {
+      return this.type === "time" ? html`<div>
+            <sl-button variant="text" @click=${this.handleWheelCancel}>${LOCALE.cancelText}</sl-button>
+            ${html`<sl-button variant="text" @click=${this.handleMobileClear} ?disabled=${isClearDisabled}
+              >${LOCALE.clearText}</sl-button
+            >`}
+          </div>` : html`<sl-button variant="text" @click=${this.handleWheelCancel}>${LOCALE.cancelText}</sl-button>`;
+    };
+    return html`
+      <div class="date-panel__wheel-picker">
+        <div class="date-panel__wheel-header">
+          ${renderClearBtn()}
+          <sl-button variant="text" @click=${this.handleWheelConfirm}>${LOCALE.confirmText}</sl-button>
+        </div>
+        <div class="date-panel__wheel-labels">
+          <div>${LOCALE.hour}</div>
+          <div>${LOCALE.minute}</div>
+          <div>${LOCALE.second}</div>
+        </div>
+        <div class="date-panel__wheel-body">
+          <div class="date-panel__wheel-translate-top"></div>
+          <div class="date-panel__wheel-highlight"></div>
+          <div class="date-panel__wheel-translate-bottom"></div>
+
+          <div
+            class="date-panel__wheel-column date-panel__wheel-column--hour"
+            @scroll=${(e) => this.handleWheelScroll(e, "hour")}
+          >
+            <div class="date-panel__wheel-spacer"></div>
+            ${displayHours.map(
+      (h, index) => html`
+                <div
+                  class="date-panel__wheel-item ${classMap({
+        "date-panel__wheel-item--selected": index % 24 === currentHour
+      })}"
+                >
+                  ${this.padStart(h)}
+                </div>
+              `
+    )}
+            <div class="date-panel__wheel-spacer"></div>
+          </div>
+
+          <div
+            class="date-panel__wheel-column date-panel__wheel-column--minute"
+            @scroll=${(e) => this.handleWheelScroll(e, "minute")}
+          >
+            <div class="date-panel__wheel-spacer"></div>
+            ${displayMinutes.map(
+      (m, index) => html`
+                <div
+                  class="date-panel__wheel-item ${classMap({
+        "date-panel__wheel-item--selected": index % 60 === currentMinute
+      })}"
+                >
+                  ${this.padStart(m)}
+                </div>
+              `
+    )}
+            <div class="date-panel__wheel-spacer"></div>
+          </div>
+
+          <div
+            class="date-panel__wheel-column date-panel__wheel-column--second"
+            @scroll=${(e) => this.handleWheelScroll(e, "second")}
+          >
+            <div class="date-panel__wheel-spacer"></div>
+            ${displaySeconds.map(
+      (s, index) => html`
+                <div
+                  class="date-panel__wheel-item ${classMap({
+        "date-panel__wheel-item--selected": index % 60 === currentSecond
+      })}"
+                >
+                  ${this.padStart(s)}
+                </div>
+              `
+    )}
+            <div class="date-panel__wheel-spacer"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  render() {
+    return html`
+      <sl-drawer
+        class="date-panel__drawer"
+        placement="bottom"
+        ?open=${this.open}
+        no-header
+        @sl-request-close=${(event) => {
+      if (event.detail.source === "overlay" || event.detail.source === "keyboard") {
+        event.preventDefault();
+        this.handleMobileCancel();
+      }
+    }}
+      >
+        ${this.pickerView === "wheel" ? this.renderWheelPicker() : this.pickerView === "time" ? this.renderTimeWheelPicker() : html`${this.renderMobileHeader()} ${this.renderCalendar()}`}
+      </sl-drawer>
+    `;
+  }
+};
+SlDatePanel.styles = [component_styles_default, date_panel_styles_default];
+SlDatePanel.dependencies = {
+  "sl-button": SlButton,
+  "sl-calendar": SlCalendar,
+  "sl-drawer": SlDrawer
+};
+__decorateClass([
+  query("sl-calendar")
+], SlDatePanel.prototype, "calendar", 2);
+__decorateClass([
+  query(".date-panel__wheel-column--year")
+], SlDatePanel.prototype, "yearColumn", 2);
+__decorateClass([
+  query(".date-panel__wheel-column--month")
+], SlDatePanel.prototype, "monthColumn", 2);
+__decorateClass([
+  query(".date-panel__wheel-column--hour")
+], SlDatePanel.prototype, "hourColumn", 2);
+__decorateClass([
+  query(".date-panel__wheel-column--minute")
+], SlDatePanel.prototype, "minuteColumn", 2);
+__decorateClass([
+  query(".date-panel__wheel-column--second")
+], SlDatePanel.prototype, "secondColumn", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDatePanel.prototype, "open", 2);
+__decorateClass([
+  property()
+], SlDatePanel.prototype, "value", 2);
+__decorateClass([
+  property()
+], SlDatePanel.prototype, "type", 2);
+__decorateClass([
+  property()
+], SlDatePanel.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlDatePanel.prototype, "max", 2);
+__decorateClass([
+  state()
+], SlDatePanel.prototype, "pickerView", 2);
+__decorateClass([
+  state()
+], SlDatePanel.prototype, "wheelDate", 2);
+__decorateClass([
+  state()
+], SlDatePanel.prototype, "yearScrollTop", 2);
+__decorateClass([
+  property()
+], SlDatePanel.prototype, "format", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDatePanel.prototype, "handleOpenChange", 1);
+
+export {
+  SlDatePanel
+};