@toolbox-web/grid 0.4.2 → 0.5.0

package/lib/plugins/reorder/ReorderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/ReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAkB,MAAM,+BAA+B,CAAC;AAI/E,OAAO,KAAK,EAAoB,aAAa,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,IAAI,aAAa;IAC1B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAYxB;IAED;;;OAGG;IACH,cAAuB,iBAAiB,IAAI,MAAM,CAMjD;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAExC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAShC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASf,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBvE,MAAM,IAAI,IAAI;IAUd,WAAW,IAAI,IAAI;IAmG5B;;OAEG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAyCxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAsBhD;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAIrC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAmDnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAgDnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;CAqB1B"}
+{"version":3,"file":"ReorderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/ReorderPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAkB,MAAM,+BAA+B,CAAC;AAI/E,OAAO,KAAK,EAAoB,aAAa,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,IAAI,aAAa;IAC1B,SAAkB,MAAM,SAAU;IAElC,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAYxB;IAED;;;OAGG;IACH,cAAuB,iBAAiB,IAAI,MAAM,CAMjD;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAExC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAShC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASf,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBvE,MAAM,IAAI,IAAI;IAUd,WAAW,IAAI,IAAI;IAiG5B;;OAEG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAyCxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAoBhD;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAIrC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAQxB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAmDnB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAgDnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;CAqB1B"}

package/lib/plugins/reorder/index.d.ts

@@ -3,5 +3,5 @@
  * Re-exports plugin class and types for tree-shakeable imports.
  */
 export { ReorderPlugin } from './ReorderPlugin';
-export type { ReorderAnimation, ReorderConfig } from './types';
+export type { ColumnMoveDetail, ReorderAnimation, ReorderConfig } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/plugins/reorder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/reorder/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/lib/plugins/reorder/index.js

@@ -1,37 +1,37 @@
-function b(a) {
-  a && a.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
+function b(l) {
+  l && l.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', w = document.createElement("template");
-w.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
-const C = document.createElement("template");
-C.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
-function E(a, e) {
-  if (a._virtualization?.enabled) {
-    const { rowHeight: l, container: r, viewportEl: s } = a._virtualization, o = r, c = s?.clientHeight ?? o?.clientHeight ?? 0;
+const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', C = document.createElement("template");
+C.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const E = document.createElement("template");
+E.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function w(l, e) {
+  if (l._virtualization?.enabled) {
+    const { rowHeight: a, container: r, viewportEl: s } = l._virtualization, o = r, c = s?.clientHeight ?? o?.clientHeight ?? 0;
     if (o && c > 0) {
-      const u = a._focusRow * l;
-      u < o.scrollTop ? o.scrollTop = u : u + l > o.scrollTop + c && (o.scrollTop = u - c + l);
+      const u = l._focusRow * a;
+      u < o.scrollTop ? o.scrollTop = u : u + a > o.scrollTop + c && (o.scrollTop = u - c + a);
     }
   }
-  const t = a._activeEditRows !== void 0 && a._activeEditRows !== -1;
-  t || a.refreshVirtualWindow(!1), b(a._bodyEl), Array.from(a._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((l) => {
-    l.setAttribute("aria-selected", "false");
+  const t = l._activeEditRows !== void 0 && l._activeEditRows !== -1;
+  t || l.refreshVirtualWindow(!1), b(l._bodyEl), Array.from(l._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((a) => {
+    a.setAttribute("aria-selected", "false");
   });
-  const i = a._focusRow, n = a._virtualization.start ?? 0, d = a._virtualization.end ?? a._rows.length;
+  const i = l._focusRow, n = l._virtualization.start ?? 0, d = l._virtualization.end ?? l._rows.length;
   if (i >= n && i < d) {
-    const l = a._bodyEl.querySelectorAll(".data-grid-row")[i - n];
-    let r = l?.children[a._focusCol];
-    if ((!r || !r.classList?.contains("cell")) && (r = l?.querySelector(`.cell[data-col="${a._focusCol}"]`) ?? l?.querySelector(".cell[data-col]")), r) {
+    const a = l._bodyEl.querySelectorAll(".data-grid-row")[i - n];
+    let r = a?.children[l._focusCol];
+    if ((!r || !r.classList?.contains("cell")) && (r = a?.querySelector(`.cell[data-col="${l._focusCol}"]`) ?? a?.querySelector(".cell[data-col]")), r) {
       r.classList.add("cell-focus"), r.setAttribute("aria-selected", "true");
-      const s = a.shadowRoot?.querySelector(".tbw-scroll-area");
+      const s = l.querySelector(".tbw-scroll-area");
       if (s && r && !t) {
-        const o = a._getHorizontalScrollOffsets?.(l ?? void 0, r) ?? { left: 0, right: 0 };
+        const o = l._getHorizontalScrollOffsets?.(a ?? void 0, r) ?? { left: 0, right: 0 };
         if (!o.skipScroll) {
           const c = r.getBoundingClientRect(), u = s.getBoundingClientRect(), f = c.left - u.left + s.scrollLeft, g = f + c.width, h = s.scrollLeft + o.left, m = s.scrollLeft + s.clientWidth - o.right;
           f < h ? s.scrollLeft = f - o.left : g > m && (s.scrollLeft = g - s.clientWidth + o.right);
         }
       }
-      if (a._activeEditRows !== void 0 && a._activeEditRows !== -1 && r.classList.contains("editing")) {
+      if (l._activeEditRows !== void 0 && l._activeEditRows !== -1 && r.classList.contains("editing")) {
         const o = r.querySelector(v);
         if (o && document.activeElement !== o)
           try {
@@ -48,7 +48,7 @@ function E(a, e) {
     }
   }
 }
-const R = {
+const y = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -57,11 +57,11 @@ const R = {
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰"
-}, y = {
+}, L = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class L {
+class A {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -238,10 +238,21 @@ class L {
     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.
@@ -269,7 +280,7 @@ class L {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...R, ...e };
+    return { ...y, ...e };
   }
   // #region Animation Helpers
   /**
@@ -292,7 +303,7 @@ class L {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -308,7 +319,7 @@ class L {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
       if (!isNaN(i)) return i;
@@ -345,19 +356,19 @@ class L {
   }
   // #endregion
 }
-function O(a) {
-  const e = a.meta ?? {};
+function O(l) {
+  const e = l.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-function p(a, e, t) {
-  if (e === t || e < 0 || e >= a.length || t < 0 || t > a.length) return a;
-  const i = [...a], [n] = i.splice(e, 1);
+function p(l, e, t) {
+  if (e === t || e < 0 || e >= l.length || t < 0 || t > l.length) return l;
+  const i = [...l], [n] = i.splice(e, 1);
   return i.splice(t, 0, n), i;
 }
-const A = '.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}';
-class _ extends L {
+const _ = '@layer tbw-plugins{.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.cell.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}@keyframes reorder-fade-in{0%{opacity:0}to{opacity:1}}.cell.fade-animating{animation:reorder-fade-in var(--tbw-animation-duration, .2s) ease-out backwards}}';
+class R extends A {
   name = "reorder";
-  styles = A;
+  styles = _;
   get defaultConfig() {
     return {
       animation: "flip"
@@ -388,7 +399,7 @@ class _ extends L {
    */
   canMoveColumnWithPlugins(e) {
     return !e || !O(e) ? !1 : !this.grid.queryPlugins({
-      type: y.CAN_MOVE_COLUMN,
+      type: L.CAN_MOVE_COLUMN,
       context: e
     }).includes(!1);
   }
@@ -396,7 +407,7 @@ class _ extends L {
    * Clear all drag-related classes from header cells.
    */
   clearDragClasses() {
-    this.shadowRoot?.querySelectorAll(".header-row > .cell").forEach((e) => {
+    this.gridElement?.querySelectorAll(".header-row > .cell").forEach((e) => {
       e.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
     });
   }
@@ -418,13 +429,13 @@ class _ extends L {
   // #endregion
   // #region Hooks
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     e.querySelectorAll(".header-row > .cell").forEach((i) => {
       const n = i, d = n.getAttribute("data-field");
       if (!d) return;
-      const l = this.columns.find((r) => r.field === d);
-      if (!this.canMoveColumnWithPlugins(l)) {
+      const a = this.columns.find((r) => r.field === d);
+      if (!this.canMoveColumnWithPlugins(a)) {
         n.draggable = !1;
         return;
       }
@@ -450,7 +461,7 @@ class _ extends L {
           toIndex: u,
           columnOrder: g
         };
-        this.updateColumnOrder(g), this.emitCancelable("column-move", h) && this.updateColumnOrder(f);
+        this.emitCancelable("column-move", h) || this.updateColumnOrder(g);
       }));
     });
   }
@@ -464,13 +475,13 @@ class _ extends L {
     if (i < 0 || i >= n.length) return;
     const d = n[i];
     if (!this.canMoveColumnWithPlugins(d)) return;
-    const l = this.getColumnOrder(), r = l.indexOf(d.field);
+    const a = this.getColumnOrder(), r = a.indexOf(d.field);
     if (r === -1) return;
     const s = e.key === "ArrowLeft" ? r - 1 : r + 1;
-    if (s < 0 || s >= l.length) return;
-    const o = n.find((c) => c.field === l[s]);
+    if (s < 0 || s >= a.length) return;
+    const o = n.find((c) => c.field === a[s]);
     if (this.canMoveColumnWithPlugins(o))
-      return this.moveColumn(d.field, s), t._focusCol = s, E(this.grid), e.preventDefault(), e.stopPropagation(), !0;
+      return this.moveColumn(d.field, s), t._focusCol = s, w(this.grid), e.preventDefault(), e.stopPropagation(), !0;
   }
   // #endregion
   // #region Public API
@@ -490,12 +501,12 @@ class _ extends L {
     const i = this.getColumnOrder(), n = i.indexOf(e);
     if (n === -1) return;
     const d = p(i, n, t);
-    this.updateColumnOrder(d), this.emitCancelable("column-move", {
+    this.emitCancelable("column-move", {
       field: e,
       fromIndex: n,
       toIndex: t,
       columnOrder: d
-    }) && this.updateColumnOrder(i);
+    }) || this.updateColumnOrder(d);
   }
   /**
    * Set a specific column order.
@@ -518,7 +529,7 @@ class _ extends L {
    */
   captureHeaderPositions() {
     const e = /* @__PURE__ */ new Map();
-    return this.shadowRoot?.querySelectorAll(".header-row > .cell[data-field]").forEach((t) => {
+    return this.gridElement?.querySelectorAll(".header-row > .cell[data-field]").forEach((t) => {
       const i = t.getAttribute("data-field");
       i && e.set(i, t.getBoundingClientRect().left);
     }), e;
@@ -529,33 +540,33 @@ class _ extends L {
    * @param oldPositions - Header positions captured before DOM change
    */
   animateFLIP(e) {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t || e.size === 0) return;
     const i = /* @__PURE__ */ new Map();
-    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((l) => {
-      const r = l.getAttribute("data-field");
+    if (t.querySelectorAll(".header-row > .cell[data-field]").forEach((a) => {
+      const r = a.getAttribute("data-field");
       if (!r) return;
       const s = e.get(r);
       if (s === void 0) return;
-      const o = s - l.getBoundingClientRect().left;
+      const o = s - a.getBoundingClientRect().left;
       Math.abs(o) > 1 && i.set(r, o);
     }), i.size === 0) return;
     const n = [];
-    if (t.querySelectorAll(".cell[data-field]").forEach((l) => {
-      const r = i.get(l.getAttribute("data-field") ?? "");
+    if (t.querySelectorAll(".cell[data-field]").forEach((a) => {
+      const r = i.get(a.getAttribute("data-field") ?? "");
       if (r !== void 0) {
-        const s = l;
+        const s = a;
         s.style.transform = `translateX(${r}px)`, n.push(s);
       }
     }), n.length === 0) return;
-    t.host.offsetHeight;
+    this.gridElement.offsetHeight;
     const d = this.animationDuration;
     requestAnimationFrame(() => {
-      n.forEach((l) => {
-        l.classList.add("flip-animating"), l.style.transform = "";
+      n.forEach((a) => {
+        a.classList.add("flip-animating"), a.style.transform = "";
       }), setTimeout(() => {
-        n.forEach((l) => {
-          l.style.transform = "", l.classList.remove("flip-animating");
+        n.forEach((a) => {
+          a.style.transform = "", a.classList.remove("flip-animating");
         });
       }, d + 50);
     });
@@ -565,7 +576,7 @@ class _ extends L {
    * Uses CSS keyframes - JS just toggles classes.
    */
   animateFade(e) {
-    const t = this.shadowRoot;
+    const t = this.gridElement;
     if (!t) {
       e();
       return;
@@ -589,20 +600,20 @@ class _ extends L {
         o.classList.add("fade-animating"), d.push(o);
       }
     }), d.length === 0) return;
-    const l = this.animationDuration;
+    const a = this.animationDuration;
     setTimeout(() => {
       d.forEach((r) => r.classList.remove("fade-animating"));
-    }, l + 50);
+    }, a + 50);
   }
   /**
    * Update column order with configured animation.
    */
   updateColumnOrder(e) {
     const t = this.animationType;
-    if (t === "flip" && this.shadowRoot) {
+    if (t === "flip" && this.gridElement) {
       const i = this.captureHeaderPositions();
       this.grid.setColumnOrder(e), requestAnimationFrame(() => {
-        this.shadowRoot?.host?.offsetHeight, this.animateFLIP(i);
+        this.gridElement.offsetHeight, this.animateFLIP(i);
       });
     } else t === "fade" ? this.animateFade(() => this.grid.setColumnOrder(e)) : this.grid.setColumnOrder(e);
     this.grid.requestStateChange?.();
@@ -610,6 +621,6 @@ class _ extends L {
   // #endregion
 }
 export {
-  _ as ReorderPlugin
+  R as ReorderPlugin
 };
 //# sourceMappingURL=index.js.map