@helixui/library 0.1.0

package/dist/shared/hx-data-table-D5huonFo.js

@@ -0,0 +1,497 @@
+import { css as u, LitElement as m, html as i, nothing as p } from "lit";
+import { property as d, state as f, customElement as w } from "lit/decorators.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const x = u`
+  :host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Scroll Wrapper ─── */
+
+  .table-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ─── Table ─── */
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: var(--hx-data-table-min-width, 600px);
+  }
+
+  /* ─── Head ─── */
+
+  thead {
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  :host([sticky-header]) thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Cells ─── */
+
+  th,
+  td {
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    text-align: left;
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    vertical-align: middle;
+  }
+
+  th {
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    white-space: nowrap;
+  }
+
+  td {
+    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+  }
+
+  /* ─── Checkbox Column ─── */
+
+  th.col-checkbox,
+  td.col-checkbox {
+    width: 40px;
+    min-width: 40px;
+    padding-right: var(--hx-space-2, 0.5rem);
+  }
+
+  th.col-checkbox {
+    text-align: center;
+  }
+
+  td.col-checkbox {
+    text-align: center;
+  }
+
+  /* ─── Sort Button ─── */
+
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-weight: inherit;
+    color: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .sort-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Sort Icon ─── */
+
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    opacity: 0.4;
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  .sort-icon--active {
+    opacity: 1;
+    color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .sort-icon--desc {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Row States ─── */
+
+  tbody tr {
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  tbody tr:hover {
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  tbody tr[aria-selected='true'] {
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+  }
+
+  /* ─── Checkbox Input ─── */
+
+  input[type='checkbox'] {
+    width: var(--hx-size-4, 1rem);
+    height: var(--hx-size-4, 1rem);
+    cursor: pointer;
+    accent-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  /* ─── Loading Skeleton ─── */
+
+  .skeleton-cell {
+    display: block;
+    height: 1em;
+    border-radius: var(--hx-border-radius-sm, 2px);
+    background: linear-gradient(
+      90deg,
+      var(--hx-color-neutral-200, #e2e8f0) 25%,
+      var(--hx-color-neutral-100, #f1f5f9) 50%,
+      var(--hx-color-neutral-200, #e2e8f0) 75%
+    );
+    background-size: 200% 100%;
+    animation: hx-shimmer 1.5s infinite;
+  }
+
+  @keyframes hx-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-cell {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+  /* ─── Cell Focus ─── */
+
+  td:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+    border-radius: var(--hx-border-radius-sm, 2px);
+  }
+
+  /* ─── Empty State ─── */
+
+  .empty-cell {
+    text-align: center;
+    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
+  }
+`;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? v(t, r) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (s = (o ? n(t, r, s) : n(s)) || s);
+  return o && s && g(t, r, s), s;
+};
+let l = class extends m {
+  constructor() {
+    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set();
+  }
+  // ─── Lifecycle ───
+  willUpdate(e) {
+    if (e.has("columns"))
+      if (typeof this.columns == "string")
+        try {
+          this.columns = JSON.parse(this.columns);
+        } catch {
+          this.columns = [];
+        }
+      else Array.isArray(this.columns) || (this.columns = []);
+    if (e.has("rows"))
+      if (typeof this.rows == "string")
+        try {
+          this.rows = JSON.parse(this.rows);
+        } catch {
+          this.rows = [];
+        }
+      else Array.isArray(this.rows) || (this.rows = []);
+    e.has("rows") && this.rows.length > 500 && console.warn(
+      "[hx-data-table] Rendering more than 500 rows may impact performance. Consider server-side pagination."
+    );
+  }
+  // ─── Event Handlers ───
+  _handleSort(e) {
+    const t = this.sortKey === e && this.sortDirection === "asc" ? "desc" : "asc";
+    this.sortKey = e, this.sortDirection = t, this.dispatchEvent(
+      new CustomEvent("hx-sort", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: e, direction: t }
+      })
+    );
+  }
+  _handleRowClick(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("hx-row-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { row: e, index: t }
+      })
+    );
+  }
+  _handleSelect(e, t) {
+    const r = new Set(this._selectedRows);
+    t ? r.add(e) : r.delete(e), this._selectedRows = r, this._dispatchSelect();
+  }
+  _handleSelectAll(e) {
+    this._selectedRows = e ? new Set(this.rows.map((t, r) => r)) : /* @__PURE__ */ new Set(), this._dispatchSelect();
+  }
+  _dispatchSelect() {
+    this.dispatchEvent(
+      new CustomEvent("hx-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          selectedRows: [...this._selectedRows].map((e) => this.rows[e])
+        }
+      })
+    );
+  }
+  // ─── Keyboard Navigation ───
+  _handleKeydown(e) {
+    var b;
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(e.key))
+      return;
+    const t = this.shadowRoot;
+    if (!t) return;
+    const r = Array.from(t.querySelectorAll('[part~="td"],[part~="th"]'));
+    let o = t.activeElement;
+    if (!o) return;
+    if (r.indexOf(o) === -1) {
+      let c = o.parentElement;
+      for (; c; ) {
+        if (r.includes(c)) {
+          o = c;
+          break;
+        }
+        c = c.parentElement;
+      }
+    }
+    const s = this.columns.length + (this.selectable ? 1 : 0), a = r.indexOf(o);
+    if (a === -1) return;
+    let n = null;
+    if (e.key === "ArrowRight" && a + 1 < r.length)
+      n = r[a + 1] ?? null;
+    else if (e.key === "ArrowLeft" && a - 1 >= 0)
+      n = r[a - 1] ?? null;
+    else if (e.key === "ArrowDown" && a + s < r.length)
+      n = r[a + s] ?? null;
+    else if (e.key === "ArrowUp" && a - s >= 0)
+      n = r[a - s] ?? null;
+    else if (e.key === "Home") {
+      const c = a - a % s;
+      n = r[c] ?? null;
+    } else if (e.key === "End") {
+      const c = Math.min(a - a % s + s - 1, r.length - 1);
+      n = r[c] ?? null;
+    } else if (e.key === " " && ((b = o.getAttribute("part")) != null && b.includes("td"))) {
+      const c = Number(o.dataset.rowIndex);
+      this.selectable && !isNaN(c) && (e.preventDefault(), this._handleSelect(c, !this._selectedRows.has(c)));
+      return;
+    }
+    n && (e.preventDefault(), n.setAttribute("tabindex", "0"), n.focus(), o.setAttribute("tabindex", "-1"));
+  }
+  // ─── Render Helpers ───
+  _renderSortIcon(e) {
+    const t = this.sortKey === e, r = [
+      "sort-icon",
+      t ? "sort-icon--active" : "",
+      t && this.sortDirection === "desc" ? "sort-icon--desc" : ""
+    ].filter(Boolean).join(" ");
+    return i`
+      <span part="sort-icon" class=${r} aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          width="16"
+          height="16"
+        >
+          <path d="M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z" fill-rule="evenodd" />
+        </svg>
+      </span>
+    `;
+  }
+  _renderHeaderRow() {
+    return i`
+      <tr part="tr">
+        ${this.selectable ? i`
+              <th part="th" class="col-checkbox" tabindex="0">
+                <input
+                  type="checkbox"
+                  part="checkbox"
+                  aria-label="Select all rows"
+                  .indeterminate=${this._selectedRows.size > 0 && this._selectedRows.size < this.rows.length}
+                  .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}
+                  @change=${(e) => this._handleSelectAll(e.target.checked)}
+                />
+              </th>
+            ` : p}
+        ${this.columns.map(
+      (e) => i`
+            <th
+              part="th"
+              tabindex="0"
+              style=${e.width ? `width: ${e.width}` : ""}
+              aria-sort=${e.sortable ? this.sortKey === e.key ? this.sortDirection === "asc" ? "ascending" : "descending" : "none" : p}
+            >
+              ${e.sortable ? i`
+                    <button
+                      class="sort-btn"
+                      @click=${() => this._handleSort(e.key)}
+                      aria-label=${this.sortKey === e.key ? `Sort by ${e.label}, currently sorted ${this.sortDirection === "asc" ? "ascending" : "descending"}` : `Sort by ${e.label}`}
+                    >
+                      ${e.label} ${this._renderSortIcon(e.key)}
+                    </button>
+                  ` : e.label}
+            </th>
+          `
+    )}
+      </tr>
+    `;
+  }
+  _renderSkeletonRows() {
+    return Array.from(
+      { length: 3 },
+      (e, t) => i`
+        <tr part="tr" aria-hidden="true" key=${t}>
+          ${this.selectable ? i`<td part="td" class="col-checkbox">
+                <span class="skeleton-cell" style="width:1rem;margin:auto"></span>
+              </td>` : p}
+          ${this.columns.map(
+        () => i`
+              <td part="td">
+                <span class="skeleton-cell"></span>
+              </td>
+            `
+      )}
+        </tr>
+      `
+    );
+  }
+  _renderEmptyRow() {
+    const e = this.columns.length + (this.selectable ? 1 : 0);
+    return i`
+      <tr part="tr">
+        <td part="td" colspan=${e} class="empty-cell">
+          <slot name="empty">${this.emptyLabel}</slot>
+        </td>
+      </tr>
+    `;
+  }
+  _renderDataRows() {
+    let e = this.rows;
+    if (this.pageSize > 0) {
+      const t = (this.page - 1) * this.pageSize;
+      e = this.rows.slice(t, t + this.pageSize);
+    }
+    return e.map((t, r) => {
+      const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
+      return i`
+        <tr
+          part="tr"
+          aria-selected=${this.selectable ? String(this._selectedRows.has(o)) : p}
+          @click=${() => this._handleRowClick(t, o)}
+        >
+          ${this.selectable ? i`
+                <td part="td" class="col-checkbox">
+                  <input
+                    type="checkbox"
+                    part="checkbox"
+                    aria-label=${`Select row ${o + 1}`}
+                    .checked=${this._selectedRows.has(o)}
+                    @click=${(s) => s.stopPropagation()}
+                    @change=${(s) => this._handleSelect(o, s.target.checked)}
+                  />
+                </td>
+              ` : p}
+          ${this.columns.map(
+        (s) => i`
+              <td part="td" tabindex="-1" data-row-index=${o}>
+                ${t[s.key] != null ? String(t[s.key]) : ""}
+              </td>
+            `
+      )}
+        </tr>
+      `;
+    });
+  }
+  // ─── Render ───
+  render() {
+    return i`
+      <slot name="toolbar"></slot>
+      <div class="table-wrapper">
+        <table
+          part="table"
+          role="grid"
+          aria-busy=${this.loading ? "true" : p}
+          @keydown=${this._handleKeydown}
+        >
+          <thead part="thead">
+            ${this._renderHeaderRow()}
+          </thead>
+          <tbody part="tbody">
+            ${this.loading ? i`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this.rows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+};
+l.styles = [y, x];
+h([
+  d({ type: Array })
+], l.prototype, "columns", 2);
+h([
+  d({ type: Array })
+], l.prototype, "rows", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "selectable", 2);
+h([
+  d({ type: String, attribute: "sort-key" })
+], l.prototype, "sortKey", 2);
+h([
+  d({ type: String, attribute: "sort-direction" })
+], l.prototype, "sortDirection", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "loading", 2);
+h([
+  d({ type: String, attribute: "empty-label" })
+], l.prototype, "emptyLabel", 2);
+h([
+  d({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], l.prototype, "stickyHeader", 2);
+h([
+  d({ type: Number })
+], l.prototype, "page", 2);
+h([
+  d({ type: Number, attribute: "page-size" })
+], l.prototype, "pageSize", 2);
+h([
+  f()
+], l.prototype, "_selectedRows", 2);
+l = h([
+  w("hx-data-table")
+], l);
+export {
+  l as H
+};
+//# sourceMappingURL=hx-data-table-D5huonFo.js.map

package/dist/shared/hx-data-table-D5huonFo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-data-table-D5huonFo.js","sources":["../../src/components/hx-data-table/hx-data-table.styles.ts","../../src/components/hx-data-table/hx-data-table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDataTableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Scroll Wrapper ─── */\n\n  .table-wrapper {\n    min-width: 0;\n    width: 100%;\n  }\n\n  /* ─── Table ─── */\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    min-width: var(--hx-data-table-min-width, 600px);\n  }\n\n  /* ─── Head ─── */\n\n  thead {\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  :host([sticky-header]) thead th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* ─── Cells ─── */\n\n  th,\n  td {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    text-align: left;\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    vertical-align: middle;\n  }\n\n  th {\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));\n    white-space: nowrap;\n  }\n\n  td {\n    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n  }\n\n  /* ─── Checkbox Column ─── */\n\n  th.col-checkbox,\n  td.col-checkbox {\n    width: 40px;\n    min-width: 40px;\n    padding-right: var(--hx-space-2, 0.5rem);\n  }\n\n  th.col-checkbox {\n    text-align: center;\n  }\n\n  td.col-checkbox {\n    text-align: center;\n  }\n\n  /* ─── Sort Button ─── */\n\n  .sort-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    background: none;\n    border: none;\n    padding: 0;\n    font: inherit;\n    font-weight: inherit;\n    color: inherit;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .sort-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Sort Icon ─── */\n\n  .sort-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    opacity: 0.4;\n    transition:\n      opacity var(--hx-transition-fast, 150ms ease),\n      transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .sort-icon--active {\n    opacity: 1;\n    color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .sort-icon--desc {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Row States ─── */\n\n  tbody tr {\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  tbody tr:hover {\n    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  tbody tr[aria-selected='true'] {\n    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n  }\n\n  /* ─── Checkbox Input ─── */\n\n  input[type='checkbox'] {\n    width: var(--hx-size-4, 1rem);\n    height: var(--hx-size-4, 1rem);\n    cursor: pointer;\n    accent-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* ─── Loading Skeleton ─── */\n\n  .skeleton-cell {\n    display: block;\n    height: 1em;\n    border-radius: var(--hx-border-radius-sm, 2px);\n    background: linear-gradient(\n      90deg,\n      var(--hx-color-neutral-200, #e2e8f0) 25%,\n      var(--hx-color-neutral-100, #f1f5f9) 50%,\n      var(--hx-color-neutral-200, #e2e8f0) 75%\n    );\n    background-size: 200% 100%;\n    animation: hx-shimmer 1.5s infinite;\n  }\n\n  @keyframes hx-shimmer {\n    0% {\n      background-position: 200% 0;\n    }\n    100% {\n      background-position: -200% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton-cell {\n      animation: none;\n      opacity: 0.6;\n    }\n  }\n\n  /* ─── Cell Focus ─── */\n\n  td:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Empty State ─── */\n\n  .empty-cell {\n    text-align: center;\n    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));\n    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDataTableStyles } from './hx-data-table.styles.js';\n\n/**\n * Column definition for `hx-data-table`.\n */\nexport interface HxDataTableColumn {\n  key: string;\n  label: string;\n  sortable?: boolean;\n  width?: string;\n}\n\n/**\n * Sort state exported for TypeScript consumers and CEM event types.\n */\nexport interface HxDataTableSortState {\n  key: string;\n  direction: 'asc' | 'desc';\n}\n\n/**\n * An enterprise data table with sorting, row selection, and keyboard navigation.\n *\n * @summary Enterprise data table with sorting, selection, and responsive scroll.\n *\n * @tag hx-data-table\n *\n * @slot toolbar - Content rendered above the table (e.g., search, actions).\n * @slot empty - Custom empty-state content rendered when `rows` is empty and not loading.\n * @slot loading - Custom loading content rendered when `loading` is true.\n *\n * @fires {CustomEvent<HxDataTableSortState>} hx-sort - Dispatched when a sortable column header is clicked.\n * @fires {CustomEvent<{selectedRows: Record<string, unknown>[]}>} hx-select - Dispatched when row selection changes.\n * @fires {CustomEvent<{row: Record<string, unknown>, index: number}>} hx-row-click - Dispatched when a data row is clicked.\n *\n * @csspart table - The `<table>` element.\n * @csspart thead - The `<thead>` element.\n * @csspart tbody - The `<tbody>` element.\n * @csspart tr - Each `<tr>` element.\n * @csspart th - Each `<th>` element.\n * @csspart td - Each `<td>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n * @csspart checkbox - Each `<input type=\"checkbox\">` element.\n *\n * @cssprop [--hx-data-table-header-bg=var(--hx-color-neutral-50)] - Header background color.\n * @cssprop [--hx-data-table-header-color=var(--hx-color-neutral-700)] - Header text color.\n * @cssprop [--hx-data-table-cell-color=var(--hx-color-neutral-900)] - Cell text color.\n * @cssprop [--hx-data-table-border-color=var(--hx-color-neutral-200)] - Row border color.\n * @cssprop [--hx-data-table-row-hover-bg=var(--hx-color-neutral-50)] - Row hover background.\n * @cssprop [--hx-data-table-row-selected-bg=var(--hx-color-primary-50)] - Selected row background.\n * @cssprop [--hx-data-table-empty-color=var(--hx-color-neutral-600)] - Empty state text color.\n * @cssprop [--hx-data-table-min-width=600px] - Minimum table width before horizontal scrolling.\n */\n@customElement('hx-data-table')\nexport class HelixDataTable extends LitElement {\n  static override styles = [tokenStyles, helixDataTableStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Column definitions. Each item: `{ key, label, sortable?, width? }`.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr columns\n   */\n  @property({ type: Array })\n  columns: HxDataTableColumn[] = [];\n\n  /**\n   * Row data. Each item is a plain object keyed by column `key` values.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr rows\n   */\n  @property({ type: Array })\n  rows: Record<string, unknown>[] = [];\n\n  /**\n   * When true, renders a checkbox column for row selection.\n   * @attr selectable\n   */\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  /**\n   * The column key currently used for sorting.\n   * @attr sort-key\n   */\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey = '';\n\n  /**\n   * Current sort direction.\n   * @attr sort-direction\n   */\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * Text displayed in the default empty state when `rows` is empty and not loading.\n   * @attr empty-label\n   */\n  @property({ type: String, attribute: 'empty-label' })\n  emptyLabel = 'No data';\n\n  /**\n   * When true, the header row is sticky (position: sticky; top: 0).\n   * @attr sticky-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  /**\n   * Current page (1-based). Set to 0 or leave at default (0) to disable pagination.\n   * @attr page\n   */\n  @property({ type: Number })\n  page = 1;\n\n  /**\n   * Number of rows per page. Set to 0 to disable pagination (show all rows).\n   * @attr page-size\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  // ─── Internal State ───\n\n  @state()\n  private _selectedRows: Set<number> = new Set();\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    // Coerce JSON strings to arrays — this is the Drupal/Twig integration path.\n    // Lit does not JSON-parse array attributes automatically, so we do it here.\n    // Note: Lit's defaultConverter returns null (not a string) when JSON.parse fails for\n    // type: Array — so we guard against both string and any non-array value.\n    if (changed.has('columns')) {\n      if (typeof (this.columns as unknown) === 'string') {\n        try {\n          this.columns = JSON.parse(this.columns as unknown as string) as HxDataTableColumn[];\n        } catch {\n          this.columns = [];\n        }\n      } else if (!Array.isArray(this.columns)) {\n        this.columns = [];\n      }\n    }\n    if (changed.has('rows')) {\n      if (typeof (this.rows as unknown) === 'string') {\n        try {\n          this.rows = JSON.parse(this.rows as unknown as string) as Record<string, unknown>[];\n        } catch {\n          this.rows = [];\n        }\n      } else if (!Array.isArray(this.rows)) {\n        this.rows = [];\n      }\n    }\n    // Only warn when rows actually changes to avoid noise on every property update.\n    if (changed.has('rows') && this.rows.length > 500) {\n      console.warn(\n        '[hx-data-table] Rendering more than 500 rows may impact performance. Consider server-side pagination.',\n      );\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSort(key: string): void {\n    const direction =\n      this.sortKey === key ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';\n    this.sortKey = key;\n    this.sortDirection = direction;\n    this.dispatchEvent(\n      new CustomEvent<HxDataTableSortState>('hx-sort', {\n        bubbles: true,\n        composed: true,\n        detail: { key, direction },\n      }),\n    );\n  }\n\n  private _handleRowClick(row: Record<string, unknown>, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-row-click', {\n        bubbles: true,\n        composed: true,\n        detail: { row, index },\n      }),\n    );\n  }\n\n  private _handleSelect(index: number, checked: boolean): void {\n    const next = new Set(this._selectedRows);\n    if (checked) {\n      next.add(index);\n    } else {\n      next.delete(index);\n    }\n    this._selectedRows = next;\n    this._dispatchSelect();\n  }\n\n  private _handleSelectAll(checked: boolean): void {\n    this._selectedRows = checked ? new Set(this.rows.map((_, i) => i)) : new Set<number>();\n    this._dispatchSelect();\n  }\n\n  private _dispatchSelect(): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selectedRows: [...this._selectedRows].map((i) => this.rows[i]),\n        },\n      }),\n    );\n  }\n\n  // ─── Keyboard Navigation ───\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' '].includes(e.key))\n      return;\n\n    const root = this.shadowRoot;\n    if (!root) return;\n\n    const cells = Array.from(root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'));\n\n    // When focus is inside a child element (e.g., the sort <button> inside a <th>),\n    // shadowRoot.activeElement returns the child, not the cell. Walk up to find the cell.\n    let focused = root.activeElement as HTMLElement | null;\n    if (!focused) return;\n\n    if (cells.indexOf(focused) === -1) {\n      let ancestor = focused.parentElement;\n      while (ancestor) {\n        if (cells.includes(ancestor as HTMLElement)) {\n          focused = ancestor as HTMLElement;\n          break;\n        }\n        ancestor = ancestor.parentElement;\n      }\n    }\n\n    const colCount = this.columns.length + (this.selectable ? 1 : 0);\n    const idx = cells.indexOf(focused);\n    if (idx === -1) return;\n\n    let target: HTMLElement | null = null;\n\n    if (e.key === 'ArrowRight' && idx + 1 < cells.length) {\n      target = cells[idx + 1] ?? null;\n    } else if (e.key === 'ArrowLeft' && idx - 1 >= 0) {\n      target = cells[idx - 1] ?? null;\n    } else if (e.key === 'ArrowDown' && idx + colCount < cells.length) {\n      target = cells[idx + colCount] ?? null;\n    } else if (e.key === 'ArrowUp' && idx - colCount >= 0) {\n      target = cells[idx - colCount] ?? null;\n    } else if (e.key === 'Home') {\n      // First cell of the current row\n      const rowStart = idx - (idx % colCount);\n      target = cells[rowStart] ?? null;\n    } else if (e.key === 'End') {\n      // Last cell of the current row\n      const rowEnd = Math.min(idx - (idx % colCount) + colCount - 1, cells.length - 1);\n      target = cells[rowEnd] ?? null;\n    } else if (e.key === ' ' && focused.getAttribute('part')?.includes('td')) {\n      // Toggle selection on Space in a data row\n      const rowIdx = Number(focused.dataset['rowIndex']);\n      if (this.selectable && !isNaN(rowIdx)) {\n        e.preventDefault();\n        this._handleSelect(rowIdx, !this._selectedRows.has(rowIdx));\n      }\n      return;\n    }\n\n    if (target) {\n      e.preventDefault();\n      target.setAttribute('tabindex', '0');\n      target.focus();\n      focused.setAttribute('tabindex', '-1');\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderSortIcon(key: string) {\n    const isActive = this.sortKey === key;\n    const iconClass = [\n      'sort-icon',\n      isActive ? 'sort-icon--active' : '',\n      isActive && this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          width=\"16\"\n          height=\"16\"\n        >\n          <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  private _renderHeaderRow() {\n    return html`\n      <tr part=\"tr\">\n        ${this.selectable\n          ? html`\n              <th part=\"th\" class=\"col-checkbox\" tabindex=\"0\">\n                <input\n                  type=\"checkbox\"\n                  part=\"checkbox\"\n                  aria-label=\"Select all rows\"\n                  .indeterminate=${this._selectedRows.size > 0 &&\n                  this._selectedRows.size < this.rows.length}\n                  .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}\n                  @change=${(e: Event) =>\n                    this._handleSelectAll((e.target as HTMLInputElement).checked)}\n                />\n              </th>\n            `\n          : nothing}\n        ${this.columns.map(\n          (col) => html`\n            <th\n              part=\"th\"\n              tabindex=\"0\"\n              style=${col.width ? `width: ${col.width}` : ''}\n              aria-sort=${col.sortable\n                ? this.sortKey === col.key\n                  ? this.sortDirection === 'asc'\n                    ? 'ascending'\n                    : 'descending'\n                  : 'none'\n                : nothing}\n            >\n              ${col.sortable\n                ? html`\n                    <button\n                      class=\"sort-btn\"\n                      @click=${() => this._handleSort(col.key)}\n                      aria-label=${this.sortKey === col.key\n                        ? `Sort by ${col.label}, currently sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'}`\n                        : `Sort by ${col.label}`}\n                    >\n                      ${col.label} ${this._renderSortIcon(col.key)}\n                    </button>\n                  `\n                : col.label}\n            </th>\n          `,\n        )}\n      </tr>\n    `;\n  }\n\n  private _renderSkeletonRows() {\n    return Array.from(\n      { length: 3 },\n      (_, i) => html`\n        <tr part=\"tr\" aria-hidden=\"true\" key=${i}>\n          ${this.selectable\n            ? html`<td part=\"td\" class=\"col-checkbox\">\n                <span class=\"skeleton-cell\" style=\"width:1rem;margin:auto\"></span>\n              </td>`\n            : nothing}\n          ${this.columns.map(\n            () => html`\n              <td part=\"td\">\n                <span class=\"skeleton-cell\"></span>\n              </td>\n            `,\n          )}\n        </tr>\n      `,\n    );\n  }\n\n  private _renderEmptyRow() {\n    const colSpan = this.columns.length + (this.selectable ? 1 : 0);\n    return html`\n      <tr part=\"tr\">\n        <td part=\"td\" colspan=${colSpan} class=\"empty-cell\">\n          <slot name=\"empty\">${this.emptyLabel}</slot>\n        </td>\n      </tr>\n    `;\n  }\n\n  private _renderDataRows() {\n    let displayRows = this.rows;\n\n    // Client-side pagination when pageSize > 0\n    if (this.pageSize > 0) {\n      const start = (this.page - 1) * this.pageSize;\n      displayRows = this.rows.slice(start, start + this.pageSize);\n    }\n\n    return displayRows.map((row, pageIndex) => {\n      // The global row index for selection and events\n      const globalIndex =\n        this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n      return html`\n        <tr\n          part=\"tr\"\n          aria-selected=${this.selectable ? String(this._selectedRows.has(globalIndex)) : nothing}\n          @click=${() => this._handleRowClick(row, globalIndex)}\n        >\n          ${this.selectable\n            ? html`\n                <td part=\"td\" class=\"col-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    part=\"checkbox\"\n                    aria-label=${`Select row ${globalIndex + 1}`}\n                    .checked=${this._selectedRows.has(globalIndex)}\n                    @click=${(e: Event) => e.stopPropagation()}\n                    @change=${(e: Event) =>\n                      this._handleSelect(globalIndex, (e.target as HTMLInputElement).checked)}\n                  />\n                </td>\n              `\n            : nothing}\n          ${this.columns.map(\n            (col) => html`\n              <td part=\"td\" tabindex=\"-1\" data-row-index=${globalIndex}>\n                ${row[col.key] != null ? String(row[col.key]) : ''}\n              </td>\n            `,\n          )}\n        </tr>\n      `;\n    });\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"toolbar\"></slot>\n      <div class=\"table-wrapper\">\n        <table\n          part=\"table\"\n          role=\"grid\"\n          aria-busy=${this.loading ? 'true' : nothing}\n          @keydown=${this._handleKeydown}\n        >\n          <thead part=\"thead\">\n            ${this._renderHeaderRow()}\n          </thead>\n          <tbody part=\"tbody\">\n            ${this.loading\n              ? html`<slot name=\"loading\">${this._renderSkeletonRows()}</slot>`\n              : this.rows.length === 0\n                ? this._renderEmptyRow()\n                : this._renderDataRows()}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-data-table': HelixDataTable;\n  }\n}\n"],"names":["helixDataTableStyles","css","HelixDataTable","LitElement","changed","key","direction","row","index","checked","next","_","i","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","nothing","col","colSpan","displayRows","start","pageIndex","globalIndex","e","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}