@kdcloudjs/shoelace 1.0.17 → 1.0.18

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

@@ -0,0 +1,21 @@
+import {
+  SlQrCode
+} from "./chunk.KWYMWYV2.js";
+
+// src/react/qr-code/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-qr-code";
+SlQrCode.define("sl-qr-code");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlQrCode,
+  react: React,
+  events: {},
+  displayName: "SlQrCode"
+});
+var qr_code_default = reactWrapper;
+
+export {
+  qr_code_default
+};

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

@@ -0,0 +1,219 @@
+import {
+  time_panel_styles_default
+} from "./chunk.PC4SBX2U.js";
+import {
+  SlButton
+} from "./chunk.RCGXVMGO.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.ZEOTY4T5.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/time-panel/time-panel.component.ts
+var locale = {
+  confirmText: "\u786E\u5B9A"
+};
+var SlTimePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.noHeader = false;
+    this.withFooter = false;
+    this.isTimeUpdating = false;
+  }
+  async handleValueChange() {
+    if (this.value && !this.isTimeUpdating) {
+      await this.updateComplete;
+      this.scrollToTime("hour", "auto");
+      this.scrollToTime("minute", "auto");
+      this.scrollToTime("second", "auto");
+    }
+  }
+  async resetScroll() {
+    var _a;
+    await this.updateComplete;
+    if (this.value) {
+      this.scrollToTime("hour", "auto");
+      this.scrollToTime("minute", "auto");
+      this.scrollToTime("second", "auto");
+    } else {
+      const columns = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".timepicker__column");
+      columns == null ? void 0 : columns.forEach((col) => col.scrollTo({ top: 0, behavior: "auto" }));
+    }
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  scrollToTime(part, behavior = "smooth") {
+    var _a;
+    const column = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`.timepicker__column[part~="${part}"]`);
+    if (!column) return;
+    const selectedItem = column.querySelector(`.timepicker__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
+      });
+    }
+  }
+  async updateTime(part, val) {
+    let base = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+    if (!this.value) {
+      const today = /* @__PURE__ */ new Date();
+      base = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+    }
+    if (part === "hour") {
+      base.setHours(val);
+    } else if (part === "minute") {
+      base.setMinutes(val);
+    } else if (part === "second") {
+      base.setSeconds(val);
+    }
+    this.isTimeUpdating = true;
+    this.value = base;
+    this.emit("sl-change", {
+      detail: { value: base }
+    });
+    await this.updateComplete;
+    this.scrollToTime(part, "smooth");
+    setTimeout(() => {
+      this.isTimeUpdating = false;
+    }, 0);
+  }
+  render() {
+    const activeDate = this.value ? new Date(this.value) : 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 b`
+      <div class="timepicker" part="base">
+        ${!this.noHeader ? b`
+              <div class="timepicker__header" part="header">
+                <span class="timepicker__header-item"> ${activeHour !== null ? this.padStart(activeHour) : "--"} </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeMinute !== null ? this.padStart(activeMinute) : "--"}
+                </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeSecond !== null ? this.padStart(activeSecond) : "--"}
+                </span>
+              </div>
+            ` : ""}
+        <div class="timepicker__margin">
+          <div part="margin-cell-first"></div>
+          <div part="margin-cell"></div>
+          <div part="margin-cell"></div>
+        </div>
+        <div class="timepicker__columns" part="columns">
+          <div class="timepicker__column" part="column hour">
+            ${hours.map(
+      (hour) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": hour === activeHour
+      })}"
+                  part="item hour"
+                  @click="${() => this.updateTime("hour", hour)}"
+                >
+                  ${this.padStart(hour)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column minute">
+            ${minutes.map(
+      (minute) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": minute === activeMinute
+      })}"
+                  part="item minute"
+                  @click="${() => this.updateTime("minute", minute)}"
+                >
+                  ${this.padStart(minute)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column second">
+            ${seconds.map(
+      (second) => b`
+                <div
+                  class="timepicker__item ${e({
+        "timepicker__item--selected": second === activeSecond
+      })}"
+                  part="item second"
+                  @click="${() => this.updateTime("second", second)}"
+                >
+                  ${this.padStart(second)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+        </div>
+
+        ${this.withFooter ? b`
+              <div class="timepicker__footer" part="footer">
+                <sl-button
+                  size="small"
+                  variant="primary"
+                  @click=${() => {
+      this.emit("sl-select", { detail: { value: this.value } });
+    }}
+                >
+                  ${locale.confirmText}
+                </sl-button>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlTimePanel.styles = [component_styles_default, time_panel_styles_default];
+SlTimePanel.dependencies = { "sl-button": SlButton };
+__decorateClass([
+  n({ attribute: false })
+], SlTimePanel.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "no-header" })
+], SlTimePanel.prototype, "noHeader", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "with-footer" })
+], SlTimePanel.prototype, "withFooter", 2);
+__decorateClass([
+  r()
+], SlTimePanel.prototype, "isTimeUpdating", 2);
+__decorateClass([
+  watch("value")
+], SlTimePanel.prototype, "handleValueChange", 1);
+
+export {
+  SlTimePanel
+};

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

@@ -0,0 +1,122 @@
+import {
+  tab_styles_default
+} from "./chunk.N2SGPX4I.js";
+import {
+  SlIconButton
+} from "./chunk.CX3VFTX4.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.ZEOTY4T5.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/tab/tab.component.ts
+var id = 0;
+var SlTab = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.attrId = ++id;
+    this.componentId = `sl-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+    this.tabIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick(event) {
+    event.stopPropagation();
+    this.emit("sl-close");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    if (this.disabled && !this.active) {
+      this.tabIndex = -1;
+    } else {
+      this.tabIndex = 0;
+    }
+  }
+  render() {
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return b`
+      <div
+        part="base"
+        class=${e({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+      >
+        <slot></slot>
+        ${this.closable ? b`
+              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></sl-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlTab.styles = [component_styles_default, tab_styles_default];
+SlTab.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  e2(".tab")
+], SlTab.prototype, "tab", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlTab.prototype, "panel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTab.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTab.prototype, "closable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTab.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlTab.prototype, "tabIndex", 2);
+__decorateClass([
+  watch("active")
+], SlTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], SlTab.prototype, "handleDisabledChange", 1);
+
+export {
+  SlTab
+};

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

@@ -0,0 +1,27 @@
+import {
+  SlDatePanel
+} from "./chunk.OUG4IWNU.js";
+
+// src/react/date-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-date-panel";
+SlDatePanel.define("sl-date-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDatePanel,
+  react: React,
+  events: {
+    onSlCancel: "sl-cancel",
+    onSlClear: "sl-clear",
+    onSlConfirm: "sl-confirm",
+    onSlDateChange: "sl-date-change"
+  },
+  displayName: "SlDatePanel"
+});
+var date_panel_default = reactWrapper;
+
+export {
+  date_panel_default
+};

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

@@ -0,0 +1,25 @@
+import {
+  SlNav
+} from "./chunk.MDQDZSXF.js";
+
+// src/react/nav/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-nav";
+SlNav.define("sl-nav");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlNav,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlNavSelect: "sl-nav-select"
+  },
+  displayName: "SlNav"
+});
+var nav_default = reactWrapper;
+
+export {
+  nav_default
+};

package/cdn/chunks/chunk.A2D4SPKL.js

@@ -0,0 +1,25 @@
+import {
+  SlRating
+} from "./chunk.UJSSNNSI.js";
+
+// src/react/rating/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-rating";
+SlRating.define("sl-rating");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRating,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlHover: "sl-hover"
+  },
+  displayName: "SlRating"
+});
+var rating_default = reactWrapper;
+
+export {
+  rating_default
+};

package/cdn/chunks/chunk.A6QBB2TR.js

@@ -0,0 +1,25 @@
+import {
+  SlCopyButton
+} from "./chunk.MU5NBMHU.js";
+
+// src/react/copy-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-copy-button";
+SlCopyButton.define("sl-copy-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlCopyButton,
+  react: React,
+  events: {
+    onSlCopy: "sl-copy",
+    onSlError: "sl-error"
+  },
+  displayName: "SlCopyButton"
+});
+var copy_button_default = reactWrapper;
+
+export {
+  copy_button_default
+};

package/cdn/chunks/chunk.A7MXUT3K.js

@@ -0,0 +1,29 @@
+import {
+  SlTreeItem
+} from "./chunk.TI3J5ZIM.js";
+
+// src/react/tree-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tree-item";
+SlTreeItem.define("sl-tree-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTreeItem,
+  react: React,
+  events: {
+    onSlExpand: "sl-expand",
+    onSlAfterExpand: "sl-after-expand",
+    onSlCollapse: "sl-collapse",
+    onSlAfterCollapse: "sl-after-collapse",
+    onSlLazyChange: "sl-lazy-change",
+    onSlLazyLoad: "sl-lazy-load"
+  },
+  displayName: "SlTreeItem"
+});
+var tree_item_default = reactWrapper;
+
+export {
+  tree_item_default
+};

package/cdn/chunks/chunk.AAZ2DBN5.js

@@ -0,0 +1,11 @@
+import {
+  SlImageComparer
+} from "./chunk.IOGJF7WI.js";
+
+// src/components/image-comparer/image-comparer.ts
+var image_comparer_default = SlImageComparer;
+SlImageComparer.define("sl-image-comparer");
+
+export {
+  image_comparer_default
+};

package/cdn/chunks/chunk.AOUGBCTO.js

@@ -0,0 +1,11 @@
+import {
+  SlIconButton
+} from "./chunk.CX3VFTX4.js";
+
+// src/components/icon-button/icon-button.ts
+var icon_button_default = SlIconButton;
+SlIconButton.define("sl-icon-button");
+
+export {
+  icon_button_default
+};

package/cdn/chunks/chunk.AP6OTGUK.js

@@ -0,0 +1,11 @@
+import {
+  SlTab
+} from "./chunk.7TE3GWQW.js";
+
+// src/components/tab/tab.ts
+var tab_default = SlTab;
+SlTab.define("sl-tab");
+
+export {
+  tab_default
+};

package/cdn/chunks/chunk.APVXSMAK.js

@@ -0,0 +1,24 @@
+import {
+  SlImageComparer
+} from "./chunk.IOGJF7WI.js";
+
+// src/react/image-comparer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-image-comparer";
+SlImageComparer.define("sl-image-comparer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlImageComparer,
+  react: React,
+  events: {
+    onSlChange: "sl-change"
+  },
+  displayName: "SlImageComparer"
+});
+var image_comparer_default = reactWrapper;
+
+export {
+  image_comparer_default
+};

package/cdn/chunks/chunk.AQEUT6JX.js

@@ -0,0 +1,21 @@
+import {
+  SlScreen
+} from "./chunk.BLFTZ4DM.js";
+
+// src/react/screen/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-screen";
+SlScreen.define("sl-screen");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlScreen,
+  react: React,
+  events: {},
+  displayName: "SlScreen"
+});
+var screen_default = reactWrapper;
+
+export {
+  screen_default
+};

package/cdn/chunks/chunk.ASONYWLA.js

@@ -0,0 +1,24 @@
+import {
+  SlMutationObserver
+} from "./chunk.6LYL6II2.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-mutation-observer";
+SlMutationObserver.define("sl-mutation-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMutationObserver,
+  react: React,
+  events: {
+    onSlMutation: "sl-mutation"
+  },
+  displayName: "SlMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

package/cdn/chunks/chunk.AT2IQW7B.js

@@ -0,0 +1,21 @@
+import {
+  SlMenuLabel
+} from "./chunk.2ZR3IGGY.js";
+
+// src/react/menu-label/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-menu-label";
+SlMenuLabel.define("sl-menu-label");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMenuLabel,
+  react: React,
+  events: {},
+  displayName: "SlMenuLabel"
+});
+var menu_label_default = reactWrapper;
+
+export {
+  menu_label_default
+};

package/cdn/chunks/chunk.AUT3BAF3.js

@@ -0,0 +1,21 @@
+import {
+  SlDatepicker
+} from "./chunk.OA5HLVP5.js";
+
+// src/react/datepicker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-datepicker";
+SlDatepicker.define("sl-datepicker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDatepicker,
+  react: React,
+  events: {},
+  displayName: "SlDatepicker"
+});
+var datepicker_default = reactWrapper;
+
+export {
+  datepicker_default
+};

package/cdn/chunks/chunk.B2M43KAI.js

@@ -0,0 +1,21 @@
+import {
+  SlVisuallyHidden
+} from "./chunk.BY2N3WW5.js";
+
+// src/react/visually-hidden/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-visually-hidden";
+SlVisuallyHidden.define("sl-visually-hidden");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlVisuallyHidden,
+  react: React,
+  events: {},
+  displayName: "SlVisuallyHidden"
+});
+var visually_hidden_default = reactWrapper;
+
+export {
+  visually_hidden_default
+};