@toolbox-web/grid 0.2.6 → 0.2.8

package/lib/plugins/master-detail/index.js

@@ -1,4 +1,4 @@
-const p = {
+const w = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const p = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class x {
+class m {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -133,7 +133,7 @@ class x {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...p, ...e };
+    return { ...w, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -164,31 +164,31 @@ class x {
   }
   // #endregion
 }
-function g(a, e) {
-  const t = new Set(a);
+function p(c, e) {
+  const t = new Set(c);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function R(a, e) {
-  const t = new Set(a);
+function x(c, e) {
+  const t = new Set(c);
   return t.add(e), t;
 }
-function m(a, e) {
-  const t = new Set(a);
+function R(c, e) {
+  const t = new Set(c);
   return t.delete(e), t;
 }
-function E(a, e) {
-  return a.has(e);
+function b(c, e) {
+  return c.has(e);
 }
-function b(a, e, t, r) {
+function E(c, e, t, i) {
   const o = document.createElement("div");
   o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
-  const d = document.createElement("div");
-  d.className = "master-detail-cell", d.setAttribute("role", "cell"), d.style.gridColumn = `1 / ${r + 1}`;
-  const n = t(a, e);
-  return typeof n == "string" ? d.innerHTML = n : n instanceof HTMLElement && d.appendChild(n), o.appendChild(d), o;
+  const a = document.createElement("div");
+  a.className = "master-detail-cell", a.setAttribute("role", "cell"), a.style.gridColumn = `1 / ${i + 1}`;
+  const r = t(c, e);
+  return typeof r == "string" ? a.innerHTML = r : r instanceof HTMLElement && a.appendChild(r), o.appendChild(a), o;
 }
-const C = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;font-size:10px;opacity:.7;-webkit-user-select:none;user-select:none}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border))}.master-detail-cell{padding:16px;overflow:auto}";
-class v extends x {
+const y = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
+class C extends m {
   name = "masterDetail";
   version = "1.0.0";
   get defaultConfig() {
@@ -196,9 +196,67 @@ class v extends x {
       detailHeight: "auto",
       expandOnRowClick: !1,
       collapseOnClickOutside: !1,
-      showExpandColumn: !0
+      showExpandColumn: !0,
+      animation: "slide"
+      // Plugin's own default
     };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and CSS variable.
+   */
+  get isAnimationEnabled() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t === !0 || t === "on") return !0;
+    const i = this.shadowRoot?.host;
+    return i ? getComputedStyle(i).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get expand/collapse animation style from plugin config.
+   */
+  get animationStyle() {
+    return this.isAnimationEnabled ? this.config.animation ?? "slide" : !1;
+  }
+  /**
+   * Get animation duration from CSS variable (set by grid).
+   */
+  get animationDuration() {
+    const e = this.shadowRoot?.host;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
+      if (!isNaN(i)) return i;
+    }
+    return 200;
+  }
+  /**
+   * Apply expand animation to a detail element.
+   */
+  animateExpand(e) {
+    !this.isAnimationEnabled || this.animationStyle === !1 || (e.classList.add("tbw-expanding"), e.addEventListener(
+      "animationend",
+      () => {
+        e.classList.remove("tbw-expanding");
+      },
+      { once: !0 }
+    ));
+  }
+  /**
+   * Apply collapse animation to a detail element and remove after animation.
+   */
+  animateCollapse(e, t) {
+    if (!this.isAnimationEnabled || this.animationStyle === !1) {
+      t();
+      return;
+    }
+    e.classList.add("tbw-collapsing");
+    const i = () => {
+      e.classList.remove("tbw-collapsing"), t();
+    };
+    e.addEventListener("animationend", i, { once: !0 }), setTimeout(i, this.animationDuration + 50);
+  }
+  // #endregion
   // #region Internal State
   expandedRows = /* @__PURE__ */ new Set();
   detailElements = /* @__PURE__ */ new Map();
@@ -214,37 +272,37 @@ class v extends x {
       return [...e];
     const t = [...e];
     if (t.length > 0) {
-      const r = { ...t[0] }, o = r.viewRenderer;
+      const i = { ...t[0] }, o = i.viewRenderer;
       if (o?.__masterDetailWrapped)
         return t;
-      const d = (n) => {
-        const { value: i, row: s } = n, l = this.expandedRows.has(s), c = document.createElement("span");
-        c.className = "master-detail-cell-wrapper";
+      const a = (r) => {
+        const { value: s, row: n } = r, d = this.expandedRows.has(n), l = document.createElement("span");
+        l.className = "master-detail-cell-wrapper";
         const h = document.createElement("span");
-        h.className = "master-detail-toggle", this.setIcon(h, this.resolveIcon(l ? "collapse" : "expand")), h.setAttribute("role", "button"), h.setAttribute("tabindex", "0"), h.setAttribute("aria-expanded", String(l)), h.setAttribute("aria-label", l ? "Collapse details" : "Expand details"), h.addEventListener("click", (f) => {
-          f.stopPropagation();
-          const w = this.rows.indexOf(s);
-          this.expandedRows = g(this.expandedRows, s), this.emit("detail-expand", {
-            rowIndex: w,
-            row: s,
-            expanded: this.expandedRows.has(s)
+        h.className = `master-detail-toggle${d ? " expanded" : ""}`, this.setIcon(h, this.resolveIcon(d ? "collapse" : "expand")), h.setAttribute("role", "button"), h.setAttribute("tabindex", "0"), h.setAttribute("aria-expanded", String(d)), h.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), h.addEventListener("click", (g) => {
+          g.stopPropagation();
+          const f = this.rows.indexOf(n);
+          this.expandedRows = p(this.expandedRows, n), this.emit("detail-expand", {
+            rowIndex: f,
+            row: n,
+            expanded: this.expandedRows.has(n)
           }), this.requestRender();
-        }), c.appendChild(h);
+        }), l.appendChild(h);
         const u = document.createElement("span");
         if (o) {
-          const f = o(n);
-          f instanceof Node ? u.appendChild(f) : u.textContent = String(f ?? i ?? "");
+          const g = o(r);
+          g instanceof Node ? u.appendChild(g) : u.textContent = String(g ?? s ?? "");
         } else
-          u.textContent = String(i ?? "");
-        return c.appendChild(u), c;
+          u.textContent = String(s ?? "");
+        return l.appendChild(u), l;
       };
-      d.__masterDetailWrapped = !0, r.viewRenderer = d, t[0] = r;
+      a.__masterDetailWrapped = !0, i.viewRenderer = a, t[0] = i;
     }
     return t;
   }
   onRowClick(e) {
     if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
-      return this.expandedRows = g(this.expandedRows, e.row), this.emit("detail-expand", {
+      return this.expandedRows = p(this.expandedRows, e.row), this.emit("detail-expand", {
         rowIndex: e.rowIndex,
         row: e.row,
         expanded: this.expandedRows.has(e.row)
@@ -271,26 +329,26 @@ class v extends x {
     if (!this.config.detailRenderer) return;
     const e = this.shadowRoot?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), r = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
-    for (const n of r) {
-      const i = n.querySelector(".cell[data-row]"), s = i ? parseInt(i.getAttribute("data-row") ?? "-1", 10) : -1;
-      s >= 0 && t.set(s, n);
+    const t = /* @__PURE__ */ new Map(), i = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
+    for (const r of i) {
+      const s = r.querySelector(".cell[data-row]"), n = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1;
+      n >= 0 && t.set(n, r);
     }
-    const d = e.querySelectorAll(".master-detail-row");
-    for (const n of d) {
-      const i = parseInt(n.getAttribute("data-detail-for") ?? "-1", 10), s = i >= 0 ? this.rows[i] : void 0, l = s && this.expandedRows.has(s), c = t.has(i);
-      (!l || !c) && (n.remove(), s && this.detailElements.delete(s));
+    const a = e.querySelectorAll(".master-detail-row");
+    for (const r of a) {
+      const s = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), n = s >= 0 ? this.rows[s] : void 0, d = n && this.expandedRows.has(n), l = t.has(s);
+      (!d || !l) && (r.remove(), n && this.detailElements.delete(n));
     }
-    for (const [n, i] of t) {
-      const s = this.rows[n];
-      if (!s || !this.expandedRows.has(s)) continue;
-      const l = this.detailElements.get(s);
-      if (l) {
-        l.previousElementSibling !== i && i.after(l);
+    for (const [r, s] of t) {
+      const n = this.rows[r];
+      if (!n || !this.expandedRows.has(n)) continue;
+      const d = this.detailElements.get(n);
+      if (d) {
+        d.previousElementSibling !== s && s.after(d);
         continue;
       }
-      const c = b(s, n, this.config.detailRenderer, o);
-      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), i.after(c), this.detailElements.set(s, c);
+      const l = E(n, r, this.config.detailRenderer, o);
+      typeof this.config.detailHeight == "number" && (l.style.height = `${this.config.detailHeight}px`), s.after(l), this.detailElements.set(n, l), this.animateExpand(l);
     }
   }
   /**
@@ -300,9 +358,9 @@ class v extends x {
   getExtraHeight() {
     let e = 0;
     for (const t of this.expandedRows) {
-      const r = this.detailElements.get(t);
-      if (r)
-        e += r.offsetHeight;
+      const i = this.detailElements.get(t);
+      if (i)
+        e += i.offsetHeight;
       else {
         const o = this.config?.detailHeight;
         e += typeof o == "number" ? o : 150;
@@ -316,15 +374,15 @@ class v extends x {
    */
   getExtraHeightBefore(e) {
     let t = 0;
-    for (const r of this.expandedRows) {
-      const o = this.rows.indexOf(r);
+    for (const i of this.expandedRows) {
+      const o = this.rows.indexOf(i);
       if (o >= 0 && o < e) {
-        const d = this.detailElements.get(r);
-        if (d)
-          t += d.offsetHeight;
+        const a = this.detailElements.get(i);
+        if (a)
+          t += a.offsetHeight;
         else {
-          const n = this.config?.detailHeight;
-          t += typeof n == "number" ? n : 150;
+          const r = this.config?.detailHeight;
+          t += typeof r == "number" ? r : 150;
         }
       }
     }
@@ -334,20 +392,20 @@ class v extends x {
    * Adjust the virtualization start index to keep expanded row visible while its detail is visible.
    * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
    */
-  adjustVirtualStart(e, t, r) {
+  adjustVirtualStart(e, t, i) {
     if (this.expandedRows.size === 0) return e;
     const o = [];
-    for (const i of this.expandedRows) {
-      const s = this.rows.indexOf(i);
-      s >= 0 && o.push({ index: s, row: i });
+    for (const s of this.expandedRows) {
+      const n = this.rows.indexOf(s);
+      n >= 0 && o.push({ index: n, row: s });
     }
-    o.sort((i, s) => i.index - s.index);
-    let d = e, n = 0;
-    for (const { index: i, row: s } of o) {
-      const l = i * r + n, h = this.detailElements.get(s)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), u = l + r + h;
-      n += h, !(i >= e) && u > t && i < d && (d = i);
+    o.sort((s, n) => s.index - n.index);
+    let a = e, r = 0;
+    for (const { index: s, row: n } of o) {
+      const d = s * i + r, h = this.detailElements.get(n)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), u = d + i + h;
+      r += h, !(s >= e) && u > t && s < a && (a = s);
     }
-    return d;
+    return a;
   }
   // #endregion
   // #region Public API
@@ -357,7 +415,7 @@ class v extends x {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = R(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = x(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -365,7 +423,7 @@ class v extends x {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = m(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = R(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -373,7 +431,7 @@ class v extends x {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = g(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = p(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -382,7 +440,7 @@ class v extends x {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? E(this.expandedRows, t) : !1;
+    return t ? b(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -405,8 +463,8 @@ class v extends x {
   getExpandedRows() {
     const e = [];
     for (const t of this.expandedRows) {
-      const r = this.rows.indexOf(t);
-      r >= 0 && e.push(r);
+      const i = this.rows.indexOf(t);
+      i >= 0 && e.push(i);
     }
     return e;
   }
@@ -421,10 +479,10 @@ class v extends x {
   }
   // #endregion
   // #region Styles
-  styles = C;
+  styles = y;
   // #endregion
 }
 export {
-  v as MasterDetailPlugin
+  C as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map