@kdcloudjs/shoelace 1.0.34 → 1.0.36

package/dist/chunks/chunk.F2PDGG3D.js

@@ -0,0 +1,231 @@
+import {
+  timepicker_styles_default
+} from "./chunk.72LPYABC.js";
+import {
+  PickerBase
+} from "./chunk.5MRB7LIN.js";
+import {
+  SlDatePanel
+} from "./chunk.EL47DM7J.js";
+import {
+  SlInput
+} from "./chunk.VVMWNWF4.js";
+import {
+  SlPopup
+} from "./chunk.Z6AETZT4.js";
+import {
+  SlDrawer
+} from "./chunk.LOYVOIBD.js";
+import {
+  formatDatetime,
+  parseDatetime
+} from "./chunk.X2PKLPVG.js";
+import {
+  SlTimePanel
+} from "./chunk.NGYRGP5T.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/timepicker/timepicker.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlTimepicker = class extends PickerBase {
+  constructor() {
+    super(...arguments);
+    this.format = "HH:mm:ss";
+  }
+  handleOpenChange() {
+    if (this.open) {
+      if (this.timePanel) {
+        requestAnimationFrame(async () => {
+          await this.timePanel.resetScroll();
+        });
+      }
+    } else {
+      this.handleValueChange();
+    }
+  }
+  parseValue(value) {
+    return parseDatetime(value, this.format);
+  }
+  formatValue(date) {
+    return formatDatetime(date, this.format);
+  }
+  isValidFormat(value) {
+    if (this.format === "HH:mm:ss") {
+      return /^\d{2}:\d{2}:\d{2}$/.test(value);
+    }
+    return !!this.parseValue(value);
+  }
+  getInputPattern() {
+    return this.pattern;
+  }
+  async handleInputInput(event) {
+    event.stopPropagation();
+    const target = event.target;
+    const value = target.value;
+    if (this.isValidFormat(value) && this.parseValue(value) || !this.open && value === "") {
+      this.updateValue(value, { emitInput: true });
+    }
+    await this.updateComplete;
+    if (!this.open && value !== "") {
+      this.open = true;
+    }
+  }
+  handleTimeChange(event) {
+    const selectedDate = event.detail.value;
+    const formattedTime = this.formatValue(selectedDate);
+    this.updateValue(formattedTime, { emitInput: true });
+  }
+  handleDateChange(event) {
+    const selectedDate = event.detail.date;
+    const formattedTime = this.formatValue(selectedDate);
+    this.updateValue(formattedTime, { emitInput: true, emitChange: false });
+  }
+  handleTimeSelect(event) {
+    event.stopPropagation();
+    const selectedDate = event.detail.value;
+    const formattedTime = formatDatetime(selectedDate, this.format);
+    this.updateValue(formattedTime, { emitInput: true, emitChange: true });
+    this.open = false;
+  }
+  handleInputChange(event) {
+    event.stopPropagation();
+    const target = event.target;
+    this.updateValue(target.value, { emitInput: true, emitChange: !this.open });
+  }
+  handleInputKeyDown(event) {
+    super.handleInputKeyDown(event);
+    if (event.key === "Enter") {
+      const parsedDate = this.parseValue(this.value);
+      if (this.open && this.timePanel) {
+        event.stopPropagation();
+        const selectedDate = this.timePanel.value;
+        if (selectedDate) {
+          const formattedTime = this.formatValue(selectedDate);
+          this.updateValue(formattedTime, { emitChange: true });
+          this.open = false;
+        }
+        return;
+      }
+      if (parsedDate) {
+        const formattedTime = this.formatValue(parsedDate);
+        this.updateValue(formattedTime, { emitChange: true });
+        this.open = false;
+      }
+    }
+  }
+  getInputSuffixIconName() {
+    return "clock";
+  }
+  shouldRevertOnBlur(wasOpen) {
+    return wasOpen;
+  }
+  handleValueChange() {
+    const validDate = this.parseValue(this.value);
+    if (!this.open) {
+      if (validDate) {
+        const formattedTime = formatDatetime(validDate, this.format);
+        this.lastValidValue = formattedTime;
+      } else if (this.value === "") {
+        this.lastValidValue = "";
+      }
+    }
+    if (!this.input) {
+      return;
+    }
+    this.formControlController.updateValidity();
+  }
+  render() {
+    if (this.isMobile) {
+      return html`
+        ${this.renderInput()}
+        <sl-date-panel
+          exportparts="
+            time-panel-base: time-base,
+            time-panel-columns: time-columns,
+            time-panel-column: time-column,
+            time-panel-item: time-item,
+            time-panel-footer: time-footer
+          "
+          .value=${this.value}
+          .open=${this.open}
+          type="time"
+          @sl-date-change=${this.handleDateChange}
+          @sl-confirm=${this.handleMobileConfirm}
+          @sl-cancel=${this.handleMobileCancel}
+          @sl-clear=${this.handleMobileClear}
+        ></sl-date-panel>
+      `;
+    }
+    const parsedDate = this.parseValue(this.value) ? this.parseValue(this.value) : this.parseValue(this.lastValidValue);
+    return html`
+      <sl-popup
+        part="popup"
+        class="timepicker__popup"
+        ?active=${this.open}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        placement="bottom-start"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        ${this.renderInput("anchor")}
+
+        <sl-time-panel
+          part="panel"
+          exportparts="
+            base: time-base,
+            header:time-header,
+            columns:time-columns,
+            column:time-column,
+            item:time-item,
+            footer:time-footer
+          "
+          class="timepicker__panel"
+          .value=${parsedDate}
+          no-header
+          with-footer
+          @sl-change=${this.handleTimeChange}
+          @sl-select=${this.handleTimeSelect}
+          @mousedown=${(event) => event.preventDefault()}
+        ></sl-time-panel>
+      </sl-popup>
+    `;
+  }
+};
+SlTimepicker.styles = [component_styles_default, timepicker_styles_default];
+SlTimepicker.dependencies = {
+  "sl-input": SlInput,
+  "sl-popup": SlPopup,
+  "sl-time-panel": SlTimePanel,
+  "sl-date-panel": SlDatePanel,
+  "sl-drawer": SlDrawer
+};
+__decorateClass([
+  query("sl-time-panel")
+], SlTimepicker.prototype, "timePanel", 2);
+__decorateClass([
+  property()
+], SlTimepicker.prototype, "format", 2);
+__decorateClass([
+  property()
+], SlTimepicker.prototype, "pattern", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlTimepicker.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("value")
+], SlTimepicker.prototype, "handleValueChange", 1);
+
+export {
+  SlTimepicker
+};

package/dist/chunks/chunk.F3WEPU7Y.js

@@ -0,0 +1,11 @@
+import {
+  SlPopup
+} from "./chunk.Z6AETZT4.js";
+
+// src/components/popup/popup.ts
+var popup_default = SlPopup;
+SlPopup.define("sl-popup");
+
+export {
+  popup_default
+};

package/dist/chunks/chunk.FDURX5DU.js

@@ -0,0 +1,11 @@
+import {
+  SlResizeObserver
+} from "./chunk.4NLJ4UBX.js";
+
+// src/components/resize-observer/resize-observer.ts
+var resize_observer_default = SlResizeObserver;
+SlResizeObserver.define("sl-resize-observer");
+
+export {
+  resize_observer_default
+};

package/dist/chunks/chunk.FFNBH2NP.js

@@ -0,0 +1,24 @@
+import {
+  SlImageComparer
+} from "./chunk.BKKHNTKO.js";
+
+// src/react/image-comparer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-image-comparer";
+SlImageComparer.define("sl-image-comparer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlImageComparer,
+  react: React,
+  events: {
+    onSlChange: "sl-change"
+  },
+  displayName: "SlImageComparer"
+});
+var image_comparer_default = reactWrapper;
+
+export {
+  image_comparer_default
+};

package/dist/chunks/chunk.FNV7I2JG.js

@@ -0,0 +1,11 @@
+import {
+  SlRange
+} from "./chunk.LIUJQZQK.js";
+
+// src/components/range/range.ts
+var range_default = SlRange;
+SlRange.define("sl-range");
+
+export {
+  range_default
+};

package/dist/chunks/chunk.FXKHTMW3.js

@@ -0,0 +1,11 @@
+import {
+  SlSpace
+} from "./chunk.4BCTC6YP.js";
+
+// src/components/space/space.ts
+var space_default = SlSpace;
+SlSpace.define("sl-space");
+
+export {
+  space_default
+};

package/dist/chunks/chunk.G364MVQI.js

@@ -0,0 +1,320 @@
+import {
+  TreeTableController
+} from "./chunk.D6J3AO2B.js";
+import {
+  RowDragController
+} from "./chunk.W6PSWQBH.js";
+import {
+  tableCommonCss
+} from "./chunk.YETPLLCY.js";
+import {
+  spread_default
+} from "./chunk.26MJV2ME.js";
+import {
+  getCellStickyStyle
+} from "./chunk.HE2PW7CL.js";
+import {
+  renderColGroup
+} from "./chunk.B2CVELX5.js";
+import {
+  getTableRect,
+  iterateStyles
+} from "./chunk.OKEPQD34.js";
+import {
+  CUSTOM_ROW
+} from "./chunk.QIOQJBWC.js";
+import {
+  ShoelaceElement
+} from "./chunk.7KYGZCEZ.js";
+import {
+  __decorateClass,
+  __objRest,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/table/body-table.ts
+import { classMap } from "lit/directives/class-map.js";
+import { flexRender } from "@tanstack/lit-table";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+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 html`
+      <tr
+        class=${classMap(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)}
+      >
+        ${repeat(
+        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 html``;
+          }
+          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 html` <td
+              role="gridcell"
+              part="table-body-cell"
+              class="${classMap(cellClassMap)}"
+              style=${cellStyleResult || ""}
+              ${spread_default(mergeProps)}
+            >
+              <div
+                class="${classMap({
+            "table-cell-content": true,
+            "table-cell-ellipsis": !!((_f = columnDef.meta) == null ? void 0 : _f.ellipsis)
+          })}"
+                style=${styleMap({
+            "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() ? html`
+            <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((c) => c.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 html` <div
+        style=${iterateStyles(style)}
+        class="table-body"
+        part="table-body"
+        ${ref(this.bodyRef)}
+        @scroll=${handleBodyScroll}
+      >
+        <table
+          class="${classMap({
+      table: true,
+      "table-bordered": bordered,
+      "table-fixed": true
+    })}"
+          style=${styleMap({
+      height: virtualized && y ? `${virtualizer == null ? void 0 : virtualizer.getTotalSize()}px` : "100%"
+    })}
+        >
+          ${renderColGroup(tableInstance)}
+          <tbody class="table-tbody" style="position: relative;" ${ref(this.dragCtrl.tbodyRef)}>
+            ${virtualized ? repeat(
+      (_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%"
+        });
+      }
+    ) : repeat(
+      rows,
+      (row) => row.id,
+      (row) => this.renderTr(row)
+    )}
+            ${rowDrag ? html`<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: hsl(212.29999999999995, 100%, 95.5%);
+        }
+        .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([
+  property({ type: Object })
+], BodyTable.prototype, "bodyRef", 2);
+__decorateClass([
+  property({ type: Function })
+], BodyTable.prototype, "emptyTemplate", 2);
+__decorateClass([
+  property({ type: Object })
+], BodyTable.prototype, "commonProps", 2);
+__decorateClass([
+  property({ type: Boolean })
+], BodyTable.prototype, "expandRowByClick", 2);
+__decorateClass([
+  property({ type: Object })
+], BodyTable.prototype, "rowVirtualizerController", 2);
+BodyTable.define("sl-table-body-table");
+
+export {
+  BodyTable
+};

package/dist/chunks/chunk.GOZSZ3WI.js

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

package/dist/chunks/chunk.GUTJE66G.js

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

package/dist/chunks/chunk.H2EBAUT4.js

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

package/dist/chunks/chunk.H36WNFYK.js

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