@kdcloudjs/shoelace 1.0.5 → 1.0.7

package/cdn/chunks/chunk.FHQ6SOQJ.js

@@ -0,0 +1,103 @@
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.QA2FJSHX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.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 b` <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.FKNGB7NW.js

@@ -0,0 +1,27 @@
+import {
+  SlTooltip
+} from "./chunk.JT56MIJ4.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.FOUHO4EI.js

@@ -0,0 +1,233 @@
+import {
+  SlTooltip
+} from "./chunk.JT56MIJ4.js";
+import {
+  copy_button_styles_default
+} from "./chunk.6FMCIQ3A.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.KSB7EI3T.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  SlIcon
+} from "./chunk.33GIVBCX.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.QA2FJSHX.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/copy-button/copy-button.component.ts
+var SlCopyButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isCopying = false;
+    this.status = "rest";
+    this.value = "";
+    this.from = "";
+    this.disabled = false;
+    this.copyLabel = "";
+    this.successLabel = "";
+    this.errorLabel = "";
+    this.feedbackDuration = 1e3;
+    this.tooltipPlacement = "top";
+    this.hoist = false;
+  }
+  async handleCopy() {
+    if (this.disabled || this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+    let valueToCopy = this.value;
+    if (this.from) {
+      const root = this.getRootNode();
+      const isProperty = this.from.includes(".");
+      const isAttribute = this.from.includes("[") && this.from.includes("]");
+      let id = this.from;
+      let field = "";
+      if (isProperty) {
+        [id, field] = this.from.trim().split(".");
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+      }
+      const target = "getElementById" in root ? root.getElementById(id) : null;
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || "";
+        } else if (isProperty) {
+          valueToCopy = target[field] || "";
+        } else {
+          valueToCopy = target.textContent || "";
+        }
+      } else {
+        this.showStatus("error");
+        this.emit("sl-error");
+      }
+    }
+    if (!valueToCopy) {
+      this.showStatus("error");
+      this.emit("sl-error");
+    } else {
+      try {
+        await navigator.clipboard.writeText(valueToCopy);
+        this.showStatus("success");
+        this.emit("sl-copy", {
+          detail: {
+            value: valueToCopy
+          }
+        });
+      } catch (error) {
+        this.showStatus("error");
+        this.emit("sl-error");
+      }
+    }
+  }
+  async showStatus(status) {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    const successLabel = this.successLabel || this.localize.term("copied");
+    const errorLabel = this.errorLabel || this.localize.term("error");
+    const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+    const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+    const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+    this.tooltip.content = status === "success" ? successLabel : errorLabel;
+    await this.copyIcon.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+    this.copyIcon.hidden = true;
+    this.status = status;
+    iconToShow.hidden = false;
+    await iconToShow.animate(showAnimation.keyframes, showAnimation.options).finished;
+    setTimeout(async () => {
+      await iconToShow.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+      iconToShow.hidden = true;
+      this.status = "rest";
+      this.copyIcon.hidden = false;
+      await this.copyIcon.animate(showAnimation.keyframes, showAnimation.options).finished;
+      this.tooltip.content = copyLabel;
+      this.isCopying = false;
+    }, this.feedbackDuration);
+  }
+  render() {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    return b`
+      <sl-tooltip
+        class=${e({
+      "copy-button": true,
+      "copy-button--success": this.status === "success",
+      "copy-button--error": this.status === "error"
+    })}
+        content=${copyLabel}
+        placement=${this.tooltipPlacement}
+        ?disabled=${this.disabled}
+        ?hoist=${this.hoist}
+        exportparts="
+          base:tooltip__base,
+          base__popup:tooltip__base__popup,
+          base__arrow:tooltip__base__arrow,
+          body:tooltip__body
+        "
+      >
+        <button
+          class="copy-button__button"
+          part="button"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${this.handleCopy}
+        >
+          <slot part="copy-icon" name="copy-icon">
+            <sl-icon library="system" name="copy"></sl-icon>
+          </slot>
+          <slot part="success-icon" name="success-icon" hidden>
+            <sl-icon library="system" name="check"></sl-icon>
+          </slot>
+          <slot part="error-icon" name="error-icon" hidden>
+            <sl-icon library="system" name="x-lg"></sl-icon>
+          </slot>
+        </button>
+      </sl-tooltip>
+    `;
+  }
+};
+SlCopyButton.styles = [component_styles_default, copy_button_styles_default];
+SlCopyButton.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-tooltip": SlTooltip
+};
+__decorateClass([
+  e2('slot[name="copy-icon"]')
+], SlCopyButton.prototype, "copyIcon", 2);
+__decorateClass([
+  e2('slot[name="success-icon"]')
+], SlCopyButton.prototype, "successIcon", 2);
+__decorateClass([
+  e2('slot[name="error-icon"]')
+], SlCopyButton.prototype, "errorIcon", 2);
+__decorateClass([
+  e2("sl-tooltip")
+], SlCopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  r()
+], SlCopyButton.prototype, "isCopying", 2);
+__decorateClass([
+  r()
+], SlCopyButton.prototype, "status", 2);
+__decorateClass([
+  n()
+], SlCopyButton.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlCopyButton.prototype, "from", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlCopyButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ attribute: "copy-label" })
+], SlCopyButton.prototype, "copyLabel", 2);
+__decorateClass([
+  n({ attribute: "success-label" })
+], SlCopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  n({ attribute: "error-label" })
+], SlCopyButton.prototype, "errorLabel", 2);
+__decorateClass([
+  n({ attribute: "feedback-duration", type: Number })
+], SlCopyButton.prototype, "feedbackDuration", 2);
+__decorateClass([
+  n({ attribute: "tooltip-placement" })
+], SlCopyButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlCopyButton.prototype, "hoist", 2);
+setDefaultAnimation("copy.in", {
+  keyframes: [
+    { scale: ".25", opacity: ".25" },
+    { scale: "1", opacity: "1" }
+  ],
+  options: { duration: 100 }
+});
+setDefaultAnimation("copy.out", {
+  keyframes: [
+    { scale: "1", opacity: "1" },
+    { scale: ".25", opacity: "0" }
+  ],
+  options: { duration: 100 }
+});
+
+export {
+  SlCopyButton
+};

package/cdn/chunks/chunk.FR2NJBAW.js

@@ -0,0 +1,29 @@
+import {
+  SlDialog
+} from "./chunk.PKX6PMAZ.js";
+
+// src/react/dialog/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-dialog";
+SlDialog.define("sl-dialog");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDialog,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide",
+    onSlInitialFocus: "sl-initial-focus",
+    onSlRequestClose: "sl-request-close"
+  },
+  displayName: "SlDialog"
+});
+var dialog_default = reactWrapper;
+
+export {
+  dialog_default
+};

package/cdn/chunks/chunk.FYSJH6YS.js

@@ -0,0 +1,189 @@
+import {
+  i
+} from "./chunk.7WSF3BCU.js";
+
+// src/components/alert/alert.styles.ts
+var alert_styles_default = i`
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    /* Use semantic -50 scale tokens for alert backgrounds for clearer intent */
+    background-color: var(--sl-color-neutral-50);
+    /* Use semantic neutral as the default border color instead of the generic panel border color */
+    border: solid var(--sl-panel-border-width) var(--sl-color-neutral-200);
+    border-top-width: calc(var(--sl-panel-border-width) * 1);
+    border-radius: var(--sl-border-radius-medium);
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: 22px;
+    /* Use semantic -700 tokens for text to follow variant semantics (default to neutral-700) */
+    color: var(--sl-color-neutral-700);
+    margin: inherit;
+    overflow: hidden;
+    min-width: 280px;
+    max-width: 1000px;
+    max-height: 160px;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    font-size: var(--sl-font-size-medium);
+    padding-inline-start: var(--sl-spacing-small);
+    padding-inline-end: var(--sl-spacing-x-small);
+    padding-block-start: var(--sl-spacing-small);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
+  }
+
+  /* Variant borders use semantic colors */
+  .alert--primary {
+    border-color: var(--sl-color-primary-200);
+    /* light semantic background for primary alerts */
+    background-color: var(--sl-color-primary-50);
+    /* text follows semantic primary -700 */
+    color: var(--sl-color-primary-700);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--sl-color-primary-600);
+  }
+
+  .alert--success {
+    border-color: var(--sl-color-success-200);
+    /* light semantic background for success alerts */
+    background-color: var(--sl-color-success-50);
+    /* text follows semantic success -700 */
+    color: var(--sl-color-success-700);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral {
+    border-color: var(--sl-color-neutral-200);
+    /* neutral alerts use the neutral-50 background */
+    background-color: var(--sl-color-neutral-50);
+    /* text follows semantic neutral -700 */
+    color: var(--sl-color-neutral-700);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning {
+    border-color: var(--sl-color-warning-200);
+    /* light semantic background for warning alerts */
+    background-color: var(--sl-color-warning-50);
+    /* text follows semantic warning -700 */
+    color: var(--sl-color-warning-700);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger {
+    border-color: var(--sl-color-danger-200);
+    /* light semantic background for danger alerts */
+    background-color: var(--sl-color-danger-50);
+    /* text follows semantic danger -700 */
+    color: var(--sl-color-danger-700);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--sl-color-danger-600);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding-block: var(--sl-spacing-x-small);
+    padding-inline-start: 0;
+    padding-inline-end: var(--sl-spacing-2x-small);
+    overflow-y: auto;
+  }
+
+  .alert__message strong,
+  .alert__message br {
+    display: none;
+  }
+
+  .alert:not(.alert--has-icon) .alert__message {
+    padding-inline-start: var(--sl-spacing-small);
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-x-small);
+    padding-inline-start: 0;
+    padding-inline-end: var(--sl-spacing-2x-small);
+  }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--sl-panel-border-width) * 3);
+    background-color: var(--sl-panel-border-color);
+    display: flex;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--sl-color-danger-600);
+  }
+
+  .alert__timer {
+    display: none;
+  }
+`;
+
+export {
+  alert_styles_default
+};

package/cdn/chunks/chunk.G2YOMCHR.js

@@ -0,0 +1,126 @@
+import {
+  e,
+  i,
+  t
+} from "./chunk.UP75L23G.js";
+import {
+  r
+} from "./chunk.AZSL5MFU.js";
+import {
+  A
+} from "./chunk.7WSF3BCU.js";
+
+// node_modules/lit-html/async-directive.js
+var s = (i2, t2) => {
+  var _a;
+  const e3 = i2._$AN;
+  if (void 0 === e3) return false;
+  for (const i3 of e3) (_a = i3._$AO) == null ? void 0 : _a.call(i3, t2, false), s(i3, t2);
+  return true;
+};
+var o = (i2) => {
+  let t2, e3;
+  do {
+    if (void 0 === (t2 = i2._$AM)) break;
+    e3 = t2._$AN, e3.delete(i2), i2 = t2;
+  } while (0 === (e3 == null ? void 0 : e3.size));
+};
+var r2 = (i2) => {
+  for (let t2; t2 = i2._$AM; i2 = t2) {
+    let e3 = t2._$AN;
+    if (void 0 === e3) t2._$AN = e3 = /* @__PURE__ */ new Set();
+    else if (e3.has(i2)) break;
+    e3.add(i2), c(t2);
+  }
+};
+function h(i2) {
+  void 0 !== this._$AN ? (o(this), this._$AM = i2, r2(this)) : this._$AM = i2;
+}
+function n(i2, t2 = false, e3 = 0) {
+  const r3 = this._$AH, h3 = this._$AN;
+  if (void 0 !== h3 && 0 !== h3.size) if (t2) if (Array.isArray(r3)) for (let i3 = e3; i3 < r3.length; i3++) s(r3[i3], false), o(r3[i3]);
+  else null != r3 && (s(r3, false), o(r3));
+  else s(this, i2);
+}
+var c = (i2) => {
+  var _a, _b;
+  i2.type == t.CHILD && ((_a = i2._$AP) != null ? _a : i2._$AP = n, (_b = i2._$AQ) != null ? _b : i2._$AQ = h);
+};
+var f = class extends i {
+  constructor() {
+    super(...arguments), this._$AN = void 0;
+  }
+  _$AT(i2, t2, e3) {
+    super._$AT(i2, t2, e3), r2(this), this.isConnected = i2._$AU;
+  }
+  _$AO(i2, t2 = true) {
+    var _a, _b;
+    i2 !== this.isConnected && (this.isConnected = i2, i2 ? (_a = this.reconnected) == null ? void 0 : _a.call(this) : (_b = this.disconnected) == null ? void 0 : _b.call(this)), t2 && (s(this, i2), o(this));
+  }
+  setValue(t2) {
+    if (r(this._$Ct)) this._$Ct._$AI(t2, this);
+    else {
+      const i2 = [...this._$Ct._$AH];
+      i2[this._$Ci] = t2, this._$Ct._$AI(i2, this, 0);
+    }
+  }
+  disconnected() {
+  }
+  reconnected() {
+  }
+};
+
+// node_modules/lit-html/directives/ref.js
+var e2 = () => new h2();
+var h2 = class {
+};
+var o2 = /* @__PURE__ */ new WeakMap();
+var n2 = e(class extends f {
+  render(i2) {
+    return A;
+  }
+  update(i2, [s2]) {
+    var _a;
+    const e3 = s2 !== this.G;
+    return e3 && void 0 !== this.G && this.rt(void 0), (e3 || this.lt !== this.ct) && (this.G = s2, this.ht = (_a = i2.options) == null ? void 0 : _a.host, this.rt(this.ct = i2.element)), A;
+  }
+  rt(t2) {
+    var _a;
+    if (this.isConnected || (t2 = void 0), "function" == typeof this.G) {
+      const i2 = (_a = this.ht) != null ? _a : globalThis;
+      let s2 = o2.get(i2);
+      void 0 === s2 && (s2 = /* @__PURE__ */ new WeakMap(), o2.set(i2, s2)), void 0 !== s2.get(this.G) && this.G.call(this.ht, void 0), s2.set(this.G, t2), void 0 !== t2 && this.G.call(this.ht, t2);
+    } else this.G.value = t2;
+  }
+  get lt() {
+    var _a, _b, _c;
+    return "function" == typeof this.G ? (_b = o2.get((_a = this.ht) != null ? _a : globalThis)) == null ? void 0 : _b.get(this.G) : (_c = this.G) == null ? void 0 : _c.value;
+  }
+  disconnected() {
+    this.lt === this.ct && this.rt(void 0);
+  }
+  reconnected() {
+    this.rt(this.ct);
+  }
+});
+
+export {
+  e2 as e,
+  n2 as n
+};
+/*! Bundled license information:
+
+lit-html/async-directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/ref.js:
+  (**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/