@toolbox-web/grid 0.2.7 → 0.3.0

package/lib/plugins/grouping-rows/grouping-rows.d.ts

@@ -0,0 +1,51 @@
+import { RenderRow, RowGroupingConfig } from './types';
+export { getAggregator, listAggregators, registerAggregator, runAggregator } from '../../core/internal/aggregators';
+interface BuildGroupingArgs {
+    rows: any[];
+    config: RowGroupingConfig;
+    expanded: Set<string>;
+}
+/**
+ * Build a flattened grouping projection (collapsed by default).
+ * Returns empty array when groupOn not configured or all rows ungrouped.
+ *
+ * @param args - The grouping arguments
+ * @returns Flattened array of render rows (groups + data rows)
+ */
+export declare function buildGroupedRowModel({ rows, config, expanded }: BuildGroupingArgs): RenderRow[];
+/**
+ * Toggle expansion state for a group key.
+ *
+ * @param expandedKeys - Current set of expanded keys
+ * @param key - The group key to toggle
+ * @returns New set with toggled state
+ */
+export declare function toggleGroupExpansion(expandedKeys: Set<string>, key: string): Set<string>;
+/**
+ * Expand all groups.
+ *
+ * @param rows - The flattened render rows
+ * @returns Set of all group keys
+ */
+export declare function expandAllGroups(rows: RenderRow[]): Set<string>;
+/**
+ * Collapse all groups.
+ *
+ * @returns Empty set
+ */
+export declare function collapseAllGroups(): Set<string>;
+/**
+ * Get all group keys from a flattened model.
+ *
+ * @param rows - The flattened render rows
+ * @returns Array of group keys
+ */
+export declare function getGroupKeys(rows: RenderRow[]): string[];
+/**
+ * Count total rows in a group (including nested groups).
+ *
+ * @param groupRow - The group row
+ * @returns Total row count
+ */
+export declare function getGroupRowCount(groupRow: RenderRow): number;
+//# sourceMappingURL=grouping-rows.d.ts.map

package/lib/plugins/grouping-rows/grouping-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouping-rows.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/grouping-rows.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAWpH,UAAU,iBAAiB;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,SAAS,EAAE,CA+D/F;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAQxF;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAQ9D;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI,GAAG,CAAC,MAAM,CAAC,CAE/C;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAG5D"}

package/lib/plugins/grouping-rows/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Grouping Rows Plugin Entry Point
+ * Re-exports plugin class and types for tree-shakeable imports.
+ */
+export { GroupingRowsPlugin } from './GroupingRowsPlugin';
+export type { GroupingRowsConfig, GroupRowRenderParams } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/plugins/grouping-rows/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -164,7 +164,7 @@ class R {
   }
   // #endregion
 }
-const y = {
+const b = {
   sum: (n, e) => n.reduce((t, i) => t + (Number(i[e]) || 0), 0),
   avg: (n, e) => {
     const t = n.reduce((i, r) => i + (Number(r[e]) || 0), 0);
@@ -193,7 +193,7 @@ const y = {
    */
   get(n) {
     if (n !== void 0)
-      return typeof n == "function" ? n : _.get(n) ?? y[n];
+      return typeof n == "function" ? n : _.get(n) ?? b[n];
   },
   /**
    * Run an aggregator on a set of rows.
@@ -206,13 +206,13 @@ const y = {
    * Check if an aggregator exists.
    */
   has(n) {
-    return _.has(n) || n in y;
+    return _.has(n) || n in b;
   },
   /**
    * List all available aggregator names.
    */
   list() {
-    return [...Object.keys(y), ..._.keys()];
+    return [...Object.keys(b), ..._.keys()];
   }
 };
 f.register.bind(f);
@@ -225,33 +225,33 @@ function v({ rows: n, config: e, expanded: t }) {
   if (typeof i != "function")
     return [];
   const r = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
-  if (n.forEach((o) => {
-    let d = i(o);
+  if (n.forEach((s) => {
+    let d = i(s);
     d == null || d === !1 ? d = ["__ungrouped__"] : Array.isArray(d) || (d = [d]);
     let a = r;
     d.forEach((c, m) => {
       const l = c == null ? "∅" : String(c), g = a.key === "__root__" ? l : a.key + "||" + l;
       let p = a.children.get(l);
       p || (p = { key: g, value: c, depth: m, rows: [], children: /* @__PURE__ */ new Map(), parent: a }, a.children.set(l, p)), a = p;
-    }), a.rows.push(o);
+    }), a.rows.push(s);
   }), r.children.size === 1 && r.children.has("__ungrouped__") && r.children.get("__ungrouped__").rows.length === n.length)
     return [];
-  const s = [], u = (o) => {
-    if (o === r) {
-      o.children.forEach((a) => u(a));
+  const o = [], u = (s) => {
+    if (s === r) {
+      s.children.forEach((a) => u(a));
       return;
     }
-    const d = t.has(o.key);
-    s.push({
+    const d = t.has(s.key);
+    o.push({
       kind: "group",
-      key: o.key,
-      value: o.value,
-      depth: o.depth,
-      rows: o.rows,
+      key: s.key,
+      value: s.value,
+      depth: s.depth,
+      rows: s.rows,
       expanded: d
-    }), d && (o.children.size ? o.children.forEach((a) => u(a)) : o.rows.forEach((a) => s.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
+    }), d && (s.children.size ? s.children.forEach((a) => u(a)) : s.rows.forEach((a) => o.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
   };
-  return u(r), s;
+  return u(r), o;
 }
 function C(n, e) {
   const t = new Set(n);
@@ -269,7 +269,7 @@ function k() {
 function K(n) {
   return n.kind !== "group" ? 0 : n.rows.length;
 }
-const S = '.group-row{background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}';
+const S = '.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}';
 class E extends R {
   name = "groupingRows";
   version = "1.0.0";
@@ -327,20 +327,20 @@ class E extends R {
       return this.isActive = !1, this.flattenedRows = [], [...e];
     this.isActive = !0, this.flattenedRows = i, this.keysToAnimate.clear();
     const r = /* @__PURE__ */ new Set();
-    return i.forEach((s, u) => {
-      if (s.kind === "data") {
-        const o = `data-${u}`;
-        r.add(o), this.previousVisibleKeys.has(o) || this.keysToAnimate.add(o);
+    return i.forEach((o, u) => {
+      if (o.kind === "data") {
+        const s = `data-${u}`;
+        r.add(s), this.previousVisibleKeys.has(s) || this.keysToAnimate.add(s);
       }
-    }), this.previousVisibleKeys = r, i.map((s) => s.kind === "group" ? {
+    }), this.previousVisibleKeys = r, i.map((o) => o.kind === "group" ? {
       __isGroupRow: !0,
-      __groupKey: s.key,
-      __groupValue: s.value,
-      __groupDepth: s.depth,
-      __groupRows: s.rows,
-      __groupExpanded: s.expanded,
-      __groupRowCount: K(s)
-    } : s.row);
+      __groupKey: o.key,
+      __groupValue: o.value,
+      __groupDepth: o.depth,
+      __groupRows: o.rows,
+      __groupExpanded: o.expanded,
+      __groupRowCount: K(o)
+    } : o.row);
   }
   onCellClick(e) {
     const t = e.row;
@@ -355,7 +355,7 @@ class E extends R {
       return !1;
     const r = this.config;
     if (r.groupRowRenderer) {
-      const o = () => {
+      const s = () => {
         this.toggle(e.__groupKey);
       }, d = r.groupRowRenderer({
         key: e.__groupKey,
@@ -363,15 +363,15 @@ class E extends R {
         depth: e.__groupDepth,
         rows: e.__groupRows,
         expanded: e.__groupExpanded,
-        toggleExpand: o
+        toggleExpand: s
       });
       if (d)
         return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof d == "string" ? t.innerHTML = d : (t.innerHTML = "", t.appendChild(d)), !0;
     }
-    const s = () => {
+    const o = () => {
       this.toggle(e.__groupKey);
     };
-    return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (r.indentWidth ?? 20)}px`, t.innerHTML = "", r.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, s) : this.renderPerColumnGroupRow(e, t, s), !0;
+    return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (r.indentWidth ?? 20)}px`, t.innerHTML = "", r.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
   }
   afterRender() {
     const e = this.animationStyle;
@@ -380,7 +380,7 @@ class E extends R {
     if (!t) return;
     const i = e === "fade" ? "tbw-group-fade-in" : "tbw-group-slide-in";
     for (const r of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
-      const s = r.querySelector(".cell[data-row]"), u = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1, d = this.flattenedRows[u]?.kind === "data" ? `data-${u}` : void 0;
+      const o = r.querySelector(".cell[data-row]"), u = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, d = this.flattenedRows[u]?.kind === "data" ? `data-${u}` : void 0;
       d && this.keysToAnimate.has(d) && (r.classList.add(i), r.addEventListener("animationend", () => r.classList.remove(i), { once: !0 }));
     }
     this.keysToAnimate.clear();
@@ -388,23 +388,23 @@ class E extends R {
   // #endregion
   // #region Private Rendering Helpers
   renderFullWidthGroupRow(e, t, i) {
-    const r = this.config, s = document.createElement("div");
-    s.className = "cell group-full", s.style.gridColumn = "1 / -1", s.setAttribute("role", "gridcell");
+    const r = this.config, o = document.createElement("div");
+    o.className = "cell group-full", o.style.gridColumn = "1 / -1", o.setAttribute("role", "gridcell");
     const u = document.createElement("button");
     u.type = "button", u.className = `group-toggle${e.__groupExpanded ? " expanded" : ""}`, u.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(u, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), u.addEventListener("click", (a) => {
       a.stopPropagation(), i();
-    }), s.appendChild(u);
-    const o = document.createElement("span");
-    o.className = "group-label";
+    }), o.appendChild(u);
+    const s = document.createElement("span");
+    s.className = "group-label";
     const d = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
-    if (o.textContent = d, s.appendChild(o), r.showRowCount !== !1) {
+    if (s.textContent = d, o.appendChild(s), r.showRowCount !== !1) {
       const a = document.createElement("span");
-      a.className = "group-count", a.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, s.appendChild(a);
+      a.className = "group-count", a.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, o.appendChild(a);
     }
-    t.appendChild(s);
+    t.appendChild(o);
   }
   renderPerColumnGroupRow(e, t, i) {
-    const r = this.config, s = r.aggregators ?? {}, u = this.columns, o = e.__groupRows ?? [], a = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
+    const r = this.config, o = r.aggregators ?? {}, u = this.columns, s = e.__groupRows ?? [], a = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
     a && (t.style.display = "grid", t.style.gridTemplateColumns = a), u.forEach((c, m) => {
       const l = document.createElement("div");
       if (l.className = "cell group-cell", l.setAttribute("data-col", String(m)), l.setAttribute("role", "gridcell"), m === 0) {
@@ -412,9 +412,9 @@ class E extends R {
         g.type = "button", g.className = `group-toggle${e.__groupExpanded ? " expanded" : ""}`, g.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(g, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), g.addEventListener("click", (h) => {
           h.stopPropagation(), i();
         }), l.appendChild(g);
-        const p = document.createElement("span"), b = s[c.field];
-        if (b) {
-          const h = w(b, o, c.field, c);
+        const p = document.createElement("span"), y = o[c.field];
+        if (y) {
+          const h = w(y, s, c.field, c);
           p.textContent = h != null ? String(h) : String(e.__groupValue);
         } else {
           const h = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
@@ -422,12 +422,12 @@ class E extends R {
         }
         if (l.appendChild(p), r.showRowCount !== !1) {
           const h = document.createElement("span");
-          h.className = "group-count", h.textContent = ` (${o.length})`, l.appendChild(h);
+          h.className = "group-count", h.textContent = ` (${s.length})`, l.appendChild(h);
         }
       } else {
-        const g = s[c.field];
+        const g = o[c.field];
         if (g) {
-          const p = w(g, o, c.field, c);
+          const p = w(g, s, c.field, c);
           l.textContent = p != null ? String(p) : "";
         } else
           l.textContent = "";