@kdcloudjs/shoelace 1.0.23 → 1.0.24

package/dist/chunks/chunk.3SFEVDLG.js

@@ -0,0 +1,317 @@
+import {
+  thought_chain_node_styles_default
+} from "./chunk.EWD2MI7O.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.MANCSJE7.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/thought-chain-node/thought-chain-node.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+var STATUS_SVGS = {
+  loading: `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor"><path d="M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z"/></svg>`,
+  success: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"/></svg>`,
+  error: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"/></svg>`,
+  abort: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm167.4 545.3c0 4.4-3.6 8-8 8H352.6c-4.4 0-8-3.6-8-8v-60.6c0-4.4 3.6-8 8-8h318.8c4.4 0 8 3.6 8 8v60.6z"/></svg>`
+};
+var SlThoughtChainNode = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.nodeKey = "";
+    this.title = "";
+    this.description = "";
+    this.status = "";
+    this.collapsible = false;
+    this.blink = false;
+    this.noIcon = false;
+    this._lineStyle = "solid";
+    this._size = "middle";
+    this._isLast = false;
+    this._index = 0;
+    this._expandedKeys = [];
+    this._hasDefaultSlotContent = false;
+    this._hasFooterSlotContent = false;
+    this._hasDescriptionSlotContent = false;
+    this._hasIconSlotContent = false;
+    this._hasTitleSlotContent = false;
+    /** Track previous expanded state for animation */
+    this._prevExpanded = null;
+  }
+  /** Whether this node's content is currently expanded */
+  get expanded() {
+    if (!this.collapsible) return true;
+    return this._expandedKeys.includes(this.nodeKey);
+  }
+  firstUpdated() {
+    if (this.collapsible && !this.expanded && this.contentEl) {
+      this.contentEl.style.height = "0";
+      this.contentEl.style.overflow = "hidden";
+    }
+    this._detectSlotContent();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this._isLast) {
+      this.setAttribute("data-last", "");
+    } else {
+      this.removeAttribute("data-last");
+    }
+    if (changedProperties.has("_expandedKeys") && this.collapsible && this.contentEl) {
+      const currentExpanded = this.expanded;
+      if (this._prevExpanded !== null && this._prevExpanded !== currentExpanded) {
+        this.animateContent(currentExpanded);
+      }
+      this._prevExpanded = currentExpanded;
+    }
+  }
+  async animateContent(expanding) {
+    const el = this.contentEl;
+    if (!el) return;
+    if (expanding) {
+      el.style.height = "auto";
+      el.style.overflow = "hidden";
+      const fullHeight = el.scrollHeight;
+      el.style.height = "0";
+      void el.offsetHeight;
+      const anim = el.animate(
+        [
+          { height: "0", opacity: "0" },
+          { height: `${fullHeight}px`, opacity: "1" }
+        ],
+        { duration: 250, easing: "ease", fill: "forwards" }
+      );
+      await anim.finished;
+      anim.cancel();
+      el.style.height = "auto";
+      el.style.overflow = "";
+    } else {
+      const currentHeight = el.scrollHeight;
+      el.style.overflow = "hidden";
+      const anim = el.animate(
+        [
+          { height: `${currentHeight}px`, opacity: "1" },
+          { height: "0", opacity: "0" }
+        ],
+        { duration: 250, easing: "ease", fill: "forwards" }
+      );
+      await anim.finished;
+      anim.cancel();
+      el.style.height = "0";
+      el.style.overflow = "hidden";
+    }
+  }
+  handleTitleClick() {
+    if (this.collapsible && this._onExpand) {
+      this._onExpand(this.nodeKey);
+    }
+  }
+  handleTitleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleTitleClick();
+    }
+  }
+  /** Detect slot content on slotchange events */
+  _detectSlotContent() {
+    this._hasDefaultSlotContent = this._checkSlotHasContent("");
+    this._hasFooterSlotContent = this._checkSlotHasContent("footer");
+    this._hasDescriptionSlotContent = this._checkSlotHasContent("description");
+    this._hasIconSlotContent = this._checkSlotHasContent("icon");
+    this._hasTitleSlotContent = this._checkSlotHasContent("title");
+  }
+  /** Check if a slot has assigned non-empty nodes */
+  _checkSlotHasContent(slotName) {
+    if (slotName === "") {
+      const children = Array.from(this.childNodes);
+      return children.some((node) => {
+        var _a;
+        if (node instanceof Element && !node.hasAttribute("slot")) return true;
+        if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) == null ? void 0 : _a.trim())) return true;
+        return false;
+      });
+    }
+    return this.querySelector(`[slot="${slotName}"]`) !== null;
+  }
+  /** Handle all slot changes */
+  handleSlotChange() {
+    this._detectSlotContent();
+  }
+  /** Render the icon area */
+  renderIcon() {
+    if (this.noIcon) return nothing;
+    const lineStyle = this._lineStyle;
+    let iconContent;
+    if (this.status && STATUS_SVGS[this.status]) {
+      iconContent = html`
+        <span
+          class=${classMap({
+        "thought-chain-node__status-icon": true,
+        "thought-chain-node__status-icon--loading": this.status === "loading"
+      })}
+        >
+          ${unsafeHTML(STATUS_SVGS[this.status])}
+        </span>
+      `;
+    } else if (this._hasIconSlotContent) {
+      iconContent = html`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
+    } else {
+      iconContent = html`<span class="thought-chain-node__index-icon">${this._index + 1}</span>`;
+    }
+    return html`
+      <div
+        part="icon"
+        class=${classMap({
+      "thought-chain-node__icon": true,
+      [`thought-chain-node__icon--${this.status}`]: !!this.status,
+      "thought-chain-node__icon--dashed": lineStyle === "dashed",
+      "thought-chain-node__icon--dotted": lineStyle === "dotted",
+      "thought-chain-node__icon--no-line": lineStyle === "none"
+    })}
+      >
+        ${iconContent}
+      </div>
+    `;
+  }
+  render() {
+    const hasDescription = this.description || this._hasDescriptionSlotContent;
+    const isExpanded = this.expanded;
+    if (this._prevExpanded === null) {
+      this._prevExpanded = isExpanded;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "thought-chain-node": true,
+      [`thought-chain-node--${this._size}`]: true
+    })}
+      >
+        ${this.renderIcon()}
+        <div class="thought-chain-node__body">
+          <!-- Header -->
+          <div part="header" class="thought-chain-node__header">
+            <div
+              part="title"
+              class=${classMap({
+      "thought-chain-node__title": true,
+      "thought-chain-node__title--collapsible": this.collapsible,
+      "thought-chain-node__blink": this.blink
+    })}
+              @click=${this.collapsible ? this.handleTitleClick : null}
+              @keydown=${this.collapsible ? this.handleTitleKeyDown : null}
+              tabindex=${this.collapsible ? "0" : nothing}
+              role=${this.collapsible ? "button" : nothing}
+              aria-expanded=${this.collapsible ? isExpanded ? "true" : "false" : nothing}
+            >
+              <slot name="title" @slotchange=${this.handleSlotChange}>${this.title}</slot>
+              ${this.collapsible && this._hasDefaultSlotContent ? html`
+                    <span
+                      part="collapse-icon"
+                      class=${classMap({
+      "thought-chain-node__collapse-icon": true,
+      "thought-chain-node__collapse-icon--expanded": isExpanded
+    })}
+                      aria-hidden="true"
+                    >
+                      <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z" />
+                      </svg>
+                    </span>
+                  ` : nothing}
+            </div>
+            ${hasDescription ? html`
+                  <div part="description" class="thought-chain-node__description">
+                    <slot name="description" @slotchange=${this.handleSlotChange}>${this.description}</slot>
+                  </div>
+                ` : nothing}
+          </div>
+          <!-- Content area: hidden when collapsed or when no content exists for non-collapsible nodes -->
+          <div
+            part="content"
+            class="thought-chain-node__content"
+            style=${!this.collapsible && !this._hasDefaultSlotContent ? "display:none" : ""}
+          >
+            <div part="content-inner" class="thought-chain-node__content-inner">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+          </div>
+          <!-- Footer -->
+          <div
+            part="footer"
+            class="thought-chain-node__footer"
+            style=${this._hasFooterSlotContent ? "" : "display:none"}
+          >
+            <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+SlThoughtChainNode.styles = [component_styles_default, thought_chain_node_styles_default];
+__decorateClass([
+  query(".thought-chain-node__content")
+], SlThoughtChainNode.prototype, "contentEl", 2);
+__decorateClass([
+  property({ attribute: "node-key", reflect: true })
+], SlThoughtChainNode.prototype, "nodeKey", 2);
+__decorateClass([
+  property()
+], SlThoughtChainNode.prototype, "title", 2);
+__decorateClass([
+  property()
+], SlThoughtChainNode.prototype, "description", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlThoughtChainNode.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlThoughtChainNode.prototype, "collapsible", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlThoughtChainNode.prototype, "blink", 2);
+__decorateClass([
+  property({ attribute: "no-icon", type: Boolean, reflect: true })
+], SlThoughtChainNode.prototype, "noIcon", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_lineStyle", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_size", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_isLast", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_index", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_expandedKeys", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_hasDefaultSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_hasFooterSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_hasDescriptionSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_hasIconSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainNode.prototype, "_hasTitleSlotContent", 2);
+
+export {
+  SlThoughtChainNode
+};

package/dist/chunks/chunk.3XDOTTSB.js

@@ -0,0 +1,286 @@
+import {
+  blurActiveElement
+} from "./chunk.LD4M4QGE.js";
+import {
+  SlIconButton
+} from "./chunk.TOF553TT.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  alert_styles_default
+} from "./chunk.EOPHVE4H.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.MANCSJE7.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/alert/alert.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var _SlAlert = class _SlAlert extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.duration = Infinity;
+    this.remainingTime = this.duration;
+  }
+  static get toastStack() {
+    if (!this.currentToastStack) {
+      this.currentToastStack = Object.assign(document.createElement("div"), {
+        className: "sl-toast-stack"
+      });
+    }
+    return this.currentToastStack;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    this.handleCountdownChange();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+      this.remainingTime = this.duration;
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+    }
+  }
+  pauseAutoHide() {
+    var _a;
+    (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    var _a;
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
+      this.remainingTimeInterval = window.setInterval(() => {
+        this.remainingTime -= 100;
+      }, 100);
+      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
+    }
+  }
+  handleCountdownChange() {
+    if (this.open && this.duration < Infinity && this.countdown) {
+      const { countdownElement } = this;
+      const start = "100%";
+      const end = "0";
+      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {
+        duration: this.duration,
+        easing: "linear"
+      });
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sl-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      blurActiveElement(this);
+      this.emit("sl-hide");
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("sl-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      this.handleCountdownChange();
+      if (_SlAlert.toastStack.parentElement === null) {
+        document.body.append(_SlAlert.toastStack);
+      }
+      _SlAlert.toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "sl-after-hide",
+        () => {
+          _SlAlert.toastStack.removeChild(this);
+          resolve();
+          if (_SlAlert.toastStack.querySelector("sl-alert") === null) {
+            _SlAlert.toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-countdown": !!this.countdown,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
+      >
+        <div part="icon" class="alert__icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="message" class="alert__message" aria-live="polite">
+          <slot></slot>
+        </div>
+
+        ${this.closable ? html`
+              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></sl-icon-button>
+            ` : ""}
+
+        <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+        ${this.countdown ? html`
+              <div
+                class=${classMap({
+      alert__countdown: true,
+      "alert__countdown--ltr": this.countdown === "ltr"
+    })}
+              >
+                <div class="alert__countdown-elapsed"></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+_SlAlert.styles = [component_styles_default, alert_styles_default];
+_SlAlert.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  query('[part~="base"]')
+], _SlAlert.prototype, "base", 2);
+__decorateClass([
+  query(".alert__countdown-elapsed")
+], _SlAlert.prototype, "countdownElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _SlAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _SlAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], _SlAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], _SlAlert.prototype, "duration", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], _SlAlert.prototype, "countdown", 2);
+__decorateClass([
+  state()
+], _SlAlert.prototype, "remainingTime", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], _SlAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], _SlAlert.prototype, "handleDurationChange", 1);
+var SlAlert = _SlAlert;
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+export {
+  SlAlert
+};