@kdcloudjs/shoelace 1.0.41 → 1.0.42

package/cdn/chunks/chunk.5AHWBAQI.js

@@ -0,0 +1,28 @@
+import {
+  SlColorPicker
+} from "./chunk.DXIZYCV4.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.5AIHKQGP.js

@@ -0,0 +1,279 @@
+import {
+  tooltip_styles_default
+} from "./chunk.CSR56J6P.js";
+import {
+  SlPopup
+} from "./chunk.IMAUP6QR.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.KSB7EI3T.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  parseDuration,
+  stopAnimations
+} from "./chunk.RC46L6CZ.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.JDPBVOL2.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/tooltip/tooltip.component.ts
+var SlTooltip = class extends ShoelaceElement {
+  constructor() {
+    super();
+    this.localize = new LocalizeController(this);
+    this.content = "";
+    this.placement = "top";
+    this.disabled = false;
+    this.distance = 8;
+    this.open = false;
+    this.skidding = 0;
+    this.trigger = "hover focus";
+    this.hoist = false;
+    this.handleBlur = () => {
+      if (this.hasTrigger("focus")) {
+        this.hide();
+      }
+    };
+    this.handleClick = () => {
+      if (this.hasTrigger("click")) {
+        if (this.open) {
+          this.hide();
+        } else {
+          this.show();
+        }
+      }
+    };
+    this.handleFocus = () => {
+      if (this.hasTrigger("focus")) {
+        this.show();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.hide();
+      }
+    };
+    this.handleMouseOver = () => {
+      if (this.hasTrigger("hover")) {
+        const delay = parseDuration(getComputedStyle(this).getPropertyValue("--show-delay"));
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = window.setTimeout(() => this.show(), delay);
+      }
+    };
+    this.handleMouseOut = () => {
+      if (this.hasTrigger("hover")) {
+        const delay = parseDuration(getComputedStyle(this).getPropertyValue("--hide-delay"));
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+      }
+    };
+    this.addEventListener("blur", this.handleBlur, true);
+    this.addEventListener("focus", this.handleFocus, true);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("mouseover", this.handleMouseOver);
+    this.addEventListener("mouseout", this.handleMouseOut);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    if (this.open) {
+      this.popup.active = true;
+      this.popup.reposition();
+    }
+  }
+  hasTrigger(triggerType) {
+    const triggers = this.trigger.split(" ");
+    return triggers.includes(triggerType);
+  }
+  async handleOpenChange() {
+    var _a, _b;
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
+      this.emit("sl-show");
+      if ("CloseWatcher" in window) {
+        (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => {
+          this.hide();
+        };
+      } else {
+        document.addEventListener("keydown", this.handleDocumentKeyDown);
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "tooltip.show", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
+      this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide");
+      (_b = this.closeWatcher) == null ? void 0 : _b.destroy();
+      document.removeEventListener("keydown", this.handleDocumentKeyDown);
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "tooltip.hide", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.popup.active = false;
+      this.body.hidden = true;
+      this.emit("sl-after-hide");
+    }
+  }
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
+    }
+  }
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the tooltip */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  //
+  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
+  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
+  // aria-describedby attribute to a slot, which is required by <sl-popup> to correctly locate the first assigned
+  // element, otherwise positioning is incorrect.
+  //
+  render() {
+    return b`
+      <sl-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${e({
+      tooltip: true,
+      "tooltip--open": this.open
+    })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        arrow
+        hover-bridge
+      >
+        ${""}
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+
+        ${""}
+        <div part="body" id="tooltip" class="tooltip__body" role="tooltip" aria-live=${this.open ? "polite" : "off"}>
+          <slot name="content">${this.content}</slot>
+        </div>
+      </sl-popup>
+    `;
+  }
+};
+SlTooltip.styles = [component_styles_default, tooltip_styles_default];
+SlTooltip.dependencies = { "sl-popup": SlPopup };
+__decorateClass([
+  e2("slot:not([name])")
+], SlTooltip.prototype, "defaultSlot", 2);
+__decorateClass([
+  e2(".tooltip__body")
+], SlTooltip.prototype, "body", 2);
+__decorateClass([
+  e2("sl-popup")
+], SlTooltip.prototype, "popup", 2);
+__decorateClass([
+  n()
+], SlTooltip.prototype, "content", 2);
+__decorateClass([
+  n()
+], SlTooltip.prototype, "placement", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTooltip.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Number })
+], SlTooltip.prototype, "distance", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTooltip.prototype, "open", 2);
+__decorateClass([
+  n({ type: Number })
+], SlTooltip.prototype, "skidding", 2);
+__decorateClass([
+  n()
+], SlTooltip.prototype, "trigger", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlTooltip.prototype, "hoist", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlTooltip.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch(["content", "distance", "hoist", "placement", "skidding"])
+], SlTooltip.prototype, "handleOptionsChange", 1);
+__decorateClass([
+  watch("disabled")
+], SlTooltip.prototype, "handleDisabledChange", 1);
+setDefaultAnimation("tooltip.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+setDefaultAnimation("tooltip.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 150, easing: "ease" }
+});
+
+export {
+  SlTooltip
+};

package/cdn/chunks/chunk.5CWRNVCH.js

@@ -0,0 +1,281 @@
+import {
+  steps_styles_default
+} from "./chunk.66LWIC6M.js";
+import {
+  SlIcon
+} from "./chunk.ST3VMWGP.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.JDPBVOL2.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/steps/steps.component.ts
+var SlSteps = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.current = 0;
+    this.status = "process";
+    this.initial = 0;
+    this.percent = void 0;
+    this.size = "default";
+    this.type = "default";
+    this.variant = "filled";
+    this.orientation = "horizontal";
+    this.responsive = false;
+    this.titlePlacement = "horizontal";
+    this._isVertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.responsive) {
+      this._resizeObserver = new ResizeObserver((entries) => {
+        var _a, _b;
+        const width = (_b = (_a = entries[0]) == null ? void 0 : _a.contentRect.width) != null ? _b : 0;
+        this._isVertical = width < 532;
+      });
+      this._resizeObserver.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    this._resizeObserver = void 0;
+  }
+  updated(changed) {
+    var _a;
+    if (changed.has("responsive")) {
+      (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+      if (this.responsive) {
+        this._resizeObserver = new ResizeObserver((entries) => {
+          var _a2, _b;
+          const width = (_b = (_a2 = entries[0]) == null ? void 0 : _a2.contentRect.width) != null ? _b : 0;
+          this._isVertical = width < 532;
+        });
+        this._resizeObserver.observe(this);
+      } else {
+        this._isVertical = false;
+      }
+    }
+  }
+  get effectiveOrientation() {
+    if (this.responsive && this._isVertical) return "vertical";
+    return this.orientation;
+  }
+  get clickable() {
+    return typeof this.onChange === "function";
+  }
+  handleStepClick(index) {
+    if (!this.clickable) return;
+    const item = this.items[index];
+    if (item == null ? void 0 : item.disabled) return;
+    this.onChange(index);
+  }
+  getStepStatus(index) {
+    const item = this.items[index];
+    if (item.status) return item.status;
+    if (index < this.current) return "finish";
+    if (index === this.current) return this.status;
+    return "wait";
+  }
+  renderIcon(index, stepStatus) {
+    const item = this.items[index];
+    if (item.icon) {
+      return b`<sl-icon name=${item.icon}></sl-icon>`;
+    }
+    if (stepStatus === "finish") {
+      return b`<sl-icon name="check-lg"></sl-icon>`;
+    }
+    if (stepStatus === "error") {
+      return b`<sl-icon name="x-lg"></sl-icon>`;
+    }
+    if (stepStatus === "process" && this.percent !== void 0) {
+      const size = this.size === "small" ? 30 : 38;
+      const stroke = this.size === "small" ? 1.5 : 2;
+      const r2 = (size - stroke) / 2;
+      const cx = size / 2;
+      const circumference = 2 * Math.PI * r2;
+      const offset = circumference - Math.min(100, Math.max(0, this.percent)) / 100 * circumference;
+      return b`
+        <svg class="progress-ring" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+          <circle class="progress-ring-bg" cx="${cx}" cy="${cx}" r="${r2}" stroke-width="${stroke}" />
+          <circle
+            class="progress-ring-fg"
+            cx="${cx}"
+            cy="${cx}"
+            r="${r2}"
+            stroke-width="${stroke}"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${offset}"
+          />
+        </svg>
+        <span>${this.initial + index + 1}</span>
+      `;
+    }
+    return b`<span>${this.initial + index + 1}</span>`;
+  }
+  renderDot(item, index) {
+    const stepStatus = this.getStepStatus(index);
+    return b`
+      <div class="step step-${stepStatus} ${item.disabled ? "step-disabled" : ""}" role="listitem">
+        <div class="step-dot-track">
+          <div class="step-dot-indicator"></div>
+        </div>
+        <div class="step-dot-text">
+          <span class="step-title">${item.title}</span>
+          ${item.subTitle ? b`<span class="step-subtitle">${item.subTitle}</span>` : ""}
+          ${item.content ? b`<div class="step-description">${item.content}</div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderDefault(item, index) {
+    const stepStatus = this.getStepStatus(index);
+    const hasCustomIcon = !!item.icon;
+    return b`
+      <div class="step step-${stepStatus} ${item.disabled ? "step-disabled" : ""}" role="listitem">
+        <div class="step-icon ${hasCustomIcon ? "step-icon-custom" : ""}">${this.renderIcon(index, stepStatus)}</div>
+        <div class="step-main">
+          <div class="step-title-row">
+            <span class="step-title">${item.title}</span>
+            ${item.subTitle ? b`<span class="step-subtitle">${item.subTitle}</span>` : ""}
+            <div class="step-tail"></div>
+          </div>
+          ${item.content ? b`<div class="step-description">${item.content}</div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderNavigation(item, index) {
+    const stepStatus = this.getStepStatus(index);
+    return b`
+      <div class="step step-${stepStatus} ${item.disabled ? "step-disabled" : ""}" role="listitem">
+        <div class="step-nav-content">
+          <div class="step-icon ${item.icon ? "step-icon-custom" : ""}">${this.renderIcon(index, stepStatus)}</div>
+          <div class="step-nav-text">
+            <span class="step-title">${item.title}</span>
+            ${item.subTitle ? b`<span class="step-subtitle">${item.subTitle}</span>` : ""}
+          </div>
+        </div>
+        <div class="step-nav-arrow"></div>
+      </div>
+    `;
+  }
+  renderPanel(item, index) {
+    const stepStatus = this.getStepStatus(index);
+    const hasCustomIcon = !!item.icon;
+    return b`
+      <div class="step step-${stepStatus} ${item.disabled ? "step-disabled" : ""}" role="listitem">
+        <div class="step-panel-content">
+          <div class="step-icon ${hasCustomIcon ? "step-icon-custom" : ""}">${this.renderIcon(index, stepStatus)}</div>
+          <div class="step-panel-text">
+            <span class="step-title">${item.title}</span>
+            ${item.content ? b`<div class="step-description">${item.content}</div>` : ""}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderInline(item, index) {
+    const stepStatus = this.getStepStatus(index);
+    return b`
+      <div class="step step-${stepStatus} ${item.disabled ? "step-disabled" : ""}" role="listitem">
+        <div class="step-inline-dot"></div>
+        <span class="step-title">${item.title}</span>
+        ${item.subTitle ? b`<span class="step-subtitle">${item.subTitle}</span>` : ""}
+      </div>
+    `;
+  }
+  render() {
+    let renderStep;
+    switch (this.type) {
+      case "dot":
+        renderStep = this.renderDot;
+        break;
+      case "navigation":
+        renderStep = this.renderNavigation;
+        break;
+      case "panel":
+        renderStep = this.renderPanel;
+        break;
+      case "inline":
+        renderStep = this.renderInline;
+        break;
+      default:
+        renderStep = this.renderDefault;
+    }
+    return b`
+      <div
+        class="steps steps-${this.size} steps-${this.type} steps-${this.variant} steps-${this.effectiveOrientation} steps-title-${this.titlePlacement} ${this.clickable ? "steps-clickable" : ""}"
+        role="list"
+        @click=${(e) => {
+      if (!this.clickable) return;
+      const stepEl = e.target.closest(".step");
+      if (!stepEl) return;
+      const stepsEl = stepEl.parentElement;
+      if (!stepsEl) return;
+      const index = Array.from(stepsEl.querySelectorAll(":scope > .step")).indexOf(stepEl);
+      if (index >= 0) this.handleStepClick(index);
+    }}
+      >
+        ${this.items.map((item, index) => renderStep.call(this, item, index))}
+      </div>
+    `;
+  }
+};
+SlSteps.styles = [component_styles_default, steps_styles_default];
+SlSteps.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  n({ type: Array })
+], SlSteps.prototype, "items", 2);
+__decorateClass([
+  n({ type: Number })
+], SlSteps.prototype, "current", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "status", 2);
+__decorateClass([
+  n({ type: Number })
+], SlSteps.prototype, "initial", 2);
+__decorateClass([
+  n({ type: Number })
+], SlSteps.prototype, "percent", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "size", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "type", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "variant", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "orientation", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlSteps.prototype, "responsive", 2);
+__decorateClass([
+  n({ type: String })
+], SlSteps.prototype, "titlePlacement", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlSteps.prototype, "onChange", 2);
+__decorateClass([
+  r()
+], SlSteps.prototype, "_isVertical", 2);
+
+export {
+  SlSteps
+};

package/cdn/chunks/chunk.5EFAXWGH.js

@@ -0,0 +1,26 @@
+import {
+  SlNav
+} from "./chunk.IP5RDWCD.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",
+    onSlNavOpenChange: "sl-nav-open-change",
+    onSlNavSelect: "sl-nav-select"
+  },
+  displayName: "SlNav"
+});
+var nav_default = reactWrapper;
+
+export {
+  nav_default
+};

package/cdn/chunks/chunk.65HJAS62.js

@@ -0,0 +1,11 @@
+import {
+  SlRow
+} from "./chunk.XUUOTTHF.js";
+
+// src/components/row/row.ts
+var row_default = SlRow;
+SlRow.define("sl-row");
+
+export {
+  row_default
+};

package/cdn/chunks/chunk.65KGY6HG.js

@@ -0,0 +1,24 @@
+import {
+  menu_label_styles_default
+} from "./chunk.CTNCSWRU.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement
+} from "./chunk.JDPBVOL2.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+
+// src/components/menu-label/menu-label.component.ts
+var SlMenuLabel = class extends ShoelaceElement {
+  render() {
+    return b` <slot part="base" class="menu-label"></slot> `;
+  }
+};
+SlMenuLabel.styles = [component_styles_default, menu_label_styles_default];
+
+export {
+  SlMenuLabel
+};

package/cdn/chunks/chunk.67GDE55M.js

@@ -0,0 +1,11 @@
+import {
+  SlButtonGroup
+} from "./chunk.N5OEOD33.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = SlButtonGroup;
+SlButtonGroup.define("sl-button-group");
+
+export {
+  button_group_default
+};

package/cdn/chunks/chunk.6FNVUQX3.js

@@ -0,0 +1,24 @@
+import {
+  visually_hidden_styles_default
+} from "./chunk.VASGIW4T.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement
+} from "./chunk.JDPBVOL2.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+
+// src/components/visually-hidden/visually-hidden.component.ts
+var SlVisuallyHidden = class extends ShoelaceElement {
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+SlVisuallyHidden.styles = [component_styles_default, visually_hidden_styles_default];
+
+export {
+  SlVisuallyHidden
+};

package/cdn/chunks/chunk.6GKKEG4W.js

@@ -0,0 +1,11 @@
+import {
+  SlSender
+} from "./chunk.AMCKDUMQ.js";
+
+// src/components/sender/sender.ts
+var sender_default = SlSender;
+SlSender.define("sl-sender");
+
+export {
+  sender_default
+};