@kdcloudjs/shoelace 1.0.21 → 1.0.23

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

@@ -0,0 +1,79 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.KDK3IIAH.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r
+} from "./chunk.3PGJZEOW.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+var SlProgressRing = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+SlProgressRing.styles = [component_styles_default, progress_ring_styles_default];
+__decorateClass([
+  e(".progress-ring__indicator")
+], SlProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], SlProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], SlProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlProgressRing.prototype, "label", 2);
+
+export {
+  SlProgressRing
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  SlNavGroup
+} from "./chunk.UX2RVWPE.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.2VN66QAH.js

@@ -0,0 +1,21 @@
+import {
+  SlOption
+} from "./chunk.TNW2657J.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.2YIZRX5D.js

@@ -0,0 +1,11 @@
+import {
+  SlSwitch
+} from "./chunk.CBGEBJBV.js";
+
+// src/components/switch/switch.ts
+var switch_default = SlSwitch;
+SlSwitch.define("sl-switch");
+
+export {
+  switch_default
+};

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

@@ -0,0 +1,29 @@
+import {
+  SlTreeItem
+} from "./chunk.JG4GAI2Q.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.36IXFEV5.js

@@ -0,0 +1,11 @@
+import {
+  SlPopup
+} from "./chunk.LXTTLE33.js";
+
+// src/components/popup/popup.ts
+var popup_default = SlPopup;
+SlPopup.define("sl-popup");
+
+export {
+  popup_default
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  SlVisuallyHidden
+} from "./chunk.44SRGTCA.js";
+
+// src/components/visually-hidden/visually-hidden.ts
+var visually_hidden_default = SlVisuallyHidden;
+SlVisuallyHidden.define("sl-visually-hidden");
+
+export {
+  visually_hidden_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlRelativeTime
+} from "./chunk.EQV3B25S.js";
+
+// src/components/relative-time/relative-time.ts
+var relative_time_default = SlRelativeTime;
+SlRelativeTime.define("sl-relative-time");
+
+export {
+  relative_time_default
+};

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

@@ -0,0 +1,435 @@
+import {
+  nav_submenu_styles_default
+} from "./chunk.3ZDUMADR.js";
+import {
+  SlPopup
+} from "./chunk.LXTTLE33.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.KSB7EI3T.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.RC46L6CZ.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  SlIcon
+} from "./chunk.QJ4G6YW3.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.3PGJZEOW.js";
+import {
+  A,
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/nav-submenu/nav-submenu.component.ts
+var SlNavSubmenu = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.localize = new LocalizeController(this);
+    this.openChangeSource = "api";
+    this.key = "";
+    this.itemKey = "";
+    this.open = false;
+    this.nested = false;
+    this.title = "";
+    this.theme = "light";
+    this.popupClassName = "";
+    this.disabled = false;
+    this.active = false;
+    this.mode = "inline";
+  }
+  getRootNav() {
+    var _a;
+    const root = this.getRootNode();
+    if (this.closest("sl-nav")) {
+      return this.closest("sl-nav");
+    }
+    if (root instanceof ShadowRoot && ((_a = root.host) == null ? void 0 : _a.tagName.toLowerCase()) === "sl-nav") {
+      return root.host;
+    }
+    return void 0;
+  }
+  getSubmenuKey() {
+    return this.key || this.itemKey;
+  }
+  getTriggerAction() {
+    var _a, _b;
+    return (_b = (_a = this.getRootNav()) == null ? void 0 : _a.triggerSubMenuAction) != null ? _b : "hover";
+  }
+  getOpenDelay() {
+    var _a, _b;
+    return ((_b = (_a = this.getRootNav()) == null ? void 0 : _a.subMenuOpenDelay) != null ? _b : 0) * 1e3;
+  }
+  getCloseDelay() {
+    var _a, _b;
+    return ((_b = (_a = this.getRootNav()) == null ? void 0 : _a.subMenuCloseDelay) != null ? _b : 0.1) * 1e3;
+  }
+  isPopupMode() {
+    return this.mode === "horizontal" || this.mode === "vertical";
+  }
+  clearTimers() {
+    clearTimeout(this.showTimeout);
+    clearTimeout(this.hideTimeout);
+  }
+  firstUpdated() {
+    if (this.mode === "inline") {
+      this.body.style.height = this.open ? "auto" : "0";
+    }
+    this.syncNestedState();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("mode")) {
+      if (this.mode === "inline" && this.body) {
+        this.body.style.height = this.open ? "auto" : "0";
+      }
+      if (this.mode !== "inline" && this.body) {
+        this.body.style.height = "";
+      }
+    }
+    this.syncNestedState();
+  }
+  syncNestedState() {
+    var _a;
+    this.nested = !!((_a = this.parentElement) == null ? void 0 : _a.closest("sl-nav-submenu"));
+  }
+  handleHeaderClick(event) {
+    var _a;
+    event.preventDefault();
+    if (!this.disabled) {
+      (_a = this.onTitleClick) == null ? void 0 : _a.call(this, { key: this.getSubmenuKey(), domEvent: event });
+      if (this.open) {
+        this.hide("user");
+      } else {
+        this.show("user");
+      }
+    }
+  }
+  handleHeaderKeyDown(event) {
+    var _a;
+    if (this.disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      (_a = this.onTitleClick) == null ? void 0 : _a.call(this, { key: this.getSubmenuKey(), domEvent: event });
+      if (this.open) {
+        this.hide("user");
+      } else {
+        this.show("user");
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide("user");
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show("user");
+    }
+  }
+  handleMouseOver() {
+    if (this.isPopupMode() && this.getTriggerAction() === "hover" && !this.disabled) {
+      clearTimeout(this.hideTimeout);
+      const delay = this.getOpenDelay();
+      if (delay > 0) {
+        this.showTimeout = window.setTimeout(() => this.show("user"), delay);
+      } else {
+        this.show("user");
+      }
+    }
+  }
+  handleMouseOut(event) {
+    var _a;
+    if (this.isPopupMode() && this.getTriggerAction() === "hover" && !this.disabled) {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget instanceof Node && (this.contains(relatedTarget) || ((_a = this.shadowRoot) == null ? void 0 : _a.contains(relatedTarget)) || this.renderRoot.contains(relatedTarget))) {
+        return;
+      }
+      clearTimeout(this.showTimeout);
+      this.hideTimeout = window.setTimeout(() => this.hide("user"), this.getCloseDelay());
+    }
+  }
+  handleFocus() {
+    if (this.isPopupMode() && !this.disabled) {
+      this.clearTimers();
+    }
+  }
+  handleBlur(event) {
+    var _a;
+    if (this.isPopupMode() && this.getTriggerAction() === "hover" && !this.disabled) {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget instanceof Node && (this.contains(relatedTarget) || ((_a = this.shadowRoot) == null ? void 0 : _a.contains(relatedTarget)) || this.renderRoot.contains(relatedTarget))) {
+        return;
+      }
+      clearTimeout(this.showTimeout);
+      this.hideTimeout = window.setTimeout(() => this.hide("user"), this.getCloseDelay());
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("sl-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      if (this.mode === "inline") {
+        const { keyframes, options } = getAnimation(this, "nav-submenu.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.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      if (this.mode === "inline") {
+        const { keyframes, options } = getAnimation(this, "nav-submenu.hide", { dir: this.localize.dir() });
+        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.style.height = "0";
+      }
+      this.emit("sl-after-hide");
+    }
+    if (this.openChangeSource !== "nav") {
+      this.openChangeSource = "api";
+    }
+  }
+  /** Shows the submenu. */
+  async show(source = "api") {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.openChangeSource = source;
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the submenu. */
+  async hide(source = "api") {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.openChangeSource = source;
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  /** @internal Syncs submenu state from the parent nav without echoing the change back. */
+  setOpenFromNav(open) {
+    if (this.open === open) {
+      return;
+    }
+    this.openChangeSource = "nav";
+    this.open = open;
+  }
+  /** @internal Exposes the latest open change source for the parent nav. */
+  getOpenChangeSource() {
+    return this.openChangeSource;
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const isRtl = this.localize.dir() === "rtl";
+    const isHorizontal = this.mode === "horizontal";
+    const isVertical = this.mode === "vertical";
+    const isPopup = isHorizontal || isVertical;
+    const popupOffset = (_a = this.popupOffset) != null ? _a : [0, 0];
+    const inheritedExpandIcon = (_b = this.getRootNav()) == null ? void 0 : _b.expandIcon;
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "nav-submenu": true,
+      "nav-submenu--open": this.open,
+      "nav-submenu--disabled": this.disabled,
+      "nav-submenu--active": this.active,
+      "nav-submenu--rtl": isRtl,
+      "nav-submenu--horizontal": isHorizontal,
+      "nav-submenu--vertical": isVertical,
+      "nav-submenu--inline": !isPopup
+    })}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <button
+          part="header"
+          id="header"
+          class=${e({
+      "nav-submenu__header": true,
+      "nav-submenu__header--active": this.active,
+      "nav-submenu__header--disabled": this.disabled
+    })}
+          type="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleHeaderClick}
+          @keydown=${this.handleHeaderKeyDown}
+        >
+          <span class="nav-submenu__header-content">
+            <slot
+              name="prefix"
+              part="prefix"
+              class="nav-submenu__prefix"
+              style="display: ${this.hasSlotController.test("prefix") || this.icon !== void 0 ? "flex" : "none"}"
+            >
+              ${(_c = this.icon) != null ? _c : A}
+            </slot>
+
+            <slot name="title" part="label" class="nav-submenu__label">${(_d = this.label) != null ? _d : this.title}</slot>
+
+            <slot
+              name="suffix"
+              part="suffix"
+              class="nav-submenu__suffix"
+              style="display: ${this.hasSlotController.test("suffix") ? "flex" : "none"}"
+            ></slot>
+
+            <span part="expand-icon" class="nav-submenu__chevron">
+              <slot name="expand-icon">
+                ${inheritedExpandIcon != null ? inheritedExpandIcon : b`
+                  <sl-icon
+                    library="system"
+                    name=${isHorizontal && !this.nested || this.mode === "inline" ? "chevron-down" : isRtl ? "chevron-left" : "chevron-right"}
+                  ></sl-icon>
+                `}
+              </slot>
+            </span>
+          </span>
+        </button>
+
+        ${isPopup ? b`
+              <sl-popup
+                part="popup"
+                class=${this.popupClassName || A}
+                anchor="header"
+                placement=${isVertical ? isRtl ? "left-start" : "right-start" : this.nested ? isRtl ? "left-start" : "right-start" : "bottom-start"}
+                ?active=${this.open}
+                strategy="absolute"
+                .skidding=${popupOffset[0]}
+                .distance=${popupOffset[1]}
+                flip
+                shift
+                sync=${isHorizontal && !this.nested ? "width" : void 0}
+                auto-size="vertical"
+                auto-size-padding="10"
+              >
+                <div class="nav-submenu__body" role="region" aria-labelledby="header">
+                  <slot part="content" id="content" class="nav-submenu__content"></slot>
+                </div>
+              </sl-popup>
+            ` : b`
+              <div class="nav-submenu__body" role="region" aria-labelledby="header">
+                <slot part="content" id="content" class="nav-submenu__content"></slot>
+              </div>
+            `}
+      </div>
+    `;
+  }
+};
+SlNavSubmenu.styles = [component_styles_default, nav_submenu_styles_default];
+SlNavSubmenu.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-popup": SlPopup
+};
+__decorateClass([
+  e2(".nav-submenu__header")
+], SlNavSubmenu.prototype, "header", 2);
+__decorateClass([
+  e2(".nav-submenu__body")
+], SlNavSubmenu.prototype, "body", 2);
+__decorateClass([
+  e2("sl-popup")
+], SlNavSubmenu.prototype, "popup", 2);
+__decorateClass([
+  n()
+], SlNavSubmenu.prototype, "key", 2);
+__decorateClass([
+  n({ attribute: "item-key" })
+], SlNavSubmenu.prototype, "itemKey", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "open", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "nested", 2);
+__decorateClass([
+  n()
+], SlNavSubmenu.prototype, "title", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlNavSubmenu.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlNavSubmenu.prototype, "icon", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlNavSubmenu.prototype, "theme", 2);
+__decorateClass([
+  n({ attribute: "popup-class-name" })
+], SlNavSubmenu.prototype, "popupClassName", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlNavSubmenu.prototype, "popupOffset", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlNavSubmenu.prototype, "onTitleClick", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "active", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlNavSubmenu.prototype, "mode", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlNavSubmenu.prototype, "handleOpenChange", 1);
+setDefaultAnimation("nav-submenu.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("nav-submenu.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  SlNavSubmenu
+};