@toolbox-web/grid 0.0.4 → 0.0.6

package/lib/plugins/filtering/index.js

@@ -1,4 +1,28 @@
-class P {
+function M(f) {
+  const { totalRows: e, viewportHeight: t, scrollTop: r, rowHeight: l, overscan: a } = f, i = Math.ceil(t / l);
+  let n = Math.floor(r / l) - a;
+  n < 0 && (n = 0);
+  let u = n + i + a * 2;
+  return u > e && (u = e), u === e && n > 0 && (n = Math.max(0, u - i - a * 2)), {
+    start: n,
+    end: u,
+    offsetY: n * l,
+    totalHeight: e * l
+  };
+}
+function P(f, e) {
+  return f <= e;
+}
+const _ = {
+  expand: "▶",
+  collapse: "▼",
+  sortAsc: "▲",
+  sortDesc: "▼",
+  sortNone: "⇅",
+  submenuArrow: "▶",
+  dragHandle: "⋮⋮"
+};
+class V {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -97,6 +121,55 @@ class P {
   get shadowRoot() {
     return this.grid?.shadowRoot ?? null;
   }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.grid?.disconnectSignal;
+  }
+  /**
+   * Get the grid-level icons configuration.
+   * Returns merged icons (user config + defaults).
+   */
+  get gridIcons() {
+    const e = this.grid?.gridConfig?.icons ?? {};
+    return { ..._, ...e };
+  }
+  /**
+   * Resolve an icon value to string or HTMLElement.
+   * Checks plugin config first, then grid-level icons, then defaults.
+   *
+   * @param iconKey - The icon key in GridIcons (e.g., 'expand', 'collapse')
+   * @param pluginOverride - Optional plugin-level override
+   * @returns The resolved icon value
+   */
+  resolveIcon(e, t) {
+    return t !== void 0 ? t : this.gridIcons[e];
+  }
+  /**
+   * Set an icon value on an element.
+   * Handles both string (text/HTML) and HTMLElement values.
+   *
+   * @param element - The element to set the icon on
+   * @param icon - The icon value (string or HTMLElement)
+   */
+  setIcon(e, t) {
+    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
+  }
   /**
    * Log a warning message.
    */
@@ -104,43 +177,28 @@ class P {
     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) {
+function q(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();
+  const l = String(r), a = t ? l : l.toLowerCase(), i = t ? String(e.value) : String(e.value).toLowerCase();
   switch (e.operator) {
     // Text operators
     case "contains":
-      return s.includes(i);
+      return a.includes(i);
     case "notContains":
-      return !s.includes(i);
+      return !a.includes(i);
     case "equals":
-      return s === i;
+      return a === i;
     case "notEquals":
-      return s !== i;
+      return a !== i;
     case "startsWith":
-      return s.startsWith(i);
+      return a.startsWith(i);
     case "endsWith":
-      return s.endsWith(i);
+      return a.endsWith(i);
     // Number/Date operators (use raw numeric values)
     case "lessThan":
       return Number(r) < Number(e.value);
@@ -161,10 +219,10 @@ function _(f, e, t = !1) {
       return !0;
   }
 }
-function q(f, e, t = !1) {
-  return e.length ? f.filter((r) => e.every((l) => _(r, l, t))) : f;
+function B(f, e, t = !1) {
+  return e.length ? f.filter((r) => e.every((l) => q(r, l, t))) : f;
 }
-function B(f) {
+function z(f) {
   return JSON.stringify(
     f.map((e) => ({
       field: e.field,
@@ -174,7 +232,7 @@ function B(f) {
     }))
   );
 }
-function M(f, e) {
+function H(f, e) {
   const t = /* @__PURE__ */ new Set();
   for (const r of f) {
     const l = r[e];
@@ -182,7 +240,7 @@ function M(f, e) {
   }
   return [...t].sort((r, l) => typeof r == "number" && typeof l == "number" ? r - l : String(r).localeCompare(String(l)));
 }
-const z = `
+const K = `
 .tbw-filter-panel {
   position: fixed;
   background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
@@ -324,7 +382,7 @@ const z = `
   background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
 }
 `;
-class y extends P {
+class x extends V {
   name = "filtering";
   version = "1.0.0";
   get defaultConfig() {
@@ -344,7 +402,8 @@ class y extends P {
   panelElement = null;
   searchText = /* @__PURE__ */ new Map();
   excludedValues = /* @__PURE__ */ new Map();
-  documentClickHandler = null;
+  panelAbortController = null;
+  // For panel-scoped listeners
   globalStylesInjected = !1;
   // Virtualization constants for filter value list
   static LIST_ITEM_HEIGHT = 28;
@@ -356,16 +415,16 @@ class y extends P {
     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();
+    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.panelAbortController?.abort(), this.panelAbortController = null;
   }
   // ===== Hooks =====
   processRows(e) {
     const t = [...this.filters.values()];
     if (!t.length) return [...e];
-    const r = B(t);
+    const r = z(t);
     if (this.cacheKey === r && this.cachedResult)
       return this.cachedResult;
-    const l = q([...e], t, this.config.caseSensitive);
+    const l = B([...e], t, this.config.caseSensitive);
     return this.cachedResult = l, this.cacheKey = r, l;
   }
   afterRender() {
@@ -375,13 +434,13 @@ class y extends P {
     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;
+      const a = this.columns[parseInt(l, 10)];
+      if (!a || a.filterable === !1 || r.querySelector(".tbw-filter-btn")) return;
+      const i = a.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);
+      n.className = "tbw-filter-btn", n.setAttribute("aria-label", `Filter ${a.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, a, n);
       }), r.appendChild(n);
     });
   }
@@ -468,7 +527,7 @@ class y extends P {
    * Uses sourceRows to include all values regardless of current filter.
    */
   getUniqueValues(e) {
-    return M(this.sourceRows, e);
+    return H(this.sourceRows, e);
   }
   // ===== Private Methods =====
   /**
@@ -481,7 +540,7 @@ class y extends P {
       return;
     }
     const e = document.createElement("style");
-    e.id = "tbw-filter-panel-styles", e.textContent = z, document.head.appendChild(e), this.globalStylesInjected = !0;
+    e.id = "tbw-filter-panel-styles", e.textContent = K, document.head.appendChild(e), this.globalStylesInjected = !0;
   }
   /**
    * Toggle the filter panel for a field
@@ -494,20 +553,20 @@ class y extends P {
     this.closeFilterPanel();
     const l = document.createElement("div");
     l.className = "tbw-filter-panel", this.panelElement = l, this.openPanelField = e;
-    const s = M(this.sourceRows, e);
+    const a = H(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,
+      uniqueValues: a,
       excludedValues: i,
       searchText: n,
-      applySetFilter: (m) => {
-        this.applySetFilter(e, m), this.closeFilterPanel();
+      applySetFilter: (h) => {
+        this.applySetFilter(e, h), this.closeFilterPanel();
       },
-      applyTextFilter: (m, k, w) => {
-        this.applyTextFilter(e, m, k, w), this.closeFilterPanel();
+      applyTextFilter: (h, E, C) => {
+        this.applyTextFilter(e, h, E, C), this.closeFilterPanel();
       },
       clearFilter: () => {
         this.clearFieldFilter(e), this.closeFilterPanel();
@@ -515,25 +574,21 @@ class y extends P {
       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);
+    this.config.filterPanelRenderer && (this.config.filterPanelRenderer(l, u), g = l.children.length > 0), g || this.renderDefaultFilterPanel(l, u, a, i), document.body.appendChild(l), this.positionPanel(l, r), this.panelAbortController = new AbortController(), setTimeout(() => {
+      document.addEventListener(
+        "click",
+        (h) => {
+          !l.contains(h.target) && h.target !== r && this.closeFilterPanel();
+        },
+        { signal: this.panelAbortController?.signal }
+      );
     }, 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);
+    this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.openPanelField = null, this.panelAbortController?.abort(), this.panelAbortController = null;
   }
   /**
    * Position the panel below the button
@@ -549,112 +604,112 @@ class y extends P {
    * Render the default filter panel content
    */
   renderDefaultFilterPanel(e, t, r, l) {
-    const { field: s } = t, i = document.createElement("div");
+    const { field: a } = 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);
+    n.type = "text", n.placeholder = "Search...", n.className = "tbw-filter-search-input", n.value = this.searchText.get(a) ?? "", 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;
+    const h = document.createElement("input");
+    h.type = "checkbox", h.className = "tbw-filter-checkbox";
+    const E = document.createElement("span");
+    E.textContent = "Select All", g.appendChild(h), g.appendChild(E), u.appendChild(g);
+    const C = () => {
+      const s = [...v.values()], d = s.every((c) => c), p = s.every((c) => !c);
+      h.checked = d, h.indeterminate = !d && !p;
     };
-    p.addEventListener("change", () => {
-      const a = p.checked;
-      for (const d of x.keys())
-        x.set(d, a);
-      k(), F();
+    h.addEventListener("change", () => {
+      const s = h.checked;
+      for (const d of v.keys())
+        v.set(d, s);
+      C(), 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 m = document.createElement("div");
+    m.className = "tbw-filter-values";
+    const R = document.createElement("div");
+    R.className = "tbw-filter-values-spacer", m.appendChild(R);
     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();
+    b.className = "tbw-filter-values-content", m.appendChild(b);
+    const v = /* @__PURE__ */ new Map();
+    r.forEach((s) => {
+      const d = s == null ? "__null__" : String(s);
+      v.set(d, !l.has(s));
+    }), C();
+    let y = [];
+    const I = (s, d) => {
+      const p = s == null ? "(Blank)" : String(s), c = s == null ? "__null__" : String(s), o = document.createElement("label");
+      o.className = "tbw-filter-value-item", o.style.position = "absolute", o.style.top = `${d * x.LIST_ITEM_HEIGHT}px`, o.style.left = "0", o.style.right = "0", o.style.height = `${x.LIST_ITEM_HEIGHT}px`, o.style.boxSizing = "border-box";
+      const w = document.createElement("input");
+      w.type = "checkbox", w.className = "tbw-filter-checkbox", w.checked = v.get(c) ?? !0, w.dataset.value = c, w.addEventListener("change", () => {
+        v.set(c, w.checked), C();
       });
-      const N = document.createElement("span");
-      return N.textContent = h, o.appendChild(v), o.appendChild(N), o;
+      const A = document.createElement("span");
+      return A.textContent = p, o.appendChild(w), o.appendChild(A), 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));
+      const s = y.length, d = m.clientHeight, p = m.scrollTop;
+      if (R.style.height = `${s * x.LIST_ITEM_HEIGHT}px`, P(s, x.LIST_BYPASS_THRESHOLD / 3)) {
+        b.innerHTML = "", b.style.transform = "translateY(0px)", y.forEach((o, w) => {
+          b.appendChild(I(o, w));
         });
         return;
       }
-      const c = A({
-        totalRows: a,
+      const c = M({
+        totalRows: s,
         viewportHeight: d,
-        scrollTop: h,
-        rowHeight: y.LIST_ITEM_HEIGHT,
-        overscan: y.LIST_OVERSCAN
+        scrollTop: p,
+        rowHeight: x.LIST_ITEM_HEIGHT,
+        overscan: x.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);
+        b.appendChild(I(y[o], o - c.start));
+    }, L = (s) => {
+      const d = s.toLowerCase();
+      if (y = r.filter((p) => {
+        const c = p == null ? "(Blank)" : String(p);
+        return !s || c.toLowerCase().includes(d);
+      }), y.length === 0) {
+        R.style.height = "0px", b.innerHTML = "";
+        const p = document.createElement("div");
+        p.className = "tbw-filter-no-match", p.textContent = "No matching values", b.appendChild(p);
         return;
       }
       F();
     };
-    w.addEventListener(
+    m.addEventListener(
       "scroll",
       () => {
-        C.length > 0 && F();
+        y.length > 0 && F();
       },
       { passive: !0 }
-    ), I(n.value), e.appendChild(w);
-    let L;
+    ), L(n.value), e.appendChild(m);
+    let N;
     n.addEventListener("input", () => {
-      clearTimeout(L), L = setTimeout(() => {
-        this.searchText.set(s, n.value), I(n.value);
+      clearTimeout(N), N = setTimeout(() => {
+        this.searchText.set(a, n.value), L(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)
+    const S = document.createElement("div");
+    S.className = "tbw-filter-buttons";
+    const T = document.createElement("button");
+    T.className = "tbw-filter-apply-btn", T.textContent = "Apply", T.addEventListener("click", () => {
+      const s = [];
+      for (const [d, p] of v)
+        if (!p)
           if (d === "__null__")
-            a.push(null);
+            s.push(null);
           else {
             const c = r.find((o) => String(o) === d);
-            a.push(c !== void 0 ? c : d);
+            s.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.applySetFilter(s);
+    }), S.appendChild(T);
+    const k = document.createElement("button");
+    k.className = "tbw-filter-clear-btn", k.textContent = "Clear Filter", k.addEventListener("click", () => {
       t.clearFilter();
-    }), R.appendChild(T), e.appendChild(R);
+    }), S.appendChild(k), e.appendChild(S);
   }
   /**
    * Apply a set filter (exclude values)
@@ -754,6 +809,6 @@ class y extends P {
   `;
 }
 export {
-  y as FilteringPlugin
+  x as FilteringPlugin
 };
 //# sourceMappingURL=index.js.map