@toolbox-web/grid 1.24.1 → 1.24.2

package/umd/plugins/reorder-columns.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"reorder-columns.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/reorder-columns/column-drag.ts","../../../../../libs/grid/src/lib/plugins/reorder-columns/ReorderPlugin.ts"],"sourcesContent":["/**\n * Column Reordering Core Logic\n *\n * Pure functions for column drag and reordering operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\n\n/**\n * Check if a column can be moved based on its own metadata.\n * This checks column-level properties like lockPosition and suppressMovable.\n *\n * Note: For full movability checks including plugin constraints (e.g., pinned columns),\n * use `grid.query<boolean>('canMoveColumn', column)` which queries all plugins that\n * declare the 'canMoveColumn' query in their manifest.\n *\n * @param column - The column configuration to check\n * @returns True if the column can be moved based on its metadata\n */\nexport function canMoveColumn<TRow = unknown>(column: ColumnConfig<TRow>): boolean {\n  // Check for lockPosition or suppressMovable properties in the column config\n  const meta = column.meta ?? {};\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\n}\n\n/**\n * Move a column from one position to another in the order array.\n *\n * @param columns - Array of field names in current order\n * @param fromIndex - The current index of the column to move\n * @param toIndex - The target index to move the column to\n * @returns New array with updated order\n */\nexport function moveColumn(columns: string[], fromIndex: number, toIndex: number): string[] {\n  if (fromIndex === toIndex) return columns;\n  if (fromIndex < 0 || fromIndex >= columns.length) return columns;\n  if (toIndex < 0 || toIndex > columns.length) return columns;\n\n  const result = [...columns];\n  const [removed] = result.splice(fromIndex, 1);\n  result.splice(toIndex, 0, removed);\n  return result;\n}\n\n/**\n * Calculate the drop index based on the current drag position.\n *\n * @param dragX - The current X position of the drag\n * @param headerRect - The bounding rect of the header container\n * @param columnWidths - Array of column widths in order\n * @returns The index where the column should be dropped\n */\nexport function getDropIndex(dragX: number, headerRect: DOMRect, columnWidths: number[]): number {\n  let x = headerRect.left;\n\n  for (let i = 0; i < columnWidths.length; i++) {\n    const mid = x + columnWidths[i] / 2;\n    if (dragX < mid) return i;\n    x += columnWidths[i];\n  }\n\n  return columnWidths.length;\n}\n\n/**\n * Reorder columns according to a specified order.\n * Columns not in the order array are appended at the end.\n *\n * @param columns - Array of column configurations\n * @param order - Array of field names specifying the desired order\n * @returns New array of columns in the specified order\n */\nexport function reorderColumns<TRow = unknown>(columns: ColumnConfig<TRow>[], order: string[]): ColumnConfig<TRow>[] {\n  const columnMap = new Map<string, ColumnConfig<TRow>>(columns.map((c) => [c.field as string, c]));\n  const reordered: ColumnConfig<TRow>[] = [];\n\n  // Add columns in specified order\n  for (const field of order) {\n    const col = columnMap.get(field);\n    if (col) {\n      reordered.push(col);\n      columnMap.delete(field);\n    }\n  }\n\n  // Add any remaining columns not in order\n  for (const col of columnMap.values()) {\n    reordered.push(col);\n  }\n\n  return reordered;\n}\n","/**\n * Column Reordering Plugin (Class-based)\n *\n * Provides drag-and-drop column reordering functionality for tbw-grid.\n * Supports keyboard and mouse interactions with visual feedback.\n * Uses FLIP animation technique for smooth column transitions.\n *\n * Animation respects grid-level animation.mode setting but style is plugin-configured.\n */\n\nimport { ensureCellVisible } from '../../core/internal/keyboard';\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\nimport type { ColumnConfig, InternalGrid } from '../../core/types';\nimport { canMoveColumn, moveColumn } from './column-drag';\nimport styles from './reorder.css?inline';\nimport type { ColumnMoveDetail, ReorderConfig } from './types';\n\n/**\n * Column Reorder Plugin for tbw-grid\n *\n * Lets users rearrange columns by dragging and dropping column headers. Supports smooth\n * FLIP animations, fade transitions, or instant reordering. Animation respects the\n * grid-level `animation.mode` setting.\n *\n * ## Installation\n *\n * ```ts\n * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `animation` | `false \\| 'flip' \\| 'fade'` | `'flip'` | Animation type for column moves |\n * | `animationDuration` | `number` | `200` | Animation duration in ms |\n *\n * ## Keyboard Shortcuts\n *\n * | Key | Action |\n * |-----|--------|\n * | `Alt + ←` | Move focused column left |\n * | `Alt + →` | Move focused column right |\n *\n * ## Events\n *\n * | Event | Detail | Cancelable | Description |\n * |-------|--------|------------|-------------|\n * | `column-move` | `{ field, fromIndex, toIndex, columnOrder }` | Yes | Fired when a column move is attempted |\n *\n * @example Basic Drag-and-Drop Reordering\n * ```ts\n * import '@toolbox-web/grid';\n * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';\n *\n * const grid = document.querySelector('tbw-grid');\n * grid.gridConfig = {\n *   columns: [\n *     { field: 'id', header: 'ID' },\n *     { field: 'name', header: 'Name' },\n *     { field: 'email', header: 'Email' },\n *   ],\n *   plugins: [new ReorderPlugin({ animation: 'flip', animationDuration: 200 })],\n * };\n *\n * // Persist column order\n * grid.addEventListener('column-move', (e) => {\n *   localStorage.setItem('columnOrder', JSON.stringify(e.detail.columnOrder));\n * });\n * ```\n *\n * @example Prevent Moves That Break Group Boundaries\n * ```ts\n * grid.addEventListener('column-move', (e) => {\n *   if (!isValidMoveWithinGroup(e.detail.field, e.detail.fromIndex, e.detail.toIndex)) {\n *     e.preventDefault(); // Column snaps back to original position\n *   }\n * });\n * ```\n *\n * @see {@link ReorderConfig} for all configuration options\n * @see {@link ColumnMoveDetail} for the event detail structure\n * @see {@link GroupingColumnsPlugin} for column group integration\n *\n * @internal Extends BaseGridPlugin\n */\nexport class ReorderPlugin extends BaseGridPlugin<ReorderConfig> {\n  /** @internal */\n  readonly name = 'reorderColumns';\n  /** @internal */\n  override readonly aliases = ['reorder'] as const;\n  /** @internal */\n  override readonly styles = styles;\n\n  /** @internal */\n  protected override get defaultConfig(): Partial<ReorderConfig> {\n    return {\n      animation: 'flip', // Plugin's own default\n    };\n  }\n\n  /**\n   * Resolve animation type from plugin config.\n   * Uses base class isAnimationEnabled to respect grid-level settings.\n   */\n  private get animationType(): false | 'flip' | 'fade' {\n    // Check if animations are globally disabled\n    if (!this.isAnimationEnabled) return false;\n\n    // Plugin config (with default from defaultConfig)\n    if (this.config.animation !== undefined) return this.config.animation;\n\n    return 'flip'; // Plugin default\n  }\n\n  /**\n   * Get animation duration, allowing plugin config override.\n   * Uses base class animationDuration for default.\n   */\n  protected override get animationDuration(): number {\n    // Plugin config override\n    if (this.config.animationDuration !== undefined) {\n      return this.config.animationDuration;\n    }\n    return super.animationDuration;\n  }\n\n  // #region Internal State\n  private isDragging = false;\n  private draggedField: string | null = null;\n  private draggedIndex: number | null = null;\n  private dropIndex: number | null = null;\n\n  /**\n   * Check if a column can be moved, considering both column config and plugin queries.\n   */\n  private canMoveColumnWithPlugins(column: ColumnConfig | undefined): boolean {\n    if (!column || !canMoveColumn(column)) return false;\n    // Query plugins that respond to 'canMoveColumn' (e.g., PinnedColumnsPlugin)\n    const responses = this.grid.query<boolean>('canMoveColumn', column);\n    return !responses.includes(false);\n  }\n\n  /**\n   * Clear all drag-related classes from header cells.\n   */\n  private clearDragClasses(): void {\n    this.gridElement?.querySelectorAll('.header-row > .cell').forEach((h) => {\n      h.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\n    });\n  }\n  // #endregion\n\n  // #region Lifecycle\n\n  /** @internal */\n  override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\n    super.attach(grid);\n\n    // Listen for reorder requests from other plugins (e.g., VisibilityPlugin)\n    // Uses disconnectSignal for automatic cleanup - no need for manual removeEventListener\n    (grid as unknown as HTMLElement).addEventListener(\n      'column-reorder-request',\n      (e: Event) => {\n        const detail = (e as CustomEvent).detail;\n        if (detail?.field && typeof detail.toIndex === 'number') {\n          this.moveColumn(detail.field, detail.toIndex);\n        }\n      },\n      { signal: this.disconnectSignal },\n    );\n  }\n\n  /** @internal */\n  override detach(): void {\n    this.isDragging = false;\n    this.draggedField = null;\n    this.draggedIndex = null;\n    this.dropIndex = null;\n  }\n  // #endregion\n\n  // #region Hooks\n\n  /** @internal */\n  override afterRender(): void {\n    const gridEl = this.gridElement;\n    if (!gridEl) return;\n\n    const headers = gridEl.querySelectorAll('.header-row > .cell');\n\n    headers.forEach((header) => {\n      const headerEl = header as HTMLElement;\n      const field = headerEl.getAttribute('data-field');\n      if (!field) return;\n\n      const column = this.columns.find((c) => c.field === field);\n      if (!this.canMoveColumnWithPlugins(column)) {\n        headerEl.draggable = false;\n        return;\n      }\n\n      headerEl.draggable = true;\n\n      // Remove existing listeners to prevent duplicates\n      if (headerEl.getAttribute('data-dragstart-bound')) return;\n      headerEl.setAttribute('data-dragstart-bound', 'true');\n\n      headerEl.addEventListener('dragstart', (e: DragEvent) => {\n        const currentOrder = this.getColumnOrder();\n        const orderIndex = currentOrder.indexOf(field);\n        this.isDragging = true;\n        this.draggedField = field;\n        this.draggedIndex = orderIndex;\n\n        if (e.dataTransfer) {\n          e.dataTransfer.effectAllowed = 'move';\n          e.dataTransfer.setData('text/plain', field);\n        }\n\n        headerEl.classList.add('dragging');\n      });\n\n      headerEl.addEventListener('dragend', () => {\n        this.isDragging = false;\n        this.draggedField = null;\n        this.draggedIndex = null;\n        this.dropIndex = null;\n        this.clearDragClasses();\n      });\n\n      headerEl.addEventListener('dragover', (e: DragEvent) => {\n        e.preventDefault();\n        if (!this.isDragging || this.draggedField === field) return;\n\n        const rect = headerEl.getBoundingClientRect();\n        const midX = rect.left + rect.width / 2;\n\n        const currentOrder = this.getColumnOrder();\n        const orderIndex = currentOrder.indexOf(field);\n        this.dropIndex = e.clientX < midX ? orderIndex : orderIndex + 1;\n\n        headerEl.classList.add('drop-target');\n        headerEl.classList.toggle('drop-before', e.clientX < midX);\n        headerEl.classList.toggle('drop-after', e.clientX >= midX);\n      });\n\n      headerEl.addEventListener('dragleave', () => {\n        headerEl.classList.remove('drop-target', 'drop-before', 'drop-after');\n      });\n\n      headerEl.addEventListener('drop', (e: DragEvent) => {\n        e.preventDefault();\n        const draggedField = this.draggedField;\n        const draggedIndex = this.draggedIndex;\n        const dropIndex = this.dropIndex;\n\n        if (!this.isDragging || draggedField === null || draggedIndex === null || dropIndex === null) {\n          return;\n        }\n\n        const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\n        const currentOrder = this.getColumnOrder();\n        const newOrder = moveColumn(currentOrder, draggedIndex, effectiveToIndex);\n\n        const detail: ColumnMoveDetail = {\n          field: draggedField,\n          fromIndex: draggedIndex,\n          toIndex: effectiveToIndex,\n          columnOrder: newOrder,\n        };\n\n        // Emit cancelable event first - only update if not cancelled\n        const cancelled = this.emitCancelable('column-move', detail);\n        if (!cancelled) {\n          // Update the grid's column order (with optional view transition)\n          this.updateColumnOrder(newOrder);\n        }\n      });\n    });\n  }\n\n  /**\n   * Handle Alt+Arrow keyboard shortcuts for column reordering.\n   * @internal\n   */\n  override onKeyDown(event: KeyboardEvent): boolean | void {\n    if (!event.altKey || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) {\n      return;\n    }\n\n    const grid = this.grid as unknown as { _focusCol: number; _visibleColumns: ColumnConfig[] };\n    const focusCol = grid._focusCol;\n    const columns = grid._visibleColumns;\n\n    if (focusCol < 0 || focusCol >= columns.length) return;\n\n    const column = columns[focusCol];\n    if (!this.canMoveColumnWithPlugins(column)) return;\n\n    const currentOrder = this.getColumnOrder();\n    const fromIndex = currentOrder.indexOf(column.field);\n    if (fromIndex === -1) return;\n\n    const toIndex = event.key === 'ArrowLeft' ? fromIndex - 1 : fromIndex + 1;\n\n    // Check bounds\n    if (toIndex < 0 || toIndex >= currentOrder.length) return;\n\n    // Check if target position is allowed (e.g., not into pinned area)\n    const targetColumn = columns.find((c) => c.field === currentOrder[toIndex]);\n    if (!this.canMoveColumnWithPlugins(targetColumn)) return;\n\n    this.moveColumn(column.field, toIndex);\n\n    // Update focus to follow the moved column and refresh visual focus state\n    grid._focusCol = toIndex;\n    ensureCellVisible(this.grid as unknown as InternalGrid);\n\n    event.preventDefault();\n    event.stopPropagation();\n    return true;\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Get the current column order from the grid.\n   * @returns Array of field names in display order\n   */\n  getColumnOrder(): string[] {\n    return this.grid.getColumnOrder();\n  }\n\n  /**\n   * Move a column to a new position.\n   * @param field - The field name of the column to move\n   * @param toIndex - The target index\n   */\n  moveColumn(field: string, toIndex: number): void {\n    const currentOrder = this.getColumnOrder();\n    const fromIndex = currentOrder.indexOf(field);\n    if (fromIndex === -1) return;\n\n    const newOrder = moveColumn(currentOrder, fromIndex, toIndex);\n\n    // Emit cancelable event first - only update if not cancelled\n    const cancelled = this.emitCancelable<ColumnMoveDetail>('column-move', {\n      field,\n      fromIndex,\n      toIndex,\n      columnOrder: newOrder,\n    });\n    if (!cancelled) {\n      // Update with view transition\n      this.updateColumnOrder(newOrder);\n    }\n  }\n\n  /**\n   * Set a specific column order.\n   * @param order - Array of field names in desired order\n   */\n  setColumnOrder(order: string[]): void {\n    this.updateColumnOrder(order);\n  }\n\n  /**\n   * Reset column order to the original configuration order.\n   */\n  resetColumnOrder(): void {\n    const originalOrder = this.columns.map((c) => c.field);\n    this.updateColumnOrder(originalOrder);\n  }\n  // #endregion\n\n  // #region View Transition\n\n  /**\n   * Capture header cell positions before reorder.\n   */\n  private captureHeaderPositions(): Map<string, number> {\n    const positions = new Map<string, number>();\n    this.gridElement?.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (field) positions.set(field, cell.getBoundingClientRect().left);\n    });\n    return positions;\n  }\n\n  /**\n   * Apply FLIP animation for column reorder.\n   * Uses CSS transitions - JS sets initial transform and toggles class.\n   * @param oldPositions - Header positions captured before DOM change\n   */\n  private animateFLIP(oldPositions: Map<string, number>): void {\n    const gridEl = this.gridElement;\n    if (!gridEl || oldPositions.size === 0) return;\n\n    // Compute deltas from header cells (stable reference points)\n    const deltas = new Map<string, number>();\n    gridEl.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (!field) return;\n      const oldLeft = oldPositions.get(field);\n      if (oldLeft === undefined) return;\n      const deltaX = oldLeft - cell.getBoundingClientRect().left;\n      if (Math.abs(deltaX) > 1) deltas.set(field, deltaX);\n    });\n\n    if (deltas.size === 0) return;\n\n    // Set initial transform (First → Last position offset)\n    const cells: HTMLElement[] = [];\n    gridEl.querySelectorAll('.cell[data-field]').forEach((cell) => {\n      const deltaX = deltas.get(cell.getAttribute('data-field') ?? '');\n      if (deltaX !== undefined) {\n        const el = cell as HTMLElement;\n        el.style.transform = `translateX(${deltaX}px)`;\n        cells.push(el);\n      }\n    });\n\n    if (cells.length === 0) return;\n\n    // Force reflow then animate to final position via CSS transition\n    void this.gridElement.offsetHeight;\n\n    const duration = this.animationDuration;\n\n    requestAnimationFrame(() => {\n      cells.forEach((el) => {\n        el.classList.add('flip-animating');\n        el.style.transform = '';\n      });\n\n      // Cleanup after animation\n      setTimeout(() => {\n        cells.forEach((el) => {\n          el.style.transform = '';\n          el.classList.remove('flip-animating');\n        });\n      }, duration + 50);\n    });\n  }\n\n  /**\n   * Apply crossfade animation for moved columns.\n   * Uses CSS keyframes - JS just toggles classes.\n   */\n  private animateFade(applyChange: () => void): void {\n    const gridEl = this.gridElement;\n    if (!gridEl) {\n      applyChange();\n      return;\n    }\n\n    // Capture old positions to detect which columns moved\n    const oldPositions = this.captureHeaderPositions();\n\n    // Apply the change first\n    applyChange();\n\n    // Find which columns changed position\n    const movedFields = new Set<string>();\n    gridEl.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (!field) return;\n      const oldLeft = oldPositions.get(field);\n      if (oldLeft === undefined) return;\n      const newLeft = cell.getBoundingClientRect().left;\n      if (Math.abs(oldLeft - newLeft) > 1) {\n        movedFields.add(field);\n      }\n    });\n\n    if (movedFields.size === 0) return;\n\n    // Add animation class to moved columns (headers + body cells)\n    const cells: HTMLElement[] = [];\n    gridEl.querySelectorAll('.cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (field && movedFields.has(field)) {\n        const el = cell as HTMLElement;\n        el.classList.add('fade-animating');\n        cells.push(el);\n      }\n    });\n\n    if (cells.length === 0) return;\n\n    // Remove class after animation completes\n    const duration = this.animationDuration;\n    setTimeout(() => {\n      cells.forEach((el) => el.classList.remove('fade-animating'));\n    }, duration + 50);\n  }\n\n  /**\n   * Update column order with configured animation.\n   */\n  private updateColumnOrder(newOrder: string[]): void {\n    const animation = this.animationType;\n\n    if (animation === 'flip' && this.gridElement) {\n      const oldPositions = this.captureHeaderPositions();\n      this.grid.setColumnOrder(newOrder);\n      // Wait for the scheduler to process the virtual window update (RAF)\n      // before running FLIP animation on the new cells\n      requestAnimationFrame(() => {\n        void this.gridElement.offsetHeight;\n        this.animateFLIP(oldPositions);\n      });\n    } else if (animation === 'fade') {\n      this.animateFade(() => this.grid.setColumnOrder(newOrder));\n    } else {\n      this.grid.setColumnOrder(newOrder);\n    }\n\n    this.grid.requestStateChange?.();\n  }\n  // #endregion\n}\n"],"names":["moveColumn","columns","fromIndex","toIndex","length","result","removed","splice","ReorderPlugin","BaseGridPlugin","name","aliases","styles","defaultConfig","animation","animationType","this","isAnimationEnabled","config","animationDuration","super","isDragging","draggedField","draggedIndex","dropIndex","canMoveColumnWithPlugins","column","meta","lockPosition","suppressMovable","canMoveColumn","grid","query","includes","clearDragClasses","gridElement","querySelectorAll","forEach","h","classList","remove","attach","addEventListener","e","detail","field","signal","disconnectSignal","detach","afterRender","gridEl","header","headerEl","getAttribute","find","c","draggable","setAttribute","orderIndex","getColumnOrder","indexOf","dataTransfer","effectAllowed","setData","add","preventDefault","rect","getBoundingClientRect","midX","left","width","clientX","toggle","effectiveToIndex","newOrder","columnOrder","emitCancelable","updateColumnOrder","onKeyDown","event","altKey","key","focusCol","_focusCol","_visibleColumns","currentOrder","targetColumn","ensureCellVisible","stopPropagation","setColumnOrder","order","resetColumnOrder","originalOrder","map","captureHeaderPositions","positions","Map","cell","set","animateFLIP","oldPositions","size","deltas","oldLeft","get","deltaX","Math","abs","cells","el","style","transform","push","offsetHeight","duration","requestAnimationFrame","setTimeout","animateFade","applyChange","movedFields","Set","newLeft","has","requestStateChange"],"mappings":"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"}
+{"version":3,"file":"reorder-columns.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/reorder-columns/column-drag.ts","../../../../../libs/grid/src/lib/plugins/reorder-columns/ReorderPlugin.ts"],"sourcesContent":["/**\n * Column Reordering Core Logic\n *\n * Pure functions for column drag and reordering operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\n\n/**\n * Check if a column can be moved based on its own metadata.\n * This checks column-level properties like lockPosition and suppressMovable.\n *\n * Note: For full movability checks including plugin constraints (e.g., pinned columns),\n * use `grid.query<boolean>('canMoveColumn', column)` which queries all plugins that\n * declare the 'canMoveColumn' query in their manifest.\n *\n * @param column - The column configuration to check\n * @returns True if the column can be moved based on its metadata\n */\nexport function canMoveColumn<TRow = unknown>(column: ColumnConfig<TRow>): boolean {\n  // Check for lockPosition or suppressMovable properties in the column config\n  const meta = column.meta ?? {};\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\n}\n\n/**\n * Move a column from one position to another in the order array.\n *\n * @param columns - Array of field names in current order\n * @param fromIndex - The current index of the column to move\n * @param toIndex - The target index to move the column to\n * @returns New array with updated order\n */\nexport function moveColumn(columns: string[], fromIndex: number, toIndex: number): string[] {\n  if (fromIndex === toIndex) return columns;\n  if (fromIndex < 0 || fromIndex >= columns.length) return columns;\n  if (toIndex < 0 || toIndex > columns.length) return columns;\n\n  const result = [...columns];\n  const [removed] = result.splice(fromIndex, 1);\n  result.splice(toIndex, 0, removed);\n  return result;\n}\n\n/**\n * Calculate the drop index based on the current drag position.\n *\n * @param dragX - The current X position of the drag\n * @param headerRect - The bounding rect of the header container\n * @param columnWidths - Array of column widths in order\n * @returns The index where the column should be dropped\n */\nexport function getDropIndex(dragX: number, headerRect: DOMRect, columnWidths: number[]): number {\n  let x = headerRect.left;\n\n  for (let i = 0; i < columnWidths.length; i++) {\n    const mid = x + columnWidths[i] / 2;\n    if (dragX < mid) return i;\n    x += columnWidths[i];\n  }\n\n  return columnWidths.length;\n}\n\n/**\n * Reorder columns according to a specified order.\n * Columns not in the order array are appended at the end.\n *\n * @param columns - Array of column configurations\n * @param order - Array of field names specifying the desired order\n * @returns New array of columns in the specified order\n */\nexport function reorderColumns<TRow = unknown>(columns: ColumnConfig<TRow>[], order: string[]): ColumnConfig<TRow>[] {\n  const columnMap = new Map<string, ColumnConfig<TRow>>(columns.map((c) => [c.field as string, c]));\n  const reordered: ColumnConfig<TRow>[] = [];\n\n  // Add columns in specified order\n  for (const field of order) {\n    const col = columnMap.get(field);\n    if (col) {\n      reordered.push(col);\n      columnMap.delete(field);\n    }\n  }\n\n  // Add any remaining columns not in order\n  for (const col of columnMap.values()) {\n    reordered.push(col);\n  }\n\n  return reordered;\n}\n","/**\n * Column Reordering Plugin (Class-based)\n *\n * Provides drag-and-drop column reordering functionality for tbw-grid.\n * Supports keyboard and mouse interactions with visual feedback.\n * Uses FLIP animation technique for smooth column transitions.\n *\n * Animation respects grid-level animation.mode setting but style is plugin-configured.\n */\n\nimport { ensureCellVisible } from '../../core/internal/keyboard';\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\nimport type { ColumnConfig, InternalGrid } from '../../core/types';\nimport { canMoveColumn, moveColumn } from './column-drag';\nimport styles from './reorder.css?inline';\nimport type { ColumnMoveDetail, ReorderConfig } from './types';\n\n/**\n * Column Reorder Plugin for tbw-grid\n *\n * Lets users rearrange columns by dragging and dropping column headers. Supports smooth\n * FLIP animations, fade transitions, or instant reordering. Animation respects the\n * grid-level `animation.mode` setting.\n *\n * ## Installation\n *\n * ```ts\n * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `animation` | `false \\| 'flip' \\| 'fade'` | `'flip'` | Animation type for column moves |\n * | `animationDuration` | `number` | `200` | Animation duration in ms |\n *\n * ## Keyboard Shortcuts\n *\n * | Key | Action |\n * |-----|--------|\n * | `Alt + ←` | Move focused column left |\n * | `Alt + →` | Move focused column right |\n *\n * ## Events\n *\n * | Event | Detail | Cancelable | Description |\n * |-------|--------|------------|-------------|\n * | `column-move` | `{ field, fromIndex, toIndex, columnOrder }` | Yes | Fired when a column move is attempted |\n *\n * @example Basic Drag-and-Drop Reordering\n * ```ts\n * import '@toolbox-web/grid';\n * import { ReorderPlugin } from '@toolbox-web/grid/plugins/reorder-columns';\n *\n * const grid = document.querySelector('tbw-grid');\n * grid.gridConfig = {\n *   columns: [\n *     { field: 'id', header: 'ID' },\n *     { field: 'name', header: 'Name' },\n *     { field: 'email', header: 'Email' },\n *   ],\n *   plugins: [new ReorderPlugin({ animation: 'flip', animationDuration: 200 })],\n * };\n *\n * // Persist column order\n * grid.addEventListener('column-move', (e) => {\n *   localStorage.setItem('columnOrder', JSON.stringify(e.detail.columnOrder));\n * });\n * ```\n *\n * @example Prevent Moves That Break Group Boundaries\n * ```ts\n * grid.addEventListener('column-move', (e) => {\n *   if (!isValidMoveWithinGroup(e.detail.field, e.detail.fromIndex, e.detail.toIndex)) {\n *     e.preventDefault(); // Column snaps back to original position\n *   }\n * });\n * ```\n *\n * @see {@link ReorderConfig} for all configuration options\n * @see {@link ColumnMoveDetail} for the event detail structure\n * @see {@link GroupingColumnsPlugin} for column group integration\n *\n * @internal Extends BaseGridPlugin\n */\nexport class ReorderPlugin extends BaseGridPlugin<ReorderConfig> {\n  /** @internal */\n  readonly name = 'reorderColumns';\n  /** @internal */\n  override readonly aliases = ['reorder'] as const;\n  /** @internal */\n  override readonly styles = styles;\n\n  /** @internal */\n  protected override get defaultConfig(): Partial<ReorderConfig> {\n    return {\n      animation: 'flip', // Plugin's own default\n    };\n  }\n\n  /**\n   * Resolve animation type from plugin config.\n   * Uses base class isAnimationEnabled to respect grid-level settings.\n   */\n  private get animationType(): false | 'flip' | 'fade' {\n    // Check if animations are globally disabled\n    if (!this.isAnimationEnabled) return false;\n\n    // Plugin config (with default from defaultConfig)\n    if (this.config.animation !== undefined) return this.config.animation;\n\n    return 'flip'; // Plugin default\n  }\n\n  /**\n   * Get animation duration, allowing plugin config override.\n   * Uses base class animationDuration for default.\n   */\n  protected override get animationDuration(): number {\n    // Plugin config override\n    if (this.config.animationDuration !== undefined) {\n      return this.config.animationDuration;\n    }\n    return super.animationDuration;\n  }\n\n  // #region Internal State\n  private isDragging = false;\n  private draggedField: string | null = null;\n  private draggedIndex: number | null = null;\n  private dropIndex: number | null = null;\n\n  /**\n   * Check if a column can be moved, considering both column config and plugin queries.\n   */\n  private canMoveColumnWithPlugins(column: ColumnConfig | undefined): boolean {\n    if (!column || !canMoveColumn(column)) return false;\n    // Query plugins that respond to 'canMoveColumn' (e.g., PinnedColumnsPlugin)\n    const responses = this.grid.query<boolean>('canMoveColumn', column);\n    return !responses.includes(false);\n  }\n\n  /**\n   * Clear all drag-related classes from header cells.\n   */\n  private clearDragClasses(): void {\n    this.gridElement?.querySelectorAll('.header-row > .cell').forEach((h) => {\n      h.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\n    });\n  }\n  // #endregion\n\n  // #region Lifecycle\n\n  /** @internal */\n  override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\n    super.attach(grid);\n\n    // Listen for reorder requests from other plugins (e.g., VisibilityPlugin)\n    // Uses disconnectSignal for automatic cleanup - no need for manual removeEventListener\n    (grid as unknown as HTMLElement).addEventListener(\n      'column-reorder-request',\n      (e: Event) => {\n        const detail = (e as CustomEvent).detail;\n        if (detail?.field && typeof detail.toIndex === 'number') {\n          this.moveColumn(detail.field, detail.toIndex);\n        }\n      },\n      { signal: this.disconnectSignal },\n    );\n  }\n\n  /** @internal */\n  override detach(): void {\n    this.isDragging = false;\n    this.draggedField = null;\n    this.draggedIndex = null;\n    this.dropIndex = null;\n  }\n  // #endregion\n\n  // #region Hooks\n\n  /** @internal */\n  override afterRender(): void {\n    const gridEl = this.gridElement;\n    if (!gridEl) return;\n\n    const headers = gridEl.querySelectorAll('.header-row > .cell');\n\n    headers.forEach((header) => {\n      const headerEl = header as HTMLElement;\n      const field = headerEl.getAttribute('data-field');\n      if (!field) return;\n\n      const column = this.columns.find((c) => c.field === field);\n      if (!this.canMoveColumnWithPlugins(column)) {\n        headerEl.draggable = false;\n        return;\n      }\n\n      headerEl.draggable = true;\n\n      // Remove existing listeners to prevent duplicates\n      if (headerEl.getAttribute('data-dragstart-bound')) return;\n      headerEl.setAttribute('data-dragstart-bound', 'true');\n\n      headerEl.addEventListener('dragstart', (e: DragEvent) => {\n        const currentOrder = this.getColumnOrder();\n        const orderIndex = currentOrder.indexOf(field);\n        this.isDragging = true;\n        this.draggedField = field;\n        this.draggedIndex = orderIndex;\n\n        if (e.dataTransfer) {\n          e.dataTransfer.effectAllowed = 'move';\n          e.dataTransfer.setData('text/plain', field);\n        }\n\n        headerEl.classList.add('dragging');\n      });\n\n      headerEl.addEventListener('dragend', () => {\n        this.isDragging = false;\n        this.draggedField = null;\n        this.draggedIndex = null;\n        this.dropIndex = null;\n        this.clearDragClasses();\n      });\n\n      headerEl.addEventListener('dragover', (e: DragEvent) => {\n        e.preventDefault();\n        if (!this.isDragging || this.draggedField === field) return;\n\n        const rect = headerEl.getBoundingClientRect();\n        const midX = rect.left + rect.width / 2;\n\n        const currentOrder = this.getColumnOrder();\n        const orderIndex = currentOrder.indexOf(field);\n        this.dropIndex = e.clientX < midX ? orderIndex : orderIndex + 1;\n\n        headerEl.classList.add('drop-target');\n        headerEl.classList.toggle('drop-before', e.clientX < midX);\n        headerEl.classList.toggle('drop-after', e.clientX >= midX);\n      });\n\n      headerEl.addEventListener('dragleave', () => {\n        headerEl.classList.remove('drop-target', 'drop-before', 'drop-after');\n      });\n\n      headerEl.addEventListener('drop', (e: DragEvent) => {\n        e.preventDefault();\n        const draggedField = this.draggedField;\n        const draggedIndex = this.draggedIndex;\n        const dropIndex = this.dropIndex;\n\n        if (!this.isDragging || draggedField === null || draggedIndex === null || dropIndex === null) {\n          return;\n        }\n\n        const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\n        const currentOrder = this.getColumnOrder();\n        const newOrder = moveColumn(currentOrder, draggedIndex, effectiveToIndex);\n\n        const detail: ColumnMoveDetail = {\n          field: draggedField,\n          fromIndex: draggedIndex,\n          toIndex: effectiveToIndex,\n          columnOrder: newOrder,\n        };\n\n        // Emit cancelable event first - only update if not cancelled\n        const cancelled = this.emitCancelable('column-move', detail);\n        if (!cancelled) {\n          // Update the grid's column order (with optional view transition)\n          this.updateColumnOrder(newOrder);\n        }\n      });\n    });\n  }\n\n  /**\n   * Handle Alt+Arrow keyboard shortcuts for column reordering.\n   * @internal\n   */\n  override onKeyDown(event: KeyboardEvent): boolean | void {\n    if (!event.altKey || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) {\n      return;\n    }\n\n    const grid = this.grid as unknown as { _focusCol: number; _visibleColumns: ColumnConfig[] };\n    const focusCol = grid._focusCol;\n    const columns = grid._visibleColumns;\n\n    if (focusCol < 0 || focusCol >= columns.length) return;\n\n    const column = columns[focusCol];\n    if (!this.canMoveColumnWithPlugins(column)) return;\n\n    const currentOrder = this.getColumnOrder();\n    const fromIndex = currentOrder.indexOf(column.field);\n    if (fromIndex === -1) return;\n\n    const toIndex = event.key === 'ArrowLeft' ? fromIndex - 1 : fromIndex + 1;\n\n    // Check bounds\n    if (toIndex < 0 || toIndex >= currentOrder.length) return;\n\n    // Check if target position is allowed (e.g., not into pinned area)\n    const targetColumn = columns.find((c) => c.field === currentOrder[toIndex]);\n    if (!this.canMoveColumnWithPlugins(targetColumn)) return;\n\n    this.moveColumn(column.field, toIndex);\n\n    // Update focus to follow the moved column and refresh visual focus state\n    grid._focusCol = toIndex;\n    ensureCellVisible(this.grid as unknown as InternalGrid);\n\n    event.preventDefault();\n    event.stopPropagation();\n    return true;\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Get the current column order from the grid.\n   * @returns Array of field names in display order\n   */\n  getColumnOrder(): string[] {\n    return this.grid.getColumnOrder();\n  }\n\n  /**\n   * Move a column to a new position.\n   * @param field - The field name of the column to move\n   * @param toIndex - The target index\n   */\n  moveColumn(field: string, toIndex: number): void {\n    const currentOrder = this.getColumnOrder();\n    const fromIndex = currentOrder.indexOf(field);\n    if (fromIndex === -1) return;\n\n    const newOrder = moveColumn(currentOrder, fromIndex, toIndex);\n\n    // Emit cancelable event first - only update if not cancelled\n    const cancelled = this.emitCancelable<ColumnMoveDetail>('column-move', {\n      field,\n      fromIndex,\n      toIndex,\n      columnOrder: newOrder,\n    });\n    if (!cancelled) {\n      // Update with view transition\n      this.updateColumnOrder(newOrder);\n    }\n  }\n\n  /**\n   * Set a specific column order.\n   * @param order - Array of field names in desired order\n   */\n  setColumnOrder(order: string[]): void {\n    this.updateColumnOrder(order);\n  }\n\n  /**\n   * Reset column order to the original configuration order.\n   */\n  resetColumnOrder(): void {\n    const originalOrder = this.columns.map((c) => c.field);\n    this.updateColumnOrder(originalOrder);\n  }\n  // #endregion\n\n  // #region View Transition\n\n  /**\n   * Capture header cell positions before reorder.\n   */\n  private captureHeaderPositions(): Map<string, number> {\n    const positions = new Map<string, number>();\n    this.gridElement?.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (field) positions.set(field, cell.getBoundingClientRect().left);\n    });\n    return positions;\n  }\n\n  /**\n   * Apply FLIP animation for column reorder.\n   * Uses CSS transitions - JS sets initial transform and toggles class.\n   * @param oldPositions - Header positions captured before DOM change\n   */\n  private animateFLIP(oldPositions: Map<string, number>): void {\n    const gridEl = this.gridElement;\n    if (!gridEl || oldPositions.size === 0) return;\n\n    // Compute deltas from header cells (one per column, stable reference).\n    // All cells in the same column share the same horizontal offset.\n    const deltas = new Map<string, number>();\n    gridEl.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (!field) return;\n      const oldLeft = oldPositions.get(field);\n      if (oldLeft === undefined) return;\n      const deltaX = oldLeft - cell.getBoundingClientRect().left;\n      if (Math.abs(deltaX) > 1) deltas.set(field, deltaX);\n    });\n\n    if (deltas.size === 0) return;\n\n    // Apply transforms to ALL cells (headers + body).\n    // After forceLayout(), body cells are fully rebuilt in new DOM order\n    // with correct data-field attributes, so header-derived deltas apply correctly.\n    const cells: HTMLElement[] = [];\n    gridEl.querySelectorAll('.cell[data-field]').forEach((cell) => {\n      const deltaX = deltas.get(cell.getAttribute('data-field') ?? '');\n      if (deltaX !== undefined) {\n        const el = cell as HTMLElement;\n        el.style.transform = `translateX(${deltaX}px)`;\n        cells.push(el);\n      }\n    });\n\n    if (cells.length === 0) return;\n\n    // Force reflow then animate to final position via CSS transition\n    void gridEl.offsetHeight;\n\n    const duration = this.animationDuration;\n\n    requestAnimationFrame(() => {\n      cells.forEach((el) => {\n        el.classList.add('flip-animating');\n        el.style.transform = '';\n      });\n\n      // Cleanup after animation\n      setTimeout(() => {\n        cells.forEach((el) => {\n          el.style.transform = '';\n          el.classList.remove('flip-animating');\n        });\n      }, duration + 50);\n    });\n  }\n\n  /**\n   * Apply crossfade animation for moved columns.\n   * Uses CSS keyframes - JS just toggles classes.\n   */\n  private animateFade(applyChange: () => void): void {\n    const gridEl = this.gridElement;\n    if (!gridEl) {\n      applyChange();\n      return;\n    }\n\n    // Capture old positions to detect which columns moved\n    const oldPositions = this.captureHeaderPositions();\n\n    // Apply the change first\n    applyChange();\n\n    // Find which columns changed position\n    const movedFields = new Set<string>();\n    gridEl.querySelectorAll('.header-row > .cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (!field) return;\n      const oldLeft = oldPositions.get(field);\n      if (oldLeft === undefined) return;\n      const newLeft = cell.getBoundingClientRect().left;\n      if (Math.abs(oldLeft - newLeft) > 1) {\n        movedFields.add(field);\n      }\n    });\n\n    if (movedFields.size === 0) return;\n\n    // Add animation class to moved columns (headers + body cells)\n    const cells: HTMLElement[] = [];\n    gridEl.querySelectorAll('.cell[data-field]').forEach((cell) => {\n      const field = cell.getAttribute('data-field');\n      if (field && movedFields.has(field)) {\n        const el = cell as HTMLElement;\n        el.classList.add('fade-animating');\n        cells.push(el);\n      }\n    });\n\n    if (cells.length === 0) return;\n\n    // Remove class after animation completes\n    const duration = this.animationDuration;\n    setTimeout(() => {\n      cells.forEach((el) => el.classList.remove('fade-animating'));\n    }, duration + 50);\n  }\n\n  /**\n   * Update column order with configured animation.\n   */\n  private updateColumnOrder(newOrder: string[]): void {\n    const animation = this.animationType;\n\n    if (animation === 'flip' && this.gridElement) {\n      const oldPositions = this.captureHeaderPositions();\n      this.grid.setColumnOrder(newOrder);\n      // Force a full render cycle so body cells are rebuilt in new column order.\n      // setColumnOrder rebuilds headers synchronously but body cells are async\n      // (VIRTUALIZATION phase only patches content in place via fastPatchRow).\n      // forceLayout triggers processColumns which bumps the row render epoch,\n      // ensuring body cells are fully rebuilt with correct DOM order.\n      if (typeof this.grid.forceLayout === 'function') {\n        this.grid.forceLayout().then(() => {\n          this.animateFLIP(oldPositions);\n        });\n      } else {\n        // Fallback: animate headers only (body cells may not be rebuilt yet)\n        requestAnimationFrame(() => {\n          this.animateFLIP(oldPositions);\n        });\n      }\n    } else if (animation === 'fade') {\n      this.animateFade(() => this.grid.setColumnOrder(newOrder));\n    } else {\n      this.grid.setColumnOrder(newOrder);\n    }\n\n    this.grid.requestStateChange?.();\n  }\n  // #endregion\n}\n"],"names":["moveColumn","columns","fromIndex","toIndex","length","result","removed","splice","ReorderPlugin","BaseGridPlugin","name","aliases","styles","defaultConfig","animation","animationType","this","isAnimationEnabled","config","animationDuration","super","isDragging","draggedField","draggedIndex","dropIndex","canMoveColumnWithPlugins","column","meta","lockPosition","suppressMovable","canMoveColumn","grid","query","includes","clearDragClasses","gridElement","querySelectorAll","forEach","h","classList","remove","attach","addEventListener","e","detail","field","signal","disconnectSignal","detach","afterRender","gridEl","header","headerEl","getAttribute","find","c","draggable","setAttribute","orderIndex","getColumnOrder","indexOf","dataTransfer","effectAllowed","setData","add","preventDefault","rect","getBoundingClientRect","midX","left","width","clientX","toggle","effectiveToIndex","newOrder","columnOrder","emitCancelable","updateColumnOrder","onKeyDown","event","altKey","key","focusCol","_focusCol","_visibleColumns","currentOrder","targetColumn","ensureCellVisible","stopPropagation","setColumnOrder","order","resetColumnOrder","originalOrder","map","captureHeaderPositions","positions","Map","cell","set","animateFLIP","oldPositions","size","deltas","oldLeft","get","deltaX","Math","abs","cells","el","style","transform","push","offsetHeight","duration","requestAnimationFrame","setTimeout","animateFade","applyChange","movedFields","Set","newLeft","has","forceLayout","then","requestStateChange"],"mappings":"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"}