@kdcloudjs/shoelace 1.0.4 → 1.0.5

package/cdn/chunks/chunk.226T3KTA.js

@@ -0,0 +1,11 @@
+import {
+  SlProgressRing
+} from "./chunk.PQSBGFTM.js";
+
+// src/components/progress-ring/progress-ring.ts
+var progress_ring_default = SlProgressRing;
+SlProgressRing.define("sl-progress-ring");
+
+export {
+  progress_ring_default
+};

package/cdn/chunks/chunk.2DGU6Y27.js

@@ -0,0 +1,21 @@
+import {
+  SlTabPanel
+} from "./chunk.3QFHTQZY.js";
+
+// src/react/tab-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-tab-panel";
+SlTabPanel.define("sl-tab-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTabPanel,
+  react: React,
+  events: {},
+  displayName: "SlTabPanel"
+});
+var tab_panel_default = reactWrapper;
+
+export {
+  tab_panel_default
+};

package/cdn/chunks/chunk.2GVHUW5C.js

@@ -0,0 +1,11 @@
+import {
+  SlResizeObserver
+} from "./chunk.AFUGLO2J.js";
+
+// src/components/resize-observer/resize-observer.ts
+var resize_observer_default = SlResizeObserver;
+SlResizeObserver.define("sl-resize-observer");
+
+export {
+  resize_observer_default
+};

package/cdn/chunks/chunk.2IVRNFRU.js

@@ -0,0 +1,73 @@
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/format-number/format-number.component.ts
+var SlFormatNumber = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.type = "decimal";
+    this.noGrouping = false;
+    this.currency = "USD";
+    this.currencyDisplay = "symbol";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    return this.localize.number(this.value, {
+      style: this.type,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      useGrouping: !this.noGrouping,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumSignificantDigits: this.minimumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], SlFormatNumber.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlFormatNumber.prototype, "type", 2);
+__decorateClass([
+  n({ attribute: "no-grouping", type: Boolean })
+], SlFormatNumber.prototype, "noGrouping", 2);
+__decorateClass([
+  n()
+], SlFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  n({ attribute: "currency-display" })
+], SlFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  n({ attribute: "minimum-integer-digits", type: Number })
+], SlFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-fraction-digits", type: Number })
+], SlFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-fraction-digits", type: Number })
+], SlFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-significant-digits", type: Number })
+], SlFormatNumber.prototype, "minimumSignificantDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-significant-digits", type: Number })
+], SlFormatNumber.prototype, "maximumSignificantDigits", 2);
+
+export {
+  SlFormatNumber
+};

package/cdn/chunks/chunk.2NICGF3O.js

@@ -0,0 +1,95 @@
+import {
+  button_group_styles_default
+} from "./chunk.6LHVYT75.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/button-group/button-group.component.ts
+var SlButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-sl-button-group__button", true);
+        button.toggleAttribute("data-sl-button-group__button--first", index === 0);
+        button.toggleAttribute("data-sl-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.toggleAttribute("data-sl-button-group__button--last", index === slottedElements.length - 1);
+        button.toggleAttribute(
+          "data-sl-button-group__button--radio",
+          button.tagName.toLowerCase() === "sl-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class="button-group"
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+SlButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  e("slot")
+], SlButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], SlButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], SlButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "sl-button, sl-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  SlButtonGroup
+};

package/cdn/chunks/chunk.2PQBFMVP.js

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

package/cdn/chunks/chunk.2WNUV5PI.js

@@ -0,0 +1,93 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.CSRJR6QI.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  SlIcon
+} from "./chunk.Q2WKF37T.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  e,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+var SlBreadcrumb = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "sl-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return x`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <sl-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></sl-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+SlBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
+SlBreadcrumb.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  e("slot")
+], SlBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  e('slot[name="separator"]')
+], SlBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  n()
+], SlBreadcrumb.prototype, "label", 2);
+
+export {
+  SlBreadcrumb
+};

package/cdn/chunks/chunk.33CUA3Z2.js

@@ -0,0 +1,120 @@
+import {
+  SlIcon
+} from "./chunk.Q2WKF37T.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.LQZ32GYA.js";
+import {
+  animated_image_styles_default
+} from "./chunk.KEII62OL.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.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 x`
+      <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 ? x`
+              <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.3FDM5EJN.js

@@ -0,0 +1,11 @@
+import {
+  SlSkeleton
+} from "./chunk.SI4YNAF2.js";
+
+// src/components/skeleton/skeleton.ts
+var skeleton_default = SlSkeleton;
+SlSkeleton.define("sl-skeleton");
+
+export {
+  skeleton_default
+};

package/cdn/chunks/chunk.3NKDIRL6.js

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

package/cdn/chunks/chunk.3QFHTQZY.js

@@ -0,0 +1,67 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.LDBWY5N4.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+var id = 0;
+var SlTabPanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `sl-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return x`
+      <slot
+        part="base"
+        class=${e({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+      ></slot>
+    `;
+  }
+};
+SlTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], SlTabPanel.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], SlTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  SlTabPanel
+};

package/cdn/chunks/chunk.43VCZTB6.js

@@ -0,0 +1,11 @@
+import {
+  SlRating
+} from "./chunk.M5INIPKU.js";
+
+// src/components/rating/rating.ts
+var rating_default = SlRating;
+SlRating.define("sl-rating");
+
+export {
+  rating_default
+};

package/cdn/chunks/chunk.46H5FPXZ.js

@@ -0,0 +1,75 @@
+import {
+  progress_bar_styles_default
+} from "./chunk.ZHXQFA7P.js";
+import {
+  o as o2
+} from "./chunk.K2TJ56SW.js";
+import {
+  o
+} from "./chunk.COPAJV25.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/progress-bar/progress-bar.component.ts
+var SlProgressBar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.indeterminate = false;
+    this.label = "";
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "progress-bar": true,
+      "progress-bar--indeterminate": this.indeterminate,
+      "progress-bar--rtl": this.localize.dir() === "rtl"
+    })}
+        role="progressbar"
+        title=${o(this.title)}
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? 0 : this.value}
+      >
+        <div part="indicator" class="progress-bar__indicator" style=${o2({ width: `${this.value}%` })}>
+          ${!this.indeterminate ? x` <slot part="label" class="progress-bar__label"></slot> ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+SlProgressBar.styles = [component_styles_default, progress_bar_styles_default];
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlProgressBar.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlProgressBar.prototype, "indeterminate", 2);
+__decorateClass([
+  n()
+], SlProgressBar.prototype, "label", 2);
+
+export {
+  SlProgressBar
+};

package/cdn/chunks/chunk.475SOJAO.js

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