@kdcloudjs/shoelace 1.0.9 → 1.0.11

package/dist/chunks/chunk.FIVKTUOJ.js

@@ -1,738 +0,0 @@
-import {
-  getDragRow
-} from "./chunk.DSRLY2FD.js";
-import {
-  getExpendRow
-} from "./chunk.RJRDQHBH.js";
-import {
-  getDefaultFilters
-} from "./chunk.TF3IWFSX.js";
-import {
-  convertRowSelectionState,
-  getRowSelectionOptions,
-  getSelectionColumn
-} from "./chunk.IKG7GFWI.js";
-import {
-  getDefaultSorting
-} from "./chunk.WQTJ57OT.js";
-import {
-  table_style_default
-} from "./chunk.GVDYPTE6.js";
-import {
-  getDefaultPinning
-} from "./chunk.6BPAJGHW.js";
-import {
-  getClientHeight,
-  getScrollHeight
-} from "./chunk.UBEFQ5SQ.js";
-import {
-  CUSTOM_CELL,
-  CUSTOM_ROW,
-  VIRTUALIZED_DEFAULT
-} from "./chunk.NCE7XJQI.js";
-import {
-  SlRadio
-} from "./chunk.3N5TNFZE.js";
-import {
-  SlPagination
-} from "./chunk.MN6YR3FC.js";
-import {
-  SlCheckbox
-} from "./chunk.S632BJPH.js";
-import {
-  ShoelaceElement
-} from "./chunk.45F4OUGN.js";
-import {
-  __decorateClass,
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/table/table.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  TableController
-} from "@tanstack/lit-table";
-import { VirtualizerController } from "@tanstack/lit-virtual";
-import { createRef, ref } from "lit/directives/ref.js";
-import { debounce, get, some } from "lodash";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { state } from "lit/decorators/state.js";
-var SlTable = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.tableController = new TableController(this);
-    this.rowKey = "key";
-    this.columns = [];
-    this.dataSource = [];
-    this.loading = false;
-    this.bordered = false;
-    this.direction = "ltr";
-    this.showHeader = true;
-    this.tableScroll = {};
-    this.enableColumnResizing = false;
-    this.rowDrag = false;
-    this.rowSelectedMap = {};
-    this.expandedMap = {};
-    this.sorting = [];
-    this.columnFilters = [];
-    this.tableWidth = 0;
-    this.columnSizing = {};
-    this.pageIndex = 0;
-    this.columnPinning = {
-      left: ["drag", "expend", "select"],
-      right: []
-    };
-    this.tableWrapRef = createRef();
-    this.headerWrapRef = createRef();
-    this.bodyWrapRef = createRef();
-    this.syncing = false;
-    /*
-    生命周期 end
-    **/
-    this.warnIfNoKey = () => {
-      if (some(this.dataSource, (record) => this.adapter.getRecordKey(record) === void 0)) {
-        console.error(
-          'You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!'
-        );
-      }
-    };
-    this.setColumnWidth = () => {
-      const head = this.headerWrapRef.value;
-      if (!head) return;
-      const ths = head == null ? void 0 : head.querySelectorAll("th");
-      if (ths) {
-        const widths = Array.from(ths).reduce(
-          (acc, th) => {
-            const { width } = th.getBoundingClientRect();
-            const colKey = th.dataset.colKey;
-            return __spreadProps(__spreadValues({}, acc), {
-              [colKey]: width
-            });
-          },
-          {}
-        );
-        this.columnSizing = widths;
-      }
-    };
-    this.handleBodyScroll = (e) => {
-      var _a;
-      this.handleBodyScrollLeft(e);
-      this.setScrollPositionClassName();
-      if ((_a = this.virtualized) == null ? void 0 : _a.onScroll) {
-        this.virtualized.onScroll(e);
-      }
-    };
-    this.handleBodyScrollLeft = (e) => {
-      if (this.syncing) return;
-      const target = e.currentTarget;
-      const head = this.headerWrapRef.value;
-      const body = this.bodyWrapRef.value;
-      if (!head || !body) return;
-      this.syncing = true;
-      if (target === body) {
-        head.scrollLeft = body.scrollLeft;
-      } else if (target === head) {
-        body.scrollLeft = head.scrollLeft;
-      }
-      requestAnimationFrame(() => {
-        this.syncing = false;
-      });
-    };
-    this.handleWindowResize = () => {
-      this.syncTableWidth();
-      this.setScrollPositionClassName();
-      this.setScrollBarStyle();
-    };
-    this.syncTableWidth = () => {
-      var _a;
-      if ((_a = this.tableWrapRef) == null ? void 0 : _a.value) {
-        this.tableWidth = this.tableWrapRef.value.getBoundingClientRect().width;
-      }
-    };
-    this.setScrollBarStyle = () => {
-      setTimeout(() => {
-        const bodyWrapper = this.bodyWrapRef.value;
-        const headWrapper = this.headerWrapRef.value;
-        if (!bodyWrapper || !headWrapper) return;
-        const hasVerticalScroll = getScrollHeight(bodyWrapper) > getClientHeight(bodyWrapper);
-        if (hasVerticalScroll) {
-          headWrapper.style.overflowY = "scroll";
-        } else {
-          headWrapper.style.overflowY = "auto";
-        }
-      }, 0);
-    };
-    this.setScrollPositionClassName = () => {
-      const tableBody = this.bodyWrapRef.value;
-      const tableWrapper = this.tableWrapRef.value;
-      if (!tableBody || !tableWrapper) return;
-      const { scrollLeft, scrollWidth, clientWidth } = tableBody;
-      const scrollRange = scrollWidth - clientWidth;
-      const classList = tableWrapper.classList;
-      const startClass = "table-scroll-position-left";
-      const middleClass = "table-scroll-position-middle";
-      const endClass = "table-scroll-position-right";
-      if (scrollWidth <= clientWidth) {
-        classList.remove(startClass, endClass, middleClass);
-        return;
-      }
-      const isRtl = this.direction === "rtl";
-      const scrollLeftAbs = Math.abs(scrollLeft);
-      let isStart = false;
-      let isEnd = false;
-      if (isRtl) {
-        isStart = scrollLeftAbs <= 1;
-        isEnd = scrollLeftAbs >= scrollRange - 1;
-      } else {
-        isStart = scrollLeft <= 0;
-        isEnd = scrollLeft >= scrollRange - 1;
-      }
-      if (isStart) {
-        classList.add(startClass);
-        classList.remove(middleClass, endClass);
-      } else if (isEnd) {
-        classList.remove(startClass, middleClass);
-        classList.add(endClass);
-      } else {
-        classList.remove(startClass, endClass);
-        classList.add(middleClass);
-      }
-    };
-    this.handleColumnSizingChange = (updaterOrValue) => {
-      var _a;
-      const next = typeof updaterOrValue === "function" ? updaterOrValue(this.columnSizing) : updaterOrValue;
-      const clamped = {};
-      for (const key in next) {
-        const v = next[key];
-        clamped[key] = Math.min(500, Math.max(60, v));
-      }
-      this.columnSizing = clamped;
-      (_a = this.onColumnResize) == null ? void 0 : _a.call(this, __spreadValues({}, clamped));
-    };
-    this.generateCustomCellSlot = (filteredRows) => {
-      const hasSlotColumns = this.columns.filter((col) => col.slot);
-      if (!hasSlotColumns.length) return "";
-      return html`
-      ${hasSlotColumns.map(
-        (col) => filteredRows.map((row) => {
-          const slotKey = `${CUSTOM_CELL}-${col.dataIndex}-${this.adapter.getRecordKey(row.original)}`;
-          return html`<slot slot="${slotKey}" name="${slotKey}">${row.original[col.dataIndex]}</slot>`;
-        })
-      )}
-    `;
-    };
-    this.generateCustomRowSlot = (rows) => {
-      if (!this.expandProps) return "";
-      return html`
-      ${rows.map((row) => {
-        var _a, _b, _c;
-        const rowSlotKey = `${CUSTOM_ROW}-${this.adapter.getRecordKey(row.original)}`;
-        if (!((_a = this.expandProps) == null ? void 0 : _a.expendableRowKeys)) return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
-        if ((_c = (_b = this.expandProps) == null ? void 0 : _b.expendableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey])) {
-          return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
-        } else {
-          return null;
-        }
-      })}
-    `;
-    };
-    this.handleRowSelectionChange = (updaterOrValue) => {
-      if (typeof updaterOrValue === "function") {
-        this.rowSelectedMap = updaterOrValue(this.rowSelectedMap);
-      } else {
-        this.rowSelectedMap = updaterOrValue;
-      }
-    };
-    this.handleSortingChange = (updaterOrValue) => {
-      if (typeof updaterOrValue === "function") {
-        this.sorting = updaterOrValue(this.sorting);
-      } else {
-        this.sorting = updaterOrValue;
-      }
-      window == null ? void 0 : window.requestAnimationFrame(() => {
-        this.handleChange({
-          changeType: "sorter"
-        });
-      });
-    };
-    this.handleColumnFiltersChange = (updaterOrValue) => {
-      if (typeof updaterOrValue === "function") {
-        this.columnFilters = updaterOrValue(this.columnFilters);
-      } else {
-        this.columnFilters = updaterOrValue;
-      }
-      window == null ? void 0 : window.requestAnimationFrame(() => {
-        this.handleChange({
-          changeType: "filters"
-        });
-      });
-    };
-    this.handleFilterDropdownChange = (e) => {
-      var _a;
-      const detail = e.detail;
-      const { key, visible } = detail || {};
-      const col = this.columns.find((c) => c.dataIndex === key);
-      (_a = col == null ? void 0 : col.onFilterDropdownVisibleChange) == null ? void 0 : _a.call(col, visible);
-    };
-    this.getRowCanExpand = (row) => {
-      var _a, _b, _c;
-      if (!((_a = this.expandProps) == null ? void 0 : _a.expendableRowKeys)) return true;
-      return Boolean((_c = (_b = this.expandProps) == null ? void 0 : _b.expendableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey]));
-    };
-    this.expendedChange = (updater) => {
-      const newExpanded = typeof updater === "function" ? updater(this.expandedMap) : updater;
-      this.expandedMap = newExpanded;
-      this.requestUpdate();
-    };
-    this.handlePaginationChange = (event) => {
-      var _a, _b, _c;
-      const { pageNumber, pageSize } = event.detail;
-      (_b = (_a = this.pagination) == null ? void 0 : _a["sl-page-change"]) == null ? void 0 : _b.call(_a, event);
-      this.pagination = __spreadProps(__spreadValues({}, this.pagination), {
-        defaultCurrentPage: pageNumber,
-        pageSize: pageSize || 20
-      });
-      this.pageIndex = pageNumber - 1;
-      this.handleChange({
-        pagination: {
-          pageNumber: pageNumber || 1,
-          pageSize: pageSize || 20,
-          total: ((_c = this.pagination) == null ? void 0 : _c.total) || this.dataSource.length
-        },
-        type: "pagination"
-      });
-    };
-  }
-  get adapter() {
-    return {
-      getRecordKey: (record) => {
-        if (!record) {
-          return void 0;
-        }
-        return get(record, this.rowKey);
-      },
-      getSortIsControlled: () => {
-        return some(this.columns, (col) => !!col.sortOrder);
-      },
-      getTableWidth: () => this.tableWidth,
-      getFilterIsControlled: () => some(this.columns, (col) => !!col.filteredValue),
-      tableScrollToTop: () => {
-        var _a, _b;
-        return ((_a = this.tableScroll) == null ? void 0 : _a.y) ? (_b = this.bodyWrapRef.value) == null ? void 0 : _b.scrollTo({ top: 0 }) : void 0;
-      }
-    };
-  }
-  /*
-  生命周期 start
-  **/
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("resize", debounce(this.handleWindowResize, 150));
-    this.syncTableWidth();
-    this.setScrollBarStyle();
-    this.setScrollPositionClassName();
-  }
-  disconnectedCallback() {
-    window.removeEventListener("resize", debounce(this.handleWindowResize, 150));
-    super.disconnectedCallback();
-  }
-  willUpdate(changedProperties) {
-    var _a;
-    this.warnIfNoKey();
-    if (changedProperties.has("rowSelection")) {
-      this.rowSelectedMap = convertRowSelectionState(((_a = this.rowSelection) == null ? void 0 : _a.defaultSelectedRowKeys) || []);
-    }
-    if (changedProperties.has("columns")) {
-      const defaultSorting = getDefaultSorting(this.columns);
-      if (defaultSorting.length > 0) {
-        this.sorting = defaultSorting;
-      }
-      const defaultFilters = getDefaultFilters(this.columns);
-      if (defaultFilters.length > 0) {
-        this.columnFilters = defaultFilters;
-      }
-      const defaultPinning = getDefaultPinning(this.columns);
-      if (defaultPinning.left.length > 0 || defaultPinning.right.length > 0) {
-        this.columnPinning = defaultPinning;
-      }
-    }
-    if (changedProperties.has("dataSource") || changedProperties.has("expandProps")) {
-      this.dataSource.forEach((row) => {
-        var _a2, _b;
-        if (!((_a2 = this.expandProps) == null ? void 0 : _a2.rowExpandable)) return;
-        const rowKey = row[this.rowKey];
-        const expandAllMatch = this.expandProps.defaultExpandAllRows && (!this.expandProps.expendableRowKeys || this.expandProps.expendableRowKeys.includes(rowKey));
-        const expandByKeys = (_b = this.expandProps.defaultExpandedRowKeys) == null ? void 0 : _b.includes(rowKey);
-        if (expandAllMatch || expandByKeys) {
-          this.expandedMap[rowKey] = true;
-        }
-      });
-    }
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    window.requestAnimationFrame(() => {
-      this.setScrollPositionClassName();
-    });
-  }
-  async firstUpdated() {
-    var _a, _b;
-    const bodyTable = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("sl-table-body-table");
-    if (bodyTable) {
-      await bodyTable.updateComplete;
-    }
-    const headTable = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sl-table-head-table");
-    if (headTable) {
-      await headTable.updateComplete;
-    }
-    if (this.virtualized) {
-      const scrollElement = this.bodyWrapRef.value;
-      const _c = this.virtualized, { itemHeight, overscan } = _c, rest = __objRest(_c, ["itemHeight", "overscan"]);
-      this.rowVirtualizerController = new VirtualizerController(this, __spreadValues({
-        count: this.dataSource.length,
-        getScrollElement: () => scrollElement,
-        estimateSize: () => itemHeight || VIRTUALIZED_DEFAULT.itemHeight,
-        overscan: overscan || VIRTUALIZED_DEFAULT.overscan
-      }, rest));
-      this.requestUpdate();
-    }
-    this.setColumnWidth();
-  }
-  renderTable(tableInstance) {
-    var _a, _b;
-    const currentPageRows = tableInstance.getPaginationRowModel().rows;
-    const filteredRows = tableInstance.getFilteredRowModel().rows;
-    const commonProps = {
-      direction: this.direction,
-      bordered: !!this.bordered,
-      rowSelectedMap: this.rowSelectedMap,
-      tableScroll: this.tableScroll,
-      handleBodyScroll: this.handleBodyScroll,
-      sorting: this.sorting,
-      dataSource: this.dataSource,
-      columns: this.columns,
-      adapter: this.adapter,
-      tableInstance,
-      onHeaderRow: this.onHeaderRow,
-      onRow: this.onRow,
-      virtualized: this.virtualized,
-      rowDrag: this.rowDrag,
-      onRowReorder: (detail) => {
-        var _a2;
-        if (this.onRowReorder) this.onRowReorder(detail);
-        if ((_a2 = detail.newRows) == null ? void 0 : _a2.length) {
-          this.dataSource = detail.newRows;
-          this.requestUpdate();
-        }
-      }
-    };
-    const emptyTemplate = this.dataSource.length === 0 || currentPageRows.length === 0 || filteredRows.length === 0 ? this.renderEmpty() : "";
-    const headTable = this.showHeader ? html`<sl-table-head-table
-          exportparts="table-head, table-head-row, table-head-cell"
-          .commonProps=${commonProps}
-          .headerRef=${this.headerWrapRef}
-          @sl-filter-dropdown-change=${this.handleFilterDropdownChange}
-        ></sl-table-head-table>` : "";
-    const bodyTable = html`<sl-table-body-table
-      exportparts="table-body, table-body-row, table-body-cell"
-      .bodyRef=${this.bodyWrapRef}
-      .emptyTemplate=${emptyTemplate}
-      .commonProps=${commonProps}
-      .rowVirtualizerController=${this.rowVirtualizerController}
-      .expandRowByClick=${((_a = this.expandProps) == null ? void 0 : _a.rowExpandable) && ((_b = this.expandProps) == null ? void 0 : _b.expandRowByClick)}
-    >
-      <slot name="table-empty" slot="table-empty">暂无数据</slot>
-      ${this.generateCustomRowSlot(filteredRows)} ${this.generateCustomCellSlot(filteredRows)}
-    </sl-table-body-table>`;
-    return html`${headTable} ${bodyTable}`;
-  }
-  renderEmpty() {
-    return html` <div class="table-placeholder"><slot name="table-empty"></slot></div>`;
-  }
-  renderMainTable(tableInstance) {
-    const table = html`${this.renderTable(tableInstance)}`;
-    return table;
-  }
-  renderPagination(place) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    if (!this.pagination) return "";
-    const pos = ((_a = this.pagination) == null ? void 0 : _a.position) || "bottomEnd";
-    const isTop = pos.startsWith("top");
-    if (place === "top" && !isTop || place === "bottom" && isTop) return "";
-    const justify = pos.endsWith("Start") ? "flex-start" : pos.endsWith("Center") ? "center" : "flex-end";
-    const margin = place === "top" ? "0 0 8px 0" : "8px 0 0 0";
-    const style = `display:flex; justify-content:${justify}; margin:${margin};`;
-    return html`
-      <div class="pagination-container" style="${style}">
-        <sl-pagination
-          class="pagination"
-          @sl-page-change=${this.handlePaginationChange}
-          .total=${((_b = this.pagination) == null ? void 0 : _b.total) || this.dataSource.length}
-          .currentPage=${(_c = this.pagination) == null ? void 0 : _c.currentPage}
-          .defaultCurrentPage=${((_d = this.pagination) == null ? void 0 : _d.defaultCurrentPage) || 1}
-          .pageSize=${((_e = this.pagination) == null ? void 0 : _e.pageSize) || 20}
-          .disabled=${((_f = this.pagination) == null ? void 0 : _f.disabled) || false}
-          .className=${(_g = this.pagination) == null ? void 0 : _g.className}
-          .pageSizeOpts=${((_h = this.pagination) == null ? void 0 : _h.pageSizeOpts) || [10, 20, 50, 100]}
-          .simpleMode=${((_i = this.pagination) == null ? void 0 : _i.simpleMode) || false}
-        >
-        </sl-pagination>
-      </div>
-    `;
-  }
-  // 生成lit-table所需要的columns数组
-  buildColumns() {
-    var _a, _b, _c;
-    const _columns = [];
-    const columnHelper = createColumnHelper();
-    for (const col of this.columns) {
-      const {
-        dataIndex,
-        width,
-        align,
-        className,
-        ellipsis,
-        sorter,
-        filters,
-        filterMultiple,
-        defaultFilters,
-        onFilter,
-        filterDropdownProps,
-        onFilterDropdownVisibleChange
-      } = col;
-      const canSort = sorter && typeof sorter === "function";
-      const canFilter = filters && filters.length > 0;
-      const newCol = columnHelper.accessor((row) => row[dataIndex], {
-        id: dataIndex,
-        meta: {
-          align,
-          className,
-          ellipsis,
-          filters,
-          filterMultiple,
-          defaultFilters,
-          filterDropdownProps,
-          onFilterDropdownVisibleChange,
-          onCell: col.onCell,
-          onHeaderCell: col.onHeaderCell
-        },
-        cell: (info) => {
-          if (col.slot) {
-            const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
-            return html`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
-          }
-          return info.getValue();
-        },
-        header: () => col.title || dataIndex,
-        size: width
-      });
-      newCol.enableResizing = (_a = col.enableResizing) != null ? _a : this.enableColumnResizing;
-      if (newCol.enableResizing) {
-        newCol.minSize = 60;
-        newCol.maxSize = 500;
-      }
-      if (canSort) {
-        newCol.sortingFn = (rowA, rowB) => sorter(rowA.original, rowB.original);
-      }
-      if (canFilter && onFilter) {
-        newCol.filterFn = (row, _columnId, filterValue) => {
-          if (Array.isArray(filterValue)) {
-            return filterValue.some((val) => !!onFilter(val, row.original));
-          }
-          return !!onFilter(filterValue, row.original);
-        };
-      }
-      newCol.enableSorting = !!canSort;
-      newCol.enableColumnFilter = !!canFilter;
-      _columns.push(newCol);
-    }
-    if (this.rowSelection && !this.rowSelection.hidden) {
-      _columns.unshift(getSelectionColumn(this.rowSelection, this.rowKey));
-    }
-    if ((_b = this == null ? void 0 : this.expandProps) == null ? void 0 : _b.rowExpandable) _columns.unshift(getExpendRow((_c = this.expandProps) == null ? void 0 : _c.expandRowByClick));
-    if (this == null ? void 0 : this.rowDrag) _columns.unshift(getDragRow());
-    return _columns;
-  }
-  // 构建 tableState
-  buildTableState() {
-    var _a;
-    const rowSelectionOptions = getRowSelectionOptions({
-      rowSelection: this.rowSelection
-    });
-    const cols = this.buildColumns();
-    const instance = this.tableController.table(__spreadProps(__spreadValues({
-      columns: cols,
-      data: this.dataSource,
-      enableColumnResizing: this.enableColumnResizing,
-      columnResizeMode: "onChange",
-      columnResizeDirection: this.direction,
-      manualPagination: !this.pagination,
-      getRowId: (row) => row[this.rowKey],
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      state: {
-        rowSelection: this.rowSelectedMap,
-        sorting: this.sorting,
-        columnFilters: this.columnFilters,
-        columnSizing: this.columnSizing,
-        pagination: {
-          pageIndex: this.pageIndex,
-          pageSize: ((_a = this.pagination) == null ? void 0 : _a.pageSize) || 20
-        },
-        expanded: this.expandedMap,
-        columnPinning: this.columnPinning
-      },
-      onColumnSizingChange: this.handleColumnSizingChange,
-      onSortingChange: this.handleSortingChange,
-      onColumnFiltersChange: this.handleColumnFiltersChange
-    }, rowSelectionOptions), {
-      onRowSelectionChange: this.handleRowSelectionChange,
-      // 受控排序
-      manualSorting: this.adapter.getSortIsControlled(),
-      manualFiltering: this.adapter.getFilterIsControlled(),
-      getRowCanExpand: this.getRowCanExpand,
-      onExpandedChange: this.expendedChange
-    }));
-    return instance;
-  }
-  handleChange(extra) {
-    var _a;
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: __spreadValues({
-          sorting: this.sorting,
-          columnFilters: this.columnFilters
-        }, extra)
-      })
-    );
-    if (["sorting", "filters", "pagination"].includes(extra == null ? void 0 : extra.type) && ((_a = this.tableScroll) == null ? void 0 : _a.scrollToFirstRowOnChange)) {
-      this.adapter.tableScrollToTop();
-    }
-  }
-  render() {
-    const tableInstance = this.buildTableState();
-    return html`
-      <div
-        part="table-wrapper"
-        ${ref(this.tableWrapRef)}
-        class=${classMap({
-      "table-wrapper": true,
-      [`table-direction-${this.direction}`]: true
-    })}
-      >
-        ${this.renderPagination("top")}
-        <sl-table-spinner-container .loading=${this.loading} exportparts="table-container">
-          <div
-            class=${classMap({
-      "table-bordered": Boolean(this.bordered),
-      "table-nodata": this.dataSource.length === 0
-    })}
-          >
-            <div part="table-container" class="table-container">${this.renderMainTable(tableInstance)}</div>
-          </div>
-        </sl-table-spinner-container>
-        ${this.renderPagination("bottom")}
-      </div>
-    `;
-  }
-};
-SlTable.dependencies = {
-  "sl-checkbox": SlCheckbox,
-  "sl-radio": SlRadio,
-  "sl-pagination": SlPagination
-};
-SlTable.styles = [table_style_default];
-__decorateClass([
-  property({ type: Array })
-], SlTable.prototype, "rowKey", 2);
-__decorateClass([
-  property({ type: Array })
-], SlTable.prototype, "columns", 2);
-__decorateClass([
-  property({ type: Array })
-], SlTable.prototype, "dataSource", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlTable.prototype, "loading", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlTable.prototype, "bordered", 2);
-__decorateClass([
-  property({ type: String })
-], SlTable.prototype, "direction", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlTable.prototype, "showHeader", 2);
-__decorateClass([
-  property({ type: Object })
-], SlTable.prototype, "rowSelection", 2);
-__decorateClass([
-  property({ type: Object })
-], SlTable.prototype, "tableScroll", 2);
-__decorateClass([
-  property({ type: Object })
-], SlTable.prototype, "pagination", 2);
-__decorateClass([
-  property({ type: Object })
-], SlTable.prototype, "expandProps", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlTable.prototype, "enableColumnResizing", 2);
-__decorateClass([
-  property({ type: Function })
-], SlTable.prototype, "onHeaderRow", 2);
-__decorateClass([
-  property({ type: Function })
-], SlTable.prototype, "onRow", 2);
-__decorateClass([
-  property({ type: Function })
-], SlTable.prototype, "onColumnResize", 2);
-__decorateClass([
-  property({ type: Object || Boolean })
-], SlTable.prototype, "virtualized", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlTable.prototype, "rowDrag", 2);
-__decorateClass([
-  property({ type: Function })
-], SlTable.prototype, "onRowReorder", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "rowSelectedMap", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "expandedMap", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "sorting", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "columnFilters", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "tableWidth", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "columnSizing", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "pageIndex", 2);
-__decorateClass([
-  state()
-], SlTable.prototype, "columnPinning", 2);
-
-export {
-  SlTable
-};