@kdcloudjs/shoelace 1.0.4 → 1.0.5

package/dist/chunks/chunk.PHVS3KJH.js

@@ -0,0 +1,156 @@
+import {
+  __yieldStar
+} from "./chunk.W5KB6T3Z.js";
+
+// src/internal/active-elements.ts
+function* activeElements(activeElement = document.activeElement) {
+  if (activeElement === null || activeElement === void 0) return;
+  yield activeElement;
+  if ("shadowRoot" in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== "closed") {
+    yield* __yieldStar(activeElements(activeElement.shadowRoot.activeElement));
+  }
+}
+function getDeepestActiveElement() {
+  return [...activeElements()].pop();
+}
+
+// src/internal/tabbable.ts
+var computedStyleMap = /* @__PURE__ */ new WeakMap();
+function getCachedComputedStyle(el) {
+  let computedStyle = computedStyleMap.get(el);
+  if (!computedStyle) {
+    computedStyle = window.getComputedStyle(el, null);
+    computedStyleMap.set(el, computedStyle);
+  }
+  return computedStyle;
+}
+function isVisible(el) {
+  if (typeof el.checkVisibility === "function") {
+    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
+  }
+  const computedStyle = getCachedComputedStyle(el);
+  return computedStyle.visibility !== "hidden" && computedStyle.display !== "none";
+}
+function isOverflowingAndTabbable(el) {
+  const computedStyle = getCachedComputedStyle(el);
+  const { overflowY, overflowX } = computedStyle;
+  if (overflowY === "scroll" || overflowX === "scroll") {
+    return true;
+  }
+  if (overflowY !== "auto" || overflowX !== "auto") {
+    return false;
+  }
+  const isOverflowingY = el.scrollHeight > el.clientHeight;
+  if (isOverflowingY && overflowY === "auto") {
+    return true;
+  }
+  const isOverflowingX = el.scrollWidth > el.clientWidth;
+  if (isOverflowingX && overflowX === "auto") {
+    return true;
+  }
+  return false;
+}
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  const tabindex = Number(el.getAttribute("tabindex"));
+  const hasTabindex = el.hasAttribute("tabindex");
+  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.closest("[inert]")) {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio") {
+    const rootNode = el.getRootNode();
+    const findRadios = `input[type='radio'][name="${el.getAttribute("name")}"]`;
+    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+    if (firstChecked) {
+      return firstChecked === el;
+    }
+    const firstRadio = rootNode.querySelector(findRadios);
+    return firstRadio === el;
+  }
+  if (!isVisible(el)) {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  const isNativelyTabbable = [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a",
+    "audio",
+    "video",
+    "summary",
+    "iframe"
+  ].includes(tag);
+  if (isNativelyTabbable) {
+    return true;
+  }
+  return isOverflowingAndTabbable(el);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const tabbableElements = getTabbableElements(root);
+  const start = (_a = tabbableElements[0]) != null ? _a : null;
+  const end = (_b = tabbableElements[tabbableElements.length - 1]) != null ? _b : null;
+  return { start, end };
+}
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+  var _a;
+  return ((_a = slotElement.getRootNode({ composed: true })) == null ? void 0 : _a.host) !== root;
+}
+function getTabbableElements(root) {
+  const walkedEls = /* @__PURE__ */ new WeakMap();
+  const tabbableElements = [];
+  function walk(el) {
+    if (el instanceof Element) {
+      if (el.hasAttribute("inert") || el.closest("[inert]")) {
+        return;
+      }
+      if (walkedEls.has(el)) {
+        return;
+      }
+      walkedEls.set(el, true);
+      if (!tabbableElements.includes(el) && isTabbable(el)) {
+        tabbableElements.push(el);
+      }
+      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
+        el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+          walk(assignedEl);
+        });
+      }
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    for (const e of el.children) {
+      walk(e);
+    }
+  }
+  walk(root);
+  return tabbableElements.sort((a, b) => {
+    const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+    const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+    return bTabindex - aTabindex;
+  });
+}
+
+export {
+  activeElements,
+  getDeepestActiveElement,
+  getTabbableBoundary,
+  getTabbableElements
+};

package/dist/chunks/chunk.PKGVMMJG.js

@@ -0,0 +1,11 @@
+import {
+  SlFormatDate
+} from "./chunk.CH37X4P2.js";
+
+// src/components/format-date/format-date.ts
+var format_date_default = SlFormatDate;
+SlFormatDate.define("sl-format-date");
+
+export {
+  format_date_default
+};

package/dist/chunks/chunk.PM4AMVBK.js

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

package/dist/chunks/chunk.PON4NNDJ.js

@@ -0,0 +1,231 @@
+import {
+  details_styles_default
+} from "./chunk.4A6V4OMT.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.FI2TCNNM.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.CQ6VBUBR.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/details/details.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+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 html`
+      <details
+        part="base"
+        class=${classMap({
+      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([
+  query(".details")
+], SlDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], SlDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], SlDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], SlDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], SlDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ 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/dist/chunks/chunk.Q6YUGPVX.js

@@ -0,0 +1,75 @@
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  include_styles_default
+} from "./chunk.FY7IKLNL.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.CQ6VBUBR.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/include/include.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlInclude = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("sl-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("sl-load");
+    } catch (e) {
+      this.emit("sl-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+SlInclude.styles = [component_styles_default, include_styles_default];
+__decorateClass([
+  property()
+], SlInclude.prototype, "src", 2);
+__decorateClass([
+  property()
+], SlInclude.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "allow-scripts", type: Boolean })
+], SlInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], SlInclude.prototype, "handleSrcChange", 1);
+
+export {
+  SlInclude
+};

package/dist/chunks/chunk.QGHSEJOU.js

@@ -0,0 +1,25 @@
+import {
+  carousel_item_styles_default
+} from "./chunk.NQ44LUGM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.CQ6VBUBR.js";
+
+// src/components/carousel-item/carousel-item.component.ts
+import { html } from "lit";
+var SlCarouselItem = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+SlCarouselItem.styles = [component_styles_default, carousel_item_styles_default];
+
+export {
+  SlCarouselItem
+};

package/dist/chunks/chunk.QH2UWZH5.js

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

package/dist/chunks/chunk.QI3W6HTK.js

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

package/dist/chunks/chunk.QLNJE55A.js

@@ -0,0 +1,63 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.BQSEJD7X.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.CQ6VBUBR.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+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 html`
+      <slot
+        part="base"
+        class=${classMap({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+      ></slot>
+    `;
+  }
+};
+SlTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], SlTabPanel.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], SlTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  SlTabPanel
+};

package/dist/chunks/chunk.QSDSNJKA.js

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

package/dist/chunks/chunk.QXOMAHWK.js

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

package/dist/chunks/chunk.R2SBUTSK.js

@@ -0,0 +1,11 @@
+import {
+  SlCarousel
+} from "./chunk.THHF2YU7.js";
+
+// src/components/carousel/carousel.ts
+var carousel_default = SlCarousel;
+SlCarousel.define("sl-carousel");
+
+export {
+  carousel_default
+};