@kdcloudjs/shoelace 1.0.34 → 1.0.35

package/cdn/chunks/chunk.STAE77QI.js

@@ -0,0 +1,137 @@
+import {
+  menu_styles_default
+} from "./chunk.7EEJM2ZQ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e
+} from "./chunk.24UOJR4O.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/menu/menu.component.ts
+var SlMenu = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("sl-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "sl-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return b`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+SlMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  e("slot")
+], SlMenu.prototype, "defaultSlot", 2);
+
+export {
+  SlMenu
+};

package/cdn/chunks/chunk.STNWIS2X.js

@@ -0,0 +1,236 @@
+import {
+  details_styles_default
+} from "./chunk.4GSOSTXN.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.ZLKEMKLZ.js";
+import {
+  SlIcon
+} from "./chunk.65SDTCPR.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.24UOJR4O.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.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.T752D6Q6.js

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

package/cdn/chunks/chunk.TA32F3HG.js

@@ -0,0 +1,11 @@
+import {
+  SlBreadcrumbItem
+} from "./chunk.DC6DEWEP.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var breadcrumb_item_default = SlBreadcrumbItem;
+SlBreadcrumbItem.define("sl-breadcrumb-item");
+
+export {
+  breadcrumb_item_default
+};

package/cdn/chunks/chunk.TMM6VUYT.js

@@ -0,0 +1,25 @@
+import {
+  SlIconButton
+} from "./chunk.LGUUH5OH.js";
+
+// src/react/icon-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-icon-button";
+SlIconButton.define("sl-icon-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlIconButton,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus"
+  },
+  displayName: "SlIconButton"
+});
+var icon_button_default = reactWrapper;
+
+export {
+  icon_button_default
+};

package/cdn/chunks/chunk.TQIVN4MZ.js

@@ -0,0 +1,24 @@
+import {
+  SlImageComparer
+} from "./chunk.AZ56LUD7.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.TQUHQIW5.js

@@ -0,0 +1,24 @@
+import {
+  SlSplitPanel
+} from "./chunk.DH6QMFO7.js";
+
+// src/react/split-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-split-panel";
+SlSplitPanel.define("sl-split-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlSplitPanel,
+  react: React,
+  events: {
+    onSlReposition: "sl-reposition"
+  },
+  displayName: "SlSplitPanel"
+});
+var split_panel_default = reactWrapper;
+
+export {
+  split_panel_default
+};