@duskmoon-dev/el-table 0.4.0

package/dist/esm/index.js

@@ -0,0 +1,872 @@
+// src/el-dm-table.ts
+import { BaseElement as BaseElement2, css } from "@duskmoon-dev/el-core";
+
+// src/el-dm-table-column.ts
+import { BaseElement } from "@duskmoon-dev/el-core";
+
+class ElDmTableColumn extends BaseElement {
+  static properties = {
+    key: { type: String, reflect: true },
+    label: { type: String, reflect: true },
+    sortable: { type: Boolean, reflect: true },
+    width: { type: String, reflect: true },
+    align: { type: String, reflect: true, default: "left" },
+    hidden: { type: Boolean, reflect: true }
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    this._notifyParent();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._notifyParent();
+  }
+  _notifyParent() {
+    this.dispatchEvent(new CustomEvent("table-column-change", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  toColumnDef() {
+    return {
+      key: this.key,
+      label: this.label || this.key || "",
+      sortable: this.sortable || false,
+      width: this.width,
+      align: this.align || "left",
+      hidden: this.hidden || false
+    };
+  }
+  render() {
+    return `<slot></slot>`;
+  }
+}
+function registerTableColumn() {
+  if (!customElements.get("el-dm-table-column")) {
+    customElements.define("el-dm-table-column", ElDmTableColumn);
+  }
+}
+
+// src/el-dm-table.ts
+var ICONS = {
+  sortAsc: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h4"/><path d="M11 8h7"/><path d="M11 12h10"/></svg>`,
+  sortDesc: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/></svg>`,
+  sort: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>`,
+  chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>`,
+  chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`,
+  chevronFirst: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 18-6-6 6-6"/><path d="M7 6v12"/></svg>`,
+  chevronLast: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 18 6-6-6-6"/><path d="M17 6v12"/></svg>`
+};
+var styles = css`
+  :host {
+    display: block;
+    font-family: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* Main wrapper */
+  .table-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  /* Header/Footer action slots */
+  .table-header-actions,
+  .table-footer-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .table-header-actions:empty,
+  .table-footer-actions:empty {
+    display: none;
+  }
+
+  /* Container for scrolling */
+  .table-container {
+    overflow-x: auto;
+    border: 1px solid var(--dm-color-outline, #e0e0e0);
+    border-radius: var(--dm-radius-md, 0.5rem);
+  }
+
+  /* Sticky header variant */
+  :host([sticky-header]) .table-container {
+    max-height: var(--table-max-height, 400px);
+    overflow-y: auto;
+  }
+
+  :host([sticky-header]) .table thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  /* Base table */
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+    background-color: var(--dm-color-surface, #ffffff);
+  }
+
+  /* Header styles */
+  .table-th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--dm-color-on-surface, #1a1a1a);
+    background-color: var(--dm-color-surface-variant, #f5f5f5);
+    border-bottom: 2px solid var(--dm-color-outline, #e0e0e0);
+    white-space: nowrap;
+  }
+
+  .table-th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .table-th.sortable:hover {
+    background-color: var(--dm-color-surface-container, #ebebeb);
+  }
+
+  .table-th.sortable:focus-visible {
+    outline: 2px solid var(--dm-color-primary, #6366f1);
+    outline-offset: -2px;
+  }
+
+  .table-th.sorted {
+    color: var(--dm-color-primary, #6366f1);
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sort-icon {
+    display: flex;
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+
+  .table-th.sorted .sort-icon {
+    opacity: 1;
+  }
+
+  /* Cell styles */
+  .table-td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--dm-color-outline-variant, #e8e8e8);
+    color: var(--dm-color-on-surface, #1a1a1a);
+  }
+
+  /* Row styles */
+  .table-row {
+    transition: background-color 150ms ease;
+  }
+
+  :host([hoverable]) .table-row:hover {
+    background-color: var(--dm-color-surface-variant, #f5f5f5);
+  }
+
+  .table-row.selected {
+    background-color: var(--dm-color-primary-container, #e8e8ff);
+  }
+
+  :host([hoverable]) .table-row.selected:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--dm-color-primary-container, #e8e8ff) 90%,
+      var(--dm-color-primary, #6366f1)
+    );
+  }
+
+  /* Selection column */
+  .select-cell {
+    width: 48px;
+    text-align: center;
+    padding: 0.5rem;
+  }
+
+  .select-cell input {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    accent-color: var(--dm-color-primary, #6366f1);
+  }
+
+  /* Striped variant */
+  :host([striped]) .table tbody tr:nth-child(even) {
+    background-color: var(--dm-color-surface-variant, #fafafa);
+  }
+
+  :host([striped]) .table tbody tr.selected:nth-child(even) {
+    background-color: var(--dm-color-primary-container, #e8e8ff);
+  }
+
+  /* Bordered variant */
+  :host([bordered]) .table-td,
+  :host([bordered]) .table-th {
+    border: 1px solid var(--dm-color-outline, #e0e0e0);
+  }
+
+  /* Compact variant */
+  :host([compact]) .table-th,
+  :host([compact]) .table-td {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+
+  :host([compact]) .select-cell {
+    padding: 0.375rem 0.5rem;
+  }
+
+  /* Loading state */
+  .loading-row td {
+    padding: 3rem;
+    text-align: center;
+    color: var(--dm-color-on-surface-variant, #666);
+  }
+
+  .loading-spinner {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--dm-color-outline, #e0e0e0);
+    border-top-color: var(--dm-color-primary, #6366f1);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Empty state */
+  .empty-row td {
+    padding: 3rem;
+    text-align: center;
+    color: var(--dm-color-on-surface-variant, #666);
+  }
+
+  /* Pagination styles */
+  .table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--dm-color-outline, #e0e0e0);
+    border-top: none;
+    border-radius: 0 0 var(--dm-radius-md, 0.5rem) var(--dm-radius-md, 0.5rem);
+    background-color: var(--dm-color-surface-variant, #f5f5f5);
+    font-size: 0.875rem;
+  }
+
+  .pagination-info {
+    color: var(--dm-color-on-surface-variant, #666);
+  }
+
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .pagination-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .pagination-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--dm-color-outline, #e0e0e0);
+    border-radius: var(--dm-radius-sm, 0.25rem);
+    background: var(--dm-color-surface, #ffffff);
+    cursor: pointer;
+    transition: all 150ms ease;
+    color: var(--dm-color-on-surface, #1a1a1a);
+  }
+
+  .pagination-btn:hover:not(:disabled) {
+    background: var(--dm-color-surface-container, #ebebeb);
+  }
+
+  .pagination-btn:focus-visible {
+    outline: 2px solid var(--dm-color-primary, #6366f1);
+    outline-offset: 2px;
+  }
+
+  .pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pagination-current {
+    padding: 0 0.75rem;
+    color: var(--dm-color-on-surface, #1a1a1a);
+    min-width: 100px;
+    text-align: center;
+  }
+
+  .page-size-select {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--dm-color-outline, #e0e0e0);
+    border-radius: var(--dm-radius-sm, 0.25rem);
+    background: var(--dm-color-surface, #ffffff);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .page-size-select:focus-visible {
+    outline: 2px solid var(--dm-color-primary, #6366f1);
+    outline-offset: 2px;
+  }
+
+  /* Clickable rows */
+  :host([selection-mode='single']) .table-row,
+  :host([selection-mode='multiple']) .table-row {
+    cursor: pointer;
+  }
+`;
+
+class ElDmTable extends BaseElement2 {
+  static properties = {
+    columns: { type: Array, attribute: false },
+    data: { type: Array, attribute: false },
+    sortColumn: { type: String, reflect: true, attribute: "sort-column" },
+    sortDirection: {
+      type: String,
+      reflect: true,
+      attribute: "sort-direction",
+      default: "asc"
+    },
+    paginated: { type: Boolean, reflect: true },
+    page: { type: Number, reflect: true, default: 1 },
+    pageSize: { type: Number, reflect: true, attribute: "page-size", default: 10 },
+    pageSizeOptions: { type: Array, attribute: false },
+    selectionMode: {
+      type: String,
+      reflect: true,
+      attribute: "selection-mode",
+      default: "none"
+    },
+    selectedIds: { type: Array, attribute: false },
+    striped: { type: Boolean, reflect: true },
+    bordered: { type: Boolean, reflect: true },
+    hoverable: { type: Boolean, reflect: true, default: true },
+    compact: { type: Boolean, reflect: true },
+    stickyHeader: { type: Boolean, reflect: true, attribute: "sticky-header" },
+    loading: { type: Boolean, reflect: true },
+    emptyMessage: {
+      type: String,
+      reflect: true,
+      attribute: "empty-message",
+      default: "No data available"
+    }
+  };
+  _internalSelectedIds = new Set;
+  constructor() {
+    super();
+    this.attachStyles(styles);
+    this.columns = [];
+    this.data = [];
+    this.selectedIds = [];
+    this.pageSizeOptions = [5, 10, 25, 50];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("table-column-change", this._handleColumnChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("table-column-change", this._handleColumnChange);
+  }
+  update() {
+    super.update();
+    this._attachEventListeners();
+  }
+  _handleColumnChange = () => {
+    this.update();
+  };
+  _attachEventListeners() {
+    this.shadowRoot?.querySelectorAll(".table-th.sortable").forEach((th) => {
+      th.addEventListener("click", this._handleHeaderClick);
+      th.addEventListener("keydown", this._handleHeaderKeydown);
+    });
+    this.shadowRoot?.querySelectorAll(".table-row").forEach((row) => {
+      row.addEventListener("click", this._handleRowClick);
+    });
+    this.shadowRoot?.querySelectorAll(".row-select").forEach((input) => {
+      input.addEventListener("change", this._handleRowSelectChange);
+    });
+    const selectAll = this.shadowRoot?.querySelector(".select-all");
+    selectAll?.addEventListener("change", this._handleSelectAllChange);
+    this.shadowRoot?.querySelectorAll(".pagination-btn").forEach((btn) => {
+      btn.addEventListener("click", this._handlePaginationClick);
+    });
+    const pageSizeSelect = this.shadowRoot?.querySelector(".page-size-select");
+    pageSizeSelect?.addEventListener("change", this._handlePageSizeChange);
+  }
+  _handleHeaderClick = (e) => {
+    const th = e.currentTarget.closest("[data-column]");
+    const column = th?.getAttribute("data-column");
+    if (column) {
+      this.sort(column);
+    }
+  };
+  _handleHeaderKeydown = (e) => {
+    const keyEvent = e;
+    if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+      keyEvent.preventDefault();
+      this._handleHeaderClick(e);
+    }
+  };
+  sort(column, direction) {
+    if (direction) {
+      this.sortColumn = column;
+      this.sortDirection = direction;
+    } else if (this.sortColumn === column) {
+      this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
+    } else {
+      this.sortColumn = column;
+      this.sortDirection = "asc";
+    }
+    this.emit("sort", {
+      column: this.sortColumn,
+      direction: this.sortDirection
+    });
+  }
+  _sortData(data) {
+    if (!this.sortColumn)
+      return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[this.sortColumn];
+      const bVal = b[this.sortColumn];
+      let comparison = 0;
+      if (aVal === null || aVal === undefined)
+        comparison = 1;
+      else if (bVal === null || bVal === undefined)
+        comparison = -1;
+      else if (typeof aVal === "string" && typeof bVal === "string") {
+        comparison = aVal.localeCompare(bVal);
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        comparison = aVal - bVal;
+      } else {
+        comparison = String(aVal).localeCompare(String(bVal));
+      }
+      return this.sortDirection === "desc" ? -comparison : comparison;
+    });
+  }
+  _handlePaginationClick = (e) => {
+    const btn = e.currentTarget;
+    const action = btn.getAttribute("data-action");
+    switch (action) {
+      case "first":
+        this.goToPage(1);
+        break;
+      case "prev":
+        this.goToPage(this.page - 1);
+        break;
+      case "next":
+        this.goToPage(this.page + 1);
+        break;
+      case "last":
+        this.goToPage(this._getTotalPages());
+        break;
+    }
+  };
+  _handlePageSizeChange = (e) => {
+    const select = e.target;
+    const newPageSize = parseInt(select.value, 10);
+    this.pageSize = newPageSize;
+    this.page = 1;
+    this.emit("page-change", {
+      page: this.page,
+      pageSize: this.pageSize
+    });
+  };
+  goToPage(page) {
+    const totalPages = this._getTotalPages();
+    const newPage = Math.max(1, Math.min(page, totalPages));
+    if (newPage !== this.page) {
+      this.page = newPage;
+      this.emit("page-change", {
+        page: this.page,
+        pageSize: this.pageSize
+      });
+    }
+  }
+  _getTotalPages() {
+    return Math.max(1, Math.ceil(this.data.length / this.pageSize));
+  }
+  _paginateData(data) {
+    if (!this.paginated)
+      return data;
+    const start = (this.page - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    return data.slice(start, end);
+  }
+  _getStartRow() {
+    if (this.data.length === 0)
+      return 0;
+    return (this.page - 1) * this.pageSize + 1;
+  }
+  _getEndRow() {
+    return Math.min(this.page * this.pageSize, this.data.length);
+  }
+  _handleRowClick = (e) => {
+    const row = e.target.closest(".table-row");
+    if (!row)
+      return;
+    if (e.target.closest(".select-cell"))
+      return;
+    const rowId = row.getAttribute("data-row-id");
+    const rowIndex = parseInt(row.getAttribute("data-row-index") || "0", 10);
+    if (rowId !== null) {
+      const id = this._parseId(rowId);
+      const rowData = this.data.find((r) => r.id === id);
+      if (rowData) {
+        this.emit("row-click", {
+          row: rowData,
+          rowIndex
+        });
+        if (this.selectionMode !== "none") {
+          this.toggleRowSelection(id);
+        }
+      }
+    }
+  };
+  _handleRowSelectChange = (e) => {
+    const input = e.target;
+    const rowId = input.getAttribute("data-row-id");
+    if (rowId !== null) {
+      const id = this._parseId(rowId);
+      if (input.checked) {
+        this.selectRow(id);
+      } else {
+        this.deselectRow(id);
+      }
+    }
+  };
+  _handleSelectAllChange = (e) => {
+    const input = e.target;
+    if (input.checked) {
+      this.selectAll();
+    } else {
+      this.deselectAll();
+    }
+  };
+  _parseId(idStr) {
+    const num = Number(idStr);
+    return isNaN(num) ? idStr : num;
+  }
+  selectRow(id) {
+    if (this.selectionMode === "single") {
+      this._internalSelectedIds.clear();
+    }
+    this._internalSelectedIds.add(id);
+    this._emitSelectionChange();
+  }
+  deselectRow(id) {
+    this._internalSelectedIds.delete(id);
+    this._emitSelectionChange();
+  }
+  toggleRowSelection(id) {
+    if (this._internalSelectedIds.has(id)) {
+      this.deselectRow(id);
+    } else {
+      this.selectRow(id);
+    }
+  }
+  selectAll() {
+    const visibleData = this._getProcessedData();
+    visibleData.forEach((row) => this._internalSelectedIds.add(row.id));
+    this._emitSelectionChange();
+  }
+  deselectAll() {
+    this._internalSelectedIds.clear();
+    this._emitSelectionChange();
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => this._internalSelectedIds.has(row.id));
+  }
+  _emitSelectionChange() {
+    this.selectedIds = Array.from(this._internalSelectedIds);
+    this.emit("select", {
+      selectedIds: this.selectedIds,
+      selectedRows: this.getSelectedRows()
+    });
+    this.update();
+  }
+  _isRowSelected(row) {
+    return this._internalSelectedIds.has(row.id);
+  }
+  _isAllSelected() {
+    const visibleData = this._getProcessedData();
+    if (visibleData.length === 0)
+      return false;
+    return visibleData.every((row) => this._internalSelectedIds.has(row.id));
+  }
+  _isSomeSelected() {
+    const visibleData = this._getProcessedData();
+    return visibleData.some((row) => this._internalSelectedIds.has(row.id)) && !this._isAllSelected();
+  }
+  _getEffectiveColumns() {
+    if (this.columns && this.columns.length > 0) {
+      return this.columns.filter((col) => !col.hidden);
+    }
+    const columnElements = this.querySelectorAll("el-dm-table-column");
+    const cols = [];
+    columnElements.forEach((el) => {
+      if (el instanceof ElDmTableColumn) {
+        const colDef = el.toColumnDef();
+        if (!colDef.hidden) {
+          cols.push(colDef);
+        }
+      }
+    });
+    return cols;
+  }
+  _getProcessedData() {
+    let result = [...this.data || []];
+    result = this._sortData(result);
+    result = this._paginateData(result);
+    return result;
+  }
+  getVisibleData() {
+    return this._getProcessedData();
+  }
+  refresh() {
+    this.update();
+  }
+  _formatCellValue(value) {
+    if (value === null || value === undefined)
+      return "";
+    if (typeof value === "boolean")
+      return value ? "Yes" : "No";
+    if (value instanceof Date)
+      return value.toLocaleDateString();
+    return String(value);
+  }
+  _renderHeaderCell(column) {
+    const sortable = column.sortable;
+    const isSorted = this.sortColumn === column.key;
+    const sortIcon = isSorted ? this.sortDirection === "asc" ? ICONS.sortAsc : ICONS.sortDesc : ICONS.sort;
+    return `
+      <th
+        class="table-th ${sortable ? "sortable" : ""} ${isSorted ? "sorted" : ""}"
+        part="th"
+        data-column="${column.key}"
+        style="text-align: ${column.align || "left"}; ${column.width ? `width: ${column.width};` : ""}"
+        scope="col"
+        ${sortable ? `role="columnheader" aria-sort="${isSorted ? this.sortDirection === "asc" ? "ascending" : "descending" : "none"}" tabindex="0"` : ""}
+      >
+        <span class="th-content">
+          <span>${column.label}</span>
+          ${sortable ? `<span class="sort-icon">${sortIcon}</span>` : ""}
+        </span>
+      </th>
+    `;
+  }
+  _renderSelectAllCell() {
+    if (this.selectionMode !== "multiple") {
+      return '<th class="table-th select-cell" part="th"></th>';
+    }
+    const isAllSelected = this._isAllSelected();
+    const isSomeSelected = this._isSomeSelected();
+    return `
+      <th class="table-th select-cell" part="th">
+        <input
+          type="checkbox"
+          class="select-all"
+          ${isAllSelected ? "checked" : ""}
+          ${isSomeSelected ? 'data-indeterminate="true"' : ""}
+          aria-label="Select all rows"
+        />
+      </th>
+    `;
+  }
+  _renderSelectCell(row) {
+    const isSelected = this._isRowSelected(row);
+    const inputType = this.selectionMode === "single" ? "radio" : "checkbox";
+    return `
+      <td class="table-td select-cell" part="td">
+        <input
+          type="${inputType}"
+          class="row-select"
+          name="table-selection"
+          data-row-id="${row.id}"
+          ${isSelected ? "checked" : ""}
+          aria-label="Select row"
+        />
+      </td>
+    `;
+  }
+  _renderDataRow(row, index, columns) {
+    const isSelected = this._isRowSelected(row);
+    const showSelectionColumn = this.selectionMode !== "none";
+    return `
+      <tr
+        class="table-row ${isSelected ? "selected" : ""}"
+        part="row"
+        data-row-id="${row.id}"
+        data-row-index="${index}"
+        ${isSelected ? 'aria-selected="true"' : ""}
+      >
+        ${showSelectionColumn ? this._renderSelectCell(row) : ""}
+        ${columns.map((col) => `
+          <td
+            class="table-td"
+            part="td"
+            style="text-align: ${col.align || "left"};"
+          >
+            ${this._formatCellValue(row[col.key])}
+          </td>
+        `).join("")}
+      </tr>
+    `;
+  }
+  _renderLoadingRow(colCount) {
+    const totalCols = this.selectionMode !== "none" ? colCount + 1 : colCount;
+    return `
+      <tr class="loading-row">
+        <td colspan="${totalCols}">
+          <div class="loading-spinner"></div>
+          <div>Loading...</div>
+        </td>
+      </tr>
+    `;
+  }
+  _renderEmptyRow(colCount) {
+    const totalCols = this.selectionMode !== "none" ? colCount + 1 : colCount;
+    return `
+      <tr class="empty-row">
+        <td colspan="${totalCols}">
+          <slot name="empty">${this.emptyMessage}</slot>
+        </td>
+      </tr>
+    `;
+  }
+  _renderPagination() {
+    const totalPages = this._getTotalPages();
+    const showPageSizeSelect = this.pageSizeOptions && this.pageSizeOptions.length > 0;
+    return `
+      <div class="table-pagination" part="pagination">
+        <div class="pagination-info">
+          Showing ${this._getStartRow()} to ${this._getEndRow()} of ${this.data.length} entries
+        </div>
+        <div class="pagination-controls">
+          ${showPageSizeSelect ? `
+            <select class="page-size-select" aria-label="Rows per page">
+              ${this.pageSizeOptions.map((size) => `
+                <option value="${size}" ${size === this.pageSize ? "selected" : ""}>
+                  ${size} / page
+                </option>
+              `).join("")}
+            </select>
+          ` : ""}
+          <div class="pagination-nav">
+            <button
+              class="pagination-btn"
+              data-action="first"
+              ${this.page <= 1 ? "disabled" : ""}
+              aria-label="First page"
+            >${ICONS.chevronFirst}</button>
+            <button
+              class="pagination-btn"
+              data-action="prev"
+              ${this.page <= 1 ? "disabled" : ""}
+              aria-label="Previous page"
+            >${ICONS.chevronLeft}</button>
+            <span class="pagination-current">
+              Page ${this.page} of ${totalPages}
+            </span>
+            <button
+              class="pagination-btn"
+              data-action="next"
+              ${this.page >= totalPages ? "disabled" : ""}
+              aria-label="Next page"
+            >${ICONS.chevronRight}</button>
+            <button
+              class="pagination-btn"
+              data-action="last"
+              ${this.page >= totalPages ? "disabled" : ""}
+              aria-label="Last page"
+            >${ICONS.chevronLast}</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const columns = this._getEffectiveColumns();
+    const processedData = this._getProcessedData();
+    const showSelectionColumn = this.selectionMode !== "none";
+    return `
+      <div class="table-wrapper" part="wrapper">
+        <div class="table-header-actions" part="header-actions">
+          <slot name="header-actions"></slot>
+        </div>
+
+        <div class="table-container" part="container">
+          <table class="table" part="table" role="grid" aria-busy="${this.loading}">
+            <thead part="thead">
+              <tr part="header-row">
+                ${showSelectionColumn ? this._renderSelectAllCell() : ""}
+                ${columns.map((col) => this._renderHeaderCell(col)).join("")}
+              </tr>
+            </thead>
+            <tbody part="tbody">
+              ${this.loading ? this._renderLoadingRow(columns.length) : ""}
+              ${!this.loading && processedData.length === 0 ? this._renderEmptyRow(columns.length) : ""}
+              ${!this.loading ? processedData.map((row, idx) => this._renderDataRow(row, idx, columns)).join("") : ""}
+            </tbody>
+          </table>
+        </div>
+
+        ${this.paginated ? this._renderPagination() : ""}
+
+        <div class="table-footer-actions" part="footer-actions">
+          <slot name="footer-actions"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+function registerTable() {
+  if (!customElements.get("el-dm-table")) {
+    customElements.define("el-dm-table", ElDmTable);
+  }
+}
+// src/index.ts
+function register() {
+  registerTable();
+  registerTableColumn();
+}
+export {
+  registerTableColumn,
+  registerTable,
+  register,
+  ElDmTableColumn,
+  ElDmTable
+};
+
+//# debugId=38CAEB22D9F53FAD64756E2164756E21
+//# sourceMappingURL=index.js.map