@logosphere-ui/core 0.0.0-alpha.54 → 0.0.0-alpha.55

package/dist/table-3-P_g6-i.js

@@ -0,0 +1,521 @@
+import { unsafeCSS as $, css as z, LitElement as K, nothing as _, html as c } from "lit";
+import { property as h, state as y, customElement as W } from "lit/decorators.js";
+import { repeat as m } from "lit/directives/repeat.js";
+import "./checkbox-CTfbav6M.js";
+import "./input-N3Z8D7q1.js";
+import "./ui-icon-BeR-PaPg.js";
+const E = ':host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-base)}*{box-sizing:border-box}.table{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.table--borderless{border:0;border-radius:0}.table__scroll{width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-tertiary) var(--color-light)}.table__inner{display:flex;flex-direction:column}.table__header{display:flex;position:sticky;top:0;z-index:10;border-radius:var(--radius-md) var(--radius-md) 0 0}.table__body{display:flex;flex-direction:column}.table__row{display:flex;cursor:default;background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing)}.table__row:hover{background-color:var(--color-light)}.table__body .table__row:last-child .table__cell{border-bottom:0}.table__cell{display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:36px;padding:var(--spacing-0-5) var(--spacing-2);border-bottom:1px solid var(--color-border);overflow:hidden}.table__cell--selection{flex-grow:0;padding-right:0;padding-left:0}.table__cell--selection logosphere-checkbox{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:0}.table__cell--action{flex-grow:0;gap:var(--spacing-1)}.table__cell--header{position:relative;gap:var(--spacing-1);background-color:var(--color-light);padding:var(--spacing-1) var(--spacing-2)}.table__cell--searchable{padding-right:var(--spacing-2)}.table__cell--search-active{justify-content:center!important}.table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table__cell--sortable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.table__cell--header:first-child{border-top-left-radius:var(--radius-md)}.table__cell--header:last-child{border-top-right-radius:var(--radius-md)}.table--borderless .table__header,.table--borderless .table__cell--header:first-child,.table--borderless .table__cell--header:last-child{border-radius:0}.table__cell--sticky{position:sticky;z-index:2;background-color:var(--color-body-bg)}.table__row:hover .table__cell--sticky{background-color:var(--color-light)}.table__cell--header.table__cell--sticky{top:0;z-index:1;background-color:var(--color-light)}.table__cell--selection.table__cell--sticky{z-index:2}.table__cell--header.table__cell--selection.table__cell--sticky{top:0;z-index:2}.table__cell--sticky-edge{box-shadow:2px 0 4px -2px #00000026}.table__resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;touch-action:none;z-index:10}.table__resize-handle:before{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:3px;background-color:var(--color-border);transform:translate(-50%)}.table__resize-handle:hover:before,.table__resize-handle:active:before{background-color:var(--color-primary)}.table__header-main{display:flex;align-items:center;flex:1 1 auto;min-width:0}.table__header-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:18px;letter-spacing:-.12px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table__header-actions{display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table__sort-indicator{display:inline-flex;align-items:center;pointer-events:none}.table__sort-arrow{width:16px;height:16px;color:var(--color-primary)}.table__sort-order{min-width:0;height:auto;display:inline-flex;align-items:center;justify-content:center;margin-left:-2px;color:var(--color-primary);font-size:10px;font-weight:var(--font-weight-semibold);line-height:1}.table__search-toggle{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-tertiary);cursor:pointer}.table__search-toggle:hover,.table__search-toggle[aria-pressed=true]{color:var(--color-primary);background-color:var(--color-body-bg)}.table__search-toggle-icon{width:16px;height:16px}.table__search-input{width:100%;min-width:0;--formfield-height: 24px;--formfield-min-height: 24px;--formfield-padding: 0 var(--spacing-1);--input-field-height: 16px;--formfield-border-radius: var(--radius-sm)}.table__cell-text{font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table__empty{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--spacing-4);color:var(--color-tertiary);font-family:var(--font-family-base);font-size:var(--font-size-sm);box-sizing:border-box}.table__scroll::-webkit-scrollbar{height:8px;width:8px}.table__scroll::-webkit-scrollbar-track{background:var(--color-light);border-radius:var(--radius-sm)}.table__scroll::-webkit-scrollbar-thumb{background-color:var(--color-tertiary);border-radius:var(--radius-sm)}.table__scroll::-webkit-scrollbar-thumb:hover{background-color:var(--color-secondary)}';
+var H = Object.defineProperty, R = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? R(t, i) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (r = (s ? d(t, i, r) : d(r)) || r);
+  return s && r && H(t, i, r), r;
+};
+const T = 160, x = 96, w = 48, M = 300, g = "__selection__", P = 60;
+function D(e) {
+  return e === "center" ? "center" : e === "right" ? "flex-end" : "flex-start";
+}
+let o = class extends K {
+  constructor() {
+    super(...arguments), this.columns = [], this.rows = [], this.rowKey = "id", this.emptyMessage = "Kayıt bulunamadı", this.selection = !1, this.stickySelection = !1, this.resizable = !1, this.borderless = !1, this.sortStates = [], this.selectedKeys = /* @__PURE__ */ new Set(), this.searchValues = /* @__PURE__ */ new Map(), this.activeSearchKeys = /* @__PURE__ */ new Set(), this.columnWidths = /* @__PURE__ */ new Map(), this.warnedSortableWithoutHandlerKey = "", this.warnedSearchableWithoutHandlerKey = "", this.warnedSelectionWithoutHandler = !1, this.searchTimers = /* @__PURE__ */ new Map(), this.resizing = !1, this.resizeStartX = 0, this.resizeStartWidth = 0, this._handleResizePointerDown = (e, t) => {
+      e.preventDefault(), e.stopPropagation(), this.resizing = !0, this.resizeColumn = t, this.resizeStartX = e.clientX, this.resizeStartWidth = this._effectiveWidth(t), window.addEventListener("pointermove", this._handleResizePointerMove), window.addEventListener("pointerup", this._handleResizePointerUp), window.addEventListener("pointercancel", this._handleResizePointerUp);
+    }, this._handleResizePointerMove = (e) => {
+      if (!this.resizing || !this.resizeColumn) return;
+      const t = e.clientX - this.resizeStartX, i = Math.max(P, Math.round(this.resizeStartWidth + t)), s = new Map(this.columnWidths);
+      s.set(this.resizeColumn.key, i), this.columnWidths = s;
+    }, this._handleResizePointerUp = () => {
+      if (!this.resizing || !this.resizeColumn) return;
+      const e = this.resizeColumn;
+      this.resizing = !1, this.resizeColumn = void 0, this._removeResizeListeners();
+      const t = { column: e, key: e.key, width: this._effectiveWidth(e) };
+      this.onWidthChange?.(t), this.dispatchEvent(
+        new CustomEvent("width-change", {
+          detail: t,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._renderRow = (e, t, i) => {
+      const s = i.get(g);
+      return c`
+      <div class="table__row" role="row" @click=${() => this._handleRowClick(e, t)}>
+        ${this.selection ? c`
+              <div
+                class=${this._selectionCellClass(!1, s)}
+                style=${this._selectionCellStyle(s)}
+                role="cell"
+              >
+                <logosphere-checkbox
+                  .checked=${this.selectedKeys.has(this._rowSelectionKey(e, t))}
+                  @click=${(r) => r.stopPropagation()}
+                  @lgsChange=${(r) => this._handleRowSelectionChange(r, e, t)}
+                ></logosphere-checkbox>
+              </div>
+            ` : _}
+        ${m(
+        this.columns,
+        (r) => r.key,
+        (r) => {
+          const l = i.get(r.key);
+          return c`
+              <div
+                class=${`table__cell${this._stickyCellClass(l)}`}
+                style=${this._cellStyle(r, l)}
+                role="cell"
+              >
+                ${this._renderCellValue(r, e, t)}
+              </div>
+            `;
+        }
+      )}
+        ${this.actionColumn ? c`
+              <div
+                class="table__cell table__cell--action"
+                style=${this._actionCellStyle()}
+                role="cell"
+                @click=${(r) => r.stopPropagation()}
+              >
+                ${this.actionColumn.render({ row: e, rowIndex: t })}
+              </div>
+            ` : _}
+      </div>
+    `;
+    };
+  }
+  firstUpdated() {
+    this._warnSortableWithoutHandler(), this._warnSearchableWithoutHandler(), this._warnSelectionWithoutHandler();
+  }
+  willUpdate(e) {
+    e.has("columns") && this._pruneStaleColumnState();
+  }
+  updated(e) {
+    (e.has("columns") || e.has("onSortChange")) && this._warnSortableWithoutHandler(), (e.has("columns") || e.has("onSearch")) && this._warnSearchableWithoutHandler(), this._warnSelectionWithoutHandler();
+  }
+  /**
+   * `columns` is passed in fresh from the consumer on every change (new array/column
+   * objects, columns removed or replaced). Internal state keyed by `column.key`
+   * (resize widths, active sort, in-progress search text) would otherwise keep
+   * referencing keys that no longer exist — a slow memory leak, and a correctness
+   * bug if a key is later reused for a semantically different column. This drops
+   * any entries whose key is no longer present in the current `columns`.
+   */
+  _pruneStaleColumnState() {
+    const e = new Set(this.columns.map((t) => t.key));
+    Array.from(this.columnWidths.keys()).some((t) => !e.has(t)) && (this.columnWidths = new Map(Array.from(this.columnWidths).filter(([t]) => e.has(t)))), Array.from(this.searchValues.keys()).some((t) => !e.has(t)) && (this.searchValues = new Map(Array.from(this.searchValues).filter(([t]) => e.has(t)))), Array.from(this.activeSearchKeys.keys()).some((t) => !e.has(t)) && (this.activeSearchKeys = new Set(Array.from(this.activeSearchKeys).filter((t) => e.has(t)))), this.sortStates.some((t) => !e.has(t.key)) && (this.sortStates = this.sortStates.filter((t) => e.has(t.key))), this.resizeColumn && !e.has(this.resizeColumn.key) && (this.resizing = !1, this.resizeColumn = void 0, this._removeResizeListeners());
+  }
+  disconnectedCallback() {
+    this.searchTimers.forEach((e) => clearTimeout(e)), this.searchTimers.clear(), this._removeResizeListeners(), super.disconnectedCallback();
+  }
+  _effectiveWidth(e) {
+    return this.columnWidths.get(e.key) ?? e.width ?? T;
+  }
+  _totalWidth() {
+    return this.columns.reduce((t, i) => t + this._effectiveWidth(i), 0) + (this.selection ? w : 0) + (this.actionColumn ? this.actionColumn.width ?? x : 0);
+  }
+  /**
+   * Pinned (sticky) columns are laid out left-to-right in `columns` order. The selection
+   * checkbox column only joins the pinned group when `stickySelection` is explicitly set —
+   * it does not become sticky automatically just because a data column is sticky. Only the
+   * single right-most pinned cell (by its resolved `left` offset) gets the divider shadow,
+   * even if the sticky columns aren't contiguous in `columns`.
+   */
+  _stickyLayout() {
+    const e = /* @__PURE__ */ new Map(), t = this.columns.filter((l) => l.sticky), i = this.selection && this.stickySelection;
+    if (!t.length && !i) return e;
+    let s = 0, r;
+    return i && (e.set(g, { left: s, isEdge: !1 }), r = g, s += w), this.columns.forEach((l) => {
+      l.sticky && (e.set(l.key, { left: s, isEdge: !1 }), r = l.key, s += this._effectiveWidth(l));
+    }), r && e.set(r, { ...e.get(r), isEdge: !0 }), e;
+  }
+  _stickyCellStyle(e) {
+    return e ? `left:${e.left}px;` : "";
+  }
+  _stickyCellClass(e) {
+    return e ? ` table__cell--sticky${e.isEdge ? " table__cell--sticky-edge" : ""}` : "";
+  }
+  /** Shared by the header and body selection (checkbox) cell — kept in sync in one place. */
+  _selectionCellClass(e, t) {
+    return `table__cell${e ? " table__cell--header" : ""} table__cell--selection${this._stickyCellClass(t)}`;
+  }
+  _selectionCellStyle(e) {
+    return `width:${w}px; justify-content:center; ${this._stickyCellStyle(e)}`;
+  }
+  _warnSortableWithoutHandler() {
+    const e = this.columns.filter((i) => i.sortable).map((i) => i.key);
+    if (this.onSortChange || !e.length) {
+      this.warnedSortableWithoutHandlerKey = "";
+      return;
+    }
+    const t = e.join("|");
+    this.warnedSortableWithoutHandlerKey !== t && (this.warnedSortableWithoutHandlerKey = t, console.warn(
+      `[logosphere-table] sortable true verilen kolonlar var (${e.join(", ")}), ancak onSortChange callback'i verilmemiş. Sort etkileşimi için onSortChange sağlayın.`
+    ));
+  }
+  _warnSelectionWithoutHandler() {
+    if (!this.selection || this.onSelectChange) {
+      this.warnedSelectionWithoutHandler = !1;
+      return;
+    }
+    this.warnedSelectionWithoutHandler || (this.warnedSelectionWithoutHandler = !0, console.warn(
+      "[logosphere-table] selection true verilmiş, ancak onSelectChange callback'i verilmemiş. Selection değişikliklerini almak için onSelectChange sağlayın."
+    ));
+  }
+  _warnSearchableWithoutHandler() {
+    const e = this.columns.filter((i) => i.searchable).map((i) => i.key);
+    if (this.onSearch || !e.length) {
+      this.warnedSearchableWithoutHandlerKey = "";
+      return;
+    }
+    const t = e.join("|");
+    this.warnedSearchableWithoutHandlerKey !== t && (this.warnedSearchableWithoutHandlerKey = t, console.warn(
+      `[logosphere-table] searchable true verilen kolonlar var (${e.join(", ")}), ancak onSearch callback'i verilmemiş. Search etkileşimi için onSearch sağlayın.`
+    ));
+  }
+  _rowSelectionKey(e, t) {
+    return e[this.rowKey] ?? t;
+  }
+  _selectedRows() {
+    return this.rows.filter((e, t) => this.selectedKeys.has(this._rowSelectionKey(e, t)));
+  }
+  _emitSelectionChange() {
+    const e = {
+      selectedRows: this._selectedRows(),
+      selectedKeys: Array.from(this.selectedKeys)
+    };
+    this.onSelectChange?.(e), this.dispatchEvent(
+      new CustomEvent("select-change", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _setSelectedKeys(e) {
+    this.selectedKeys = e, this._emitSelectionChange();
+  }
+  _handleSelectAllChange(e) {
+    e.stopPropagation();
+    const t = e.detail.checked ? new Set(this.rows.map((i, s) => this._rowSelectionKey(i, s))) : /* @__PURE__ */ new Set();
+    this._setSelectedKeys(t);
+  }
+  _handleRowSelectionChange(e, t, i) {
+    e.stopPropagation();
+    const s = new Set(this.selectedKeys), r = this._rowSelectionKey(t, i);
+    e.detail.checked ? s.add(r) : s.delete(r), this._setSelectedKeys(s);
+  }
+  _handleRowClick(e, t) {
+    this.onRowClick?.(e, t), this.dispatchEvent(
+      new CustomEvent("row-click", {
+        detail: { row: e, rowIndex: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _sortDetailStates(e) {
+    return e.map((t, i) => {
+      const s = this.columns.find((r) => r.key === t.key);
+      if (s)
+        return {
+          column: s,
+          key: t.key,
+          direction: t.direction,
+          order: i + 1
+        };
+    }).filter((t) => !!t);
+  }
+  _nextSortDirection(e) {
+    if (!e) return "asc";
+    if (e === "asc") return "desc";
+  }
+  _handleSortClick(e, t) {
+    if (!e.sortable || !this.onSortChange) return;
+    const i = this.sortStates.findIndex((p) => p.key === e.key);
+    let s, r;
+    if (t?.shiftKey)
+      if (s = [...this.sortStates], i >= 0) {
+        const p = s[i];
+        r = this._nextSortDirection(p.direction), r ? s[i] = { ...p, direction: r } : s.splice(i, 1);
+      } else
+        r = "asc", s.push({ key: e.key, direction: "asc" });
+    else {
+      const p = this.sortStates.length === 1 ? this.sortStates[0] : void 0;
+      r = this._nextSortDirection(p?.key === e.key ? p.direction : void 0), s = r ? [{ key: e.key, direction: r }] : [];
+    }
+    const l = this._sortDetailStates(s), d = {
+      column: e,
+      key: e.key,
+      direction: r,
+      sorts: l,
+      multi: l.length > 1
+    };
+    this.sortStates = s, this.onSortChange(d), this.dispatchEvent(
+      new CustomEvent("sort-change", {
+        detail: d,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _handleSearchInput(e, t) {
+    e.stopPropagation();
+    const i = e.currentTarget, s = e.detail?.value ?? i.value ?? "", r = new Map(this.searchValues);
+    r.set(t.key, s), this.searchValues = r;
+    const l = this.searchTimers.get(t.key);
+    l && clearTimeout(l);
+    const d = setTimeout(() => {
+      this.searchTimers.delete(t.key);
+      const a = { values: this.columns.filter((b) => b.searchable).map((b) => ({
+        key: b.key,
+        value: this.searchValues.get(b.key) ?? ""
+      })).filter((b) => b.value.trim() !== "") };
+      this.onSearch?.(a), this.dispatchEvent(
+        new CustomEvent("search-change", {
+          detail: a,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, M);
+    this.searchTimers.set(t.key, d);
+  }
+  _toggleSearchInput(e, t) {
+    e.stopPropagation();
+    const i = new Set(this.activeSearchKeys);
+    i.has(t.key) ? i.delete(t.key) : i.add(t.key), this.activeSearchKeys = i;
+  }
+  _renderCellValue(e, t, i) {
+    const s = t[e.key];
+    return e.render ? e.render({ value: s, row: t, rowIndex: i, column: e }) : c`<span class="table__cell-text">${s == null ? "" : String(s)}</span>`;
+  }
+  _cellStyle(e, t) {
+    return `width:${this._effectiveWidth(e)}px; justify-content:${D(e.align)}; ${this._stickyCellStyle(t)}`;
+  }
+  _actionCellStyle() {
+    return `width:${this.actionColumn?.width ?? x}px; justify-content:flex-end;`;
+  }
+  _headerCellClass(e) {
+    const { sortable: t, sorted: i, searchable: s, searchActive: r, resizable: l, sticky: d } = e;
+    return [
+      "table__cell",
+      "table__cell--header",
+      t ? "table__cell--sortable" : "",
+      i ? "table__cell--sorted" : "",
+      s ? "table__cell--searchable" : "",
+      r ? "table__cell--search-active" : "",
+      l ? "table__cell--resizable" : ""
+    ].filter(Boolean).join(" ").concat(this._stickyCellClass(d));
+  }
+  _renderSortIndicator(e, t = !1) {
+    return e ? c`
+      <span class="table__sort-indicator" aria-hidden="true">
+        <ui-icon
+          class="table__sort-arrow"
+          name=${e.direction === "asc" ? "uil-arrow-up" : "uil-arrow-down"}
+          size="16"
+        ></ui-icon>
+        ${t ? c`<span class="table__sort-order">${e.order}</span>` : _}
+      </span>
+    ` : _;
+  }
+  _renderSearchToggle(e, t) {
+    return e.searchable ? c`
+      <button
+        class="table__search-toggle"
+        type="button"
+        aria-label=${t ? `${e.label} aramasını kapat` : `${e.label} ara`}
+        aria-pressed=${t ? "true" : "false"}
+        @click=${(i) => this._toggleSearchInput(i, e)}
+        @keydown=${(i) => i.stopPropagation()}
+      >
+        <ui-icon class="table__search-toggle-icon" name="uil-search" size="16"></ui-icon>
+      </button>
+    ` : _;
+  }
+  _renderSearchInput(e, t) {
+    return !e.searchable || !t ? _ : c`
+      <logosphere-input
+        class="table__search-input"
+        placeholder=${e.label}
+        .value=${this.searchValues.get(e.key) ?? ""}
+        @click=${(i) => i.stopPropagation()}
+        @keydown=${(i) => i.stopPropagation()}
+        @input=${(i) => this._handleSearchInput(i, e)}
+      ></logosphere-input>
+    `;
+  }
+  _renderHeaderMain(e, t) {
+    return t ? c`<span class="table__header-main">${this._renderSearchInput(e, t)}</span>` : c`<span class="table__header-main">
+      <span class="table__header-label">${e.label}</span>
+    </span>`;
+  }
+  _removeResizeListeners() {
+    window.removeEventListener("pointermove", this._handleResizePointerMove), window.removeEventListener("pointerup", this._handleResizePointerUp), window.removeEventListener("pointercancel", this._handleResizePointerUp);
+  }
+  _renderResizeHandle(e) {
+    return this.resizable ? c`
+      <span
+        class="table__resize-handle"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label=${`${e.label} genişliğini yeniden boyutlandır`}
+        @pointerdown=${(t) => this._handleResizePointerDown(t, e)}
+        @click=${(t) => t.stopPropagation()}
+      ></span>
+    ` : _;
+  }
+  _renderHeader(e) {
+    const t = this.selectedKeys.size, i = this.rows.length > 0 && t === this.rows.length, s = t > 0 && t < this.rows.length, r = e.get(g), l = this._sortDetailStates(this.sortStates), d = new Map(l.map((a) => [a.key, a])), p = l.length > 1;
+    return c`
+      <div class="table__header" role="row">
+        ${this.selection ? c`
+              <div
+                class=${this._selectionCellClass(!0, r)}
+                style=${this._selectionCellStyle(r)}
+                role="columnheader"
+              >
+                <logosphere-checkbox
+                  .checked=${i}
+                  .indeterminate=${s}
+                  @click=${(a) => a.stopPropagation()}
+                  @lgsChange=${(a) => this._handleSelectAllChange(a)}
+                ></logosphere-checkbox>
+              </div>
+            ` : _}
+        ${m(
+      this.columns,
+      (a) => a.key,
+      (a) => {
+        const b = !!(a.sortable && this.onSortChange), f = b ? d.get(a.key) : void 0, C = !!f, S = !!a.searchable, v = S && this.activeSearchKeys.has(a.key), k = e.get(a.key);
+        return c`
+              <div
+                class=${this._headerCellClass({ sortable: b, sorted: C, searchable: S, searchActive: v, resizable: this.resizable, sticky: k })}
+                style=${this._cellStyle(a, k)}
+                role="columnheader"
+                tabindex=${b ? "0" : _}
+                aria-sort=${b ? f ? f.direction === "asc" ? "ascending" : "descending" : "none" : _}
+                @click=${(u) => this._handleSortClick(a, u)}
+                @keydown=${(u) => {
+          u.key !== "Enter" && u.key !== " " || (u.preventDefault(), this._handleSortClick(a, u));
+        }}
+              >
+                ${this._renderHeaderMain(a, v)}
+                <span class="table__header-actions">
+                  ${this._renderSearchToggle(a, v)}
+                  ${this._renderSortIndicator(f, p)}
+                </span>
+                ${this._renderResizeHandle(a)}
+              </div>
+            `;
+      }
+    )}
+        ${this.actionColumn ? c`
+              <div
+                class="table__cell table__cell--header table__cell--action"
+                style=${this._actionCellStyle()}
+                role="columnheader"
+                aria-label="Actions"
+              ></div>
+            ` : _}
+      </div>
+    `;
+  }
+  _renderBody(e, t) {
+    return this.rows.length ? c`
+      <div class="table__body">
+        ${m(
+      this.rows,
+      (i, s) => i[this.rowKey] ?? s,
+      (i, s) => this._renderRow(i, s, t)
+    )}
+      </div>
+    ` : c`<div class="table__empty" style=${`min-width:${e}px; width:100%;`}>
+        ${this.emptyMessage}
+      </div>`;
+  }
+  _tableClass() {
+    return ["table", this.borderless ? "table--borderless" : ""].filter(Boolean).join(" ");
+  }
+  render() {
+    const e = this._totalWidth(), t = this.maxHeight ? `max-height:${this.maxHeight}px;` : _, i = this._stickyLayout();
+    return c`
+      <div class=${this._tableClass()}>
+        <div class="table__scroll" style=${t}>
+          <div class="table__inner" style=${`min-width:${e}px; width:100%;`}>
+            ${this._renderHeader(i)} ${this._renderBody(e, i)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [
+  z`
+      ${$(E)}
+    `
+];
+n([
+  h({ attribute: !1 })
+], o.prototype, "columns", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "actionColumn", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "rows", 2);
+n([
+  h({ type: String, attribute: "row-key" })
+], o.prototype, "rowKey", 2);
+n([
+  h({ type: String, attribute: "empty-message" })
+], o.prototype, "emptyMessage", 2);
+n([
+  h({ type: Number, attribute: "max-height" })
+], o.prototype, "maxHeight", 2);
+n([
+  h({ type: Boolean })
+], o.prototype, "selection", 2);
+n([
+  h({ type: Boolean, attribute: "sticky-selection" })
+], o.prototype, "stickySelection", 2);
+n([
+  h({ type: Boolean })
+], o.prototype, "resizable", 2);
+n([
+  h({ type: Boolean })
+], o.prototype, "borderless", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "onRowClick", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "onSortChange", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "onSelectChange", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "onSearch", 2);
+n([
+  h({ attribute: !1 })
+], o.prototype, "onWidthChange", 2);
+n([
+  y()
+], o.prototype, "sortStates", 2);
+n([
+  y()
+], o.prototype, "selectedKeys", 2);
+n([
+  y()
+], o.prototype, "searchValues", 2);
+n([
+  y()
+], o.prototype, "activeSearchKeys", 2);
+n([
+  y()
+], o.prototype, "columnWidths", 2);
+o = n([
+  W("logosphere-table")
+], o);
+export {
+  o as T
+};