@kdcloudjs/shoelace 1.0.48 → 1.0.49

package/cdn/chunks/chunk.HHTTUOBD.js

@@ -0,0 +1,330 @@
+import {
+  RowDragController
+} from "./chunk.B4DXJNH2.js";
+import {
+  TreeTableController
+} from "./chunk.BBNLTP5U.js";
+import {
+  flexRender
+} from "./chunk.VK7KEYIH.js";
+import {
+  tableCommonCss
+} from "./chunk.FY5YJA4D.js";
+import {
+  spread_default
+} from "./chunk.GRGYWQPR.js";
+import {
+  getCellStickyStyle
+} from "./chunk.ZKPHP5NP.js";
+import {
+  c,
+  renderColGroup
+} from "./chunk.3472DQDJ.js";
+import {
+  getTableRect,
+  iterateStyles
+} from "./chunk.WVGF6WZM.js";
+import {
+  CUSTOM_ROW
+} from "./chunk.GJPVZV5U.js";
+import {
+  n as n2
+} from "./chunk.OVNPI46I.js";
+import {
+  o
+} from "./chunk.TNQRIWXJ.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.TFKPW5FV.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass,
+  __objRest,
+  __spreadValues
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/table/body-table.ts
+var BodyTable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.expandRowByClick = false;
+    this.treeCtrl = new TreeTableController(() => this.commonProps);
+    this.dragCtrl = new RowDragController(
+      () => this.commonProps,
+      () => this.bodyRef,
+      this.treeCtrl,
+      () => this.requestUpdate()
+    );
+    this.renderTr = (row, styles = {}) => {
+      var _b;
+      const { rowSelectedMap, slRow, virtualized } = this.commonProps;
+      const rowProps = (slRow == null ? void 0 : slRow(row.original, row.index)) || {};
+      const _a = rowProps, { className, style: rowPropsStyle } = _a, rowRestProps = __objRest(_a, ["className", "style"]);
+      const rowClassName = typeof className === "string" ? className : "";
+      const rowKey = this.commonProps.adapter.getRecordKey(row.original);
+      const isDragging = this.dragCtrl.isRowDragging(rowKey, row.index);
+      const rowClassMap = {
+        "table-row": true,
+        "table-row-selected": rowSelectedMap[row.id],
+        "table-row-dragging": !!isDragging,
+        [rowClassName]: true
+      };
+      const rowPropsStyleText = typeof rowPropsStyle === "string" ? rowPropsStyle : rowPropsStyle && typeof rowPropsStyle === "object" ? iterateStyles(rowPropsStyle) : void 0;
+      const rowStyles = [rowPropsStyleText, iterateStyles(styles)].filter(Boolean).join(";") || "";
+      return b`
+      <tr
+        class=${e(rowClassMap)}
+        role="table-row"
+        part="table-body-row"
+        data-row-key=${this.commonProps.adapter.getRecordKey(row.original)}
+        data-row-index=${row.index}
+        @click=${this.expandRowByClick ? () => row.getCanExpand() && row.toggleExpanded() : null}
+        style=${rowStyles}
+        ${spread_default(rowRestProps)}
+      >
+        ${c(
+        row.getVisibleCells(),
+        (cell) => cell.id,
+        (cell) => {
+          var _a2, _b2, _c, _e, _f;
+          const { column } = cell;
+          const columnDef = column.columnDef;
+          const align = (_a2 = columnDef.meta) == null ? void 0 : _a2.align;
+          const cellProps = ((_c = (_b2 = columnDef.meta) == null ? void 0 : _b2.slCell) == null ? void 0 : _c.call(_b2, cell.row.original, row.index)) || {};
+          const _d = cellProps, {
+            className: cellClassName,
+            style: cellStyle,
+            rowSpan: cellRowSpan,
+            colSpan: cellColSpan
+          } = _d, cellRestProps = __objRest(_d, [
+            "className",
+            "style",
+            "rowSpan",
+            "colSpan"
+          ]);
+          if (cellRowSpan === 0 || cellColSpan === 0) {
+            return b``;
+          }
+          const cellClassNameValue = typeof cellClassName === "string" ? cellClassName : "";
+          const { styles: pinningStyles, className: pinningClassName } = column.getIsPinned() ? getCellStickyStyle(column, this.commonProps.tableInstance) : {};
+          const cellClassMap = {
+            "table-row-cell": true,
+            [pinningClassName]: pinningClassName !== void 0
+          };
+          if ((_e = columnDef.meta) == null ? void 0 : _e.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;
+          let cellStyleResult = [cellStyleText, pinningStyles].filter(Boolean).join(";");
+          if (virtualized) {
+            cellStyleResult += `;width: ${column.getSize()}px`;
+          }
+          const mergeProps = __spreadValues({}, cellRestProps);
+          if (typeof cellRowSpan === "number" && cellRowSpan > 1) {
+            mergeProps.rowSpan = cellRowSpan;
+          }
+          if (typeof cellColSpan === "number" && cellColSpan > 1) {
+            mergeProps.colSpan = cellColSpan;
+          }
+          return b` <td
+              role="gridcell"
+              part="table-body-cell"
+              class="${e(cellClassMap)}"
+              style=${cellStyleResult || ""}
+              ${spread_default(mergeProps)}
+            >
+              <div
+                class="${e({
+            "table-cell-content": true,
+            "table-cell-ellipsis": !!((_f = columnDef.meta) == null ? void 0 : _f.ellipsis)
+          })}"
+                style=${o({
+            "text-align": align || void 0
+          })}
+              >
+                ${flexRender(columnDef.cell, cell.getContext())}
+              </div>
+            </td>`;
+        }
+      )}
+      </tr>
+      ${!this.commonProps.tree && ((_b = this.commonProps.expandProps) == null ? void 0 : _b.rowExpandable) && row.getIsExpanded() ? b`
+            <tr class="table-row table-expand-row" part="table-body-row">
+              <td colspan="${row.getVisibleCells().length}" class="table-row-cell" part="table-body-cell">
+                <slot name="${CUSTOM_ROW}-${this.commonProps.adapter.getRecordKey(row.original)}"></slot>
+              </td>
+            </tr>
+          ` : ""}
+    `;
+    };
+  }
+  firstUpdated() {
+    this.dragCtrl.initSortable();
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    const virtualizer = (_a = this.rowVirtualizerController) == null ? void 0 : _a.getVirtualizer();
+    const { tableScroll, handleBodyScroll, bordered, tableInstance, virtualized, rowDrag } = this.commonProps;
+    const { x, y } = tableScroll || {};
+    const columnResizeable = tableInstance.getAllLeafColumns().some((c2) => c2.getCanResize());
+    const style = {
+      "max-width": x ? getTableRect(x) : "100%",
+      "max-height": y ? getTableRect(y) : "100%",
+      width: columnResizeable && `${tableInstance.getTotalSize()}px`
+    };
+    const { rows } = tableInstance.getRowModel();
+    return b` <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": true
+    })}"
+          style=${o({
+      height: virtualized && y ? `${virtualizer == null ? void 0 : virtualizer.getTotalSize()}px` : "100%"
+    })}
+        >
+          ${renderColGroup(tableInstance)}
+          <tbody class="table-tbody" style="position: relative;" ${n2(this.dragCtrl.tbodyRef)}>
+            ${virtualized ? c(
+      (_c = (_b = this.rowVirtualizerController) == null ? void 0 : _b.getVirtualizer().getVirtualItems()) != null ? _c : [],
+      (item) => item.key,
+      (item) => {
+        const row = rows[item.index];
+        return this.renderTr(row, {
+          transform: `translateY(${item.start}px)`,
+          position: "absolute",
+          width: "100%"
+        });
+      }
+    ) : c(
+      rows,
+      (row) => row.id,
+      (row) => this.renderTr(row)
+    )}
+            ${rowDrag ? b`<tr class="table-bottom-placeholder" style="height: 2px;padding: 0;border: none;">
+                  <td colspan="${(_e = (_d = rows[0]) == null ? void 0 : _d.getVisibleCells().length) != null ? _e : 1}"></td>
+                </tr>` : ""}
+            ${this.dragCtrl.renderIndicator()}
+          </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-dragging {
+          opacity: 0.35;
+        }
+        .row-drag-handle {
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+          transition: opacity 120ms ease-in-out;
+        }
+        .table-row:hover .row-drag-handle,
+        .table-row.table-row-dragging .row-drag-handle {
+          opacity: 1;
+          visibility: visible;
+          pointer-events: auto;
+        }
+        .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);
+          background-color: var(--sl-table-cell-background);
+          vertical-align: middle;
+        }
+        .table-row.table-expand-row > .table-row-cell {
+          background-color: var(--sl-table-expand-row-background);
+        }
+        .table-row:hover > .table-row-cell {
+          background: var(--sl-table-row-background-hover);
+        }
+        .table-row.table-expand-row:hover > .table-row-cell {
+          background-color: var(--sl-table-expand-row-background);
+        }
+        :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: var(--sl-table-row-background-active-hover);
+        }
+        .row-expand-icon {
+          color: var(--sl-color-neutral-600);
+          &:hover {
+            color: var(--sl-color-primary-600);
+          }
+        }
+        .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;
+          color: var(--sl-table-default-text-color);
+          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
+          border-inline-start: none;
+        }
+        .table-cell-content {
+          line-height: var(--sl-line-height-dense);
+          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);
+__decorateClass([
+  n({ type: Object })
+], BodyTable.prototype, "rowVirtualizerController", 2);
+BodyTable.define("sl-table-body-table");
+
+export {
+  BodyTable
+};

package/cdn/chunks/chunk.HKXJFZT6.js

@@ -0,0 +1,85 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/split-panel/split-panel.styles.ts
+var split_panel_styles_default = i`
+  :host {
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sl-color-neutral-200);
+    color: var(--sl-color-neutral-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+
+export {
+  split_panel_styles_default
+};

package/cdn/chunks/chunk.HL4Z5PHF.js

@@ -0,0 +1,127 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.YOVO5FAJ.js";
+import {
+  o
+} from "./chunk.OJXBTTLD.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.TFKPW5FV.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+var SlBreadcrumbItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "sl-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (hasDropdown) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? b`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${o(this.target ? this.target : void 0)}"
+                rel=${o(this.target ? this.rel : void 0)}
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </a>
+            ` : ""}
+        ${this.renderType === "button" ? b`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </button>
+            ` : ""}
+        ${this.renderType === "dropdown" ? b`
+              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+SlBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+__decorateClass([
+  e2("slot:not([name])")
+], SlBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], SlBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  n()
+], SlBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], SlBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], SlBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], SlBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  SlBreadcrumbItem
+};

package/cdn/chunks/chunk.HVK3NIVD.js

@@ -0,0 +1,132 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/image/image.styles.ts
+var image_styles_default = i`
+  :host {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .image {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .image__img {
+    width: 100%;
+    height: auto;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .image__img--error {
+    cursor: default;
+  }
+
+  .image__img--disabled {
+    cursor: default;
+  }
+
+  /* Placeholder */
+  .image__placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--sl-transition-slow, 300ms) ease-in-out;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  .image__placeholder--default {
+    background-color: var(--sl-color-neutral-100, #f5f5f5);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 30%;
+  }
+
+  .image__placeholder--loaded {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .image__placeholder-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Cover overlay */
+  .image__cover {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 1);
+    background: rgba(0, 0, 0, 0.46);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity var(--sl-transition-slow, 300ms);
+  }
+
+  .image:hover .image__cover {
+    opacity: 1;
+  }
+
+  .image__cover--top {
+    inset: 0 0 auto 0;
+    justify-content: center;
+  }
+
+  .image__cover--bottom {
+    inset: auto 0 0 0;
+    justify-content: center;
+  }
+
+  .image__cover-default {
+    display: flex;
+    align-items: center;
+    gap: var(--sl-spacing-x-small, 0.5rem);
+    font-size: var(--sl-font-size-small, 14px);
+  }
+
+  .image__cover-default svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
+
+  /* Fallback */
+  .image__fallback {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .image__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sl-color-neutral-100, #f5f5f5);
+    color: var(--sl-color-neutral-500, #999);
+    font-size: var(--sl-font-size-small, 14px);
+  }
+
+  .image__error svg {
+    width: 48px;
+    height: 48px;
+    fill: var(--sl-color-neutral-300, #ccc);
+  }
+`;
+
+export {
+  image_styles_default
+};