@toolbox-web/grid 0.3.3 → 0.4.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;AAa/D;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,IAAI,aAAa;IAC1B,SAAkB,OAAO,WAAW;IAEpC,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAYxB;IAED;;;OAGG;IACH,OAAO,KAAK,kBAAkB,GAkB7B;IAED;;OAEG;IACH,OAAO,KAAK,iBAAiB,GAe5B;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAK/B,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBvE,MAAM,IAAI,IAAI;IAUd,WAAW,IAAI,IAAI;IAyG5B;;OAEG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAuDxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAkBhD;;;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;IAqBzB,SAAkB,MAAM,SAAU;CAEnC"}
+{"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;AAa/D;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,IAAI,aAAa;IAC1B,SAAkB,OAAO,WAAW;IAEpC,cAAuB,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,CAI7D;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAYxB;IAED;;;OAGG;IACH,OAAO,KAAK,kBAAkB,GAkB7B;IAED;;OAEG;IACH,OAAO,KAAK,iBAAiB,GAe5B;IAGD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAK/B,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAiBvE,MAAM,IAAI,IAAI;IAUd,WAAW,IAAI,IAAI;IAyG5B;;OAEG;IACM,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAuDxD;;;OAGG;IACH,cAAc,IAAI,MAAM,EAAE;IAI1B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAkBhD;;;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;IAyBzB,SAAkB,MAAM,SAAU;CAEnC"}

package/lib/plugins/reorder/index.js

@@ -1,8 +1,11 @@
 function E(n) {
   n && n.querySelectorAll(".cell-focus").forEach((t) => t.classList.remove("cell-focus"));
 }
-const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
-function y(n, t) {
+const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', y = document.createElement("template");
+y.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const L = document.createElement("template");
+L.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function A(n, t) {
   if (n._virtualization?.enabled) {
     const { rowHeight: a, container: o, viewportEl: l } = n._virtualization, s = o, d = l?.clientHeight ?? s?.clientHeight ?? 0;
     if (s && d > 0) {
@@ -44,7 +47,7 @@ function y(n, t) {
     }
   }
 }
-const L = {
+const O = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -57,7 +60,7 @@ const L = {
   /** Ask if a column can be moved. Context: ColumnConfig. Response: boolean | undefined */
   CAN_MOVE_COLUMN: "canMoveColumn"
 };
-class A {
+class x {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -74,6 +77,12 @@ class A {
   config;
   /** User-provided configuration from constructor */
   userConfig;
+  /**
+   * Plugin-level AbortController for event listener cleanup.
+   * Created fresh in attach(), aborted in detach().
+   * This ensures event listeners are properly cleaned up when plugins are re-attached.
+   */
+  #t;
   /**
    * Default configuration - subclasses should override this getter.
    * Note: This must be a getter (not property initializer) for proper inheritance
@@ -88,19 +97,48 @@ class A {
   /**
    * Called when the plugin is attached to a grid.
    * Override to set up event listeners, initialize state, etc.
+   *
+   * @example
+   * ```ts
+   * attach(grid: GridElement): void {
+   *   super.attach(grid);
+   *   // Set up document-level listeners with auto-cleanup
+   *   document.addEventListener('keydown', this.handleEscape, {
+   *     signal: this.disconnectSignal
+   *   });
+   * }
+   * ```
    */
   attach(t) {
-    this.grid = t, this.config = { ...this.defaultConfig, ...this.userConfig };
+    this.#t?.abort(), this.#t = new AbortController(), this.grid = t, this.config = { ...this.defaultConfig, ...this.userConfig };
   }
   /**
    * Called when the plugin is detached from a grid.
    * Override to clean up event listeners, timers, etc.
+   *
+   * @example
+   * ```ts
+   * detach(): void {
+   *   // Clean up any state not handled by disconnectSignal
+   *   this.selectedRows.clear();
+   *   this.cache = null;
+   * }
+   * ```
    */
   detach() {
+    this.#t?.abort(), this.#t = void 0;
   }
   /**
    * Get another plugin instance from the same grid.
    * Use for inter-plugin communication.
+   *
+   * @example
+   * ```ts
+   * const selection = this.getPlugin(SelectionPlugin);
+   * if (selection) {
+   *   const selectedRows = selection.getSelectedRows();
+   * }
+   * ```
    */
   getPlugin(t) {
     return this.grid?.getPlugin(t);
@@ -174,7 +212,7 @@ class A {
    * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
    */
   get disconnectSignal() {
-    return this.grid?.disconnectSignal;
+    return this.#t?.signal ?? this.grid?.disconnectSignal;
   }
   /**
    * Get the grid-level icons configuration.
@@ -182,7 +220,7 @@ class A {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...L, ...t };
+    return { ...O, ...t };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -213,7 +251,7 @@ class A {
   }
   // #endregion
 }
-function w(n) {
+function b(n) {
   const t = n.meta ?? {};
   return t.lockPosition !== !0 && t.suppressMovable !== !0;
 }
@@ -222,8 +260,8 @@ function v(n, t, e) {
   const i = [...n], [r] = i.splice(t, 1);
   return i.splice(e, 0, r), i;
 }
-const O = '.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 x extends A {
+const _ = '.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 I extends x {
   name = "reorder";
   version = "1.0.0";
   get defaultConfig() {
@@ -295,7 +333,7 @@ class x extends A {
         type: p.CAN_MOVE_COLUMN,
         context: a
       }).includes(!1);
-      if (!a || !w(a) || !s) {
+      if (!a || !b(a) || !s) {
         r.draggable = !1;
         return;
       }
@@ -317,13 +355,13 @@ class x extends A {
         const f = this.draggedField, u = this.draggedIndex, g = this.dropIndex;
         if (!this.isDragging || f === null || u === null || g === null)
           return;
-        const h = g > u ? g - 1 : g, m = this.getColumnOrder(), b = v(m, u, h), C = {
+        const h = g > u ? g - 1 : g, m = this.getColumnOrder(), w = v(m, u, h), C = {
           field: f,
           fromIndex: u,
           toIndex: h,
-          columnOrder: b
+          columnOrder: w
         };
-        this.updateColumnOrder(b), this.emit("column-move", C);
+        this.updateColumnOrder(w), this.emit("column-move", C);
       }));
     });
   }
@@ -336,7 +374,7 @@ class x extends A {
     const e = this.grid, i = e._focusCol, r = e._visibleColumns;
     if (i < 0 || i >= r.length) return;
     const c = r[i];
-    if (!c || !w(c)) return;
+    if (!c || !b(c)) return;
     const a = this.grid;
     if (a.queryPlugins({
       type: p.CAN_MOVE_COLUMN,
@@ -351,7 +389,7 @@ class x extends A {
       type: p.CAN_MOVE_COLUMN,
       context: f
     }).includes(!1)))
-      return this.moveColumn(c.field, d), e._focusCol = d, y(this.grid), t.preventDefault(), t.stopPropagation(), !0;
+      return this.moveColumn(c.field, d), e._focusCol = d, A(this.grid), t.preventDefault(), t.stopPropagation(), !0;
   }
   // #endregion
   // #region Public API
@@ -482,16 +520,18 @@ class x extends A {
     const e = this.grid, i = this.animationType;
     if (i === "flip" && this.shadowRoot) {
       const r = this.captureHeaderPositions();
-      e.setColumnOrder(t), this.shadowRoot.host.offsetHeight, this.animateFLIP(r);
+      e.setColumnOrder(t), requestAnimationFrame(() => {
+        this.shadowRoot?.host?.offsetHeight, this.animateFLIP(r);
+      });
     } else i === "fade" ? this.animateFade(() => e.setColumnOrder(t)) : e.setColumnOrder(t);
     e.requestStateChange?.();
   }
   // #endregion
   // #region Styles
-  styles = O;
+  styles = _;
   // #endregion
 }
 export {
-  x as ReorderPlugin
+  I as ReorderPlugin
 };
 //# sourceMappingURL=index.js.map