@kdcloudjs/shoelace 1.0.35 → 1.0.38

package/cdn/chunks/chunk.AEKAZVLZ.js

@@ -0,0 +1,28 @@
+import {
+  SlImage
+} from "./chunk.GZBL352Y.js";
+
+// src/react/image/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-image";
+SlImage.define("sl-image");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlImage,
+  react: React,
+  events: {
+    onSlImageClick: "sl-image-click",
+    onSlPreviewOpen: "sl-preview-open",
+    onSlPreviewClose: "sl-preview-close",
+    onSlError: "sl-error",
+    onSlLoad: "sl-load"
+  },
+  displayName: "SlImage"
+});
+var image_default = reactWrapper;
+
+export {
+  image_default
+};

package/cdn/chunks/chunk.ALGFT6GN.js

@@ -0,0 +1,24 @@
+import {
+  SlImageComparer
+} from "./chunk.QMMGWIHO.js";
+
+// src/react/image-comparer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-image-comparer";
+SlImageComparer.define("sl-image-comparer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlImageComparer,
+  react: React,
+  events: {
+    onSlChange: "sl-change"
+  },
+  displayName: "SlImageComparer"
+});
+var image_comparer_default = reactWrapper;
+
+export {
+  image_comparer_default
+};

package/cdn/chunks/chunk.AMXW3ADW.js

@@ -0,0 +1,24 @@
+import {
+  SlMutationObserver
+} from "./chunk.PDYW2FUQ.js";
+
+// src/react/mutation-observer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-mutation-observer";
+SlMutationObserver.define("sl-mutation-observer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMutationObserver,
+  react: React,
+  events: {
+    onSlMutation: "sl-mutation"
+  },
+  displayName: "SlMutationObserver"
+});
+var mutation_observer_default = reactWrapper;
+
+export {
+  mutation_observer_default
+};

package/cdn/chunks/chunk.ANDJNIVD.js

@@ -0,0 +1,24 @@
+import {
+  SlAvatar
+} from "./chunk.ELMU2K63.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.AU4NZVNE.js

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

package/cdn/chunks/chunk.AURW32DB.js

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

package/cdn/chunks/chunk.B5MU2VA4.js

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

package/cdn/chunks/chunk.BCN7PNL2.js

@@ -0,0 +1,54 @@
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.KWSEUG4I.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/table/spinner-container.ts
+var SpinnerContainer = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+  }
+  render() {
+    return b`<div class="spinner-container">
+        ${this.loading ? b`<div class="spinner-overlay"></div>
+              <sl-spinner class="spinner" style="font-size: 2rem;"></sl-spinner>` : ""}
+        <slot></slot>
+      </div>
+      <style>
+        .spinner-container {
+          position: relative;
+        }
+        .spinner-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: var(--sl-z-index-table-overlay);
+          background-color: var(--sl-table-mask);
+        }
+        .spinner {
+          z-index: calc(var(--sl-z-index-table-overlay) + 1);
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      </style> `;
+  }
+};
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SpinnerContainer.prototype, "loading", 2);
+SpinnerContainer.define("sl-table-spinner-container");
+
+export {
+  SpinnerContainer
+};

package/cdn/chunks/chunk.BF7DIOIS.js

@@ -0,0 +1,11 @@
+import {
+  SlCheckbox
+} from "./chunk.M6ORVKWW.js";
+
+// src/components/checkbox/checkbox.ts
+var checkbox_default = SlCheckbox;
+SlCheckbox.define("sl-checkbox");
+
+export {
+  checkbox_default
+};

package/cdn/chunks/chunk.BH3FNO7U.js

@@ -0,0 +1,49 @@
+import {
+  card_styles_default
+} from "./chunk.PQBJJVTL.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement
+} from "./chunk.KWSEUG4I.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+
+// src/components/card/card.component.ts
+var SlCard = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      card: true,
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header")
+    })}
+      >
+        <slot name="image" part="image" class="card__image"></slot>
+        <slot name="header" part="header" class="card__header"></slot>
+        <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" class="card__footer"></slot>
+      </div>
+    `;
+  }
+};
+SlCard.styles = [component_styles_default, card_styles_default];
+
+export {
+  SlCard
+};

package/cdn/chunks/chunk.BJL4CKNO.js

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

package/cdn/chunks/chunk.BOFVXZXT.js

@@ -0,0 +1,120 @@
+import {
+  animated_image_styles_default
+} from "./chunk.6GX7LAZ6.js";
+import {
+  SlIcon
+} from "./chunk.UNS6LUET.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.KWSEUG4I.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/animated-image/animated-image.component.ts
+var SlAnimatedImage = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.isLoaded = false;
+  }
+  handleClick() {
+    this.play = !this.play;
+  }
+  handleLoad() {
+    const canvas = document.createElement("canvas");
+    const { width, height } = this.animatedImage;
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
+    this.frozenFrame = canvas.toDataURL("image/gif");
+    if (!this.isLoaded) {
+      this.emit("sl-load");
+      this.isLoaded = true;
+    }
+  }
+  handleError() {
+    this.emit("sl-error");
+  }
+  handlePlayChange() {
+    if (this.play) {
+      this.animatedImage.src = "";
+      this.animatedImage.src = this.src;
+    }
+  }
+  handleSrcChange() {
+    this.isLoaded = false;
+  }
+  render() {
+    return b`
+      <div class="animated-image">
+        <img
+          class="animated-image__animated"
+          src=${this.src}
+          alt=${this.alt}
+          crossorigin="anonymous"
+          aria-hidden=${this.play ? "false" : "true"}
+          @click=${this.handleClick}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        />
+
+        ${this.isLoaded ? b`
+              <img
+                class="animated-image__frozen"
+                src=${this.frozenFrame}
+                alt=${this.alt}
+                aria-hidden=${this.play ? "true" : "false"}
+                @click=${this.handleClick}
+              />
+
+              <div part="control-box" class="animated-image__control-box">
+                <slot name="play-icon"><sl-icon name="play-fill" library="system"></sl-icon></slot>
+                <slot name="pause-icon"><sl-icon name="pause-fill" library="system"></sl-icon></slot>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
+SlAnimatedImage.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  e(".animated-image__animated")
+], SlAnimatedImage.prototype, "animatedImage", 2);
+__decorateClass([
+  r()
+], SlAnimatedImage.prototype, "frozenFrame", 2);
+__decorateClass([
+  r()
+], SlAnimatedImage.prototype, "isLoaded", 2);
+__decorateClass([
+  n()
+], SlAnimatedImage.prototype, "src", 2);
+__decorateClass([
+  n()
+], SlAnimatedImage.prototype, "alt", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlAnimatedImage.prototype, "play", 2);
+__decorateClass([
+  watch("play", { waitUntilFirstUpdate: true })
+], SlAnimatedImage.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("src")
+], SlAnimatedImage.prototype, "handleSrcChange", 1);
+
+export {
+  SlAnimatedImage
+};

package/cdn/chunks/chunk.BQS6PU2W.js

@@ -0,0 +1,11 @@
+import {
+  SlNavGroup
+} from "./chunk.OWM4RWLB.js";
+
+// src/components/nav-group/nav-group.ts
+var nav_group_default = SlNavGroup;
+SlNavGroup.define("sl-nav-group");
+
+export {
+  nav_group_default
+};

package/cdn/chunks/chunk.BSV73YK3.js

@@ -0,0 +1,231 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/image/image-preview.styles.ts
+var image_preview_styles_default = i`
+  /* ==================== Preview Overlay ==================== */
+  .preview-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--sl-z-index-dialog, 1000);
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .preview-overlay--hidden {
+    display: none;
+  }
+
+  /* Mask */
+  .preview__mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+  }
+
+  .preview__mask--blur {
+    backdrop-filter: blur(4px);
+  }
+
+  .preview__mask--hidden {
+    background: transparent;
+  }
+
+  /* Body */
+  .preview__body {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .preview__body > * {
+    pointer-events: auto;
+  }
+
+  /* Preview Image */
+  .preview__img {
+    max-width: 100%;
+    max-height: 70vh;
+    vertical-align: middle;
+    cursor: grab;
+    transition: transform var(--sl-transition-slow, 300ms) ease-out;
+  }
+
+  .preview-overlay--moving .preview__img {
+    cursor: grabbing;
+    transition: none;
+  }
+
+  /* Close Button */
+  .preview__close {
+    position: absolute;
+    top: var(--sl-spacing-medium, 1rem);
+    right: var(--sl-spacing-medium, 1rem);
+    color: rgba(255, 255, 255, 0.85);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    padding: var(--sl-spacing-small, 0.75rem);
+    outline: 0;
+    border: 0;
+    cursor: pointer;
+    transition: all var(--sl-transition-slow, 300ms);
+    display: flex;
+    font-size: 18px;
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  .preview__close:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .preview__close:active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .preview__close svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
+
+  /* Switch Buttons (Prev/Next) */
+  .preview__switch {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(255, 255, 255, 0.85);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    padding: var(--sl-spacing-small, 0.75rem);
+    outline: 0;
+    border: 0;
+    cursor: pointer;
+    transition: all var(--sl-transition-slow, 300ms);
+    display: flex;
+    font-size: 18px;
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  .preview__switch:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .preview__switch:active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .preview__switch--disabled,
+  .preview__switch--disabled:hover,
+  .preview__switch--disabled:active {
+    color: rgba(255, 255, 255, 0.25);
+    background: transparent;
+    cursor: not-allowed;
+  }
+
+  .preview__switch--prev {
+    left: var(--sl-spacing-medium, 1rem);
+  }
+
+  .preview__switch--next {
+    right: var(--sl-spacing-medium, 1rem);
+  }
+
+  .preview__switch svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
+
+  /* Footer */
+  .preview__footer {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.65);
+    transform: translateX(-50%);
+    gap: var(--sl-spacing-medium, 1rem);
+    z-index: 1;
+    pointer-events: auto;
+  }
+
+  /* Counter */
+  .preview__counter {
+    font-size: var(--sl-font-size-small, 14px);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  /* Actions Toolbar */
+  .preview__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sl-spacing-small, 0.75rem);
+    padding: 0 var(--sl-spacing-large, 1.25rem);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 100px;
+    font-size: 18px;
+  }
+
+  .preview__action {
+    padding: var(--sl-spacing-small, 0.75rem);
+    cursor: pointer;
+    transition: all var(--sl-transition-slow, 300ms);
+    display: flex;
+    background: none;
+    border: none;
+    outline: none;
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .preview__action:hover {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .preview__action--disabled {
+    color: rgba(255, 255, 255, 0.25);
+    cursor: not-allowed;
+  }
+
+  .preview__action--disabled:hover {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .preview__action svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
+
+  /* Fade animation */
+  .preview-overlay {
+    animation: sl-image-fade-in var(--sl-transition-slow, 300ms) ease;
+  }
+
+  .preview-overlay--closing {
+    animation: sl-image-fade-out var(--sl-transition-slow, 300ms) ease forwards;
+  }
+
+  @keyframes sl-image-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes sl-image-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+
+export {
+  image_preview_styles_default
+};

package/cdn/chunks/chunk.BUBHJXCN.js

@@ -0,0 +1,11 @@
+import {
+  SlIcon
+} from "./chunk.UNS6LUET.js";
+
+// src/components/icon/icon.ts
+var icon_default = SlIcon;
+SlIcon.define("sl-icon");
+
+export {
+  icon_default
+};

package/cdn/chunks/chunk.BVO2M3LI.js

@@ -0,0 +1,21 @@
+import {
+  SlButtonGroup
+} from "./chunk.WPLAX2GS.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
+};