@kdcloudjs/shoelace 1.0.24 → 1.0.25

package/cdn/chunks/chunk.22H6DT5W.js

@@ -0,0 +1,97 @@
+import {
+  tag_styles_default
+} from "./chunk.XKCUZEJP.js";
+import {
+  SlIconButton
+} from "./chunk.PWS47QCG.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.BYYTZZD7.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/tag/tag.component.ts
+var SlTag = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "neutral";
+    this.size = "medium";
+    this.pill = false;
+    this.removable = false;
+  }
+  handleRemoveClick() {
+    this.emit("sl-remove");
+  }
+  render() {
+    return b`
+      <span
+        part="base"
+        class=${e({
+      tag: true,
+      // Types
+      "tag--primary": this.variant === "primary",
+      "tag--success": this.variant === "success",
+      "tag--neutral": this.variant === "neutral",
+      "tag--warning": this.variant === "warning",
+      "tag--danger": this.variant === "danger",
+      "tag--text": this.variant === "text",
+      // Sizes
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large",
+      // Modifiers
+      "tag--pill": this.pill,
+      "tag--removable": this.removable
+    })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable ? b`
+              <sl-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("remove")}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></sl-icon-button>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+SlTag.styles = [component_styles_default, tag_styles_default];
+SlTag.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  n({ reflect: true })
+], SlTag.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlTag.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlTag.prototype, "pill", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlTag.prototype, "removable", 2);
+
+export {
+  SlTag
+};

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

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

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

@@ -0,0 +1,215 @@
+import {
+  col_styles_default
+} from "./chunk.KKCLXXWI.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.BYYTZZD7.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/col/col.component.ts
+var breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+var responsiveArray = ["xxl", "xl", "lg", "md", "sm", "xs"];
+var SlCol = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mediaQueryLists = /* @__PURE__ */ new Map();
+    this.currentBreakpoint = "xs";
+    this.rowContext = { gutter: [0, 0], wrap: true };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupResponsiveObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupResponsiveObserver();
+  }
+  setupResponsiveObserver() {
+    Object.entries(breakpoints).forEach(([key, minWidth]) => {
+      const breakpoint = key;
+      const mediaQuery = minWidth === 0 ? "(min-width: 0px)" : `(min-width: ${minWidth}px)`;
+      const mql = window.matchMedia(mediaQuery);
+      const handler = (e) => {
+        if (e.matches) {
+          this.currentBreakpoint = breakpoint;
+          this.requestUpdate();
+        }
+      };
+      mql.addEventListener("change", handler);
+      this.mediaQueryLists.set(breakpoint, mql);
+      if (mql.matches) {
+        this.currentBreakpoint = breakpoint;
+      }
+    });
+  }
+  cleanupResponsiveObserver() {
+    this.mediaQueryLists.forEach((mql) => {
+      mql.removeEventListener("change", () => {
+      });
+    });
+    this.mediaQueryLists.clear();
+  }
+  getResponsiveProps() {
+    for (const bp of responsiveArray) {
+      const bpIndex = responsiveArray.indexOf(bp);
+      const currentIndex = responsiveArray.indexOf(this.currentBreakpoint);
+      if (bpIndex >= currentIndex) {
+        const config = this[bp];
+        if (config !== void 0) {
+          if (typeof config === "number" || typeof config === "string") {
+            return { span: config };
+          }
+          return config;
+        }
+      }
+    }
+    return {};
+  }
+  parseFlex(flex) {
+    if (flex === "auto") {
+      return "1 1 auto";
+    }
+    if (typeof flex === "number") {
+      return `${flex} ${flex} auto`;
+    }
+    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(String(flex))) {
+      return `0 0 ${flex}`;
+    }
+    return String(flex);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateHostStyles();
+  }
+  updateHostStyles() {
+    var _a, _b, _c, _d, _e, _f;
+    const responsiveProps = this.getResponsiveProps();
+    const mergedSpan = (_a = this.span) != null ? _a : responsiveProps.span;
+    const mergedOffset = (_b = this.offset) != null ? _b : responsiveProps.offset;
+    const mergedOrder = (_c = this.order) != null ? _c : responsiveProps.order;
+    const mergedPush = (_d = this.push) != null ? _d : responsiveProps.push;
+    const mergedPull = (_e = this.pull) != null ? _e : responsiveProps.pull;
+    const mergedFlex = (_f = this.flex) != null ? _f : responsiveProps.flex;
+    const hostStyle = this.style;
+    hostStyle.flex = "";
+    hostStyle.maxWidth = "";
+    hostStyle.marginLeft = "";
+    hostStyle.order = "";
+    hostStyle.left = "";
+    hostStyle.right = "";
+    hostStyle.paddingLeft = "";
+    hostStyle.paddingRight = "";
+    hostStyle.display = "";
+    hostStyle.minWidth = "";
+    if (mergedSpan !== void 0) {
+      const spanNum = Number(mergedSpan);
+      if (spanNum === 0) {
+        hostStyle.display = "none";
+      } else {
+        const percentage = spanNum / 24 * 100;
+        hostStyle.flex = `0 0 ${percentage}%`;
+        hostStyle.maxWidth = `${percentage}%`;
+      }
+    }
+    if (mergedOffset !== void 0 && mergedOffset !== 0) {
+      const offsetNum = Number(mergedOffset);
+      const percentage = offsetNum / 24 * 100;
+      hostStyle.marginLeft = `${percentage}%`;
+    }
+    if (mergedOrder !== void 0) {
+      hostStyle.order = String(mergedOrder);
+    }
+    if (mergedPush !== void 0 && mergedPush !== 0) {
+      const pushNum = Number(mergedPush);
+      const percentage = pushNum / 24 * 100;
+      hostStyle.left = `${percentage}%`;
+    }
+    if (mergedPull !== void 0 && mergedPull !== 0) {
+      const pullNum = Number(mergedPull);
+      const percentage = pullNum / 24 * 100;
+      hostStyle.right = `${percentage}%`;
+    }
+    if (mergedFlex !== void 0) {
+      hostStyle.flex = this.parseFlex(mergedFlex);
+      if (!this.rowContext.wrap) {
+        hostStyle.minWidth = "0";
+      }
+    }
+    const [gutterH] = this.rowContext.gutter;
+    if (gutterH) {
+      hostStyle.paddingLeft = `${gutterH / 2}px`;
+      hostStyle.paddingRight = `${gutterH / 2}px`;
+    }
+  }
+  render() {
+    return b`
+      <div part="base" class="col">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+SlCol.styles = [component_styles_default, col_styles_default];
+__decorateClass([
+  r()
+], SlCol.prototype, "currentBreakpoint", 2);
+__decorateClass([
+  r()
+], SlCol.prototype, "rowContext", 2);
+__decorateClass([
+  n({ type: Number })
+], SlCol.prototype, "span", 2);
+__decorateClass([
+  n({ type: Number })
+], SlCol.prototype, "offset", 2);
+__decorateClass([
+  n({ type: Number })
+], SlCol.prototype, "order", 2);
+__decorateClass([
+  n({ type: Number })
+], SlCol.prototype, "push", 2);
+__decorateClass([
+  n({ type: Number })
+], SlCol.prototype, "pull", 2);
+__decorateClass([
+  n()
+], SlCol.prototype, "flex", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "xs", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "sm", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "md", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "lg", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "xl", 2);
+__decorateClass([
+  n({ type: Object })
+], SlCol.prototype, "xxl", 2);
+
+export {
+  SlCol
+};

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

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

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

@@ -0,0 +1,73 @@
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.BYYTZZD7.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/format-number/format-number.component.ts
+var SlFormatNumber = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.type = "decimal";
+    this.noGrouping = false;
+    this.currency = "USD";
+    this.currencyDisplay = "symbol";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    return this.localize.number(this.value, {
+      style: this.type,
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      useGrouping: !this.noGrouping,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumSignificantDigits: this.minimumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], SlFormatNumber.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlFormatNumber.prototype, "type", 2);
+__decorateClass([
+  n({ attribute: "no-grouping", type: Boolean })
+], SlFormatNumber.prototype, "noGrouping", 2);
+__decorateClass([
+  n()
+], SlFormatNumber.prototype, "currency", 2);
+__decorateClass([
+  n({ attribute: "currency-display" })
+], SlFormatNumber.prototype, "currencyDisplay", 2);
+__decorateClass([
+  n({ attribute: "minimum-integer-digits", type: Number })
+], SlFormatNumber.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-fraction-digits", type: Number })
+], SlFormatNumber.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-fraction-digits", type: Number })
+], SlFormatNumber.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  n({ attribute: "minimum-significant-digits", type: Number })
+], SlFormatNumber.prototype, "minimumSignificantDigits", 2);
+__decorateClass([
+  n({ attribute: "maximum-significant-digits", type: Number })
+], SlFormatNumber.prototype, "maximumSignificantDigits", 2);
+
+export {
+  SlFormatNumber
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlProgressBar
+} from "./chunk.VLX4AZYA.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = SlProgressBar;
+SlProgressBar.define("sl-progress-bar");
+
+export {
+  progress_bar_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlRadio
+} from "./chunk.RW6W4KMS.js";
+
+// src/components/radio/radio.ts
+var radio_default = SlRadio;
+SlRadio.define("sl-radio");
+
+export {
+  radio_default
+};

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

@@ -0,0 +1,161 @@
+import {
+  row_styles_default
+} from "./chunk.B7JDZ7KE.js";
+import {
+  o
+} from "./chunk.BJDNEBPV.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  component_styles_default
+} from "./chunk.NDXSHFSW.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.BYYTZZD7.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/row/row.component.ts
+var breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+var responsiveArray = ["xxl", "xl", "lg", "md", "sm", "xs"];
+var SlRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mediaQueryLists = /* @__PURE__ */ new Map();
+    this.currentScreens = {};
+    this.gutter = 0;
+    this.align = "top";
+    this.justify = "start";
+    this.wrap = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupResponsiveObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupResponsiveObserver();
+  }
+  setupResponsiveObserver() {
+    Object.entries(breakpoints).forEach(([key, minWidth]) => {
+      const breakpoint = key;
+      const mediaQuery = minWidth === 0 ? "(min-width: 0px)" : `(min-width: ${minWidth}px)`;
+      const mql = window.matchMedia(mediaQuery);
+      const handler = (e2) => {
+        this.currentScreens = __spreadProps(__spreadValues({}, this.currentScreens), {
+          [breakpoint]: e2.matches
+        });
+        this.updateChildrenContext();
+      };
+      mql.addEventListener("change", handler);
+      this.mediaQueryLists.set(breakpoint, mql);
+      handler(mql);
+    });
+  }
+  cleanupResponsiveObserver() {
+    this.mediaQueryLists.forEach((mql) => {
+      mql.removeEventListener("change", () => {
+      });
+    });
+    this.mediaQueryLists.clear();
+  }
+  getGutterValue(gutterProp) {
+    if (typeof gutterProp === "number") {
+      return gutterProp;
+    }
+    if (typeof gutterProp === "object" && gutterProp !== null) {
+      for (const breakpoint of responsiveArray) {
+        if (this.currentScreens[breakpoint] && gutterProp[breakpoint] !== void 0) {
+          return gutterProp[breakpoint];
+        }
+      }
+    }
+    return 0;
+  }
+  getGutters() {
+    const normalizedGutter = Array.isArray(this.gutter) ? this.gutter : [this.gutter, 0];
+    return [
+      this.getGutterValue(normalizedGutter[0]),
+      this.getGutterValue(normalizedGutter[1] || 0)
+    ];
+  }
+  updateChildrenContext() {
+    const [gutterH, gutterV] = this.getGutters();
+    const context = {
+      gutter: [gutterH, gutterV],
+      wrap: this.wrap
+    };
+    const cols = this.querySelectorAll("sl-col");
+    cols.forEach((col) => {
+      col.rowContext = context;
+    });
+    this.requestUpdate();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("gutter") || changedProperties.has("wrap")) {
+      this.updateChildrenContext();
+    }
+  }
+  render() {
+    const [gutterH, gutterV] = this.getGutters();
+    const rowStyles = {};
+    if (gutterH) {
+      rowStyles.marginLeft = `${-gutterH / 2}px`;
+      rowStyles.marginRight = `${-gutterH / 2}px`;
+    }
+    if (gutterV) {
+      rowStyles.rowGap = `${gutterV}px`;
+    }
+    return b`
+      <div
+        part="base"
+        class=${e({
+      row: true,
+      "row--no-wrap": !this.wrap,
+      [`row--${this.justify}`]: true,
+      [`row--${this.align}`]: true
+    })}
+        style=${o(rowStyles)}
+      >
+        <slot @slotchange=${this.updateChildrenContext}></slot>
+      </div>
+    `;
+  }
+};
+SlRow.styles = [component_styles_default, row_styles_default];
+__decorateClass([
+  r()
+], SlRow.prototype, "currentScreens", 2);
+__decorateClass([
+  n({ type: Object })
+], SlRow.prototype, "gutter", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlRow.prototype, "align", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlRow.prototype, "justify", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRow.prototype, "wrap", 2);
+
+export {
+  SlRow
+};

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

@@ -0,0 +1,11 @@
+import {
+  SlRow
+} from "./chunk.2WAYDVIX.js";
+
+// src/components/row/row.ts
+var row_default = SlRow;
+SlRow.define("sl-row");
+
+export {
+  row_default
+};

package/cdn/chunks/chunk.35BFJBMJ.js

@@ -0,0 +1,28 @@
+import {
+  SlCheckbox
+} from "./chunk.QUJJBEUM.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/cdn/chunks/chunk.37EERA2Q.js

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