@toolbox-web/grid 0.4.2 → 0.6.0

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

@@ -1,4 +1,4 @@
-const R = {
+const E = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -121,8 +121,8 @@ class A {
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
   emitCancelable(t, e) {
-    const i = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
+    const o = new CustomEvent(t, { detail: e, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(o), o.defaultPrevented;
   }
   /**
    * Request a re-render of the grid.
@@ -185,10 +185,21 @@ class A {
     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.
@@ -216,7 +227,7 @@ class A {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...R, ...t };
+    return { ...E, ...t };
   }
   // #region Animation Helpers
   /**
@@ -239,7 +250,7 @@ class A {
     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;
   }
   /**
@@ -255,10 +266,10 @@ class A {
    * ```
    */
   get animationDuration() {
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     if (t) {
-      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(e, 10);
-      if (!isNaN(i)) return i;
+      const e = getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(), o = parseInt(e, 10);
+      if (!isNaN(o)) return o;
     }
     return 200;
   }
@@ -293,9 +304,9 @@ class A {
   // #endregion
 }
 const p = {
-  sum: (n, t) => n.reduce((e, i) => e + (Number(i[t]) || 0), 0),
+  sum: (n, t) => n.reduce((e, o) => e + (Number(o[t]) || 0), 0),
   avg: (n, t) => {
-    const e = n.reduce((i, r) => i + (Number(r[t]) || 0), 0);
+    const e = n.reduce((o, r) => o + (Number(r[t]) || 0), 0);
     return n.length ? e / n.length : 0;
   },
   count: (n) => n.length,
@@ -326,9 +337,9 @@ const p = {
   /**
    * Run an aggregator on a set of rows.
    */
-  run(n, t, e, i) {
+  run(n, t, e, o) {
     const r = this.get(n);
-    return r ? r(t, e, i) : void 0;
+    return r ? r(t, e, o) : void 0;
   },
   /**
    * Check if an aggregator exists.
@@ -348,35 +359,35 @@ d.unregister.bind(d);
 const b = d.get.bind(d);
 d.run.bind(d);
 d.list.bind(d);
-function E(n) {
+function R(n) {
   return typeof n == "object" && n !== null && "aggFunc" in n;
 }
 function m(n, t) {
   const e = document.createElement("div");
   e.className = "tbw-pinned-rows", e.setAttribute("role", "presentation"), e.setAttribute("aria-live", "polite");
-  const i = document.createElement("div");
-  i.className = "tbw-pinned-rows-left";
+  const o = document.createElement("div");
+  o.className = "tbw-pinned-rows-left";
   const r = document.createElement("div");
   r.className = "tbw-pinned-rows-center";
   const s = document.createElement("div");
   if (s.className = "tbw-pinned-rows-right", n.showRowCount !== !1) {
-    const o = document.createElement("span");
-    o.className = "tbw-status-panel tbw-status-panel-row-count", o.textContent = `Total: ${t.totalRows} rows`, i.appendChild(o);
+    const i = document.createElement("span");
+    i.className = "tbw-status-panel tbw-status-panel-row-count", i.textContent = `Total: ${t.totalRows} rows`, o.appendChild(i);
   }
   if (n.showFilteredCount && t.filteredRows !== t.totalRows) {
-    const o = document.createElement("span");
-    o.className = "tbw-status-panel tbw-status-panel-filtered-count", o.textContent = `Filtered: ${t.filteredRows}`, i.appendChild(o);
+    const i = document.createElement("span");
+    i.className = "tbw-status-panel tbw-status-panel-filtered-count", i.textContent = `Filtered: ${t.filteredRows}`, o.appendChild(i);
   }
   if (n.showSelectedCount && t.selectedRows > 0) {
-    const o = document.createElement("span");
-    o.className = "tbw-status-panel tbw-status-panel-selected-count", o.textContent = `Selected: ${t.selectedRows}`, s.appendChild(o);
+    const i = document.createElement("span");
+    i.className = "tbw-status-panel tbw-status-panel-selected-count", i.textContent = `Selected: ${t.selectedRows}`, s.appendChild(i);
   }
   if (n.customPanels)
-    for (const o of n.customPanels) {
-      const a = y(o, t);
-      switch (o.position) {
+    for (const i of n.customPanels) {
+      const a = y(i, t);
+      switch (i.position) {
         case "left":
-          i.appendChild(a);
+          o.appendChild(a);
           break;
         case "center":
           r.appendChild(a);
@@ -386,38 +397,38 @@ function m(n, t) {
           break;
       }
     }
-  return e.appendChild(i), e.appendChild(r), e.appendChild(s), e;
+  return e.appendChild(o), e.appendChild(r), e.appendChild(s), e;
 }
 function w(n) {
   const t = document.createElement("div");
   return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${n}`, t.setAttribute("role", "presentation"), t;
 }
-function C(n, t, e, i) {
+function C(n, t, e, o) {
   n.innerHTML = "";
   for (const r of t) {
     const s = document.createElement("div");
     if (s.className = "tbw-aggregation-row", s.setAttribute("role", "presentation"), r.id && s.setAttribute("data-aggregation-id", r.id), r.fullWidth) {
-      const o = document.createElement("div");
-      o.className = "tbw-aggregation-cell tbw-aggregation-cell-full", o.style.gridColumn = "1 / -1", o.textContent = r.label || "", s.appendChild(o);
+      const i = document.createElement("div");
+      i.className = "tbw-aggregation-cell tbw-aggregation-cell-full", i.style.gridColumn = "1 / -1", i.textContent = r.label || "", s.appendChild(i);
     } else
-      for (const o of e) {
+      for (const i of e) {
         const a = document.createElement("div");
-        a.className = "tbw-aggregation-cell", a.setAttribute("data-field", o.field);
+        a.className = "tbw-aggregation-cell", a.setAttribute("data-field", i.field);
         let l, u;
-        const h = r.aggregators?.[o.field];
+        const h = r.aggregators?.[i.field];
         if (h)
-          if (E(h)) {
+          if (R(h)) {
             const g = b(h.aggFunc);
-            g && (l = g(i, o.field, o)), u = h.formatter;
+            g && (l = g(o, i.field, i)), u = h.formatter;
           } else {
             const g = b(h);
-            g && (l = g(i, o.field, o));
+            g && (l = g(o, i.field, i));
           }
-        else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, o.field)) {
-          const g = r.cells[o.field];
-          typeof g == "function" ? l = g(i, o.field, o) : l = g;
+        else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, i.field)) {
+          const g = r.cells[i.field];
+          typeof g == "function" ? l = g(o, i.field, i) : l = g;
         }
-        l != null ? a.textContent = u ? u(l, o.field, o) : String(l) : a.textContent = "", s.appendChild(a);
+        l != null ? a.textContent = u ? u(l, i.field, i) : String(l) : a.textContent = "", s.appendChild(a);
       }
     n.appendChild(s);
   }
@@ -425,21 +436,21 @@ function C(n, t, e, i) {
 function y(n, t) {
   const e = document.createElement("div");
   e.className = "tbw-status-panel tbw-status-panel-custom", e.id = `status-panel-${n.id}`;
-  const i = n.render(t);
-  return typeof i == "string" ? e.innerHTML = i : e.appendChild(i), e;
+  const o = n.render(t);
+  return typeof o == "string" ? e.innerHTML = o : e.appendChild(o), e;
 }
-function v(n, t, e, i, r) {
+function v(n, t, e, o, r) {
   return {
     totalRows: n.length,
     filteredRows: r?.cachedResult?.length ?? n.length,
-    selectedRows: i?.selected?.size ?? 0,
+    selectedRows: o?.selected?.size ?? 0,
     columns: t,
     rows: n,
     grid: e
   };
 }
-const S = ".tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
-class x extends A {
+const S = "@layer tbw-plugins{.tbw-footer{flex-shrink:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:var(--tbw-button-padding, var(--tbw-spacing-md, .5rem) var(--tbw-spacing-lg, .75rem));background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:var(--tbw-font-size-xs, .75rem);color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:var(--tbw-spacing-xl, 1rem)}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-size:var(--tbw-aggregation-font-size, .8em);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, .125rem .5rem);min-height:var(--tbw-row-height, 1.75rem);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}}";
+class B extends A {
   name = "pinnedRows";
   styles = S;
   get defaultConfig() {
@@ -463,18 +474,18 @@ class x extends A {
   // #endregion
   // #region Hooks
   afterRender() {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t) return;
     const e = t.querySelector(".tbw-scroll-area") ?? t.querySelector(".tbw-grid-content") ?? t.children[0];
     if (!e) return;
     this.footerWrapper && !e.contains(this.footerWrapper) && (this.footerWrapper = null, this.bottomAggregationContainer = null, this.infoBarElement = null), this.topAggregationContainer && !e.contains(this.topAggregationContainer) && (this.topAggregationContainer = null), this.infoBarElement && !e.contains(this.infoBarElement) && (this.infoBarElement = null);
-    const i = this.getSelectionState(), r = this.getFilterState(), s = v(
+    const o = this.getSelectionState(), r = this.getFilterState(), s = v(
       this.rows,
       this.columns,
       this.grid,
-      i,
+      o,
       r
-    ), o = this.config.aggregationRows || [], a = o.filter((c) => c.position === "top"), l = o.filter((c) => c.position !== "top");
+    ), i = this.config.aggregationRows || [], a = i.filter((c) => c.position === "top"), l = i.filter((c) => c.position !== "top");
     if (a.length > 0) {
       if (!this.topAggregationContainer) {
         this.topAggregationContainer = w("top");
@@ -579,6 +590,6 @@ class x extends A {
   // #endregion
 }
 export {
-  x as PinnedRowsPlugin
+  B as PinnedRowsPlugin
 };
 //# sourceMappingURL=index.js.map