@kdcloudjs/shoelace 1.0.0 → 1.0.1

package/cdn/chunks/chunk.CZCSAYQZ.js

@@ -0,0 +1,124 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __restKey = (key) => typeof key === "symbol" ? key : key + "";
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __await = function(promise, isYieldStar) {
+  this[0] = promise;
+  this[1] = isYieldStar;
+};
+var __yieldStar = (value) => {
+  var obj = value[__knownSymbol("asyncIterator")], isAwait = false, method, it = {};
+  if (obj == null) {
+    obj = value[__knownSymbol("iterator")]();
+    method = (k) => it[k] = (x) => obj[k](x);
+  } else {
+    obj = obj.call(value);
+    method = (k) => it[k] = (v) => {
+      if (isAwait) {
+        isAwait = false;
+        if (k === "throw") throw v;
+        return v;
+      }
+      isAwait = true;
+      return {
+        done: false,
+        value: new __await(new Promise((resolve) => {
+          var x = obj[k](v);
+          if (!(x instanceof Object)) __typeError("Object expected");
+          resolve(x);
+        }), 1)
+      };
+    };
+  }
+  return it[__knownSymbol("iterator")] = () => it, method("next"), "throw" in obj ? method("throw") : it.throw = (x) => {
+    throw x;
+  }, "return" in obj && method("return"), it;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __restKey,
+  __objRest,
+  __commonJS,
+  __export,
+  __toESM,
+  __decorateClass,
+  __publicField,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __yieldStar
+};

package/cdn/chunks/chunk.D6WQCFRA.js

@@ -0,0 +1,139 @@
+import {
+  menu_styles_default
+} from "./chunk.7DG4KOED.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement
+} from "./chunk.S63QOIIY.js";
+import {
+  e
+} from "./chunk.KMJ37RZ3.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.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 x`
+      <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.DA7FG377.js

@@ -0,0 +1,11 @@
+import {
+  SlProgressBar
+} from "./chunk.3KZ6RFET.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = SlProgressBar;
+SlProgressBar.define("sl-progress-bar");
+
+export {
+  progress_bar_default
+};

package/cdn/chunks/chunk.DEAET7BJ.js

@@ -0,0 +1,24 @@
+import {
+  SlMutationObserver
+} from "./chunk.N4EKR2VN.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.DG53SAEQ.js

@@ -0,0 +1,26 @@
+import {
+  SlRadioGroup
+} from "./chunk.EKYW6JMS.js";
+
+// src/react/radio-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio-group";
+SlRadioGroup.define("sl-radio-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadioGroup,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlInput: "sl-input",
+    onSlInvalid: "sl-invalid"
+  },
+  displayName: "SlRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/cdn/chunks/chunk.DRKQ5M3Y.js

@@ -0,0 +1,11 @@
+import {
+  SlColorPicker
+} from "./chunk.HEBGUDU6.js";
+
+// src/components/color-picker/color-picker.ts
+var color_picker_default = SlColorPicker;
+SlColorPicker.define("sl-color-picker");
+
+export {
+  color_picker_default
+};

package/cdn/chunks/chunk.DZDG6YBL.js

@@ -0,0 +1,11 @@
+import {
+  SlFormatBytes
+} from "./chunk.2XVSGMNG.js";
+
+// src/components/format-bytes/format-bytes.ts
+var format_bytes_default = SlFormatBytes;
+SlFormatBytes.define("sl-format-bytes");
+
+export {
+  format_bytes_default
+};

package/cdn/chunks/chunk.EB6TUKLT.js

@@ -0,0 +1,105 @@
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  ShoelaceElement
+} from "./chunk.S63QOIIY.js";
+import {
+  n,
+  r
+} from "./chunk.KMJ37RZ3.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/relative-time/relative-time.component.ts
+var availableUnits = [
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Infinity, value: 31536e6, unit: "year" }
+];
+var SlRelativeTime = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isoTime = "";
+    this.relativeTime = "";
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.updateTimeout);
+  }
+  render() {
+    const now = /* @__PURE__ */ new Date();
+    const then = new Date(this.date);
+    if (isNaN(then.getMilliseconds())) {
+      this.relativeTime = "";
+      this.isoTime = "";
+      return "";
+    }
+    const diff = then.getTime() - now.getTime();
+    const { unit, value } = availableUnits.find((singleUnit) => Math.abs(diff) < singleUnit.max);
+    this.isoTime = then.toISOString();
+    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
+      numeric: this.numeric,
+      style: this.format
+    });
+    clearTimeout(this.updateTimeout);
+    if (this.sync) {
+      let nextInterval;
+      if (unit === "minute") {
+        nextInterval = getTimeUntilNextUnit("second");
+      } else if (unit === "hour") {
+        nextInterval = getTimeUntilNextUnit("minute");
+      } else if (unit === "day") {
+        nextInterval = getTimeUntilNextUnit("hour");
+      } else {
+        nextInterval = getTimeUntilNextUnit("day");
+      }
+      this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
+    }
+    return x` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+  }
+};
+__decorateClass([
+  r()
+], SlRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  r()
+], SlRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  n()
+], SlRelativeTime.prototype, "date", 2);
+__decorateClass([
+  n()
+], SlRelativeTime.prototype, "format", 2);
+__decorateClass([
+  n()
+], SlRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlRelativeTime.prototype, "sync", 2);
+function getTimeUntilNextUnit(unit) {
+  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
+  const value = units[unit];
+  return value - Date.now() % value;
+}
+
+export {
+  SlRelativeTime
+};

package/cdn/chunks/chunk.EDPLUZCR.js

@@ -0,0 +1,29 @@
+import {
+  SlTreeItem
+} from "./chunk.QYUCN4RV.js";
+
+// src/react/tree-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tree-item";
+SlTreeItem.define("sl-tree-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTreeItem,
+  react: React,
+  events: {
+    onSlExpand: "sl-expand",
+    onSlAfterExpand: "sl-after-expand",
+    onSlCollapse: "sl-collapse",
+    onSlAfterCollapse: "sl-after-collapse",
+    onSlLazyChange: "sl-lazy-change",
+    onSlLazyLoad: "sl-lazy-load"
+  },
+  displayName: "SlTreeItem"
+});
+var tree_item_default = reactWrapper;
+
+export {
+  tree_item_default
+};

package/cdn/chunks/chunk.EERTAC3E.js

@@ -0,0 +1,27 @@
+import {
+  SlTooltip
+} from "./chunk.M3ZZEQUI.js";
+
+// src/react/tooltip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tooltip";
+SlTooltip.define("sl-tooltip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTooltip,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlTooltip"
+});
+var tooltip_default = reactWrapper;
+
+export {
+  tooltip_default
+};

package/cdn/chunks/chunk.EKRRYXTN.js

@@ -0,0 +1,160 @@
+import {
+  image_comparer_styles_default
+} from "./chunk.IPXCW32Y.js";
+import {
+  drag
+} from "./chunk.ESELY2US.js";
+import {
+  o
+} from "./chunk.K2TJ56SW.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  SlIcon
+} from "./chunk.Z7UUV7BS.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement
+} from "./chunk.S63QOIIY.js";
+import {
+  e as e2,
+  n
+} from "./chunk.KMJ37RZ3.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/image-comparer/image-comparer.component.ts
+var SlImageComparer = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.position = 50;
+  }
+  handleDrag(event) {
+    const { width } = this.base.getBoundingClientRect();
+    const isRtl = this.localize.dir() === "rtl";
+    event.preventDefault();
+    drag(this.base, {
+      onMove: (x2) => {
+        this.position = parseFloat(clamp(x2 / width * 100, 0, 100).toFixed(2));
+        if (isRtl) this.position = 100 - this.position;
+      },
+      initialEvent: event
+    });
+  }
+  handleKeyDown(event) {
+    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.localize.dir() === "rtl";
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+      const incr = event.shiftKey ? 10 : 1;
+      let newPosition = this.position;
+      event.preventDefault();
+      if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+        newPosition -= incr;
+      }
+      if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+        newPosition += incr;
+      }
+      if (event.key === "Home") {
+        newPosition = 0;
+      }
+      if (event.key === "End") {
+        newPosition = 100;
+      }
+      newPosition = clamp(newPosition, 0, 100);
+      this.position = newPosition;
+    }
+  }
+  handlePositionChange() {
+    this.emit("sl-change");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return x`
+      <div
+        part="base"
+        id="image-comparer"
+        class=${e({
+      "image-comparer": true,
+      "image-comparer--rtl": isRtl
+    })}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="image-comparer__image">
+          <div part="before" class="image-comparer__before">
+            <slot name="before"></slot>
+          </div>
+
+          <div
+            part="after"
+            class="image-comparer__after"
+            style=${o({
+      clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
+    })}
+          >
+            <slot name="after"></slot>
+          </div>
+        </div>
+
+        <div
+          part="divider"
+          class="image-comparer__divider"
+          style=${o({
+      left: isRtl ? `${100 - this.position}%` : `${this.position}%`
+    })}
+          @mousedown=${this.handleDrag}
+          @touchstart=${this.handleDrag}
+        >
+          <div
+            part="handle"
+            class="image-comparer__handle"
+            role="scrollbar"
+            aria-valuenow=${this.position}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-controls="image-comparer"
+            tabindex="0"
+          >
+            <slot name="handle">
+              <sl-icon library="system" name="grip-vertical"></sl-icon>
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+SlImageComparer.styles = [component_styles_default, image_comparer_styles_default];
+SlImageComparer.scopedElement = { "sl-icon": SlIcon };
+__decorateClass([
+  e2(".image-comparer")
+], SlImageComparer.prototype, "base", 2);
+__decorateClass([
+  e2(".image-comparer__handle")
+], SlImageComparer.prototype, "handle", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlImageComparer.prototype, "position", 2);
+__decorateClass([
+  watch("position", { waitUntilFirstUpdate: true })
+], SlImageComparer.prototype, "handlePositionChange", 1);
+
+export {
+  SlImageComparer
+};