@toolbox-web/grid 1.11.0 → 1.12.1

package/lib/plugins/responsive/ResponsivePlugin.d.ts

@@ -138,6 +138,8 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
      * actual heights and what the base calculation assumes:
      * - Extra for groups: groupCount * (groupHeight - baseHeight)
      * - Extra for cards: cardCount * (cardHeight - baseHeight)
+     *
+     * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
      */
     getExtraHeight(): number;
     /**
@@ -145,7 +147,18 @@ export declare class ResponsivePlugin<T = unknown> extends BaseGridPlugin<Respon
      * Used by virtualization to correctly calculate scroll positions.
      *
      * Like getExtraHeight, this accounts for both group and card row heights.
+     *
+     * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
      */
     getExtraHeightBefore(beforeRowIndex: number): number;
+    /**
+     * Get the height of a specific row based on its type (group row vs card row).
+     * Returns undefined if not in responsive mode.
+     *
+     * @param row - The row data
+     * @param _index - The row index (unused, but part of the interface)
+     * @returns The row height in pixels, or undefined if not in responsive mode
+     */
+    getRowHeight(row: unknown, _index: number): number | undefined;
 }
 //# sourceMappingURL=ResponsivePlugin.d.ts.map

package/lib/plugins/responsive/ResponsivePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGxH,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAElC;;OAEG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAe/C;IAgBF;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+J/B,MAAM,IAAI,IAAI;IAcvB;;;OAGG;IACM,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAOjD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAyL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAqCtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAkK7C;;;;;;;;;;OAUG;IACM,cAAc,IAAI,MAAM;IAyBjC;;;;;OAKG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;CA8H9D"}
+{"version":3,"file":"ResponsivePlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGxH,OAAO,KAAK,EAAE,gBAAgB,EAA8C,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAAa,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;;IAC1F,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IACpC,SAAkB,MAAM,SAAU;IAElC;;OAEG;IACH,gBAAyB,QAAQ,EAAE,cAAc,CAe/C;IAgBF;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAYrC;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI;IAQ1E;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IA+J/B,MAAM,IAAI,IAAI;IAcvB;;;OAGG;IACM,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAOjD;;;;OAIG;IACM,WAAW,IAAI,IAAI;IAyL5B;;;;;;;;;;OAUG;IACM,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAqCtF;;;;;;;;;;;;;OAaG;IACM,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO;IAkK7C;;;;;;;;;;;;OAYG;IACM,cAAc,IAAI,MAAM;IAyBjC;;;;;;;OAOG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;IAmC7D;;;;;;;OAOG;IACM,YAAY,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;CA0GxE"}

package/lib/plugins/responsive/index.js

@@ -66,9 +66,9 @@ function k(r) {
 }
 function H(r, t) {
   if (!r || r.indexOf("{{") === -1) return r;
-  const e = [], i = r.replace(R, (o, d) => {
-    const l = T(d, t);
-    return e.push({ expr: d.trim(), result: l }), l;
+  const e = [], i = r.replace(R, (o, c) => {
+    const l = T(c, t);
+    return e.push({ expr: c.trim(), result: l }), l;
   }), n = L(i), a = e.length && e.every((o) => o.result === "" || o.result === u);
   return /Reflect\.|\bProxy\b|ownKeys\(/.test(r) || a ? "" : n;
 }
@@ -101,10 +101,10 @@ const q = document.createElement("template");
 q.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
 function g(r, t) {
   if (r._virtualization?.enabled) {
-    const { rowHeight: s, container: o, viewportEl: d } = r._virtualization, l = o, h = d?.clientHeight ?? l?.clientHeight ?? 0;
+    const { rowHeight: s, container: o, viewportEl: c } = r._virtualization, l = o, h = c?.clientHeight ?? l?.clientHeight ?? 0;
     if (l && h > 0) {
-      const c = r._focusRow * s;
-      c < l.scrollTop ? l.scrollTop = c : c + s > l.scrollTop + h && (l.scrollTop = c - h + s);
+      const d = r._focusRow * s;
+      d < l.scrollTop ? l.scrollTop = d : d + s > l.scrollTop + h && (l.scrollTop = d - h + s);
     }
   }
   const e = r._activeEditRows !== void 0 && r._activeEditRows !== -1;
@@ -117,12 +117,12 @@ function g(r, t) {
     let o = s?.children[r._focusCol];
     if ((!o || !o.classList?.contains("cell")) && (o = s?.querySelector(`.cell[data-col="${r._focusCol}"]`) ?? s?.querySelector(".cell[data-col]")), o) {
       o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
-      const d = r.querySelector(".tbw-scroll-area");
-      if (d && o && (!e || t?.forceHorizontalScroll)) {
+      const c = r.querySelector(".tbw-scroll-area");
+      if (c && o && (!e || t?.forceHorizontalScroll)) {
         const l = r._getHorizontalScrollOffsets?.(s ?? void 0, o) ?? { left: 0, right: 0 };
         if (!l.skipScroll) {
-          const h = o.getBoundingClientRect(), c = d.getBoundingClientRect(), f = h.left - c.left + d.scrollLeft, w = f + h.width, p = d.scrollLeft + l.left, b = d.scrollLeft + d.clientWidth - l.right;
-          f < p ? d.scrollLeft = f - l.left : w > b && (d.scrollLeft = w - d.clientWidth + l.right);
+          const h = o.getBoundingClientRect(), d = c.getBoundingClientRect(), f = h.left - d.left + c.scrollLeft, w = f + h.width, p = c.scrollLeft + l.left, b = c.scrollLeft + c.clientWidth - l.right;
+          f < p ? c.scrollLeft = f - l.left : w > b && (c.scrollLeft = w - c.clientWidth + l.right);
         }
       }
       if (r._activeEditRows !== void 0 && r._activeEditRows !== -1 && o.classList.contains("editing")) {
@@ -546,16 +546,16 @@ class z extends P {
   #e;
   #t = !1;
   #n;
-  #w = !1;
+  #v = !1;
   #a = 0;
   /** Set of column fields to completely hide */
   #s = /* @__PURE__ */ new Set();
   /** Set of column fields to show value only (no header label) */
   #l = /* @__PURE__ */ new Set();
   /** Currently active breakpoint, or null if none */
-  #c = null;
+  #d = null;
   /** Sorted breakpoints from largest to smallest */
-  #d = [];
+  #c = [];
   /**
    * Check if currently in responsive mode.
    * @returns `true` if the grid is in card layout mode
@@ -580,7 +580,7 @@ class z extends P {
    * @param width - New breakpoint width in pixels
    */
   setBreakpoint(t) {
-    this.config.breakpoint = t, this.#m(this.#a);
+    this.config.breakpoint = t, this.#b(this.#a);
   }
   /**
    * Set a custom card renderer.
@@ -602,13 +602,13 @@ class z extends P {
    * @returns The active BreakpointConfig, or null if no breakpoint is active
    */
   getActiveBreakpoint() {
-    return this.#c;
+    return this.#d;
   }
   attach(t) {
-    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#d = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
+    super.attach(t), this.#R(), this.#u(this.config.hiddenColumns), this.config.breakpoints?.length && (this.#c = [...this.config.breakpoints].sort((e, i) => i.maxWidth - e.maxWidth)), this.#e = new ResizeObserver((e) => {
       const i = e[0]?.contentRect.width ?? 0;
       this.#a = i, clearTimeout(this.#n), this.#n = setTimeout(() => {
-        this.#m(i);
+        this.#b(i);
       }, this.config.debounceMs ?? 100);
     }), this.#e.observe(this.gridElement);
   }
@@ -642,21 +642,21 @@ class z extends P {
     if (!e) return;
     const i = t;
     if (i.__frameworkAdapter?.parseResponsiveCardElement) {
-      const c = i.__frameworkAdapter.parseResponsiveCardElement(e);
-      c && (this.config = { ...this.config, cardRenderer: c });
+      const d = i.__frameworkAdapter.parseResponsiveCardElement(e);
+      d && (this.config = { ...this.config, cardRenderer: d });
     }
-    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), d = e.getAttribute("debounce-ms"), l = {};
+    const n = e.getAttribute("breakpoint"), a = e.getAttribute("card-row-height"), s = e.getAttribute("hidden-columns"), o = e.getAttribute("hide-header"), c = e.getAttribute("debounce-ms"), l = {};
     if (n !== null) {
-      const c = parseInt(n, 10);
-      isNaN(c) || (l.breakpoint = c);
+      const d = parseInt(n, 10);
+      isNaN(d) || (l.breakpoint = d);
     }
-    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((c) => c.trim()).filter((c) => c.length > 0)), o !== null && (l.hideHeader = o !== "false"), d !== null) {
-      const c = parseInt(d, 10);
-      isNaN(c) || (l.debounceMs = c);
+    if (a !== null && (l.cardRowHeight = a === "auto" ? "auto" : parseInt(a, 10)), s !== null && (l.hiddenColumns = s.split(",").map((d) => d.trim()).filter((d) => d.length > 0)), o !== null && (l.hideHeader = o !== "false"), c !== null) {
+      const d = parseInt(c, 10);
+      isNaN(d) || (l.debounceMs = d);
     }
     const h = e.innerHTML.trim();
-    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (c) => {
-      const f = H(h, { value: c, row: c }), w = S(f), p = document.createElement("div");
+    h && !this.config.cardRenderer && !i.__frameworkAdapter?.parseResponsiveCardElement && (l.cardRenderer = (d) => {
+      const f = H(h, { value: d, row: d }), w = S(f), p = document.createElement("div");
       return p.className = "tbw-responsive-card-content", p.innerHTML = w, p;
     }), Object.keys(l).length > 0 && (this.config = { ...this.config, ...l });
   }
@@ -686,7 +686,7 @@ class z extends P {
    * In multi-breakpoint mode, applies whenever there's an active breakpoint.
    */
   afterRender() {
-    if (this.#E(), !(this.#d.length > 0 ? this.#c !== null : this.#t))
+    if (this.#E(), !(this.#c.length > 0 ? this.#d !== null : this.#t))
       return;
     const e = this.#s.size > 0, i = this.#l.size > 0;
     if (!e && !i)
@@ -701,13 +701,13 @@ class z extends P {
    * Check if width has crossed any breakpoint threshold.
    * Handles both single breakpoint (legacy) and multi-breakpoint modes.
    */
-  #m(t) {
-    if (this.#d.length > 0) {
+  #b(t) {
+    if (this.#c.length > 0) {
       this.#y(t);
       return;
     }
     const e = this.config.breakpoint ?? 0;
-    e === 0 && !this.#w && (this.#w = !0, console.warn(
+    e === 0 && !this.#v && (this.#v = !0, console.warn(
       "[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."
     ));
     const i = e > 0 && t < e;
@@ -723,10 +723,10 @@ class z extends P {
    */
   #y(t) {
     let e = null;
-    for (const n of this.#d)
+    for (const n of this.#c)
       t <= n.maxWidth && (e = n);
-    if (e !== this.#c) {
-      this.#c = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
+    if (e !== this.#d) {
+      this.#d = e, e?.hiddenColumns ? this.#u(e.hiddenColumns) : this.#u(this.config.hiddenColumns);
       const n = e?.cardLayout === !0;
       n !== this.#t && (this.#t = n, this.#h()), this.emit("responsive-change", {
         isResponsive: this.#t,
@@ -833,7 +833,7 @@ class z extends P {
    * Prioritizes DOM-measured height (actual rendered size) over config,
    * since content can overflow the configured height.
    */
-  #v() {
+  #f() {
     if (this.#r && this.#r > 0)
       return this.#r;
     const t = this.config.cardRowHeight;
@@ -843,14 +843,14 @@ class z extends P {
    * Get the effective group row height for virtualization calculations.
    * Uses DOM-measured height, falling back to original row height.
    */
-  #b() {
+  #p() {
     return this.#o && this.#o > 0 ? this.#o : this.#i ?? 28;
   }
   /**
    * Check if there are any group rows in the current dataset.
    * Used to determine if we have mixed row heights.
    */
-  #f() {
+  #w() {
     for (const t of this.rows)
       if (t.__isGroupRow)
         return !0;
@@ -875,11 +875,13 @@ class z extends P {
    * actual heights and what the base calculation assumes:
    * - Extra for groups: groupCount * (groupHeight - baseHeight)
    * - Extra for cards: cardCount * (cardHeight - baseHeight)
+   *
+   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeight() {
-    if (!this.#t || !this.config.cardRenderer || !this.#f())
+    if (!this.#t || !this.config.cardRenderer || !this.#w())
       return 0;
-    const t = this.#i ?? 28, e = this.#b(), i = this.#v(), { groupCount: n, cardCount: a } = this.#_(), s = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
+    const t = this.#i ?? 28, e = this.#p(), i = this.#f(), { groupCount: n, cardCount: a } = this.#_(), s = n * Math.max(0, e - t), o = a * Math.max(0, i - t);
     return s + o;
   }
   /**
@@ -887,16 +889,30 @@ class z extends P {
    * Used by virtualization to correctly calculate scroll positions.
    *
    * Like getExtraHeight, this accounts for both group and card row heights.
+   *
+   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeightBefore(t) {
-    if (!this.#t || !this.config.cardRenderer || !this.#f())
+    if (!this.#t || !this.config.cardRenderer || !this.#w())
       return 0;
-    const e = this.#i ?? 28, i = this.#b(), n = this.#v(), a = Math.max(0, i - e), s = Math.max(0, n - e);
-    let o = 0, d = 0;
+    const e = this.#i ?? 28, i = this.#p(), n = this.#f(), a = Math.max(0, i - e), s = Math.max(0, n - e);
+    let o = 0, c = 0;
     const l = this.rows, h = Math.min(t, l.length);
-    for (let c = 0; c < h; c++)
-      l[c].__isGroupRow ? o++ : d++;
-    return o * a + d * s;
+    for (let d = 0; d < h; d++)
+      l[d].__isGroupRow ? o++ : c++;
+    return o * a + c * s;
+  }
+  /**
+   * Get the height of a specific row based on its type (group row vs card row).
+   * Returns undefined if not in responsive mode.
+   *
+   * @param row - The row data
+   * @param _index - The row index (unused, but part of the interface)
+   * @returns The row height in pixels, or undefined if not in responsive mode
+   */
+  getRowHeight(t, e) {
+    if (!(!this.#t || !this.config.cardRenderer))
+      return t.__isGroupRow ? this.#p() : this.#f();
   }
   /**
    * Count the number of card rows (non-group rows) in the current dataset.
@@ -908,7 +924,7 @@ class z extends P {
     return t;
   }
   /** Pending refresh scheduled via microtask */
-  #p = !1;
+  #m = !1;
   /**
    * Measure card height from DOM after render and detect row count changes.
    * Called in afterRender to ensure scroll calculations are accurate.
@@ -928,7 +944,7 @@ class z extends P {
     if (!this.#t || !this.config.cardRenderer)
       return;
     let t = !1;
-    const e = this.grid, i = this.#f(), n = this.#C();
+    const e = this.grid, i = this.#w(), n = this.#C();
     if (n !== this.#g && (this.#g = n, t = !0), i) {
       const s = this.gridElement.querySelector(".data-grid-row.group-row");
       if (s) {
@@ -941,8 +957,8 @@ class z extends P {
       const s = a.getBoundingClientRect().height;
       s > 0 && s !== this.#r && (this.#r = s, t = !0, !i && e._virtualization && (e._virtualization.rowHeight = s));
     }
-    t && !this.#p && (this.#p = !0, queueMicrotask(() => {
-      this.#p = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
+    t && !this.#m && (this.#m = !0, queueMicrotask(() => {
+      this.#m = !1, this.grid && this.#t && this.grid.refreshVirtualWindow?.(!0, !0);
     }));
   }
 }