@kdcloudjs/shoelace 1.0.11 → 1.0.13

package/dist/chunks/chunk.UUOI5HE6.js

@@ -0,0 +1,67 @@
+import {
+  progress_bar_styles_default
+} from "./chunk.GXC456DW.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.M7GTV5KG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/progress-bar/progress-bar.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+var SlProgressBar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.indeterminate = false;
+    this.label = "";
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "progress-bar": true,
+      "progress-bar--indeterminate": this.indeterminate,
+      "progress-bar--rtl": this.localize.dir() === "rtl"
+    })}
+        role="progressbar"
+        title=${ifDefined(this.title)}
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${this.indeterminate ? 0 : this.value}
+      >
+        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
+          ${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+SlProgressBar.styles = [component_styles_default, progress_bar_styles_default];
+__decorateClass([
+  property({ type: Number, reflect: true })
+], SlProgressBar.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlProgressBar.prototype, "indeterminate", 2);
+__decorateClass([
+  property()
+], SlProgressBar.prototype, "label", 2);
+
+export {
+  SlProgressBar
+};

package/dist/chunks/chunk.UXO3E2PW.js

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

package/dist/chunks/chunk.UYWN5P5X.js

@@ -0,0 +1,384 @@
+import {
+  dropdown_styles_default
+} from "./chunk.LXP7GVU3.js";
+import {
+  SlPopup
+} from "./chunk.TSTXB3ED.js";
+import {
+  getDeepestActiveElement,
+  getTabbableBoundary
+} from "./chunk.PHVS3KJH.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.M7GTV5KG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/dropdown/dropdown.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from "lit/decorators.js";
+var SlDropdown = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.placement = "bottom-start";
+    this.disabled = false;
+    this.stayOpenOnSelect = false;
+    this.distance = 0;
+    this.skidding = 0;
+    this.hoist = false;
+    this.sync = void 0;
+    this.handleKeyDown = (event) => {
+      if (this.open && event.key === "Escape") {
+        event.stopPropagation();
+        this.hide();
+        this.focusOnTrigger();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
+        event.stopPropagation();
+        this.focusOnTrigger();
+        this.hide();
+        return;
+      }
+      if (event.key === "Tab") {
+        if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sl-menu-item") {
+          event.preventDefault();
+          this.hide();
+          this.focusOnTrigger();
+          return;
+        }
+        const computeClosestContaining = (element, tagName) => {
+          if (!element) return null;
+          const closest = element.closest(tagName);
+          if (closest) return closest;
+          const rootNode = element.getRootNode();
+          if (rootNode instanceof ShadowRoot) {
+            return computeClosestContaining(rootNode.host, tagName);
+          }
+          return null;
+        };
+        setTimeout(() => {
+          var _a2;
+          const activeElement = ((_a2 = this.containingElement) == null ? void 0 : _a2.getRootNode()) instanceof ShadowRoot ? getDeepestActiveElement() : document.activeElement;
+          if (!this.containingElement || computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+            this.hide();
+          }
+        });
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      const path = event.composedPath();
+      if (this.containingElement && !path.includes(this.containingElement)) {
+        this.hide();
+      }
+    };
+    this.handlePanelSelect = (event) => {
+      const target = event.target;
+      if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sl-menu") {
+        this.hide();
+        this.focusOnTrigger();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0];
+    if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+      trigger.focus();
+    }
+  }
+  getMenu() {
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sl-menu");
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+      this.focusOnTrigger();
+    }
+  }
+  async handleTriggerKeyDown(event) {
+    if ([" ", "Enter"].includes(event.key)) {
+      event.preventDefault();
+      this.handleTriggerClick();
+      return;
+    }
+    const menu = this.getMenu();
+    if (menu) {
+      const menuItems = menu.getAllItems();
+      const firstMenuItem = menuItems[0];
+      const lastMenuItem = menuItems[menuItems.length - 1];
+      if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        if (!this.open) {
+          this.show();
+          await this.updateComplete;
+        }
+        if (menuItems.length > 0) {
+          this.updateComplete.then(() => {
+            if (event.key === "ArrowDown" || event.key === "Home") {
+              menu.setCurrentItem(firstMenuItem);
+              firstMenuItem.focus();
+            }
+            if (event.key === "ArrowUp" || event.key === "End") {
+              menu.setCurrentItem(lastMenuItem);
+              lastMenuItem.focus();
+            }
+          });
+        }
+      }
+    }
+  }
+  handleTriggerKeyUp(event) {
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  }
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true });
+    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
+    let target;
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // Shoelace buttons have to update the internal button so it's announced correctly by screen readers
+        case "sl-button":
+        case "sl-icon-button":
+          target = accessibleTrigger.button;
+          break;
+        default:
+          target = accessibleTrigger;
+      }
+      target.setAttribute("aria-haspopup", "true");
+      target.setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  /** Shows the dropdown panel. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    var _a;
+    this.panel.addEventListener("sl-select", this.handlePanelSelect);
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        this.hide();
+        this.focusOnTrigger();
+      };
+    } else {
+      this.panel.addEventListener("keydown", this.handleKeyDown);
+    }
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    var _a;
+    if (this.panel) {
+      this.panel.removeEventListener("sl-select", this.handlePanelSelect);
+      this.panel.removeEventListener("keydown", this.handleKeyDown);
+    }
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+  }
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+    this.updateAccessibleTrigger();
+    if (this.open) {
+      this.emit("sl-show");
+      this.addOpenListeners();
+      await stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, "dropdown.show", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      this.emit("sl-hide");
+      this.removeOpenListeners();
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, "dropdown.hide", { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  render() {
+    return html`
+      <sl-popup
+        part="base"
+        exportparts="popup:base__popup"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        sync=${ifDefined(this.sync ? this.sync : void 0)}
+        class=${classMap({
+      dropdown: true,
+      "dropdown--open": this.open
+    })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div aria-hidden=${this.open ? "false" : "true"} aria-labelledby="dropdown">
+          <slot part="panel" class="dropdown__panel"></slot>
+        </div>
+      </sl-popup>
+    `;
+  }
+};
+SlDropdown.styles = [component_styles_default, dropdown_styles_default];
+SlDropdown.dependencies = { "sl-popup": SlPopup };
+__decorateClass([
+  query(".dropdown")
+], SlDropdown.prototype, "popup", 2);
+__decorateClass([
+  query(".dropdown__trigger")
+], SlDropdown.prototype, "trigger", 2);
+__decorateClass([
+  query(".dropdown__panel")
+], SlDropdown.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDropdown.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDropdown.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
+], SlDropdown.prototype, "stayOpenOnSelect", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlDropdown.prototype, "containingElement", 2);
+__decorateClass([
+  property({ type: Number })
+], SlDropdown.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], SlDropdown.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlDropdown.prototype, "hoist", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDropdown.prototype, "sync", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDropdown.prototype, "handleOpenChange", 1);
+setDefaultAnimation("dropdown.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+setDefaultAnimation("dropdown.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+
+export {
+  SlDropdown
+};

package/dist/chunks/chunk.V2H6GVD2.js

@@ -0,0 +1,26 @@
+import {
+  SlAnimation
+} from "./chunk.ZVYNO5RH.js";
+
+// src/react/animation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-animation";
+SlAnimation.define("sl-animation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAnimation,
+  react: React,
+  events: {
+    onSlCancel: "sl-cancel",
+    onSlFinish: "sl-finish",
+    onSlStart: "sl-start"
+  },
+  displayName: "SlAnimation"
+});
+var animation_default = reactWrapper;
+
+export {
+  animation_default
+};

package/dist/chunks/chunk.VHHBFM4E.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.M7GTV5KG.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.VHRTMFWQ.js

@@ -0,0 +1,11 @@
+import {
+  SlSplitPanel
+} from "./chunk.PVMVRYSF.js";
+
+// src/components/split-panel/split-panel.ts
+var split_panel_default = SlSplitPanel;
+SlSplitPanel.define("sl-split-panel");
+
+export {
+  split_panel_default
+};