@kdcloudjs/shoelace 1.0.8 → 1.0.10

package/cdn/chunks/chunk.24VKD7M2.js

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

package/cdn/chunks/chunk.2A4DLF7G.js

@@ -0,0 +1,33 @@
+import {
+  SlSelect
+} from "./chunk.6D7ZRVTY.js";
+
+// src/react/select/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-select";
+SlSelect.define("sl-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlSelect,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlClear: "sl-clear",
+    onSlInput: "sl-input",
+    onSlFocus: "sl-focus",
+    onSlBlur: "sl-blur",
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};

package/cdn/chunks/chunk.2BRSBZYV.js

@@ -0,0 +1,25 @@
+import {
+  SlRadioButton
+} from "./chunk.6AOCG7WV.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio-button";
+SlRadioButton.define("sl-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadioButton,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus"
+  },
+  displayName: "SlRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};

package/cdn/chunks/chunk.2BUZQFAM.js

@@ -0,0 +1,342 @@
+import {
+  PickerBase
+} from "./chunk.RRYF5UDU.js";
+import {
+  SlDatePanel
+} from "./chunk.Z2U4Z4T4.js";
+import {
+  SlCalendar,
+  formatDatetime,
+  parseDatetime
+} from "./chunk.EFKZUMC7.js";
+import {
+  SlDrawer
+} from "./chunk.MEIO45DI.js";
+import {
+  SlInput
+} from "./chunk.JB77VS5M.js";
+import {
+  SlPopup
+} from "./chunk.D5XLVZEQ.js";
+import {
+  SlButton
+} from "./chunk.7RL4PRCM.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  e,
+  n,
+  r
+} from "./chunk.WDD5BVF2.js";
+import {
+  b,
+  i
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/datepicker/datepicker.style.ts
+var datepicker_style_default = i`
+  :host {
+    display: inline-block;
+  }
+
+  .datepicker__popup::part(popup) {
+    z-index: var(--sl-z-index-dropdown);
+  }
+
+  .datepicker__calendar {
+    display: block;
+  }
+`;
+
+// src/components/datepicker/datepicker.component.ts
+var SlDatepicker = class extends PickerBase {
+  constructor() {
+    super(...arguments);
+    this.type = "date";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+  }
+  handleOpenChange() {
+    if (this.open) {
+      if (this.calendar) {
+        this.calendar.resetView();
+      }
+    }
+    if (!this.open) {
+      this.handleValueChange();
+    }
+  }
+  parseValue(value) {
+    return parseDatetime(value);
+  }
+  formatValue(date) {
+    return formatDatetime(date, this.type);
+  }
+  isValidFormat(value) {
+    if (this.type === "date") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}$/.test(value);
+    }
+    if (this.type === "datetime") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}\s+\d{2}:\d{2}:\d{2}$/.test(value);
+    }
+    return true;
+  }
+  isValidValue(date) {
+    let isValid = !!date;
+    if (date) {
+      const minDate = this.parseValue(String(this.min));
+      const maxDate = this.parseValue(String(this.max));
+      if (minDate && date < minDate) {
+        isValid = false;
+      }
+      if (maxDate && date > maxDate) {
+        isValid = false;
+      }
+    }
+    return isValid;
+  }
+  getInputPattern() {
+    return this.pattern;
+  }
+  getInputSuffixIconName() {
+    return "calendar4";
+  }
+  shouldRevertOnBlur() {
+    return this.type === "datetime";
+  }
+  async handleInputInput(event) {
+    event.stopPropagation();
+    const target = event.target;
+    const value = target.value;
+    const isValidFormat = this.isValidFormat(value);
+    if (isValidFormat && this.parseValue(value) || !this.open && value === "") {
+      this.updateValue(value, { emitInput: true });
+    }
+    await this.updateComplete;
+    if (!this.open && value !== "") {
+      this.open = true;
+    }
+  }
+  handleDateSelect(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = formatDatetime(selectedDate, this.type);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: true });
+    if (this.input) {
+      this.input.focus();
+    }
+    if (!this.isMobile) {
+      this.open = false;
+    }
+  }
+  handleDateChange(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = formatDatetime(selectedDate, this.type);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: false });
+  }
+  blur() {
+    if (this.isMobile && this.open) {
+      return;
+    }
+    super.blur();
+  }
+  handleInputKeyDown(event) {
+    super.handleInputKeyDown(event);
+    if (event.key === "Enter") {
+      const parsedDate = this.parseValue(this.value);
+      const isValid = this.isValidValue(parsedDate);
+      if (!isValid) {
+        return;
+      }
+      if (this.open && this.calendar) {
+        event.stopPropagation();
+        this.calendar.handleKeyDown(event);
+        return;
+      }
+      if (parsedDate) {
+        const formattedDate = this.formatValue(parsedDate);
+        this.updateValue(formattedDate, { emitChange: true });
+        this.open = false;
+      }
+    }
+  }
+  handleValueChange() {
+    const validDate = this.parseValue(this.value);
+    const isValid = this.isValidValue(validDate);
+    if (!this.open || this.type === "date" && !this.isMobile) {
+      if (validDate && isValid) {
+        const formattedDate = this.formatValue(validDate);
+        this.lastValidValue = formattedDate;
+      } else if (this.value === "") {
+        this.lastValidValue = "";
+      }
+    }
+    if (!this.value || !this.calendar || !isValid || !this.input) {
+      return;
+    }
+    this.formControlController.updateValidity();
+    if (this.valueChangeDebounceTimer) {
+      window.clearTimeout(this.valueChangeDebounceTimer);
+    }
+    this.valueChangeDebounceTimer = window.setTimeout(() => {
+      const parsedDate = this.parseValue(this.value);
+      if (parsedDate) {
+        this.calendar.value = this.value;
+      }
+      this.valueChangeDebounceTimer = void 0;
+    }, 300);
+  }
+  renderCalendar() {
+    return b`
+      <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="datepicker__calendar"
+        .value=${this.parseValue(this.value) ? this.value : this.lastValidValue}
+        type=${this.type}
+        min=${this.min}
+        max=${this.max}
+        @sl-date-select=${this.handleDateSelect}
+        @sl-date-change=${this.handleDateChange}
+        @click=${(event) => event.stopPropagation()}
+      ></sl-calendar>
+    `;
+  }
+  renderPopup() {
+    return b`
+      <sl-popup
+        part="popup"
+        class="datepicker__popup"
+        ?active=${this.open}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        placement="bottom-start"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        ${this.renderInput("anchor")} ${this.renderCalendar()}
+      </sl-popup>
+    `;
+  }
+  render() {
+    if (this.isMobile) {
+      return b`
+        ${this.renderInput()}
+        <sl-date-panel
+          exportparts="
+            calendar-base,
+            calendar-header,
+            calendar-nav-button,
+            calendar-title,
+            calendar-title-year,
+            calendar-title-month,
+            calendar-body,
+            calendar-date-panel,
+            calendar-day-header,
+            calendar-day,
+            calendar-day-footer,
+            calendar-month-grid,
+            calendar-month-item,
+            calendar-year-grid,
+            calendar-year-item,
+            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
+          "
+          .value=${this.value}
+          .open=${this.open}
+          .min=${this.min}
+          .max=${this.max}
+          .type=${this.type}
+          @sl-date-select=${this.handleDateSelect}
+          @sl-date-change=${this.handleDateChange}
+          @sl-confirm=${this.handleMobileConfirm}
+          @sl-cancel=${this.handleMobileCancel}
+          @sl-clear=${this.handleMobileClear}
+        ></sl-date-panel>
+      `;
+    }
+    return this.renderPopup();
+  }
+};
+SlDatepicker.styles = [component_styles_default, datepicker_style_default];
+SlDatepicker.dependencies = {
+  "sl-button": SlButton,
+  "sl-calendar": SlCalendar,
+  "sl-date-panel": SlDatePanel,
+  "sl-drawer": SlDrawer,
+  "sl-popup": SlPopup,
+  "sl-input": SlInput
+};
+__decorateClass([
+  e("sl-calendar")
+], SlDatepicker.prototype, "calendar", 2);
+__decorateClass([
+  r()
+], SlDatepicker.prototype, "valueChangeDebounceTimer", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlDatepicker.prototype, "type", 2);
+__decorateClass([
+  n()
+], SlDatepicker.prototype, "pattern", 2);
+__decorateClass([
+  n()
+], SlDatepicker.prototype, "min", 2);
+__decorateClass([
+  n()
+], SlDatepicker.prototype, "max", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDatepicker.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("value")
+], SlDatepicker.prototype, "handleValueChange", 1);
+
+export {
+  SlDatepicker
+};

package/cdn/chunks/chunk.2OMJAUPE.js

@@ -0,0 +1,11 @@
+import {
+  SlInput
+} from "./chunk.JB77VS5M.js";
+
+// src/components/input/input.ts
+var input_default = SlInput;
+SlInput.define("sl-input");
+
+export {
+  input_default
+};

package/cdn/chunks/chunk.2PCDU2MP.js

@@ -0,0 +1,11 @@
+import {
+  SlBreadcrumbItem
+} from "./chunk.RXGXJEAU.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var breadcrumb_item_default = SlBreadcrumbItem;
+SlBreadcrumbItem.define("sl-breadcrumb-item");
+
+export {
+  breadcrumb_item_default
+};

package/cdn/chunks/chunk.35WOLFXK.js

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

package/cdn/chunks/chunk.36PLFZBO.js

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

package/cdn/chunks/chunk.3DRU34TW.js

@@ -0,0 +1,186 @@
+import {
+  l
+} from "./chunk.AZSL5MFU.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.ZL53POKZ.js";
+import {
+  icon_styles_default
+} from "./chunk.JY6CSNX6.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.WDD5BVF2.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/icon/icon.component.ts
+var CACHEABLE_ERROR = Symbol();
+var RETRYABLE_ERROR = Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var SlIcon = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.initialRender = false;
+    this.svg = null;
+    this.label = "";
+    this.library = "default";
+  }
+  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
+  async resolveIcon(url, library) {
+    var _a;
+    let fileData;
+    if (library == null ? void 0 : library.spriteSheet) {
+      this.svg = b`<svg part="svg">
+        <use part="use" href="${url}"></use>
+      </svg>`;
+      return this.svg;
+    }
+    try {
+      fileData = await fetch(url, { mode: "cors" });
+      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
+    } catch (e) {
+      return RETRYABLE_ERROR;
+    }
+    try {
+      const div = document.createElement("div");
+      div.innerHTML = await fileData.text();
+      const svg = div.firstElementChild;
+      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
+      if (!parser) parser = new DOMParser();
+      const doc = parser.parseFromString(svg.outerHTML, "text/html");
+      const svgEl = doc.body.querySelector("svg");
+      if (!svgEl) return CACHEABLE_ERROR;
+      svgEl.part.add("svg");
+      return document.adoptNode(svgEl);
+    } catch (e) {
+      return CACHEABLE_ERROR;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    this.initialRender = true;
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  getIconSource() {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return {
+        url: library.resolver(this.name),
+        fromLibrary: true
+      };
+    }
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const { url, fromLibrary } = this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
+    if (!url) {
+      this.svg = null;
+      return;
+    }
+    let iconResolver = iconCache.get(url);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon(url, library);
+      iconCache.set(url, iconResolver);
+    }
+    if (!this.initialRender) {
+      return;
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(url);
+    }
+    if (url !== this.getIconSource().url) {
+      return;
+    }
+    if (l(svg)) {
+      this.svg = svg;
+      if (library) {
+        await this.updateComplete;
+        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
+        if (typeof library.mutator === "function" && shadowSVG) {
+          library.mutator(shadowSVG);
+        }
+      }
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.emit("sl-error");
+        break;
+      default:
+        this.svg = svg.cloneNode(true);
+        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
+        this.emit("sl-load");
+    }
+  }
+  render() {
+    return this.svg;
+  }
+};
+SlIcon.styles = [component_styles_default, icon_styles_default];
+__decorateClass([
+  r()
+], SlIcon.prototype, "svg", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlIcon.prototype, "name", 2);
+__decorateClass([
+  n()
+], SlIcon.prototype, "src", 2);
+__decorateClass([
+  n()
+], SlIcon.prototype, "label", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], SlIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], SlIcon.prototype, "setIcon", 1);
+
+export {
+  SlIcon
+};

package/cdn/chunks/chunk.3INVXKQ2.js

@@ -0,0 +1,11 @@
+import {
+  SlQrCode
+} from "./chunk.MOPKOKW5.js";
+
+// src/components/qr-code/qr-code.ts
+var qr_code_default = SlQrCode;
+SlQrCode.define("sl-qr-code");
+
+export {
+  qr_code_default
+};