@kdcloudjs/shoelace 1.0.11 → 1.0.13

package/cdn/chunks/chunk.Y6LNLEEW.js

@@ -0,0 +1,342 @@
+import {
+  PickerBase
+} from "./chunk.FDWGU6EJ.js";
+import {
+  SlDatePanel
+} from "./chunk.PVOS4CMB.js";
+import {
+  SlCalendar,
+  formatDatetime,
+  parseDatetime
+} from "./chunk.IJKYOXF6.js";
+import {
+  SlDrawer
+} from "./chunk.N244ZLNW.js";
+import {
+  SlInput
+} from "./chunk.XQ6OX7CO.js";
+import {
+  SlPopup
+} from "./chunk.OTQAYZHD.js";
+import {
+  SlButton
+} from "./chunk.UZFCYF3Y.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  e,
+  n,
+  r
+} from "./chunk.6MKBM2IN.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.YAYUXCI5.js

@@ -0,0 +1,11 @@
+import {
+  SlMenuLabel
+} from "./chunk.5ABUV5UR.js";
+
+// src/components/menu-label/menu-label.ts
+var menu_label_default = SlMenuLabel;
+SlMenuLabel.define("sl-menu-label");
+
+export {
+  menu_label_default
+};

package/cdn/chunks/chunk.YF74HNC6.js

@@ -0,0 +1,26 @@
+import {
+  SlButton
+} from "./chunk.UZFCYF3Y.js";
+
+// src/react/button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-button";
+SlButton.define("sl-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlButton,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlButton"
+});
+var button_default = reactWrapper;
+
+export {
+  button_default
+};

package/cdn/chunks/chunk.YK63BO2L.js

@@ -0,0 +1,21 @@
+import {
+  SlSkeleton
+} from "./chunk.SJNJAW55.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.YL2ZBZWN.js

@@ -0,0 +1,79 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.KDK3IIAH.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.6MKBM2IN.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+var SlProgressRing = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+SlProgressRing.styles = [component_styles_default, progress_ring_styles_default];
+__decorateClass([
+  e(".progress-ring__indicator")
+], SlProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], SlProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlProgressRing.prototype, "label", 2);
+
+export {
+  SlProgressRing
+};

package/cdn/chunks/chunk.YNJWGDX3.js

@@ -0,0 +1,24 @@
+import {
+  SlAvatar
+} from "./chunk.B6MIUMME.js";
+
+// src/react/avatar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-avatar";
+SlAvatar.define("sl-avatar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAvatar,
+  react: React,
+  events: {
+    onSlError: "sl-error"
+  },
+  displayName: "SlAvatar"
+});
+var avatar_default = reactWrapper;
+
+export {
+  avatar_default
+};

package/cdn/chunks/chunk.Z3N6IQ4G.js

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

package/cdn/chunks/chunk.ZAEWAWCF.js

@@ -0,0 +1,29 @@
+import {
+  SlDialog
+} from "./chunk.BH2WDPCP.js";
+
+// src/react/dialog/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-dialog";
+SlDialog.define("sl-dialog");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDialog,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide",
+    onSlInitialFocus: "sl-initial-focus",
+    onSlRequestClose: "sl-request-close"
+  },
+  displayName: "SlDialog"
+});
+var dialog_default = reactWrapper;
+
+export {
+  dialog_default
+};

package/cdn/chunks/chunk.ZARCEV5A.js

@@ -0,0 +1,11 @@
+import {
+  SlCopyButton
+} from "./chunk.V5P2IUUU.js";
+
+// src/components/copy-button/copy-button.ts
+var copy_button_default = SlCopyButton;
+SlCopyButton.define("sl-copy-button");
+
+export {
+  copy_button_default
+};

package/cdn/chunks/chunk.ZCHSYVN6.js

@@ -0,0 +1,28 @@
+import {
+  SlSwitch
+} from "./chunk.PYQYLHC5.js";
+
+// src/react/switch/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-switch";
+SlSwitch.define("sl-switch");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlSwitch,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlChange: "sl-change",
+    onSlInput: "sl-input",
+    onSlFocus: "sl-focus",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlSwitch"
+});
+var switch_default = reactWrapper;
+
+export {
+  switch_default
+};

package/cdn/chunks/chunk.ZEFPLKD4.js

@@ -0,0 +1,27 @@
+import {
+  SlTooltip
+} from "./chunk.JZBBC3QX.js";
+
+// src/react/tooltip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tooltip";
+SlTooltip.define("sl-tooltip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTooltip,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlTooltip"
+});
+var tooltip_default = reactWrapper;
+
+export {
+  tooltip_default
+};

package/cdn/chunks/chunk.ZSWDMZNE.js

@@ -0,0 +1,11 @@
+import {
+  SlSpinner
+} from "./chunk.CWN5CGYB.js";
+
+// src/components/spinner/spinner.ts
+var spinner_default = SlSpinner;
+SlSpinner.define("sl-spinner");
+
+export {
+  spinner_default
+};

package/cdn/chunks/chunk.ZVLZBW3N.js

@@ -0,0 +1,28 @@
+import {
+  SlColorPicker
+} from "./chunk.J5BEJWL2.js";
+
+// src/react/color-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-color-picker";
+SlColorPicker.define("sl-color-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlColorPicker,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlChange: "sl-change",
+    onSlFocus: "sl-focus",
+    onSlInput: "sl-input",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlColorPicker"
+});
+var color_picker_default = reactWrapper;
+
+export {
+  color_picker_default
+};

package/cdn/chunks/chunk.ZVRUVM2B.js

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