@kdcloudjs/shoelace 1.0.4 → 1.0.5

package/cdn/chunks/chunk.6WZ27344.js

@@ -0,0 +1,142 @@
+import {
+  radio_button_styles_default
+} from "./chunk.O6QLVREN.js";
+import {
+  u
+} from "./chunk.FVRO7M4G.js";
+import {
+  o
+} from "./chunk.COPAJV25.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.LQZ32GYA.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/radio-button/radio-button.component.ts
+var SlRadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleClick(e3) {
+    if (this.disabled) {
+      e3.preventDefault();
+      e3.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return u`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${e({
+      button: true,
+      "button--default": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": true,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${o(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
+__decorateClass([
+  e2(".button")
+], SlRadioButton.prototype, "input", 2);
+__decorateClass([
+  e2(".hidden-input")
+], SlRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  r()
+], SlRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "checked", 2);
+__decorateClass([
+  n()
+], SlRadioButton.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlRadioButton.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "pill", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlRadioButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlRadioButton
+};

package/cdn/chunks/chunk.6X6VGRFE.js

@@ -0,0 +1,24 @@
+import {
+  SlMenu
+} from "./chunk.F6LKCVG2.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-menu";
+SlMenu.define("sl-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMenu,
+  react: React,
+  events: {
+    onSlSelect: "sl-select"
+  },
+  displayName: "SlMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

package/cdn/chunks/chunk.6Y76RBIV.js

@@ -0,0 +1,11 @@
+import {
+  SlSwitch
+} from "./chunk.YXHVEJHY.js";
+
+// src/components/switch/switch.ts
+var switch_default = SlSwitch;
+SlSwitch.define("sl-switch");
+
+export {
+  switch_default
+};

package/cdn/chunks/chunk.72345564.js

@@ -0,0 +1,25 @@
+import {
+  SlRadioButton
+} from "./chunk.6WZ27344.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio-button";
+SlRadioButton.define("sl-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadioButton,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus"
+  },
+  displayName: "SlRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};

package/cdn/chunks/chunk.7BNY7LJ7.js

@@ -0,0 +1,90 @@
+import {
+  i
+} from "./chunk.ZKRJ3RUK.js";
+
+// src/components/pagination/pagination.styles.ts
+var pagination_styles_default = i`
+  :host {
+    --sl-pagination-text-color: var(--sl-color-neutral-600);
+    --sl-pagination-current-page-color: var(--sl-color-neutral-900);
+    --sl-pagination-font-size: var(--sl-input-font-size-small);
+    --sl-pagination-current-page-border-width: var(--sl-input-border-width);
+    --sl-pagination-current-page-border-radius: var(--sl-input-border-radius-small);
+    --sl-pagination-current-page-sizing-width: 3rem;
+    --sl-pagination-current-page-background: var(--sl-input-background-color);
+    --sl-pagination-current-page-background-disabled: var(--sl-input-background-color-disabled);
+    --sl-pagination-current-page-border: var(--sl-input-border-color);
+    --sl-pagination-current-page-border-hover: var(--sl-input-border-color-focus);
+    --sl-pagination-current-page-border-active: var(--sl-input-border-color-focus);
+    --sl-pagination-icon-font-size: 1rem;
+    --sl-pagination-icon-font: var(--sl-color-neutral-600);
+    --sl-pagination-icon-font-hover: var(--sl-color-primary-600);
+    --sl-pagination-icon-font-disabled: var(--sl-color-neutral-100);
+    display: block;
+  }
+  .pagination {
+    display: flex;
+    align-items: center;
+  }
+  .page-info {
+    color: var(--sl-pagination-text-color);
+    font-size: var(--sl-pagination-font-size);
+    flex-shrink: 0;
+  }
+  .page-btns {
+    display: flex;
+    align-items: center;
+    margin: 0 12px;
+  }
+  .page-btn {
+    border-radius: 4px;
+    user-select: none;
+    width: 20px;
+    cursor: pointer;
+    font-size: var(--sl-pagination-icon-font-size);
+    color: var(--sl-pagination-icon-font);
+  }
+  .page-btn--disabled {
+    cursor: not-allowed;
+    color: var(--sl-pagination-icon-font-disabled);
+  }
+  .page-btn:not(.page-btn--disabled):hover {
+    color: var(--sl-pagination-icon-font-hover);
+  }
+  .page-input {
+    width: var(--sl-pagination-current-page-sizing-width);
+    background-color: var(--sl-pagination-current-page-background);
+    height: 24px;
+    text-align: center;
+    border: var(--sl-pagination-current-page-border-width) solid var(--sl-pagination-current-page-border);
+    border-radius: var(--sl-pagination-current-page-border-radius);
+    padding: 4px;
+    color: var(--sl-pagination-current-page-color);
+    margin: 0 4px;
+    &:focus {
+      border-color: var(--sl-pagination-current-page-border-active);
+      outline: none;
+    }
+    &:disabled {
+      background-color: var(--sl-pagination-current-page-background-disabled);
+    }
+    &:hover {
+      border-color: var(--sl-pagination-current-page-border-hover);
+    }
+  }
+  select {
+    margin-left: 0.5rem;
+    border-radius: 4px;
+    padding: 2px;
+  }
+  .pagnation-select {
+    border: none;
+  }
+  .total {
+    margin-right: 12px;
+  }
+`;
+
+export {
+  pagination_styles_default
+};

package/cdn/chunks/chunk.7CQPG7JP.js

@@ -0,0 +1,220 @@
+import {
+  tableCommonCss
+} from "./chunk.LZDMFQGK.js";
+import {
+  spread_default
+} from "./chunk.GRGYWQPR.js";
+import {
+  flexRender
+} from "./chunk.VK7KEYIH.js";
+import {
+  c,
+  renderColGroup
+} from "./chunk.PY47Y45M.js";
+import {
+  getTableAlign,
+  getTableRect,
+  iterateStyles
+} from "./chunk.HD65V4AX.js";
+import {
+  CUSTOM_ROW
+} from "./chunk.4VRHDE3E.js";
+import {
+  n as n2
+} from "./chunk.WE4USEQU.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass,
+  __objRest
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/table/body-table.ts
+var BodyTable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.expandRowByClick = false;
+  }
+  render() {
+    const { tableScroll, handleBodyScroll, bordered, tableInstance, rowSelectedMap } = this.commonProps;
+    const { x: x2, y } = tableScroll || {};
+    const style = {
+      "max-width": x2 ? getTableRect(x2) : "100%",
+      "max-height": y ? getTableRect(y) : "100%"
+    };
+    const columnResizeable = tableInstance.getAllLeafColumns().some((c2) => c2.getCanResize());
+    return x` <div
+        style=${iterateStyles(style)}
+        class="table-body"
+        part="table-body"
+        ${n2(this.bodyRef)}
+        @scroll=${handleBodyScroll}
+      >
+        <table
+          class="${e({
+      table: true,
+      "table-bordered": bordered,
+      "table-fixed": !columnResizeable
+    })}"
+          style="width: ${tableInstance.getTotalSize()}px;"
+        >
+          ${renderColGroup(tableInstance)}
+          <tbody class="table-tbody">
+            ${c(
+      tableInstance.getRowModel().rows,
+      (row) => row.id,
+      (row) => {
+        var _a, _b;
+        const rowProps = ((_b = (_a = this.commonProps) == null ? void 0 : _a.onRow) == null ? void 0 : _b.call(_a, row.original, row.index)) || {};
+        const _c = rowProps, { className, style: rowStyle } = _c, rowRestProps = __objRest(_c, ["className", "style"]);
+        const rowClassName = typeof className === "string" ? className : "";
+        const rowClassMap = {
+          "table-row": true,
+          "table-row-selected": rowSelectedMap[row.id],
+          [rowClassName]: true
+        };
+        const rowStyleText = typeof rowStyle === "string" ? rowStyle : rowStyle && typeof rowStyle === "object" ? iterateStyles(rowStyle) : void 0;
+        return x`
+                  <tr
+                    class=${e(rowClassMap)}
+                    role="table-row"
+                    part="table-row"
+                    @click=${this.expandRowByClick ? () => row.getCanExpand() && row.toggleExpanded() : null}
+                    style=${rowStyleText || ""}
+                    ${spread_default(rowRestProps)}
+                  >
+                    ${c(
+          row.getVisibleCells(),
+          (cell) => cell.id,
+          (cell) => {
+            var _a2, _b2, _c2, _e, _f;
+            const columnDef = cell.column.columnDef;
+            const align = (_a2 = columnDef.meta) == null ? void 0 : _a2.align;
+            const cellProps = ((_c2 = (_b2 = columnDef.meta) == null ? void 0 : _b2.onCell) == null ? void 0 : _c2.call(_b2, cell.row.original, row.index)) || {};
+            const _d = cellProps, {
+              className: cellClassName,
+              style: cellStyle
+            } = _d, cellRestProps = __objRest(_d, [
+              "className",
+              "style"
+            ]);
+            const cellClassNameValue = typeof cellClassName === "string" ? cellClassName : "";
+            const cellClassMap = {
+              "table-row-cell": true,
+              "table-cell-ellipsis": !!((_e = columnDef.meta) == null ? void 0 : _e.ellipsis)
+            };
+            if ((_f = columnDef.meta) == null ? void 0 : _f.className) {
+              cellClassMap[columnDef.meta.className] = true;
+            }
+            if (cellClassNameValue) {
+              cellClassMap[cellClassNameValue] = true;
+            }
+            const cellStyleText = typeof cellStyle === "string" ? cellStyle : cellStyle && typeof cellStyle === "object" ? iterateStyles(cellStyle) : void 0;
+            return x` <td
+                          role="gridcell"
+                          part="table-row-cell"
+                          class="${e(cellClassMap)}"
+                          style=${cellStyleText || ""}
+                          ${spread_default(cellRestProps)}
+                        >
+                          <div
+                            class="table-cell-content"
+                            style="justify-content: ${getTableAlign(align)}"
+                          >
+                            ${flexRender(columnDef.cell, cell.getContext())}
+                          </div>
+                        </td>`;
+          }
+        )}
+                  </tr>
+                  ${row.getIsExpanded() ? x`
+                        <tr class="table-row" part="table-row" style="background: #eaeaea;">
+                          <td colspan="${row.getVisibleCells().length}" class="table-row-cell" part="table-row-cell">
+                            <slot name="${CUSTOM_ROW}-${this.commonProps.adapter.getRecordKey(row.original)}"></slot>
+                          </td>
+                        </tr>
+                      ` : ""}
+                `;
+      }
+    )}
+          </tbody>
+        </table>
+        ${this.emptyTemplate}
+      </div>
+      <style>
+        .table-body {
+          overflow: auto;
+          width: 100%;
+          box-sizing: border-box;
+          direction: var(--sl-c-table-direction);
+        }
+        .table-row {
+          display: table-row;
+        }
+        .table-row > .table-row-cell {
+          height: var(--sl-table-cell-line-height);
+          font-size: var(--sl-table-font-size);
+          padding: 0 var(--sl-table-cell-padding);
+          box-sizing: border-box;
+          border-inline-start: none;
+          border-inline-end: none;
+          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
+          overflow-wrap: break-word;
+          color: var(--sl-table-cell-color);
+        }
+        .table-row:hover > .table-row-cell {
+          background: var(--sl-table-row-background-hover);
+        }
+        :where(.table.table-bordered) > tbody.table-tbody > tr.table-row > td.table-row-cell {
+          border-inline-end: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
+        }
+        .table-row.table-row-selected > .table-row-cell {
+          background-color: var(--sl-table-row-background-active);
+        }
+        .table-row.table-row-selected:hover > .table-row-cell {
+          background-color: hsl(212.29999999999995, 100%, 95.5%);
+        }
+        .table-placeholder {
+          position: sticky;
+          left: 0;
+          z-index: 1;
+          padding: var(--sl-table-default-text-margin-vertical);
+          color: var(--semi-color-text-2);
+          font-size: 14px;
+          text-align: center;
+          background: transparent;
+        }
+        .table-cell-content {
+          display: flex;
+          align-items: center;
+          word-break: break-word;
+        }
+      </style>`;
+  }
+};
+BodyTable.styles = [tableCommonCss];
+__decorateClass([
+  n({ type: Object })
+], BodyTable.prototype, "bodyRef", 2);
+__decorateClass([
+  n({ type: Function })
+], BodyTable.prototype, "emptyTemplate", 2);
+__decorateClass([
+  n({ type: Object })
+], BodyTable.prototype, "commonProps", 2);
+__decorateClass([
+  n({ type: Boolean })
+], BodyTable.prototype, "expandRowByClick", 2);
+BodyTable.define("sl-table-body-table");
+
+export {
+  BodyTable
+};

package/cdn/chunks/chunk.A575VBPW.js

@@ -0,0 +1,11 @@
+import {
+  SlBreadcrumbItem
+} from "./chunk.PR7QMODJ.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var breadcrumb_item_default = SlBreadcrumbItem;
+SlBreadcrumbItem.define("sl-breadcrumb-item");
+
+export {
+  breadcrumb_item_default
+};

package/cdn/chunks/chunk.ABKNVEIF.js

@@ -0,0 +1,11 @@
+import {
+  SlButton
+} from "./chunk.OPV4LWDL.js";
+
+// src/components/button/button.ts
+var button_default = SlButton;
+SlButton.define("sl-button");
+
+export {
+  button_default
+};

package/cdn/chunks/chunk.AFUGLO2J.js

@@ -0,0 +1,82 @@
+import {
+  resize_observer_styles_default
+} from "./chunk.SN3GNV2Z.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.LQZ32GYA.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/resize-observer/resize-observer.component.ts
+var SlResizeObserver = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.emit("sl-resize", { detail: { entries } });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return x` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+SlResizeObserver.styles = [component_styles_default, resize_observer_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlResizeObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  SlResizeObserver
+};

package/cdn/chunks/chunk.AQLXVLLC.js

@@ -0,0 +1,11 @@
+import {
+  SlMutationObserver
+} from "./chunk.HCUTIIMI.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+var mutation_observer_default = SlMutationObserver;
+SlMutationObserver.define("sl-mutation-observer");
+
+export {
+  mutation_observer_default
+};

package/cdn/chunks/chunk.ARSOELAS.js

@@ -0,0 +1,11 @@
+import {
+  SlAlert
+} from "./chunk.HTQR4NGP.js";
+
+// src/components/alert/alert.ts
+var alert_default = SlAlert;
+SlAlert.define("sl-alert");
+
+export {
+  alert_default
+};

package/cdn/chunks/chunk.ASARZEQG.js

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

package/cdn/chunks/chunk.ASV42T2E.js

@@ -0,0 +1,21 @@
+import {
+  SlBadge
+} from "./chunk.JLXJFBOW.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
+};