@kdcloudjs/shoelace 1.0.24 → 1.0.25

package/dist/chunks/chunk.TEY22MXD.js

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

package/dist/chunks/chunk.TFEBABHN.js

@@ -0,0 +1,11 @@
+import {
+  SlCol
+} from "./chunk.T67Q7FG4.js";
+
+// src/components/col/col.ts
+var col_default = SlCol;
+SlCol.define("sl-col");
+
+export {
+  col_default
+};

package/dist/chunks/chunk.TJTYBIR7.js

@@ -0,0 +1,181 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.ZL53POKZ.js";
+import {
+  icon_styles_default
+} from "./chunk.QLXRCYS4.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JRE3XEGV.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/icon/icon.component.ts
+import { html } from "lit";
+import { isTemplateResult } from "lit/directive-helpers.js";
+import { property, state } from "lit/decorators.js";
+var CACHEABLE_ERROR = Symbol();
+var RETRYABLE_ERROR = Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var SlIcon = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.initialRender = false;
+    this.svg = null;
+    this.label = "";
+    this.library = "default";
+  }
+  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
+  async resolveIcon(url, library) {
+    var _a;
+    let fileData;
+    if (library == null ? void 0 : library.spriteSheet) {
+      this.svg = html`<svg part="svg">
+        <use part="use" href="${url}"></use>
+      </svg>`;
+      return this.svg;
+    }
+    try {
+      fileData = await fetch(url, { mode: "cors" });
+      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
+    } catch (e) {
+      return RETRYABLE_ERROR;
+    }
+    try {
+      const div = document.createElement("div");
+      div.innerHTML = await fileData.text();
+      const svg = div.firstElementChild;
+      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
+      if (!parser) parser = new DOMParser();
+      const doc = parser.parseFromString(svg.outerHTML, "text/html");
+      const svgEl = doc.body.querySelector("svg");
+      if (!svgEl) return CACHEABLE_ERROR;
+      svgEl.part.add("svg");
+      return document.adoptNode(svgEl);
+    } catch (e) {
+      return CACHEABLE_ERROR;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    this.initialRender = true;
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  getIconSource() {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return {
+        url: library.resolver(this.name),
+        fromLibrary: true
+      };
+    }
+    return {
+      url: this.src,
+      fromLibrary: false
+    };
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const { url, fromLibrary } = this.getIconSource();
+    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
+    if (!url) {
+      this.svg = null;
+      return;
+    }
+    let iconResolver = iconCache.get(url);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon(url, library);
+      iconCache.set(url, iconResolver);
+    }
+    if (!this.initialRender) {
+      return;
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(url);
+    }
+    if (url !== this.getIconSource().url) {
+      return;
+    }
+    if (isTemplateResult(svg)) {
+      this.svg = svg;
+      if (library) {
+        await this.updateComplete;
+        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
+        if (typeof library.mutator === "function" && shadowSVG) {
+          library.mutator(shadowSVG);
+        }
+      }
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.emit("sl-error");
+        break;
+      default:
+        this.svg = svg.cloneNode(true);
+        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
+        this.emit("sl-load");
+    }
+  }
+  render() {
+    return this.svg;
+  }
+};
+SlIcon.styles = [component_styles_default, icon_styles_default];
+__decorateClass([
+  state()
+], SlIcon.prototype, "svg", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlIcon.prototype, "name", 2);
+__decorateClass([
+  property()
+], SlIcon.prototype, "src", 2);
+__decorateClass([
+  property()
+], SlIcon.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], SlIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], SlIcon.prototype, "setIcon", 1);
+
+export {
+  SlIcon
+};

package/dist/chunks/chunk.TNTRKYME.js

@@ -0,0 +1,434 @@
+import {
+  nav_submenu_styles_default
+} from "./chunk.QG54XYLK.js";
+import {
+  SlPopup
+} from "./chunk.YPHENAEZ.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 {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  SlIcon
+} from "./chunk.TJTYBIR7.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JRE3XEGV.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/nav-submenu/nav-submenu.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+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;
+  }
+  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";
+  }
+  /** @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 popupOffset = (_a = this.popupOffset) != null ? _a : [0, 0];
+    const inheritedExpandIcon = (_b = this.getRootNav()) == null ? void 0 : _b.expandIcon;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "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=${classMap({
+      "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 : nothing}
+            </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 : html`
+                  <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 ? html`
+              <sl-popup
+                part="popup"
+                class=${this.popupClassName || nothing}
+                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>
+            ` : html`
+              <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([
+  query(".nav-submenu__header")
+], SlNavSubmenu.prototype, "header", 2);
+__decorateClass([
+  query(".nav-submenu__body")
+], SlNavSubmenu.prototype, "body", 2);
+__decorateClass([
+  query("sl-popup")
+], SlNavSubmenu.prototype, "popup", 2);
+__decorateClass([
+  property()
+], SlNavSubmenu.prototype, "key", 2);
+__decorateClass([
+  property({ attribute: "item-key" })
+], SlNavSubmenu.prototype, "itemKey", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "nested", 2);
+__decorateClass([
+  property()
+], SlNavSubmenu.prototype, "title", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNavSubmenu.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNavSubmenu.prototype, "icon", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNavSubmenu.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: "popup-class-name" })
+], SlNavSubmenu.prototype, "popupClassName", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNavSubmenu.prototype, "popupOffset", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlNavSubmenu.prototype, "onTitleClick", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNavSubmenu.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlNavSubmenu.prototype, "collapsed", 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/dist/chunks/chunk.TS6C6XE6.js

@@ -0,0 +1,11 @@
+import {
+  SlSpinner
+} from "./chunk.F2BIKL72.js";
+
+// src/components/spinner/spinner.ts
+var spinner_default = SlSpinner;
+SlSpinner.define("sl-spinner");
+
+export {
+  spinner_default
+};

package/dist/chunks/chunk.TT7JYVXJ.js

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