@toolbox-web/grid 0.2.5 → 0.2.7

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

@@ -1,4 +1,4 @@
-const v = {
+const R = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const v = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class R {
+class A {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -99,7 +99,7 @@ class R {
    * Use this for rendering that needs to match the grid template.
    */
   get visibleColumns() {
-    return this.grid?.visibleColumns ?? [];
+    return this.grid?._visibleColumns ?? [];
   }
   /**
    * Get the shadow root of the grid.
@@ -133,7 +133,7 @@ class R {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...v, ...t };
+    return { ...R, ...t };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -164,7 +164,7 @@ class R {
   }
   // #endregion
 }
-const f = {
+const p = {
   sum: (e, t) => e.reduce((n, i) => n + (Number(i[t]) || 0), 0),
   avg: (e, t) => {
     const n = e.reduce((i, r) => i + (Number(r[t]) || 0), 0);
@@ -175,7 +175,7 @@ const f = {
   max: (e, t) => Math.max(...e.map((n) => Number(n[t]) || -1 / 0)),
   first: (e, t) => e[0]?.[t],
   last: (e, t) => e[e.length - 1]?.[t]
-}, u = /* @__PURE__ */ new Map(), g = {
+}, u = /* @__PURE__ */ new Map(), d = {
   /**
    * Register a custom aggregator function.
    */
@@ -193,7 +193,7 @@ const f = {
    */
   get(e) {
     if (e !== void 0)
-      return typeof e == "function" ? e : u.get(e) ?? f[e];
+      return typeof e == "function" ? e : u.get(e) ?? p[e];
   },
   /**
    * Run an aggregator on a set of rows.
@@ -206,21 +206,24 @@ const f = {
    * Check if an aggregator exists.
    */
   has(e) {
-    return u.has(e) || e in f;
+    return u.has(e) || e in p;
   },
   /**
    * List all available aggregator names.
    */
   list() {
-    return [...Object.keys(f), ...u.keys()];
+    return [...Object.keys(p), ...u.keys()];
   }
 };
-g.register.bind(g);
-g.unregister.bind(g);
-const A = g.get.bind(g);
-g.run.bind(g);
-g.list.bind(g);
-function p(e, t) {
+d.register.bind(d);
+d.unregister.bind(d);
+const w = d.get.bind(d);
+d.run.bind(d);
+d.list.bind(d);
+function E(e) {
+  return typeof e == "object" && e !== null && "aggFunc" in e;
+}
+function m(e, t) {
   const n = document.createElement("div");
   n.className = "tbw-pinned-rows", n.setAttribute("role", "presentation"), n.setAttribute("aria-live", "polite");
   const i = document.createElement("div");
@@ -242,7 +245,7 @@ function p(e, t) {
   }
   if (e.customPanels)
     for (const o of e.customPanels) {
-      const a = E(o, t);
+      const a = x(o, t);
       switch (o.position) {
         case "left":
           i.appendChild(a);
@@ -257,11 +260,11 @@ function p(e, t) {
     }
   return n.appendChild(i), n.appendChild(r), n.appendChild(s), n;
 }
-function m(e) {
+function b(e) {
   const t = document.createElement("div");
   return t.className = `tbw-aggregation-rows tbw-aggregation-rows-${e}`, t.setAttribute("role", "presentation"), t;
 }
-function w(e, t, n, i) {
+function C(e, t, n, i) {
   e.innerHTML = "";
   for (const r of t) {
     const s = document.createElement("div");
@@ -272,27 +275,32 @@ function w(e, t, n, i) {
       for (const o of n) {
         const a = document.createElement("div");
         a.className = "tbw-aggregation-cell", a.setAttribute("data-field", o.field);
-        let c;
+        let l, f;
         const h = r.aggregators?.[o.field];
-        if (h) {
-          const d = A(h);
-          d && (c = d(i, o.field, o));
-        } else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, o.field)) {
-          const d = r.cells[o.field];
-          typeof d == "function" ? c = d(i, o.field, o) : c = d;
+        if (h)
+          if (E(h)) {
+            const g = w(h.aggFunc);
+            g && (l = g(i, o.field, o)), f = h.formatter;
+          } else {
+            const g = w(h);
+            g && (l = g(i, o.field, o));
+          }
+        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;
         }
-        a.textContent = c != null ? String(c) : "", s.appendChild(a);
+        l != null ? a.textContent = f ? f(l, o.field, o) : String(l) : a.textContent = "", s.appendChild(a);
       }
     e.appendChild(s);
   }
 }
-function E(e, t) {
+function x(e, t) {
   const n = document.createElement("div");
   n.className = "tbw-status-panel tbw-status-panel-custom", n.id = `status-panel-${e.id}`;
   const i = e.render(t);
   return typeof i == "string" ? n.innerHTML = i : n.appendChild(i), n;
 }
-function b(e, t, n, i, r) {
+function v(e, t, n, i, r) {
   return {
     totalRows: e.length,
     filteredRows: r?.cachedResult?.length ?? e.length,
@@ -302,8 +310,8 @@ function b(e, t, n, i, r) {
     grid: n
   };
 }
-const x = ".tbw-footer{position:sticky;bottom: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-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 y extends R {
+const y = ".tbw-footer{position:sticky;bottom: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 S extends A {
   name = "pinnedRows";
   version = "1.0.0";
   get defaultConfig() {
@@ -331,41 +339,41 @@ class y extends R {
     if (!t) return;
     const n = t.querySelector(".tbw-scroll-area") ?? t.querySelector(".tbw-grid-content") ?? t.children[0];
     if (!n) return;
-    const i = this.getSelectionState(), r = this.getFilterState(), s = b(
+    const i = this.getSelectionState(), r = this.getFilterState(), s = v(
       this.rows,
       this.columns,
       this.grid,
       i,
       r
-    ), o = this.config.aggregationRows || [], a = o.filter((l) => l.position === "top"), c = o.filter((l) => l.position !== "top");
+    ), o = this.config.aggregationRows || [], a = o.filter((c) => c.position === "top"), l = o.filter((c) => c.position !== "top");
     if (a.length > 0) {
       if (!this.topAggregationContainer) {
-        this.topAggregationContainer = m("top");
-        const l = t.querySelector(".header");
-        l && l.nextSibling ? n.insertBefore(this.topAggregationContainer, l.nextSibling) : n.appendChild(this.topAggregationContainer);
+        this.topAggregationContainer = b("top");
+        const c = t.querySelector(".header");
+        c && c.nextSibling ? n.insertBefore(this.topAggregationContainer, c.nextSibling) : n.appendChild(this.topAggregationContainer);
       }
-      w(
+      C(
         this.topAggregationContainer,
         a,
         this.visibleColumns,
         this.rows
       );
     } else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
-    const h = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, d = h && this.config.position !== "top", C = c.length > 0 || d;
-    if (h && this.config.position === "top")
+    const f = this.config.showRowCount !== !1 || this.config.showSelectedCount && s.selectedRows > 0 || this.config.showFilteredCount && s.filteredRows !== s.totalRows || this.config.customPanels && this.config.customPanels.length > 0, h = f && this.config.position !== "top", g = l.length > 0 || h;
+    if (f && this.config.position === "top")
       if (!this.infoBarElement)
-        this.infoBarElement = p(this.config, s), n.insertBefore(this.infoBarElement, n.firstChild);
+        this.infoBarElement = m(this.config, s), n.insertBefore(this.infoBarElement, n.firstChild);
       else {
-        const l = p(this.config, s);
-        this.infoBarElement.replaceWith(l), this.infoBarElement = l;
+        const c = m(this.config, s);
+        this.infoBarElement.replaceWith(c), this.infoBarElement = c;
       }
     else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
-    C ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", n.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", c.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = m("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), w(
+    g ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", n.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", l.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = b("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), C(
       this.bottomAggregationContainer,
-      c,
+      l,
       this.visibleColumns,
       this.rows
-    )), d && (this.infoBarElement = p(this.config, s), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
+    )), h && (this.infoBarElement = m(this.config, s), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
   // #endregion
   // #region Private Methods
@@ -403,7 +411,7 @@ class y extends R {
    */
   getContext() {
     const t = this.getSelectionState(), n = this.getFilterState();
-    return b(
+    return v(
       this.rows,
       this.columns,
       this.grid,
@@ -441,10 +449,10 @@ class y extends R {
   }
   // #endregion
   // #region Styles
-  styles = x;
+  styles = y;
   // #endregion
 }
 export {
-  y as PinnedRowsPlugin
+  S as PinnedRowsPlugin
 };
 //# sourceMappingURL=index.js.map