@toolbox-web/grid 0.0.1

package/lib/plugins/filtering/index.js

@@ -0,0 +1,759 @@
+class P {
+  /** Plugin version - override in subclass if needed */
+  version = "1.0.0";
+  /** CSS styles to inject into the grid's shadow DOM */
+  styles;
+  /** Custom cell renderers keyed by type name */
+  cellRenderers;
+  /** Custom header renderers keyed by type name */
+  headerRenderers;
+  /** Custom cell editors keyed by type name */
+  cellEditors;
+  /** The grid instance this plugin is attached to */
+  grid;
+  /** Plugin configuration - merged with defaults in attach() */
+  config;
+  /** User-provided configuration from constructor */
+  userConfig;
+  /**
+   * Default configuration - subclasses should override this getter.
+   * Note: This must be a getter (not property initializer) for proper inheritance
+   * since property initializers run after parent constructor.
+   */
+  get defaultConfig() {
+    return {};
+  }
+  constructor(e = {}) {
+    this.userConfig = e;
+  }
+  /**
+   * Called when the plugin is attached to a grid.
+   * Override to set up event listeners, initialize state, etc.
+   */
+  attach(e) {
+    this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+  }
+  /**
+   * Called when the plugin is detached from a grid.
+   * Override to clean up event listeners, timers, etc.
+   */
+  detach() {
+  }
+  /**
+   * Get another plugin instance from the same grid.
+   * Use for inter-plugin communication.
+   */
+  getPlugin(e) {
+    return this.grid?.getPlugin(e);
+  }
+  /**
+   * Emit a custom event from the grid.
+   */
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
+  }
+  /**
+   * Request a re-render of the grid.
+   */
+  requestRender() {
+    this.grid?.requestRender?.();
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Use this instead of requestRender() when only CSS classes need updating.
+   */
+  requestAfterRender() {
+    this.grid?.requestAfterRender?.();
+  }
+  /**
+   * Get the current rows from the grid.
+   */
+  get rows() {
+    return this.grid?.rows ?? [];
+  }
+  /**
+   * Get the original unfiltered/unprocessed rows from the grid.
+   * Use this when you need all source data regardless of active filters.
+   */
+  get sourceRows() {
+    return this.grid?.sourceRows ?? [];
+  }
+  /**
+   * Get the current columns from the grid.
+   */
+  get columns() {
+    return this.grid?.columns ?? [];
+  }
+  /**
+   * Get only visible columns from the grid (excludes hidden).
+   * Use this for rendering that needs to match the grid template.
+   */
+  get visibleColumns() {
+    return this.grid?.visibleColumns ?? [];
+  }
+  /**
+   * Get the shadow root of the grid.
+   */
+  get shadowRoot() {
+    return this.grid?.shadowRoot ?? null;
+  }
+  /**
+   * Log a warning message.
+   */
+  warn(e) {
+    console.warn(`[tbw-grid:${this.name}] ${e}`);
+  }
+}
+function A(f) {
+  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: l, overscan: s } = f, i = Math.ceil(t / l);
+  let n = Math.floor(r / l) - s;
+  n < 0 && (n = 0);
+  let u = n + i + s * 2;
+  return u > e && (u = e), u === e && n > 0 && (n = Math.max(0, u - i - s * 2)), {
+    start: n,
+    end: u,
+    offsetY: n * l,
+    totalHeight: e * l
+  };
+}
+function V(f, e) {
+  return f <= e;
+}
+function _(f, e, t = !1) {
+  const r = f[e.field];
+  if (e.operator === "blank")
+    return r == null || r === "";
+  if (e.operator === "notBlank")
+    return r != null && r !== "";
+  if (r == null) return !1;
+  const l = String(r), s = t ? l : l.toLowerCase(), i = t ? String(e.value) : String(e.value).toLowerCase();
+  switch (e.operator) {
+    // Text operators
+    case "contains":
+      return s.includes(i);
+    case "notContains":
+      return !s.includes(i);
+    case "equals":
+      return s === i;
+    case "notEquals":
+      return s !== i;
+    case "startsWith":
+      return s.startsWith(i);
+    case "endsWith":
+      return s.endsWith(i);
+    // Number/Date operators (use raw numeric values)
+    case "lessThan":
+      return Number(r) < Number(e.value);
+    case "lessThanOrEqual":
+      return Number(r) <= Number(e.value);
+    case "greaterThan":
+      return Number(r) > Number(e.value);
+    case "greaterThanOrEqual":
+      return Number(r) >= Number(e.value);
+    case "between":
+      return Number(r) >= Number(e.value) && Number(r) <= Number(e.valueTo);
+    // Set operators
+    case "in":
+      return Array.isArray(e.value) && e.value.includes(r);
+    case "notIn":
+      return Array.isArray(e.value) && !e.value.includes(r);
+    default:
+      return !0;
+  }
+}
+function q(f, e, t = !1) {
+  return e.length ? f.filter((r) => e.every((l) => _(r, l, t))) : f;
+}
+function B(f) {
+  return JSON.stringify(
+    f.map((e) => ({
+      field: e.field,
+      operator: e.operator,
+      value: e.value,
+      valueTo: e.valueTo
+    }))
+  );
+}
+function M(f, e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const r of f) {
+    const l = r[e];
+    l != null && t.add(l);
+  }
+  return [...t].sort((r, l) => typeof r == "number" && typeof l == "number" ? r - l : String(r).localeCompare(String(l)));
+}
+const z = `
+.tbw-filter-panel {
+  position: fixed;
+  background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
+  color: var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));
+  border: 1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));
+  box-shadow: 0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.3))));
+  padding: 12px;
+  z-index: 10000;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: 350px;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--tbw-font-family, system-ui, sans-serif);
+  font-size: var(--tbw-font-size, 13px);
+}
+
+.tbw-filter-search {
+  margin-bottom: 8px;
+}
+
+.tbw-filter-search-input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));
+  color: inherit;
+  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: var(--tbw-filter-input-radius, 4px);
+  font-size: inherit;
+  box-sizing: border-box;
+}
+
+.tbw-filter-search-input:focus {
+  outline: none;
+  border-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  box-shadow: 0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%);
+}
+
+.tbw-filter-actions {
+  display: flex;
+  padding: 4px 2px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+}
+
+.tbw-filter-action-btn {
+  background: transparent;
+  border: none;
+  color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 0;
+}
+
+.tbw-filter-action-btn:hover {
+  text-decoration: underline;
+}
+
+.tbw-filter-values {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 8px;
+  max-height: 180px;
+  position: relative;
+}
+
+.tbw-filter-values-spacer {
+  width: 1px;
+}
+
+.tbw-filter-values-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.tbw-filter-value-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 2px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.tbw-filter-value-item:hover {
+  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
+}
+
+.tbw-filter-checkbox {
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+}
+
+.tbw-filter-no-match {
+  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
+  padding: 8px 0;
+  text-align: center;
+  font-style: italic;
+}
+
+.tbw-filter-buttons {
+  display: flex;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+}
+
+.tbw-filter-apply-btn {
+  flex: 1;
+  padding: 6px 12px;
+  background: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+  color: var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.tbw-filter-apply-btn:hover {
+  filter: brightness(0.9);
+}
+
+.tbw-filter-clear-btn {
+  flex: 1;
+  padding: 6px 12px;
+  background: transparent;
+  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
+  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.tbw-filter-clear-btn:hover {
+  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
+}
+`;
+class y extends P {
+  name = "filtering";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      debounceMs: 300,
+      caseSensitive: !1,
+      trimInput: !0,
+      useWorker: !0
+    };
+  }
+  // ===== Internal State =====
+  filters = /* @__PURE__ */ new Map();
+  cachedResult = null;
+  cacheKey = null;
+  openPanelField = null;
+  panelElement = null;
+  searchText = /* @__PURE__ */ new Map();
+  excludedValues = /* @__PURE__ */ new Map();
+  documentClickHandler = null;
+  globalStylesInjected = !1;
+  // Virtualization constants for filter value list
+  static LIST_ITEM_HEIGHT = 28;
+  static LIST_OVERSCAN = 3;
+  static LIST_BYPASS_THRESHOLD = 50;
+  // Don't virtualize if < 50 items
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e), this.injectGlobalStyles();
+  }
+  detach() {
+    this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.removeDocumentClickHandler();
+  }
+  // ===== Hooks =====
+  processRows(e) {
+    const t = [...this.filters.values()];
+    if (!t.length) return [...e];
+    const r = B(t);
+    if (this.cacheKey === r && this.cachedResult)
+      return this.cachedResult;
+    const l = q([...e], t, this.config.caseSensitive);
+    return this.cachedResult = l, this.cacheKey = r, l;
+  }
+  afterRender() {
+    if (!this.config.enabled) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    e.querySelectorAll('[part~="header-cell"]').forEach((r) => {
+      const l = r.getAttribute("data-col");
+      if (l === null) return;
+      const s = this.columns[parseInt(l, 10)];
+      if (!s || s.filterable === !1 || r.querySelector(".tbw-filter-btn")) return;
+      const i = s.field;
+      if (!i) return;
+      const n = document.createElement("button");
+      n.className = "tbw-filter-btn", n.setAttribute("aria-label", `Filter ${s.header ?? i}`), n.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', this.filters.has(i) && (n.classList.add("active"), r.classList.add("filtered")), n.addEventListener("click", (u) => {
+        u.stopPropagation(), this.toggleFilterPanel(i, s, n);
+      }), r.appendChild(n);
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Set a filter on a specific field.
+   * Pass null to remove the filter.
+   */
+  setFilter(e, t) {
+    t === null ? this.filters.delete(e) : this.filters.set(e, { ...t, field: e }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+      // Will be accurate after processRows
+    }), this.requestRender();
+  }
+  /**
+   * Get the current filter for a field.
+   */
+  getFilter(e) {
+    return this.filters.get(e);
+  }
+  /**
+   * Get all active filters.
+   */
+  getFilters() {
+    return [...this.filters.values()];
+  }
+  /**
+   * Alias for getFilters() to match functional API naming.
+   */
+  getFilterModel() {
+    return this.getFilters();
+  }
+  /**
+   * Set filters from an array (replaces all existing filters).
+   */
+  setFilterModel(e) {
+    this.filters.clear();
+    for (const t of e)
+      this.filters.set(t.field, t);
+    this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Clear all filters.
+   */
+  clearAllFilters() {
+    this.filters.clear(), this.excludedValues.clear(), this.searchText.clear(), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [],
+      filteredRowCount: this.rows.length
+    }), this.requestRender();
+  }
+  /**
+   * Clear filter for a specific field.
+   */
+  clearFieldFilter(e) {
+    this.filters.delete(e), this.excludedValues.delete(e), this.searchText.delete(e), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Check if a field has an active filter.
+   */
+  isFieldFiltered(e) {
+    return this.filters.has(e);
+  }
+  /**
+   * Get the count of filtered rows (from cache).
+   */
+  getFilteredRowCount() {
+    return this.cachedResult?.length ?? this.rows.length;
+  }
+  /**
+   * Get all active filters (alias for getFilters).
+   */
+  getActiveFilters() {
+    return this.getFilters();
+  }
+  /**
+   * Get unique values for a field (for set filter dropdowns).
+   * Uses sourceRows to include all values regardless of current filter.
+   */
+  getUniqueValues(e) {
+    return M(this.sourceRows, e);
+  }
+  // ===== Private Methods =====
+  /**
+   * Inject global styles for filter panel (rendered in document.body)
+   */
+  injectGlobalStyles() {
+    if (this.globalStylesInjected) return;
+    if (document.getElementById("tbw-filter-panel-styles")) {
+      this.globalStylesInjected = !0;
+      return;
+    }
+    const e = document.createElement("style");
+    e.id = "tbw-filter-panel-styles", e.textContent = z, document.head.appendChild(e), this.globalStylesInjected = !0;
+  }
+  /**
+   * Toggle the filter panel for a field
+   */
+  toggleFilterPanel(e, t, r) {
+    if (this.openPanelField === e) {
+      this.closeFilterPanel();
+      return;
+    }
+    this.closeFilterPanel();
+    const l = document.createElement("div");
+    l.className = "tbw-filter-panel", this.panelElement = l, this.openPanelField = e;
+    const s = M(this.sourceRows, e);
+    let i = this.excludedValues.get(e);
+    i || (i = /* @__PURE__ */ new Set(), this.excludedValues.set(e, i));
+    const n = this.searchText.get(e) ?? "", u = {
+      field: e,
+      column: t,
+      uniqueValues: s,
+      excludedValues: i,
+      searchText: n,
+      applySetFilter: (m) => {
+        this.applySetFilter(e, m), this.closeFilterPanel();
+      },
+      applyTextFilter: (m, k, w) => {
+        this.applyTextFilter(e, m, k, w), this.closeFilterPanel();
+      },
+      clearFilter: () => {
+        this.clearFieldFilter(e), this.closeFilterPanel();
+      },
+      closePanel: () => this.closeFilterPanel()
+    };
+    let g = !1;
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(l, u), g = l.children.length > 0), g || this.renderDefaultFilterPanel(l, u, s, i), document.body.appendChild(l), this.positionPanel(l, r);
+    const p = (m) => {
+      !l.contains(m.target) && m.target !== r && this.closeFilterPanel();
+    };
+    this.documentClickHandler = p, setTimeout(() => {
+      document.addEventListener("click", p);
+    }, 0);
+  }
+  /**
+   * Close the filter panel
+   */
+  closeFilterPanel() {
+    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.removeDocumentClickHandler();
+  }
+  /**
+   * Remove the document click handler
+   */
+  removeDocumentClickHandler() {
+    this.documentClickHandler && (document.removeEventListener("click", this.documentClickHandler), this.documentClickHandler = null);
+  }
+  /**
+   * Position the panel below the button
+   */
+  positionPanel(e, t) {
+    const r = t.getBoundingClientRect();
+    e.style.position = "fixed", e.style.top = `${r.bottom + 4}px`, e.style.left = `${r.left}px`, requestAnimationFrame(() => {
+      const l = e.getBoundingClientRect();
+      l.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - l.width - 8}px`), l.bottom > window.innerHeight - 8 && (e.style.top = `${r.top - l.height - 4}px`);
+    });
+  }
+  /**
+   * Render the default filter panel content
+   */
+  renderDefaultFilterPanel(e, t, r, l) {
+    const { field: s } = t, i = document.createElement("div");
+    i.className = "tbw-filter-search";
+    const n = document.createElement("input");
+    n.type = "text", n.placeholder = "Search...", n.className = "tbw-filter-search-input", n.value = this.searchText.get(s) ?? "", i.appendChild(n), e.appendChild(i);
+    const u = document.createElement("div");
+    u.className = "tbw-filter-actions";
+    const g = document.createElement("label");
+    g.className = "tbw-filter-value-item", g.style.padding = "0", g.style.margin = "0";
+    const p = document.createElement("input");
+    p.type = "checkbox", p.className = "tbw-filter-checkbox";
+    const m = document.createElement("span");
+    m.textContent = "Select All", g.appendChild(p), g.appendChild(m), u.appendChild(g);
+    const k = () => {
+      const a = [...x.values()], d = a.every((c) => c), h = a.every((c) => !c);
+      p.checked = d, p.indeterminate = !d && !h;
+    };
+    p.addEventListener("change", () => {
+      const a = p.checked;
+      for (const d of x.keys())
+        x.set(d, a);
+      k(), F();
+    }), e.appendChild(u);
+    const w = document.createElement("div");
+    w.className = "tbw-filter-values";
+    const E = document.createElement("div");
+    E.className = "tbw-filter-values-spacer", w.appendChild(E);
+    const b = document.createElement("div");
+    b.className = "tbw-filter-values-content", w.appendChild(b);
+    const x = /* @__PURE__ */ new Map();
+    r.forEach((a) => {
+      const d = a == null ? "__null__" : String(a);
+      x.set(d, !l.has(a));
+    }), k();
+    let C = [];
+    const H = (a, d) => {
+      const h = a == null ? "(Blank)" : String(a), c = a == null ? "__null__" : String(a), o = document.createElement("label");
+      o.className = "tbw-filter-value-item", o.style.position = "absolute", o.style.top = `${d * y.LIST_ITEM_HEIGHT}px`, o.style.left = "0", o.style.right = "0", o.style.height = `${y.LIST_ITEM_HEIGHT}px`, o.style.boxSizing = "border-box";
+      const v = document.createElement("input");
+      v.type = "checkbox", v.className = "tbw-filter-checkbox", v.checked = x.get(c) ?? !0, v.dataset.value = c, v.addEventListener("change", () => {
+        x.set(c, v.checked), k();
+      });
+      const N = document.createElement("span");
+      return N.textContent = h, o.appendChild(v), o.appendChild(N), o;
+    }, F = () => {
+      const a = C.length, d = w.clientHeight, h = w.scrollTop;
+      if (E.style.height = `${a * y.LIST_ITEM_HEIGHT}px`, V(a, y.LIST_BYPASS_THRESHOLD / 3)) {
+        b.innerHTML = "", b.style.transform = "translateY(0px)", C.forEach((o, v) => {
+          b.appendChild(H(o, v));
+        });
+        return;
+      }
+      const c = A({
+        totalRows: a,
+        viewportHeight: d,
+        scrollTop: h,
+        rowHeight: y.LIST_ITEM_HEIGHT,
+        overscan: y.LIST_OVERSCAN
+      });
+      b.style.transform = `translateY(${c.offsetY}px)`, b.innerHTML = "";
+      for (let o = c.start; o < c.end; o++)
+        b.appendChild(H(C[o], o - c.start));
+    }, I = (a) => {
+      const d = a.toLowerCase();
+      if (C = r.filter((h) => {
+        const c = h == null ? "(Blank)" : String(h);
+        return !a || c.toLowerCase().includes(d);
+      }), C.length === 0) {
+        E.style.height = "0px", b.innerHTML = "";
+        const h = document.createElement("div");
+        h.className = "tbw-filter-no-match", h.textContent = "No matching values", b.appendChild(h);
+        return;
+      }
+      F();
+    };
+    w.addEventListener(
+      "scroll",
+      () => {
+        C.length > 0 && F();
+      },
+      { passive: !0 }
+    ), I(n.value), e.appendChild(w);
+    let L;
+    n.addEventListener("input", () => {
+      clearTimeout(L), L = setTimeout(() => {
+        this.searchText.set(s, n.value), I(n.value);
+      }, this.config.debounceMs ?? 150);
+    });
+    const R = document.createElement("div");
+    R.className = "tbw-filter-buttons";
+    const S = document.createElement("button");
+    S.className = "tbw-filter-apply-btn", S.textContent = "Apply", S.addEventListener("click", () => {
+      const a = [];
+      for (const [d, h] of x)
+        if (!h)
+          if (d === "__null__")
+            a.push(null);
+          else {
+            const c = r.find((o) => String(o) === d);
+            a.push(c !== void 0 ? c : d);
+          }
+      t.applySetFilter(a);
+    }), R.appendChild(S);
+    const T = document.createElement("button");
+    T.className = "tbw-filter-clear-btn", T.textContent = "Clear Filter", T.addEventListener("click", () => {
+      t.clearFilter();
+    }), R.appendChild(T), e.appendChild(R);
+  }
+  /**
+   * Apply a set filter (exclude values)
+   */
+  applySetFilter(e, t) {
+    this.excludedValues.set(e, new Set(t)), t.length === 0 ? this.filters.delete(e) : this.filters.set(e, {
+      field: e,
+      type: "set",
+      operator: "notIn",
+      value: t
+    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  /**
+   * Apply a text filter
+   */
+  applyTextFilter(e, t, r, l) {
+    this.filters.set(e, {
+      field: e,
+      type: "text",
+      operator: t,
+      value: r,
+      valueTo: l
+    }), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
+      filters: [...this.filters.values()],
+      filteredRowCount: 0
+    }), this.requestRender();
+  }
+  // ===== Column State Hooks =====
+  /**
+   * Return filter state for a column if it has an active filter.
+   */
+  getColumnState(e) {
+    const t = this.filters.get(e);
+    if (t)
+      return {
+        filter: {
+          type: t.type,
+          operator: t.operator,
+          value: t.value,
+          valueTo: t.valueTo
+        }
+      };
+  }
+  /**
+   * Apply filter state from column state.
+   */
+  applyColumnState(e, t) {
+    if (!t.filter) {
+      this.filters.delete(e);
+      return;
+    }
+    const r = {
+      field: e,
+      type: t.filter.type,
+      operator: t.filter.operator,
+      value: t.filter.value,
+      valueTo: t.filter.valueTo
+    };
+    this.filters.set(e, r), this.cachedResult = null, this.cacheKey = null;
+  }
+  // ===== Styles =====
+  styles = `
+    .header-cell.filtered::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 6px;
+      height: 6px;
+      background: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+      border-radius: 50%;
+    }
+    .tbw-filter-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 2px;
+      margin-left: 4px;
+      opacity: 0.4;
+      transition: opacity 0.15s;
+      color: inherit;
+      vertical-align: middle;
+    }
+    .tbw-filter-btn:hover,
+    .tbw-filter-btn.active {
+      opacity: 1;
+    }
+    .tbw-filter-btn.active {
+      color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
+    }
+  `;
+}
+export {
+  y as FilteringPlugin
+};
+//# sourceMappingURL=index.js.map