@toolbox-web/grid 0.0.4 → 0.0.6

package/lib/plugins/selection/index.js

@@ -1,4 +1,13 @@
-class f {
+const f = {
+  expand: "▶",
+  collapse: "▼",
+  sortAsc: "▲",
+  sortDesc: "▼",
+  sortNone: "⇅",
+  submenuArrow: "▶",
+  dragHandle: "⋮⋮"
+};
+class w {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -97,6 +106,55 @@ class f {
   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 { ...f, ...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,7 +162,7 @@ class f {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function h(s) {
+function d(s) {
   return {
     startRow: Math.min(s.startRow, s.endRow),
     startCol: Math.min(s.startCol, s.endCol),
@@ -112,35 +170,35 @@ function h(s) {
     endCol: Math.max(s.startCol, s.endCol)
   };
 }
-function w(s) {
-  const e = h(s);
+function R(s) {
+  const e = d(s);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function d(s) {
-  return s.map(w);
+function h(s) {
+  return s.map(R);
 }
-function R(s, e, t) {
-  const l = h(t);
-  return s >= l.startRow && s <= l.endRow && e >= l.startCol && e <= l.endCol;
+function C(s, e, t) {
+  const r = d(t);
+  return s >= r.startRow && s <= r.endRow && e >= r.startCol && e <= r.endCol;
 }
 function g(s, e, t) {
-  return t.some((l) => R(s, e, l));
+  return t.some((r) => C(s, e, r));
 }
-function C(s) {
-  const e = [], t = h(s);
-  for (let l = t.startRow; l <= t.endRow; l++)
-    for (let r = t.startCol; r <= t.endCol; r++)
-      e.push({ row: l, col: r });
+function m(s) {
+  const e = [], t = d(s);
+  for (let r = t.startRow; r <= t.endRow; r++)
+    for (let n = t.startCol; n <= t.endCol; n++)
+      e.push({ row: r, col: n });
   return e;
 }
-function m(s) {
+function b(s) {
   const e = /* @__PURE__ */ new Map();
   for (const t of s)
-    for (const l of C(t))
-      e.set(`${l.row},${l.col}`, l);
+    for (const r of m(t))
+      e.set(`${r.row},${r.col}`, r);
   return [...e.values()];
 }
 function u(s, e) {
@@ -151,7 +209,7 @@ function u(s, e) {
     endCol: e.col
   };
 }
-function b(s, e, t) {
+function A(s, e, t) {
   if (s === "cell" && e.selectedCell)
     return {
       mode: s,
@@ -163,15 +221,15 @@ function b(s, e, t) {
       ]
     };
   if (s === "row" && e.selected.size > 0) {
-    const l = [...e.selected].map((r) => ({
-      from: { row: r, col: 0 },
-      to: { row: r, col: t - 1 }
+    const r = [...e.selected].map((n) => ({
+      from: { row: n, col: 0 },
+      to: { row: n, col: t - 1 }
     }));
-    return { mode: s, ranges: l };
+    return { mode: s, ranges: r };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: d(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: h(e.ranges) } : { mode: s, ranges: [] };
 }
-class v extends f {
+class v extends w {
   name = "selection";
   version = "1.0.0";
   get defaultConfig() {
@@ -197,32 +255,32 @@ class v extends f {
   }
   // ===== Event Handlers =====
   onCellClick(e) {
-    const { rowIndex: t, colIndex: l, originalEvent: r } = e, { mode: o } = this.config;
+    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: o } = this.config;
     if (o === "cell")
-      return this.selectedCell = { row: t, col: l }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
+      return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     if (o === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     if (o === "range") {
-      const a = r.shiftKey, i = r.ctrlKey || r.metaKey;
+      const a = n.shiftKey, i = n.ctrlKey || n.metaKey;
       if (a && this.cellAnchor) {
-        const n = u(this.cellAnchor, { row: t, col: l });
-        i ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = n : this.ranges.push(n) : this.ranges = [n], this.activeRange = n;
+        const l = u(this.cellAnchor, { row: t, col: r });
+        i ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
       } else if (i) {
-        const n = {
+        const l = {
           startRow: t,
-          startCol: l,
+          startCol: r,
           endRow: t,
-          endCol: l
+          endCol: r
         };
-        this.ranges.push(n), this.activeRange = n, this.cellAnchor = { row: t, col: l };
+        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: r };
       } else {
-        const n = {
+        const l = {
           startRow: t,
-          startCol: l,
+          startCol: r,
           endRow: t,
-          endCol: l
+          endCol: r
         };
-        this.ranges = [n], this.activeRange = n, this.cellAnchor = { row: t, col: l };
+        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: r };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
@@ -233,13 +291,13 @@ class v extends f {
     if (e.key === "Escape")
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const l = this.rows.length, r = this.columns.length;
-      if (l > 0 && r > 0) {
+      const r = this.rows.length, n = this.columns.length;
+      if (r > 0 && n > 0) {
         const o = {
           startRow: 0,
           startCol: 0,
-          endRow: l - 1,
-          endCol: r - 1
+          endRow: r - 1,
+          endCol: n - 1
         };
         return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
       }
@@ -250,13 +308,13 @@ class v extends f {
     if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     this.isDragging = !0;
-    const t = e.rowIndex, l = e.colIndex;
-    this.cellAnchor = { row: t, col: l }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
+    const t = e.rowIndex, r = e.colIndex;
+    this.cellAnchor = { row: t, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
     const o = {
       startRow: t,
-      startCol: l,
+      startCol: r,
       endRow: t,
-      endCol: l
+      endCol: r
     };
     return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
@@ -280,17 +338,17 @@ class v extends f {
     e.querySelectorAll(".cell").forEach((o) => {
       o.classList.remove("selected", "top", "bottom", "first", "last");
     });
-    const r = e.querySelectorAll(".data-grid-row");
-    if (r.forEach((o) => {
+    const n = e.querySelectorAll(".data-grid-row");
+    if (n.forEach((o) => {
       o.classList.remove("selected", "row-focus");
-    }), t === "row" && r.forEach((o) => {
+    }), t === "row" && n.forEach((o) => {
       const a = o.querySelector(".cell[data-row]"), i = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
-      i >= 0 && this.selected.has(i) && (o.classList.add("selected", "row-focus"), o.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus")));
+      i >= 0 && this.selected.has(i) && (o.classList.add("selected", "row-focus"), o.querySelectorAll(".cell-focus").forEach((l) => l.classList.remove("cell-focus")));
     }), t === "range" && this.ranges.length > 0) {
-      const o = this.activeRange ? h(this.activeRange) : null;
+      const o = this.activeRange ? d(this.activeRange) : null;
       e.querySelectorAll(".cell[data-row][data-col]").forEach((i) => {
-        const n = parseInt(i.getAttribute("data-row") ?? "-1", 10), c = parseInt(i.getAttribute("data-col") ?? "-1", 10);
-        n >= 0 && c >= 0 && g(n, c, this.ranges) && (i.classList.add("selected"), i.classList.remove("cell-focus"), o && (n === o.startRow && i.classList.add("top"), n === o.endRow && i.classList.add("bottom"), c === o.startCol && i.classList.add("first"), c === o.endCol && i.classList.add("last")));
+        const l = parseInt(i.getAttribute("data-row") ?? "-1", 10), c = parseInt(i.getAttribute("data-col") ?? "-1", 10);
+        l >= 0 && c >= 0 && g(l, c, this.ranges) && (i.classList.add("selected"), i.classList.remove("cell-focus"), o && (l === o.startRow && i.classList.add("top"), l === o.endRow && i.classList.add("bottom"), c === o.startCol && i.classList.add("first"), c === o.endCol && i.classList.add("last")));
       });
     }
     t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus"));
@@ -298,8 +356,8 @@ class v extends f {
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
-    const t = e.children[0], { mode: l } = this.config;
-    this.grid.setAttribute("data-selection-mode", l), t && t.classList.toggle("selecting", this.isDragging), this.#t();
+    const t = e.children[0], { mode: r } = this.config;
+    this.grid.setAttribute("data-selection-mode", r), t && t.classList.toggle("selecting", this.isDragging), this.#t();
   }
   /**
    * Called after scroll-triggered row rendering.
@@ -325,13 +383,13 @@ class v extends f {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return d(this.ranges);
+    return h(this.ranges);
   }
   /**
    * Get all selected cells across all ranges.
    */
   getSelectedCells() {
-    return m(this.ranges);
+    return b(this.ranges);
   }
   /**
    * Check if a specific cell is in range selection.
@@ -356,12 +414,12 @@ class v extends f {
       endCol: t.to.col
     })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
       mode: this.config.mode,
-      ranges: d(this.ranges)
+      ranges: h(this.ranges)
     }), this.requestAfterRender();
   }
   // ===== Private Helpers =====
   #e() {
-    return b(
+    return A(
       this.config.mode,
       {
         selectedCell: this.selectedCell,
@@ -406,39 +464,39 @@ class v extends f {
     }
   `;
 }
-function p(s, e, t, l) {
-  const r = new Set(s.selected);
+function y(s, e, t, r) {
+  const n = new Set(s.selected);
   let o = s.anchor;
   if (t === "single")
-    r.clear(), r.add(e), o = e;
+    n.clear(), n.add(e), o = e;
   else if (t === "multiple") {
-    const a = l.ctrlKey || l.metaKey;
-    if (l.shiftKey && s.anchor !== null) {
-      const i = Math.min(s.anchor, e), n = Math.max(s.anchor, e);
-      for (let c = i; c <= n; c++)
-        r.add(c);
-    } else a ? (r.has(e) ? r.delete(e) : r.add(e), o = e) : (r.clear(), r.add(e), o = e);
-  }
-  return { selected: r, lastSelected: e, anchor: o };
+    const a = r.ctrlKey || r.metaKey;
+    if (r.shiftKey && s.anchor !== null) {
+      const i = Math.min(s.anchor, e), l = Math.max(s.anchor, e);
+      for (let c = i; c <= l; c++)
+        n.add(c);
+    } else a ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
+  }
+  return { selected: n, lastSelected: e, anchor: o };
 }
-function y(s) {
+function S(s) {
   const e = /* @__PURE__ */ new Set();
   for (let t = 0; t < s; t++)
     e.add(t);
   return e;
 }
-function S(s, e) {
-  const t = [], l = [];
-  for (const r of e)
-    s.has(r) || t.push(r);
-  for (const r of s)
-    e.has(r) || l.push(r);
-  return { added: t, removed: l };
+function I(s, e) {
+  const t = [], r = [];
+  for (const n of e)
+    s.has(n) || t.push(n);
+  for (const n of s)
+    e.has(n) || r.push(n);
+  return { added: t, removed: r };
 }
 export {
   v as SelectionPlugin,
-  S as computeSelectionDiff,
-  p as handleRowClick,
-  y as selectAll
+  I as computeSelectionDiff,
+  y as handleRowClick,
+  S as selectAll
 };
 //# sourceMappingURL=index.js.map