@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/pinned-columns/index.js

@@ -1,4 +1,4 @@
-const g = {
+const h = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,11 +7,11 @@ const g = {
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰"
-}, y = {
+}, g = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class m {
+class y {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -188,10 +188,21 @@ class m {
     return this.grid;
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -219,7 +230,7 @@ class m {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...g, ...t };
+    return { ...h, ...t };
   }
   // #region Animation Helpers
   /**
@@ -242,7 +253,7 @@ class m {
     const t = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (t === !1 || t === "off") return !1;
     if (t === !0 || t === "on") return !0;
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     return e ? getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -258,7 +269,7 @@ class m {
    * ```
    */
   get animationDuration() {
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     if (t) {
       const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), s = parseInt(e, 10);
       if (!isNaN(s)) return s;
@@ -295,49 +306,45 @@ class m {
   }
   // #endregion
 }
-function p(n) {
-  return n.filter((t) => t.sticky === "left");
+function m(r) {
+  return r.filter((t) => t.sticky === "left");
 }
-function k(n) {
-  return n.filter((t) => t.sticky === "right");
+function p(r) {
+  return r.filter((t) => t.sticky === "right");
 }
-function a(n) {
-  return n.some((t) => t.sticky === "left" || t.sticky === "right");
+function d(r) {
+  return r.some((t) => t.sticky === "left" || t.sticky === "right");
 }
-function u(n, t) {
-  const e = n.shadowRoot;
-  if (!e) return;
-  const s = Array.from(e.querySelectorAll(".header-row .cell"));
-  if (!s.length) return;
-  const c = /* @__PURE__ */ new Map();
-  t.forEach((r, o) => {
-    r.field && c.set(r.field, o);
+function a(r, t) {
+  const e = Array.from(r.querySelectorAll(".header-row .cell"));
+  if (!e.length) return;
+  const s = /* @__PURE__ */ new Map();
+  t.forEach((n, c) => {
+    n.field && s.set(n.field, c);
   });
+  let l = 0;
+  for (const n of t)
+    if (n.sticky === "left") {
+      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
+      i && (i.classList.add("sticky-left"), i.style.position = "sticky", i.style.left = l + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+        o.classList.add("sticky-left"), o.style.position = "sticky", o.style.left = l + "px";
+      }), l += i.offsetWidth);
+    }
   let f = 0;
-  for (const r of t)
-    if (r.sticky === "left") {
-      const o = c.get(r.field), i = s.find((l) => l.getAttribute("data-field") === r.field);
-      i && (i.classList.add("sticky-left"), i.style.position = "sticky", i.style.left = f + "px", o !== void 0 && e.querySelectorAll(`.data-grid-row .cell[data-col="${o}"]`).forEach((l) => {
-        l.classList.add("sticky-left"), l.style.position = "sticky", l.style.left = f + "px";
+  for (const n of [...t].reverse())
+    if (n.sticky === "right") {
+      const c = s.get(n.field), i = e.find((o) => o.getAttribute("data-field") === n.field);
+      i && (i.classList.add("sticky-right"), i.style.position = "sticky", i.style.right = f + "px", c !== void 0 && r.querySelectorAll(`.data-grid-row .cell[data-col="${c}"]`).forEach((o) => {
+        o.classList.add("sticky-right"), o.style.position = "sticky", o.style.right = f + "px";
       }), f += i.offsetWidth);
     }
-  let d = 0;
-  for (const r of [...t].reverse())
-    if (r.sticky === "right") {
-      const o = c.get(r.field), i = s.find((l) => l.getAttribute("data-field") === r.field);
-      i && (i.classList.add("sticky-right"), i.style.position = "sticky", i.style.right = d + "px", o !== void 0 && e.querySelectorAll(`.data-grid-row .cell[data-col="${o}"]`).forEach((l) => {
-        l.classList.add("sticky-right"), l.style.position = "sticky", l.style.right = d + "px";
-      }), d += i.offsetWidth);
-    }
 }
-function h(n) {
-  const t = n.shadowRoot;
-  if (!t) return;
-  t.querySelectorAll(".sticky-left, .sticky-right").forEach((s) => {
-    s.classList.remove("sticky-left", "sticky-right"), s.style.position = "", s.style.left = "", s.style.right = "";
+function u(r) {
+  r.querySelectorAll(".sticky-left, .sticky-right").forEach((e) => {
+    e.classList.remove("sticky-left", "sticky-right"), e.style.position = "", e.style.left = "", e.style.right = "";
   });
 }
-class C extends m {
+class k extends y {
   name = "pinnedColumns";
   get defaultConfig() {
     return {};
@@ -358,23 +365,23 @@ class C extends m {
    */
   static detect(t, e) {
     const s = e?.columns;
-    return Array.isArray(s) ? a(s) : !1;
+    return Array.isArray(s) ? d(s) : !1;
   }
   // #endregion
   // #region Hooks
   processColumns(t) {
-    return this.isApplied = a([...t]), [...t];
+    return this.isApplied = d([...t]), [...t];
   }
   afterRender() {
     if (!this.isApplied)
       return;
     const t = this.grid, e = [...this.columns];
-    if (!a(e)) {
-      h(t), this.isApplied = !1;
+    if (!d(e)) {
+      u(t), this.isApplied = !1;
       return;
     }
     queueMicrotask(() => {
-      u(t, e);
+      a(t, e);
     });
   }
   /**
@@ -382,12 +389,12 @@ class C extends m {
    */
   onPluginQuery(t) {
     switch (t.type) {
-      case y.CAN_MOVE_COLUMN: {
+      case g.CAN_MOVE_COLUMN: {
         const e = t.context, s = e.sticky;
         if (s === "left" || s === "right")
           return !1;
-        const c = e.meta?.sticky;
-        return c === "left" || c === "right" ? !1 : void 0;
+        const l = e.meta?.sticky;
+        return l === "left" || l === "right" ? !1 : void 0;
       }
       default:
         return;
@@ -400,27 +407,27 @@ class C extends m {
    */
   refreshStickyOffsets() {
     const t = [...this.columns];
-    u(this.grid, t);
+    a(this.grid, t);
   }
   /**
    * Get columns pinned to the left.
    */
   getLeftPinnedColumns() {
     const t = [...this.columns];
-    return p(t);
+    return m(t);
   }
   /**
    * Get columns pinned to the right.
    */
   getRightPinnedColumns() {
     const t = [...this.columns];
-    return k(t);
+    return p(t);
   }
   /**
    * Clear all sticky positioning.
    */
   clearStickyPositions() {
-    h(this.grid);
+    u(this.grid);
   }
   /**
    * Report horizontal scroll boundary offsets for pinned columns.
@@ -429,26 +436,24 @@ class C extends m {
   getHorizontalScrollOffsets(t, e) {
     if (!this.isApplied)
       return;
-    let s = 0, c = 0;
+    let s = 0, l = 0;
     if (t) {
-      const d = t.querySelectorAll(".sticky-left"), r = t.querySelectorAll(".sticky-right");
-      d.forEach((o) => {
-        s += o.offsetWidth;
-      }), r.forEach((o) => {
-        c += o.offsetWidth;
+      const n = t.querySelectorAll(".sticky-left"), c = t.querySelectorAll(".sticky-right");
+      n.forEach((i) => {
+        s += i.offsetWidth;
+      }), c.forEach((i) => {
+        l += i.offsetWidth;
       });
-    } else {
-      const r = this.grid.shadowRoot;
-      r && r.querySelectorAll(".header-row .cell").forEach((i) => {
-        i.classList.contains("sticky-left") ? s += i.offsetWidth : i.classList.contains("sticky-right") && (c += i.offsetWidth);
+    } else
+      this.grid.querySelectorAll(".header-row .cell").forEach((i) => {
+        i.classList.contains("sticky-left") ? s += i.offsetWidth : i.classList.contains("sticky-right") && (l += i.offsetWidth);
       });
-    }
     const f = e?.classList.contains("sticky-left") || e?.classList.contains("sticky-right");
-    return { left: s, right: c, skipScroll: f };
+    return { left: s, right: l, skipScroll: f };
   }
   // #endregion
 }
 export {
-  C as PinnedColumnsPlugin
+  k as PinnedColumnsPlugin
 };
 //# sourceMappingURL=index.js.map