@kdcloudjs/shoelace 1.0.21 → 1.0.23

package/dist/chunks/chunk.OWQUCAPJ.js

@@ -1,577 +0,0 @@
-import {
-  date_panel_styles_default
-} from "./chunk.IVV46OK7.js";
-import {
-  SlDrawer
-} from "./chunk.UUFFPP2C.js";
-import {
-  LOCALE,
-  SlCalendar,
-  parseDatetime
-} from "./chunk.PKF7THHX.js";
-import {
-  SlButton
-} from "./chunk.RAQSRVTG.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.JRE3XEGV.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
-};