@kdcloudjs/shoelace 1.0.14 → 1.0.15

package/cdn/chunks/chunk.NCDC3DMC.js

@@ -0,0 +1,36 @@
+import {
+  spinner_styles_default
+} from "./chunk.YVCGZCD6.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement
+} from "./chunk.VO2B3WZX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+
+// src/components/spinner/spinner.component.ts
+var SlSpinner = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    return b`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+SlSpinner.styles = [component_styles_default, spinner_styles_default];
+
+export {
+  SlSpinner
+};

package/cdn/chunks/chunk.NCOAOZ6Y.js

@@ -0,0 +1,11 @@
+import {
+  SlDivider
+} from "./chunk.5DCVUMRZ.js";
+
+// src/components/divider/divider.ts
+var divider_default = SlDivider;
+SlDivider.define("sl-divider");
+
+export {
+  divider_default
+};

package/cdn/chunks/chunk.NLQQ2GU4.js

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

package/cdn/chunks/chunk.NOTI6CKZ.js

@@ -0,0 +1,11 @@
+import {
+  SlCopyButton
+} from "./chunk.7UOD6G7X.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.NSDVDZIP.js

@@ -0,0 +1,11 @@
+import {
+  SlDrawer
+} from "./chunk.SP6DJXOD.js";
+
+// src/components/drawer/drawer.ts
+var drawer_default = SlDrawer;
+SlDrawer.define("sl-drawer");
+
+export {
+  drawer_default
+};

package/cdn/chunks/chunk.NY6Q6CIK.js

@@ -0,0 +1,11 @@
+import {
+  SlSplitPanel
+} from "./chunk.DF3KWY25.js";
+
+// src/components/split-panel/split-panel.ts
+var split_panel_default = SlSplitPanel;
+SlSplitPanel.define("sl-split-panel");
+
+export {
+  split_panel_default
+};

package/cdn/chunks/chunk.O4RYJ54X.js

@@ -0,0 +1,25 @@
+import {
+  SlCopyButton
+} from "./chunk.7UOD6G7X.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.OJPYBMRK.js

@@ -0,0 +1,11 @@
+import {
+  SlTabPanel
+} from "./chunk.FPSV45QE.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.ONFWZASB.js

@@ -0,0 +1,142 @@
+import {
+  radio_button_styles_default
+} from "./chunk.UOAQSJ3P.js";
+import {
+  u
+} from "./chunk.2ZJLDS5B.js";
+import {
+  o
+} from "./chunk.KJQP3AWV.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.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,
+  r
+} from "./chunk.VO2B3WZX.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/radio-button/radio-button.component.ts
+var SlRadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleClick(e3) {
+    if (this.disabled) {
+      e3.preventDefault();
+      e3.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return u`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${e({
+      button: true,
+      "button--default": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": true,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${o(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
+__decorateClass([
+  e2(".button")
+], SlRadioButton.prototype, "input", 2);
+__decorateClass([
+  e2(".hidden-input")
+], SlRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  r()
+], SlRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "checked", 2);
+__decorateClass([
+  n()
+], SlRadioButton.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlRadioButton.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "pill", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlRadioButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlRadioButton
+};

package/cdn/chunks/chunk.OOOLA72T.js

@@ -0,0 +1,25 @@
+import {
+  SlInclude
+} from "./chunk.X5KEYEJC.js";
+
+// src/react/include/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-include";
+SlInclude.define("sl-include");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlInclude,
+  react: React,
+  events: {
+    onSlLoad: "sl-load",
+    onSlError: "sl-error"
+  },
+  displayName: "SlInclude"
+});
+var include_default = reactWrapper;
+
+export {
+  include_default
+};

package/cdn/chunks/chunk.OPELNYKF.js

@@ -0,0 +1,236 @@
+import {
+  details_styles_default
+} from "./chunk.6X3XLMW7.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.KSB7EI3T.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.RC46L6CZ.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  SlIcon
+} from "./chunk.3D2AQXDU.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.VO2B3WZX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/details/details.component.ts
+var SlDetails = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.detailsObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const slShow = this.emit("sl-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("sl-after-show");
+    } else {
+      const slHide = this.emit("sl-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return b`
+      <details
+        part="base"
+        class=${e({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+          </span>
+
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+SlDetails.styles = [component_styles_default, details_styles_default];
+SlDetails.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  e2(".details")
+], SlDetails.prototype, "details", 2);
+__decorateClass([
+  e2(".details__header")
+], SlDetails.prototype, "header", 2);
+__decorateClass([
+  e2(".details__body")
+], SlDetails.prototype, "body", 2);
+__decorateClass([
+  e2(".details__expand-icon-slot")
+], SlDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlDetails.prototype, "open", 2);
+__decorateClass([
+  n()
+], SlDetails.prototype, "summary", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  SlDetails
+};

package/cdn/chunks/chunk.OT3CHXEA.js

@@ -0,0 +1,114 @@
+import {
+  avatar_styles_default
+} from "./chunk.NREVM6GO.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  SlIcon
+} from "./chunk.3D2AQXDU.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.VO2B3WZX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/avatar/avatar.component.ts
+var SlAvatar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  handleImageLoadError() {
+    this.hasError = true;
+    this.emit("sl-error");
+  }
+  render() {
+    const avatarWithImage = b`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${this.handleImageLoadError}"
+      />
+    `;
+    let avatarWithoutImage = b``;
+    if (this.initials) {
+      avatarWithoutImage = b`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+    } else {
+      avatarWithoutImage = b`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <sl-icon name="person-fill" library="system"></sl-icon>
+          </slot>
+        </div>
+      `;
+    }
+    return b`
+      <div
+        part="base"
+        class=${e({
+      avatar: true,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+};
+SlAvatar.styles = [component_styles_default, avatar_styles_default];
+SlAvatar.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  r()
+], SlAvatar.prototype, "hasError", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "image", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "label", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "initials", 2);
+__decorateClass([
+  n()
+], SlAvatar.prototype, "loading", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlAvatar.prototype, "shape", 2);
+__decorateClass([
+  watch("image")
+], SlAvatar.prototype, "handleImageChange", 1);
+
+export {
+  SlAvatar
+};