@kdcloudjs/shoelace 1.0.45 → 1.0.47

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

@@ -0,0 +1,454 @@
+import {
+  nav_submenu_styles_default
+} from "./chunk.XWZLIQKA.js";
+import {
+  SlPopup
+} from "./chunk.TS4KLORC.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.VBONVBBW.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.2QDPYAHS.js";
+import {
+  SlIcon
+} from "./chunk.MGETPUIX.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.N6N54SAA.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n
+} from "./chunk.KKR53ZFE.js";
+import {
+  A,
+  b
+} from "./chunk.OLIQR3OU.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";
+    this.collapsed = false;
+    this.divider = false;
+  }
+  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";
+  }
+  hasCustomPopupContent() {
+    return Array.from(this.children).some((child) => {
+      const tagName = child.tagName.toLowerCase();
+      return !["sl-nav-item", "sl-nav-submenu", "sl-nav-group", "sl-divider"].includes(tagName);
+    });
+  }
+  /** @internal Clears any pending show/hide timers. */
+  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 hasCustomPopupContent = this.hasCustomPopupContent();
+    const popupOffset = (_a = this.popupOffset) != null ? _a : [0, 0];
+    const popupClassName = [this.popupClassName, hasCustomPopupContent ? "nav-submenu__popup--custom" : ""].filter(Boolean).join(" ");
+    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>
+
+            ${this.collapsed ? A : b`
+                  <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=${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 && !hasCustomPopupContent ? "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([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "collapsed", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "divider", 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
+};

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

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