@toolbox-web/grid 1.24.2 → 1.25.1

package/lib/plugins/reorder-columns/types.d.ts

@@ -58,6 +58,10 @@ export interface ColumnMoveDetail {
     columnOrder: string[];
 }
 declare module '../../core/types' {
+    interface DataGridEventMap {
+        /** Fired when a column is reordered via drag-and-drop (cancelable). Call `preventDefault()` to reject the move. @group Column Reorder Events */
+        'column-move': ColumnMoveDetail;
+    }
     interface PluginNameMap {
         /** Primary name for the column reorder plugin */
         reorderColumns: import('./ReorderPlugin').ReorderPlugin;
@@ -67,4 +71,3 @@ declare module '../../core/types' {
         reorder: import('./ReorderPlugin').ReorderPlugin;
     }
 }
-//# sourceMappingURL=types.d.ts.map

package/lib/plugins/reorder-rows/RowReorderPlugin.d.ts

@@ -54,8 +54,8 @@ export declare const ROW_DRAG_HANDLE_FIELD = "__tbw_row_drag";
  *   plugins: [new RowReorderPlugin()],
  * };
  *
- * grid.addEventListener('row-move', (e) => {
- *   console.log('Row moved from', e.detail.fromIndex, 'to', e.detail.toIndex);
+ * grid.on('row-move', ({ fromIndex, toIndex }) => {
+ *   console.log('Row moved from', fromIndex, 'to', toIndex);
  * });
  * ```
  *
@@ -73,6 +73,7 @@ export declare const ROW_DRAG_HANDLE_FIELD = "__tbw_row_drag";
  * @see {@link RowMoveDetail} for the event detail structure
  */
 export declare class RowReorderPlugin extends BaseGridPlugin<RowReorderConfig> {
+    #private;
     /** @internal */
     readonly name = "reorderRows";
     /** @internal */
@@ -170,4 +171,3 @@ export declare class RowReorderPlugin extends BaseGridPlugin<RowReorderConfig> {
      */
     private clearDebounceTimer;
 }
-//# sourceMappingURL=RowReorderPlugin.d.ts.map

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

@@ -6,4 +6,3 @@
  */
 export { ROW_DRAG_HANDLE_FIELD, RowReorderPlugin } from './RowReorderPlugin';
 export type { PendingMove, RowMoveDetail, RowReorderConfig } from './types';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,2 +1,2 @@
-document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function e(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:r,viewportEl:i}=e._virtualization,o=r,n=i?.clientHeight??o?.clientHeight??0;if(o&&n>0){const r=e._focusRow*t;r<o.scrollTop?o.scrollTop=r:r+t>o.scrollTop+n&&(o.scrollTop=r-n+t)}}const r=void 0!==e._activeEditRows&&-1!==e._activeEditRows||!!e._isGridEditMode;var i;r||e.refreshVirtualWindow(!1),(i=e._bodyEl)&&i.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(e._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const o=e._focusRow,n=e._virtualization.start??0,s=e._virtualization.end??e._rows.length;if(o>=n&&o<s){const i=e._bodyEl.querySelectorAll(".data-grid-row")[o-n];let s=i?.children[e._focusCol];if(s&&s.classList?.contains("cell")||(s=i?.querySelector(`.cell[data-col="${e._focusCol}"]`)??i?.querySelector(".cell[data-col]")),s){s.classList.add("cell-focus"),s.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&s&&(!r||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(i??void 0,s)??{left:0,right:0};if(!t.skipScroll){const e=s.getBoundingClientRect(),r=o.getBoundingClientRect(),i=e.left-r.left+o.scrollLeft,n=i+e.width,a=o.scrollLeft+t.left,l=o.scrollLeft+o.clientWidth-t.right;i<a?o.scrollLeft=i-t.left:n>l&&(o.scrollLeft=n-o.clientWidth+t.right)}}if(r&&s.classList.contains("editing")){const e=s.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}}else if(r&&!s.contains(document.activeElement)){s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1");try{s.focus({preventScroll:!0})}catch{}}else if(!r){const t=e;document.activeElement!==t&&t.focus({preventScroll:!0})}}}}document.createElement("template").innerHTML='<div class="data-grid-row" role="row" part="row"></div>';const t='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:t,filterActive:t,print:"🖨️"};class i{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...r,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){console.warn(`[tbw-grid:${this.name}] ${e}`)}}const o="__tbw_row_drag";class n extends i{name="reorderRows";aliases=["rowReorder"];styles='@layer tbw-plugins{[data-field=__tbw_row_drag]{display:flex;align-items:center;justify-content:center}.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;min-width:1em;min-height:1em;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-row-reorder-handle-color, var(--tbw-color-fg-muted));transition:color var(--tbw-transition-duration, .12s) var(--tbw-transition-ease, ease);font-size:var(--tbw-font-size, 1em);letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-row-reorder-handle-hover, var(--tbw-color-fg))}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-row-reorder-moving-bg, var(--tbw-focus-background));box-shadow:0 0 0 1px var(--tbw-row-reorder-moving-border, var(--tbw-color-accent)) inset}.data-grid-row.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}}';get defaultConfig(){return{enableKeyboard:!0,showDragHandle:!0,dragHandlePosition:"left",dragHandleWidth:40,debounceMs:150,animation:"flip"}}get animationType(){return!!this.isAnimationEnabled&&(void 0!==this.config.animation?this.config.animation:"flip")}isDragging=!1;draggedRowIndex=null;dropRowIndex=null;pendingMove=null;debounceTimer=null;lastFocusCol=0;attach(e){super.attach(e),this.setupDelegatedDragListeners()}detach(){this.clearDebounceTimer(),this.isDragging=!1,this.draggedRowIndex=null,this.dropRowIndex=null,this.pendingMove=null}processColumns(e){if(!this.config.showDragHandle)return[...e];const t={field:o,header:"",width:this.config.dragHandleWidth??40,resizable:!1,sortable:!1,filterable:!1,meta:{lockPosition:!0,suppressMovable:!0,utility:!0},viewRenderer:()=>{const e=document.createElement("div");return e.className="dg-row-drag-handle",e.setAttribute("aria-label","Drag to reorder"),e.setAttribute("role","button"),e.setAttribute("tabindex","-1"),e.draggable=!0,this.setIcon(e,this.resolveIcon("dragHandle")),e}};return"right"===this.config.dragHandlePosition?[...e,t]:[t,...e]}afterRender(){}onKeyDown(e){if(!this.config.enableKeyboard)return;if(!e.ctrlKey||"ArrowUp"!==e.key&&"ArrowDown"!==e.key)return;const t=this.grid,r=t._focusRow,i=t._rows??this.sourceRows;if(r<0||r>=i.length)return;const o="ArrowUp"===e.key?"up":"down",n="up"===o?r-1:r+1;if(n<0||n>=i.length)return;const s=i[r];return!this.config.canMove||this.config.canMove(s,r,n,o)?(this.handleKeyboardMove(s,r,n,o,t._focusCol),e.preventDefault(),e.stopPropagation(),!0):void 0}onCellClick(){this.flushPendingMove()}moveRow(e,t){const r=[...this.sourceRows];if(e<0||e>=r.length)return;if(t<0||t>=r.length)return;if(e===t)return;const i=t<e?"up":"down",o=r[e];this.config.canMove&&!this.config.canMove(o,e,t,i)||this.executeMove(o,e,t,"keyboard")}canMoveRow(e,t){const r=this.sourceRows;if(e<0||e>=r.length)return!1;if(t<0||t>=r.length)return!1;if(e===t)return!1;if(!this.config.canMove)return!0;const i=t<e?"up":"down";return this.config.canMove(r[e],e,t,i)}setupDelegatedDragListeners(){const e=this.gridElement;if(!e)return;const t=this.disconnectSignal;e.addEventListener("dragstart",e=>{const t=e,r=t.target.closest(".dg-row-drag-handle");if(!r)return;const i=r.closest(".data-grid-row");if(!i)return;const o=this.getRowIndex(i);o<0||(this.isDragging=!0,this.draggedRowIndex=o,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",String(o))),i.classList.add("dragging"))},{signal:t}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedRowIndex=null,this.dropRowIndex=null,this.clearDragClasses()},{signal:t}),e.addEventListener("dragover",e=>{const t=e;if(!this.isDragging||null===this.draggedRowIndex)return;const r=t.target.closest(".data-grid-row");if(!r)return;t.preventDefault();const i=this.getRowIndex(r);if(i<0||i===this.draggedRowIndex)return;const o=r.getBoundingClientRect(),n=o.top+o.height/2,s=t.clientY<n;this.dropRowIndex=s?i:i+1,r.classList.add("drop-target"),r.classList.toggle("drop-before",s),r.classList.toggle("drop-after",!s)},{signal:t}),e.addEventListener("dragleave",e=>{const t=e.target.closest(".data-grid-row");t&&t.classList.remove("drop-target","drop-before","drop-after")},{signal:t}),e.addEventListener("drop",e=>{e.preventDefault();const t=this.draggedRowIndex;let r=this.dropRowIndex;if(this.isDragging&&null!==t&&null!==r&&(r>t&&r--,t!==r)){const e=this.sourceRows[t],i=r<t?"up":"down";this.config.canMove&&!this.config.canMove(e,t,r,i)||this.executeMove(e,t,r,"drag")}},{signal:t})}handleKeyboardMove(t,r,i,o,n){this.pendingMove?this.pendingMove.currentIndex=i:this.pendingMove={originalIndex:r,currentIndex:i,row:t},this.lastFocusCol=n;const s=this.grid,a=[...s._rows??this.sourceRows],[l]=a.splice(r,1);a.splice(i,0,l),s._rows=a,s._focusRow=i,s._focusCol=n,s.refreshVirtualWindow(!0),e(s),this.clearDebounceTimer(),this.debounceTimer=setTimeout(()=>{this.flushPendingMove()},this.config.debounceMs??300)}flushPendingMove(){if(this.clearDebounceTimer(),!this.pendingMove)return;const{originalIndex:t,currentIndex:r,row:i}=this.pendingMove;if(this.pendingMove=null,t===r)return;const o={row:i,fromIndex:t,toIndex:r,rows:[...this.sourceRows],source:"keyboard"};if(this.emitCancelable("row-move",o)){const i=[...this.sourceRows],[o]=i.splice(r,1);i.splice(t,0,o);const n=this.grid;n._rows=i,n._focusRow=t,n._focusCol=this.lastFocusCol,n.refreshVirtualWindow(!0),e(n)}}executeMove(e,t,r,i){const o=[...this.sourceRows],[n]=o.splice(t,1);o.splice(r,0,n);const s={row:e,fromIndex:t,toIndex:r,rows:o,source:i};if(!this.emitCancelable("row-move",s))if("flip"===this.animationType&&this.gridElement){const e=this.captureRowPositions();this.grid.rows=o,requestAnimationFrame(()=>{this.gridElement.offsetHeight,this.animateFLIP(e,t,r)})}else this.grid.rows=o}captureRowPositions(){const e=/* @__PURE__ */new Map;return this.gridElement?.querySelectorAll(".data-grid-row").forEach(t=>{const r=this.getRowIndex(t);r>=0&&e.set(r,t.getBoundingClientRect().top)}),e}animateFLIP(e,t,r){const i=this.gridElement;if(!i||0===e.size)return;const o=Math.min(t,r),n=Math.max(t,r),s=[];if(i.querySelectorAll(".data-grid-row").forEach(i=>{const a=i,l=this.getRowIndex(a);if(l<0||l<o||l>n)return;let d;d=l===r?t:t<r?l+1:l-1;const c=e.get(d);if(void 0===c)return;const g=c-a.getBoundingClientRect().top;Math.abs(g)>1&&s.push({el:a,deltaY:g})}),0===s.length)return;s.forEach(({el:e,deltaY:t})=>{e.style.transform=`translateY(${t}px)`}),i.offsetHeight;const a=this.animationDuration;requestAnimationFrame(()=>{s.forEach(({el:e})=>{e.classList.add("flip-animating"),e.style.transform=""}),setTimeout(()=>{s.forEach(({el:e})=>{e.style.transform="",e.classList.remove("flip-animating")})},a+50)})}getRowIndex(e){const t=e.querySelector(".cell[data-row]");return t?parseInt(t.getAttribute("data-row")??"-1",10):-1}clearDragClasses(){this.gridElement?.querySelectorAll(".data-grid-row").forEach(e=>{e.classList.remove("dragging","drop-target","drop-before","drop-after")})}clearDebounceTimer(){this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null)}}export{o as ROW_DRAG_HANDLE_FIELD,n as RowReorderPlugin};
+document.createElement("template").innerHTML='<div class="cell" role="gridcell" part="cell"></div>';function e(e,t){if(e._virtualization?.enabled){const{rowHeight:t,container:r,viewportEl:i}=e._virtualization,o=r,n=i?.clientHeight??o?.clientHeight??0;if(o&&n>0){const r=e._focusRow*t;r<o.scrollTop?o.scrollTop=r:r+t>o.scrollTop+n&&(o.scrollTop=r-n+t)}}const r=void 0!==e._activeEditRows&&-1!==e._activeEditRows||!!e._isGridEditMode;var i;r||e.refreshVirtualWindow(!1),(i=e._bodyEl)&&i.querySelectorAll(".cell-focus").forEach(e=>e.classList.remove("cell-focus")),Array.from(e._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach(e=>{e.setAttribute("aria-selected","false")});const o=e._focusRow,n=e._virtualization.start??0,s=e._virtualization.end??e._rows.length;if(o>=n&&o<s){const i=e._bodyEl.querySelectorAll(".data-grid-row")[o-n];let s=i?.children[e._focusCol];if(s&&s.classList?.contains("cell")||(s=i?.querySelector(`.cell[data-col="${e._focusCol}"]`)??i?.querySelector(".cell[data-col]")),s){s.classList.add("cell-focus"),s.setAttribute("aria-selected","true");const o=e.querySelector(".tbw-scroll-area");if(o&&s&&(!r||t?.forceHorizontalScroll)){const t=e._getHorizontalScrollOffsets?.(i??void 0,s)??{left:0,right:0};if(!t.skipScroll){const e=s.getBoundingClientRect(),r=o.getBoundingClientRect(),i=e.left-r.left+o.scrollLeft,n=i+e.width,a=o.scrollLeft+t.left,l=o.scrollLeft+o.clientWidth-t.right;i<a?o.scrollLeft=i-t.left:n>l&&(o.scrollLeft=n-o.clientWidth+t.right)}}if(r&&s.classList.contains("editing")){const e=s.querySelector('input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])');if(e&&document.activeElement!==e)try{e.focus({preventScroll:!0})}catch{}}else if(r&&!s.contains(document.activeElement)){s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1");try{s.focus({preventScroll:!0})}catch{}}else r||document.activeElement!==e&&e.focus({preventScroll:!0})}}}document.createElement("template").innerHTML='<div class="data-grid-row" role="row" part="row"></div>';const t='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',r={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:t,filterActive:t,print:"🖨️"};class i{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#e;get defaultConfig(){return{}}constructor(e={}){this.userConfig=e}attach(e){this.#e?.abort(),this.#e=new AbortController,this.grid=e,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#e?.abort(),this.#e=void 0}getPlugin(e){return this.grid?.getPlugin(e)}emit(e,t){this.grid?.dispatchEvent?.(new CustomEvent(e,{detail:t,bubbles:!0}))}emitCancelable(e,t){const r=new CustomEvent(e,{detail:t,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(r),r.defaultPrevented}on(e,t){this.grid?._pluginManager?.subscribe(this,e,t)}off(e){this.grid?._pluginManager?.unsubscribe(this,e)}emitPluginEvent(e,t){this.grid?._pluginManager?.emitPluginEvent(e,t)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#e?.signal??this.grid?.disconnectSignal}get gridIcons(){const e=this.grid?.gridConfig?.icons??{};return{...r,...e}}get isAnimationEnabled(){const e=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===e||"off"===e)return!1;if(!0===e||"on"===e)return!0;const t=this.gridElement;if(t){return"0"!==getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const e=this.gridElement;if(e){const t=getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(),r=parseInt(t,10);if(!isNaN(r))return r}return 200}resolveIcon(e,t){return void 0!==t?t:this.gridIcons[e]}setIcon(e,t){"string"==typeof t?e.innerHTML=t:t instanceof HTMLElement&&(e.innerHTML="",e.appendChild(t.cloneNode(!0)))}warn(e){var t,r;console.warn(`${t=this.gridElement.id,r=this.name,`[tbw-grid${t?`#${t}`:""}${r?`:${r}`:""}]`} ${e}`)}}const o="__tbw_row_drag";class n extends i{name="reorderRows";aliases=["rowReorder"];styles='@layer tbw-plugins{[data-field=__tbw_row_drag]{display:flex;align-items:center;justify-content:center}.dg-row-drag-handle{display:flex;align-items:center;justify-content:center;min-width:1em;min-height:1em;cursor:grab;-webkit-user-select:none;user-select:none;color:var(--tbw-row-reorder-handle-color, var(--tbw-color-fg-muted));transition:color var(--tbw-transition-duration, .12s) var(--tbw-transition-ease, ease);font-size:var(--tbw-font-size, 1em);letter-spacing:-2px}.dg-row-drag-handle:hover{color:var(--tbw-row-reorder-handle-hover, var(--tbw-color-fg))}.dg-row-drag-handle:active{cursor:grabbing}.data-grid-row.dragging{opacity:.6}.data-grid-row.drop-target{position:relative}.data-grid-row.drop-target.drop-before:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.drop-target.drop-after:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--tbw-row-reorder-indicator, var(--tbw-color-accent));z-index:10}.data-grid-row.keyboard-moving{background-color:var(--tbw-row-reorder-moving-bg, var(--tbw-focus-background));box-shadow:0 0 0 1px var(--tbw-row-reorder-moving-border, var(--tbw-color-accent)) inset}.data-grid-row.flip-animating{transition:transform var(--tbw-animation-duration, .2s) ease-out;will-change:transform;z-index:1}}';get defaultConfig(){return{enableKeyboard:!0,showDragHandle:!0,dragHandlePosition:"left",dragHandleWidth:40,debounceMs:150,animation:"flip"}}get animationType(){return!!this.isAnimationEnabled&&(void 0!==this.config.animation?this.config.animation:"flip")}isDragging=!1;draggedRowIndex=null;dropRowIndex=null;pendingMove=null;debounceTimer=null;lastFocusCol=0;get#t(){return this.grid}attach(e){super.attach(e),this.setupDelegatedDragListeners()}detach(){this.clearDebounceTimer(),this.isDragging=!1,this.draggedRowIndex=null,this.dropRowIndex=null,this.pendingMove=null}processColumns(e){if(!this.config.showDragHandle)return[...e];const t={field:o,header:"",width:this.config.dragHandleWidth??40,resizable:!1,sortable:!1,filterable:!1,meta:{lockPosition:!0,suppressMovable:!0,utility:!0},viewRenderer:()=>{const e=document.createElement("div");return e.className="dg-row-drag-handle",e.setAttribute("aria-label","Drag to reorder"),e.setAttribute("role","button"),e.setAttribute("tabindex","-1"),e.draggable=!0,this.setIcon(e,this.resolveIcon("dragHandle")),e}};return"right"===this.config.dragHandlePosition?[...e,t]:[t,...e]}afterRender(){}onKeyDown(e){if(!this.config.enableKeyboard)return;if(!e.ctrlKey||"ArrowUp"!==e.key&&"ArrowDown"!==e.key)return;const t=this.#t,r=t._focusRow,i=t._rows??this.sourceRows;if(r<0||r>=i.length)return;const o="ArrowUp"===e.key?"up":"down",n="up"===o?r-1:r+1;if(n<0||n>=i.length)return;const s=i[r];return!this.config.canMove||this.config.canMove(s,r,n,o)?(this.handleKeyboardMove(s,r,n,o,t._focusCol),e.preventDefault(),e.stopPropagation(),!0):void 0}onCellClick(){this.flushPendingMove()}moveRow(e,t){const r=[...this.sourceRows];if(e<0||e>=r.length)return;if(t<0||t>=r.length)return;if(e===t)return;const i=t<e?"up":"down",o=r[e];this.config.canMove&&!this.config.canMove(o,e,t,i)||this.executeMove(o,e,t,"keyboard")}canMoveRow(e,t){const r=this.sourceRows;if(e<0||e>=r.length)return!1;if(t<0||t>=r.length)return!1;if(e===t)return!1;if(!this.config.canMove)return!0;const i=t<e?"up":"down";return this.config.canMove(r[e],e,t,i)}setupDelegatedDragListeners(){const e=this.gridElement;if(!e)return;const t=this.disconnectSignal;e.addEventListener("dragstart",e=>{const t=e,r=t.target.closest(".dg-row-drag-handle");if(!r)return;const i=r.closest(".data-grid-row");if(!i)return;const o=this.getRowIndex(i);o<0||(this.isDragging=!0,this.draggedRowIndex=o,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",String(o))),i.classList.add("dragging"))},{signal:t}),e.addEventListener("dragend",()=>{this.isDragging=!1,this.draggedRowIndex=null,this.dropRowIndex=null,this.clearDragClasses()},{signal:t}),e.addEventListener("dragover",e=>{const t=e;if(!this.isDragging||null===this.draggedRowIndex)return;const r=t.target.closest(".data-grid-row");if(!r)return;t.preventDefault();const i=this.getRowIndex(r);if(i<0||i===this.draggedRowIndex)return;const o=r.getBoundingClientRect(),n=o.top+o.height/2,s=t.clientY<n;this.dropRowIndex=s?i:i+1,r.classList.add("drop-target"),r.classList.toggle("drop-before",s),r.classList.toggle("drop-after",!s)},{signal:t}),e.addEventListener("dragleave",e=>{const t=e.target.closest(".data-grid-row");t&&t.classList.remove("drop-target","drop-before","drop-after")},{signal:t}),e.addEventListener("drop",e=>{e.preventDefault();const t=this.draggedRowIndex;let r=this.dropRowIndex;if(this.isDragging&&null!==t&&null!==r&&(r>t&&r--,t!==r)){const e=this.sourceRows[t],i=r<t?"up":"down";this.config.canMove&&!this.config.canMove(e,t,r,i)||this.executeMove(e,t,r,"drag")}},{signal:t})}handleKeyboardMove(t,r,i,o,n){this.pendingMove?this.pendingMove.currentIndex=i:this.pendingMove={originalIndex:r,currentIndex:i,row:t},this.lastFocusCol=n;const s=this.#t,a=[...s._rows??this.sourceRows],[l]=a.splice(r,1);a.splice(i,0,l),s._rows=a,s._focusRow=i,s._focusCol=n,s.refreshVirtualWindow(!0),e(s),this.clearDebounceTimer(),this.debounceTimer=setTimeout(()=>{this.flushPendingMove()},this.config.debounceMs??300)}flushPendingMove(){if(this.clearDebounceTimer(),!this.pendingMove)return;const{originalIndex:t,currentIndex:r,row:i}=this.pendingMove;if(this.pendingMove=null,t===r)return;const o={row:i,fromIndex:t,toIndex:r,rows:[...this.sourceRows],source:"keyboard"};if(this.emitCancelable("row-move",o)){const i=[...this.sourceRows],[o]=i.splice(r,1);i.splice(t,0,o);const n=this.#t;n._rows=i,n._focusRow=t,n._focusCol=this.lastFocusCol,n.refreshVirtualWindow(!0),e(n)}}executeMove(e,t,r,i){const o=[...this.sourceRows],[n]=o.splice(t,1);o.splice(r,0,n);const s={row:e,fromIndex:t,toIndex:r,rows:o,source:i};if(!this.emitCancelable("row-move",s))if("flip"===this.animationType&&this.gridElement){const e=this.captureRowPositions();this.grid.rows=o,requestAnimationFrame(()=>{this.gridElement.offsetHeight,this.animateFLIP(e,t,r)})}else this.grid.rows=o}captureRowPositions(){const e=/* @__PURE__ */new Map;return this.gridElement?.querySelectorAll(".data-grid-row").forEach(t=>{const r=this.getRowIndex(t);r>=0&&e.set(r,t.getBoundingClientRect().top)}),e}animateFLIP(e,t,r){const i=this.gridElement;if(!i||0===e.size)return;const o=Math.min(t,r),n=Math.max(t,r),s=[];if(i.querySelectorAll(".data-grid-row").forEach(i=>{const a=i,l=this.getRowIndex(a);if(l<0||l<o||l>n)return;let d;d=l===r?t:t<r?l+1:l-1;const c=e.get(d);if(void 0===c)return;const g=c-a.getBoundingClientRect().top;Math.abs(g)>1&&s.push({el:a,deltaY:g})}),0===s.length)return;s.forEach(({el:e,deltaY:t})=>{e.style.transform=`translateY(${t}px)`}),i.offsetHeight;const a=this.animationDuration;requestAnimationFrame(()=>{s.forEach(({el:e})=>{e.classList.add("flip-animating"),e.style.transform=""}),setTimeout(()=>{s.forEach(({el:e})=>{e.style.transform="",e.classList.remove("flip-animating")})},a+50)})}getRowIndex(e){const t=e.querySelector(".cell[data-row]");return t?parseInt(t.getAttribute("data-row")??"-1",10):-1}clearDragClasses(){this.gridElement?.querySelectorAll(".data-grid-row").forEach(e=>{e.classList.remove("dragging","drop-target","drop-before","drop-after")})}clearDebounceTimer(){this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null)}}export{o as ROW_DRAG_HANDLE_FIELD,n as RowReorderPlugin};
 //# sourceMappingURL=index.js.map