@toolbox-web/grid 1.6.2 → 1.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"reorder.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/reorder/column-drag.ts","../../../../../libs/grid/src/lib/plugins/reorder/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.queryPlugins({ type: PLUGIN_QUERIES.CAN_MOVE_COLUMN, context: column })`\n * which queries all plugins via the generic plugin query system.\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, PLUGIN_QUERIES } 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';\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';\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 = 'reorder';\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    const responses = this.grid.queryPlugins<boolean>({\n      type: PLUGIN_QUERIES.CAN_MOVE_COLUMN,\n      context: column,\n    });\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":["canMoveColumn","column","meta","moveColumn","columns","fromIndex","toIndex","result","removed","ReorderPlugin","BaseGridPlugin","styles","PLUGIN_QUERIES","h","grid","e","detail","gridEl","header","headerEl","field","c","orderIndex","rect","midX","draggedField","draggedIndex","dropIndex","effectiveToIndex","currentOrder","newOrder","event","focusCol","targetColumn","ensureCellVisible","order","originalOrder","positions","cell","oldPositions","deltas","oldLeft","deltaX","cells","el","duration","applyChange","movedFields","newLeft","animation"],"mappings":"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"}
+{"version":3,"file":"reorder.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/reorder/column-drag.ts","../../../../../libs/grid/src/lib/plugins/reorder/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';\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';\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 = 'reorder';\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":["canMoveColumn","column","meta","moveColumn","columns","fromIndex","toIndex","result","removed","ReorderPlugin","BaseGridPlugin","styles","h","grid","e","detail","gridEl","header","headerEl","field","c","orderIndex","rect","midX","draggedField","draggedIndex","dropIndex","effectiveToIndex","currentOrder","newOrder","event","focusCol","targetColumn","ensureCellVisible","order","originalOrder","positions","cell","oldPositions","deltas","oldLeft","deltaX","cells","el","duration","applyChange","movedFields","newLeft","animation"],"mappings":"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"}

package/umd/plugins/responsive.umd.js

@@ -1,2 +1,2 @@
-(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("../../core/internal/keyboard"),require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/keyboard","../../core/plugin/base-plugin"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.TbwGridPlugin_responsive={},a.TbwGrid,a.TbwGrid))})(this,(function(a,n,c){"use strict";const g='tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-left:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-right:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-right:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';class p extends c.BaseGridPlugin{name="responsive";version="1.0.0";styles=g;static manifest={incompatibleWith:[{name:"groupingRows",reason:"Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."}]};#o;#t=!1;#n;#w=!1;#a=0;#s=new Set;#d=new Set;#h=null;#l=[];isResponsive(){return this.#t}setResponsive(t){t!==this.#t&&(this.#t=t,this.#c(),this.emit("responsive-change",{isResponsive:t,width:this.#a,breakpoint:this.config.breakpoint??0}))}setBreakpoint(t){this.config.breakpoint=t,this.#v(this.#a)}setCardRenderer(t){this.config.cardRenderer=t,this.#t&&this.requestRender()}getWidth(){return this.#a}getActiveBreakpoint(){return this.#h}attach(t){super.attach(t),this.#u(this.config.hiddenColumns),this.config.breakpoints?.length&&(this.#l=[...this.config.breakpoints].sort((e,i)=>i.maxWidth-e.maxWidth)),this.#o=new ResizeObserver(e=>{const i=e[0]?.contentRect.width??0;this.#a=i,clearTimeout(this.#n),this.#n=setTimeout(()=>{this.#v(i)},this.config.debounceMs??100)}),this.#o.observe(this.gridElement)}#u(t){if(this.#s.clear(),this.#d.clear(),!!t)for(const e of t)typeof e=="string"?this.#s.add(e):e.showValue?this.#d.add(e.field):this.#s.add(e.field)}detach(){this.#o?.disconnect(),this.#o=void 0,clearTimeout(this.#n),this.#n=void 0,this.gridElement&&this.gridElement.removeAttribute("data-responsive"),super.detach()}afterRender(){if(this.#k(),!(this.#l.length>0?this.#h!==null:this.#t))return;const e=this.#s.size>0,i=this.#d.size>0;if(!e&&!i)return;const r=this.gridElement.querySelectorAll(".cell[data-field]");for(const s of r){const o=s.getAttribute("data-field");o&&(this.#s.has(o)?(s.setAttribute("data-responsive-hidden",""),s.removeAttribute("data-responsive-value-only")):this.#d.has(o)?(s.setAttribute("data-responsive-value-only",""),s.removeAttribute("data-responsive-hidden")):(s.removeAttribute("data-responsive-hidden"),s.removeAttribute("data-responsive-value-only")))}}#v(t){if(this.#l.length>0){this.#R(t);return}const e=this.config.breakpoint??0;e===0&&!this.#w&&(this.#w=!0,console.warn("[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."));const i=e>0&&t<e;i!==this.#t&&(this.#t=i,this.#c(),this.emit("responsive-change",{isResponsive:i,width:t,breakpoint:e}),this.requestRender())}#R(t){let e=null;for(const r of this.#l)t<=r.maxWidth&&(e=r);if(e!==this.#h){this.#h=e,e?.hiddenColumns?this.#u(e.hiddenColumns):this.#u(this.config.hiddenColumns);const r=e?.cardLayout===!0;r!==this.#t&&(this.#t=r,this.#c()),this.emit("responsive-change",{isResponsive:this.#t,width:t,breakpoint:e?.maxWidth??0}),this.requestRender()}}#e;#c(){this.gridElement.toggleAttribute("data-responsive",this.#t);const t=this.config.animate!==!1;this.gridElement.toggleAttribute("data-responsive-animate",t),this.config.animationDuration&&this.gridElement.style.setProperty("--tbw-responsive-duration",`${this.config.animationDuration}ms`);const e=this.grid;if(this.#t){e._virtualization&&(this.#e=e._virtualization.rowHeight);const i=this.gridElement.querySelector(".tbw-scroll-area");i&&(i.scrollLeft=0)}else{const i=this.gridElement.querySelectorAll(".data-grid-row");for(const r of i)r.style.height="",r.classList.remove("responsive-card");this.#e&&this.#e>0&&e._virtualization&&(e._virtualization.rowHeight=this.#e,this.#e=void 0),this.#i=void 0,this.#r=void 0,this.#g=void 0}}renderRow(t,e,i){if(!this.#t||!this.config.cardRenderer||t.__isGroupRow)return;e.replaceChildren();const r=this.config.cardRenderer(t,i);e.className="data-grid-row responsive-card";const s=this.config.cardRowHeight??"auto";return s!=="auto"?e.style.height=`${s}px`:e.style.height="auto",e.appendChild(r),!0}onKeyDown(t){if(!this.#t||this.config.cardRenderer&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))return!1;const e=this.rows.length-1,i=this.visibleColumns.length-1;switch(t.key){case"ArrowDown":if(this.grid._focusCol<i)return this.grid._focusCol+=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;if(this.grid._focusRow<e)return this.grid._focusRow+=1,this.grid._focusCol=0,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<e)return this.grid._focusRow+=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break}return!1}#i;#r;#g;#b(){if(this.#i&&this.#i>0)return this.#i;const t=this.config.cardRowHeight;return typeof t=="number"&&t>0?t:80}#m(){return this.#r&&this.#r>0?this.#r:this.#e??28}#p(){for(const t of this.rows)if(t.__isGroupRow)return!0;return!1}#y(){let t=0,e=0;for(const i of this.rows)i.__isGroupRow?t++:e++;return{groupCount:t,cardCount:e}}getExtraHeight(){if(!this.#t||!this.config.cardRenderer||!this.#p())return 0;const t=this.#e??28,e=this.#m(),i=this.#b(),{groupCount:r,cardCount:s}=this.#y(),o=r*Math.max(0,e-t),d=s*Math.max(0,i-t);return o+d}getExtraHeightBefore(t){if(!this.#t||!this.config.cardRenderer||!this.#p())return 0;const e=this.#e??28,i=this.#m(),r=this.#b(),s=Math.max(0,i-e),o=Math.max(0,r-e);let d=0,l=0;const u=this.rows,f=Math.min(t,u.length);for(let h=0;h<f;h++)u[h].__isGroupRow?d++:l++;return d*s+l*o}#C(){let t=0;for(const e of this.rows)e.__isGroupRow||t++;return t}#f=!1;#k(){if(!this.#t||!this.config.cardRenderer)return;let t=!1;const e=this.grid,i=this.#p(),r=this.#C();if(r!==this.#g&&(this.#g=r,t=!0),i){const o=this.gridElement.querySelector(".data-grid-row.group-row");if(o){const d=o.getBoundingClientRect().height;d>0&&d!==this.#r&&(this.#r=d,t=!0)}}const s=this.gridElement.querySelector(".data-grid-row.responsive-card");if(s){const o=s.getBoundingClientRect().height;o>0&&o!==this.#i&&(this.#i=o,t=!0,!i&&e._virtualization&&(e._virtualization.rowHeight=o))}t&&!this.#f&&(this.#f=!0,queueMicrotask(()=>{this.#f=!1,this.grid&&this.#t&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}a.ResponsivePlugin=p,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
+(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("../../core/internal/keyboard"),require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/keyboard","../../core/plugin/base-plugin"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.TbwGridPlugin_responsive={},a.TbwGrid,a.TbwGrid))})(this,(function(a,n,c){"use strict";const g='tbw-grid[data-responsive-animate] .data-grid-row,tbw-grid[data-responsive-animate] .data-grid-row>.cell{transition:opacity var(--tbw-responsive-duration, .2s) ease-out,transform var(--tbw-responsive-duration, .2s) ease-out}tbw-grid[data-responsive][data-responsive-animate] .data-grid-row{animation:responsive-card-enter var(--tbw-responsive-duration, .2s) ease-out}@keyframes responsive-card-enter{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}tbw-grid[data-responsive] .header{display:none!important}tbw-grid[data-responsive] .footer-row{display:none}tbw-grid[data-responsive] .tbw-scroll-area{overflow-x:hidden;min-width:0!important}tbw-grid[data-responsive] .rows-body-wrapper{min-width:0!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row){display:block!important;grid-template-columns:none!important;padding:var(--tbw-cell-padding);padding-left:var(--tbw-spacing-xl);border-bottom:1px solid var(--tbw-color-border);min-height:auto!important;height:auto!important;contain:none!important;content-visibility:visible!important;background:var(--tbw-color-bg);position:relative}tbw-grid[data-responsive] .data-grid-row:not(.group-row):nth-child(2n){background:var(--tbw-color-row-alt)}tbw-grid[data-responsive] .data-grid-row:not(.group-row):hover{background:var(--tbw-color-row-hover)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]{background:var(--tbw-color-selection)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)[aria-selected=true]:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tbw-color-accent)}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell{display:flex!important;justify-content:space-between;align-items:center;padding:var(--tbw-spacing-xs) var(--tbw-spacing-md);width:100%!important;min-width:0!important;min-height:auto!important;height:auto!important;line-height:1.5!important;position:static!important;left:auto!important;right:auto!important;border:none!important;border-bottom:none!important;border-right:none!important;background:transparent!important;white-space:normal!important;overflow:visible!important}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:before{content:attr(data-header) ": ";font-weight:600;color:var(--tbw-color-header-fg);flex-shrink:0;margin-right:var(--tbw-spacing-md);min-width:100px}tbw-grid[data-responsive] .data-grid-row:not(.group-row)>.cell:after{content:none}tbw-grid[data-responsive] .cell[data-utility]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .cell[data-responsive-value-only]{justify-content:flex-start!important;font-weight:500}tbw-grid[data-responsive] .cell[data-responsive-value-only]:before{display:none!important}tbw-grid:not([data-responsive]) .cell[data-responsive-hidden]{display:none!important}tbw-grid[data-responsive] .tbw-footer,tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows{display:none!important}tbw-grid[data-responsive] .tbw-pinned-rows,tbw-grid[data-responsive] .tbw-aggregation-rows,tbw-grid[data-responsive] .tbw-aggregation-row{min-width:0!important}tbw-grid[data-responsive] .data-grid-row.responsive-card{display:block!important;padding:var(--tbw-cell-padding);border-bottom:1px solid var(--tbw-color-border)}tbw-grid[data-responsive] .data-grid-row.responsive-card>*{width:100%}tbw-grid[data-responsive] .data-grid-row.responsive-card .cell:before{display:none}';class p extends c.BaseGridPlugin{name="responsive";version="1.0.0";styles=g;static manifest={incompatibleWith:[{name:"groupingRows",reason:"Responsive card layout does not yet support row grouping. The variable row heights (cards vs group headers) cause scroll calculation issues."}],queries:[{type:"isCardMode",description:"Returns whether the grid is currently in responsive card mode"}]};#o;#t=!1;#n;#w=!1;#a=0;#s=new Set;#d=new Set;#h=null;#l=[];isResponsive(){return this.#t}setResponsive(t){t!==this.#t&&(this.#t=t,this.#c(),this.emit("responsive-change",{isResponsive:t,width:this.#a,breakpoint:this.config.breakpoint??0}))}setBreakpoint(t){this.config.breakpoint=t,this.#v(this.#a)}setCardRenderer(t){this.config.cardRenderer=t,this.#t&&this.requestRender()}getWidth(){return this.#a}getActiveBreakpoint(){return this.#h}attach(t){super.attach(t),this.#u(this.config.hiddenColumns),this.config.breakpoints?.length&&(this.#l=[...this.config.breakpoints].sort((e,i)=>i.maxWidth-e.maxWidth)),this.#o=new ResizeObserver(e=>{const i=e[0]?.contentRect.width??0;this.#a=i,clearTimeout(this.#n),this.#n=setTimeout(()=>{this.#v(i)},this.config.debounceMs??100)}),this.#o.observe(this.gridElement)}#u(t){if(this.#s.clear(),this.#d.clear(),!!t)for(const e of t)typeof e=="string"?this.#s.add(e):e.showValue?this.#d.add(e.field):this.#s.add(e.field)}detach(){this.#o?.disconnect(),this.#o=void 0,clearTimeout(this.#n),this.#n=void 0,this.gridElement&&this.gridElement.removeAttribute("data-responsive"),super.detach()}handleQuery(t){if(t.type==="isCardMode")return this.#t}afterRender(){if(this.#k(),!(this.#l.length>0?this.#h!==null:this.#t))return;const e=this.#s.size>0,i=this.#d.size>0;if(!e&&!i)return;const r=this.gridElement.querySelectorAll(".cell[data-field]");for(const s of r){const o=s.getAttribute("data-field");o&&(this.#s.has(o)?(s.setAttribute("data-responsive-hidden",""),s.removeAttribute("data-responsive-value-only")):this.#d.has(o)?(s.setAttribute("data-responsive-value-only",""),s.removeAttribute("data-responsive-hidden")):(s.removeAttribute("data-responsive-hidden"),s.removeAttribute("data-responsive-value-only")))}}#v(t){if(this.#l.length>0){this.#R(t);return}const e=this.config.breakpoint??0;e===0&&!this.#w&&(this.#w=!0,console.warn("[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count."));const i=e>0&&t<e;i!==this.#t&&(this.#t=i,this.#c(),this.emit("responsive-change",{isResponsive:i,width:t,breakpoint:e}),this.requestRender())}#R(t){let e=null;for(const r of this.#l)t<=r.maxWidth&&(e=r);if(e!==this.#h){this.#h=e,e?.hiddenColumns?this.#u(e.hiddenColumns):this.#u(this.config.hiddenColumns);const r=e?.cardLayout===!0;r!==this.#t&&(this.#t=r,this.#c()),this.emit("responsive-change",{isResponsive:this.#t,width:t,breakpoint:e?.maxWidth??0}),this.requestRender()}}#e;#c(){this.gridElement.toggleAttribute("data-responsive",this.#t);const t=this.config.animate!==!1;this.gridElement.toggleAttribute("data-responsive-animate",t),this.config.animationDuration&&this.gridElement.style.setProperty("--tbw-responsive-duration",`${this.config.animationDuration}ms`);const e=this.grid;if(this.#t){e._virtualization&&(this.#e=e._virtualization.rowHeight);const i=this.gridElement.querySelector(".tbw-scroll-area");i&&(i.scrollLeft=0)}else{const i=this.gridElement.querySelectorAll(".data-grid-row");for(const r of i)r.style.height="",r.classList.remove("responsive-card");this.#e&&this.#e>0&&e._virtualization&&(e._virtualization.rowHeight=this.#e,this.#e=void 0),this.#i=void 0,this.#r=void 0,this.#g=void 0}}renderRow(t,e,i){if(!this.#t||!this.config.cardRenderer||t.__isGroupRow)return;e.replaceChildren();const r=this.config.cardRenderer(t,i);e.className="data-grid-row responsive-card";const s=this.config.cardRowHeight??"auto";return s!=="auto"?e.style.height=`${s}px`:e.style.height="auto",e.appendChild(r),!0}onKeyDown(t){if(!this.#t||this.config.cardRenderer&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))return!1;const e=this.rows.length-1,i=this.visibleColumns.length-1;switch(t.key){case"ArrowDown":if(this.grid._focusCol<i)return this.grid._focusCol+=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;if(this.grid._focusRow<e)return this.grid._focusRow+=1,this.grid._focusCol=0,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<e)return this.grid._focusRow+=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,t.preventDefault(),n.ensureCellVisible(this.grid),!0;break}return!1}#i;#r;#g;#b(){if(this.#i&&this.#i>0)return this.#i;const t=this.config.cardRowHeight;return typeof t=="number"&&t>0?t:80}#m(){return this.#r&&this.#r>0?this.#r:this.#e??28}#p(){for(const t of this.rows)if(t.__isGroupRow)return!0;return!1}#y(){let t=0,e=0;for(const i of this.rows)i.__isGroupRow?t++:e++;return{groupCount:t,cardCount:e}}getExtraHeight(){if(!this.#t||!this.config.cardRenderer||!this.#p())return 0;const t=this.#e??28,e=this.#m(),i=this.#b(),{groupCount:r,cardCount:s}=this.#y(),o=r*Math.max(0,e-t),d=s*Math.max(0,i-t);return o+d}getExtraHeightBefore(t){if(!this.#t||!this.config.cardRenderer||!this.#p())return 0;const e=this.#e??28,i=this.#m(),r=this.#b(),s=Math.max(0,i-e),o=Math.max(0,r-e);let d=0,l=0;const u=this.rows,f=Math.min(t,u.length);for(let h=0;h<f;h++)u[h].__isGroupRow?d++:l++;return d*s+l*o}#C(){let t=0;for(const e of this.rows)e.__isGroupRow||t++;return t}#f=!1;#k(){if(!this.#t||!this.config.cardRenderer)return;let t=!1;const e=this.grid,i=this.#p(),r=this.#C();if(r!==this.#g&&(this.#g=r,t=!0),i){const o=this.gridElement.querySelector(".data-grid-row.group-row");if(o){const d=o.getBoundingClientRect().height;d>0&&d!==this.#r&&(this.#r=d,t=!0)}}const s=this.gridElement.querySelector(".data-grid-row.responsive-card");if(s){const o=s.getBoundingClientRect().height;o>0&&o!==this.#i&&(this.#i=o,t=!0,!i&&e._virtualization&&(e._virtualization.rowHeight=o))}t&&!this.#f&&(this.#f=!0,queueMicrotask(()=>{this.#f=!1,this.grid&&this.#t&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}a.ResponsivePlugin=p,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=responsive.umd.js.map

package/umd/plugins/responsive.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"sourcesContent":["/**\n * Responsive Plugin\n *\n * Transforms the grid from tabular layout to a card/list layout when the grid\n * width falls below a configurable breakpoint. This enables grids to work in\n * narrow containers (split-pane UIs, mobile viewports, dashboard widgets).\n *\n * ## Installation\n *\n * ```ts\n * import { ResponsivePlugin } from '@toolbox-web/grid/plugins/responsive';\n *\n * const config: GridConfig = {\n *   plugins: [new ResponsivePlugin({ breakpoint: 500 })],\n * };\n * ```\n *\n * ## How It Works\n *\n * 1. ResizeObserver monitors the grid element's width\n * 2. When `width < breakpoint`, adds `data-responsive` attribute to grid\n * 3. CSS transforms cells from horizontal to vertical layout\n * 4. Each cell displays \"Header: Value\" using CSS `::before` pseudo-element\n *\n * @see [Responsive Demo](?path=/story/grid-plugins-responsive--default)\n */\n\nimport { ensureCellVisible } from '../../core/internal/keyboard';\nimport { BaseGridPlugin, type GridElement, type PluginManifest } from '../../core/plugin/base-plugin';\nimport type { InternalGrid } from '../../core/types';\nimport styles from './responsive.css?inline';\nimport type { BreakpointConfig, HiddenColumnConfig, ResponsiveChangeDetail, ResponsivePluginConfig } from './types';\n\n/**\n * Responsive Plugin for tbw-grid\n *\n * Adds automatic card layout mode when the grid width falls below a configurable\n * breakpoint. Perfect for responsive designs, split-pane UIs, and mobile viewports.\n *\n * @template T The row data type\n *\n * @example\n * ```ts\n * // Basic usage - switch to card layout below 500px\n * const config: GridConfig = {\n *   plugins: [new ResponsivePlugin({ breakpoint: 500 })],\n * };\n * ```\n *\n * @example\n * ```ts\n * // Hide less important columns in card mode\n * const config: GridConfig = {\n *   plugins: [\n *     new ResponsivePlugin({\n *       breakpoint: 600,\n *       hiddenColumns: ['createdAt', 'updatedAt'],\n *     }),\n *   ],\n * };\n * ```\n *\n * @example\n * ```ts\n * // Custom card renderer for advanced layouts\n * const config: GridConfig = {\n *   plugins: [\n *     new ResponsivePlugin({\n *       breakpoint: 400,\n *       cardRenderer: (row) => {\n *         const card = document.createElement('div');\n *         card.className = 'custom-card';\n *         card.innerHTML = `<strong>${row.name}</strong><br>${row.email}`;\n *         return card;\n *       },\n *     }),\n *   ],\n * };\n * ```\n */\nexport class ResponsivePlugin<T = unknown> extends BaseGridPlugin<ResponsivePluginConfig<T>> {\n  readonly name = 'responsive';\n  override readonly version = '1.0.0';\n  override readonly styles = styles;\n\n  /**\n   * Plugin manifest declaring incompatibilities with other plugins.\n   */\n  static override readonly manifest: PluginManifest = {\n    incompatibleWith: [\n      {\n        name: 'groupingRows',\n        reason:\n          'Responsive card layout does not yet support row grouping. ' +\n          'The variable row heights (cards vs group headers) cause scroll calculation issues.',\n      },\n    ],\n  };\n\n  #resizeObserver?: ResizeObserver;\n  #isResponsive = false;\n  #debounceTimer?: ReturnType<typeof setTimeout>;\n  #warnedAboutMissingBreakpoint = false;\n  #currentWidth = 0;\n  /** Set of column fields to completely hide */\n  #hiddenColumnSet: Set<string> = new Set();\n  /** Set of column fields to show value only (no header label) */\n  #valueOnlyColumnSet: Set<string> = new Set();\n  /** Currently active breakpoint, or null if none */\n  #activeBreakpoint: BreakpointConfig | null = null;\n  /** Sorted breakpoints from largest to smallest */\n  #sortedBreakpoints: BreakpointConfig[] = [];\n\n  /**\n   * Check if currently in responsive mode.\n   * @returns `true` if the grid is in card layout mode\n   */\n  isResponsive(): boolean {\n    return this.#isResponsive;\n  }\n\n  /**\n   * Force responsive mode regardless of width.\n   * Useful for testing or manual control.\n   * @param enabled - Whether to enable responsive mode\n   */\n  setResponsive(enabled: boolean): void {\n    if (enabled !== this.#isResponsive) {\n      this.#isResponsive = enabled;\n      this.#applyResponsiveState();\n      this.emit('responsive-change', {\n        isResponsive: enabled,\n        width: this.#currentWidth,\n        breakpoint: this.config.breakpoint ?? 0,\n      } satisfies ResponsiveChangeDetail);\n    }\n  }\n\n  /**\n   * Update breakpoint dynamically.\n   * @param width - New breakpoint width in pixels\n   */\n  setBreakpoint(width: number): void {\n    this.config.breakpoint = width;\n    this.#checkBreakpoint(this.#currentWidth);\n  }\n\n  /**\n   * Set a custom card renderer.\n   * This allows framework adapters to provide template-based renderers at runtime.\n   * @param renderer - The card renderer function, or undefined to use default\n   */\n  setCardRenderer(renderer: ResponsivePluginConfig<T>['cardRenderer']): void {\n    this.config.cardRenderer = renderer;\n    // If already in responsive mode, trigger a re-render to apply the new renderer\n    if (this.#isResponsive) {\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Get current grid width.\n   * @returns Width of the grid element in pixels\n   */\n  getWidth(): number {\n    return this.#currentWidth;\n  }\n\n  /**\n   * Get the currently active breakpoint config (multi-breakpoint mode only).\n   * @returns The active BreakpointConfig, or null if no breakpoint is active\n   */\n  getActiveBreakpoint(): BreakpointConfig | null {\n    return this.#activeBreakpoint;\n  }\n\n  override attach(grid: GridElement): void {\n    super.attach(grid);\n\n    // Build hidden column sets from config\n    this.#buildHiddenColumnSets(this.config.hiddenColumns);\n\n    // Sort breakpoints from largest to smallest for evaluation\n    if (this.config.breakpoints?.length) {\n      this.#sortedBreakpoints = [...this.config.breakpoints].sort((a, b) => b.maxWidth - a.maxWidth);\n    }\n\n    // Observe the grid element itself (not internal viewport)\n    // This captures the container width including when shell panels open/close\n    this.#resizeObserver = new ResizeObserver((entries) => {\n      const width = entries[0]?.contentRect.width ?? 0;\n      this.#currentWidth = width;\n\n      // Debounce to avoid thrashing during resize drag\n      clearTimeout(this.#debounceTimer);\n      this.#debounceTimer = setTimeout(() => {\n        this.#checkBreakpoint(width);\n      }, this.config.debounceMs ?? 100);\n    });\n\n    this.#resizeObserver.observe(this.gridElement);\n  }\n\n  /**\n   * Build the hidden and value-only column sets from config.\n   */\n  #buildHiddenColumnSets(hiddenColumns?: HiddenColumnConfig[]): void {\n    this.#hiddenColumnSet.clear();\n    this.#valueOnlyColumnSet.clear();\n\n    if (!hiddenColumns) return;\n\n    for (const col of hiddenColumns) {\n      if (typeof col === 'string') {\n        this.#hiddenColumnSet.add(col);\n      } else if (col.showValue) {\n        this.#valueOnlyColumnSet.add(col.field);\n      } else {\n        this.#hiddenColumnSet.add(col.field);\n      }\n    }\n  }\n\n  override detach(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    clearTimeout(this.#debounceTimer);\n    this.#debounceTimer = undefined;\n\n    // Clean up attribute\n    if (this.gridElement) {\n      this.gridElement.removeAttribute('data-responsive');\n    }\n\n    super.detach();\n  }\n\n  /**\n   * Apply hidden and value-only columns.\n   * In legacy mode (single breakpoint), only applies when in responsive mode.\n   * In multi-breakpoint mode, applies whenever there's an active breakpoint.\n   */\n  override afterRender(): void {\n    // Measure card height for virtualization calculations\n    this.#measureCardHeightFromDOM();\n\n    // In single breakpoint mode, only apply when responsive\n    // In multi-breakpoint mode, apply when there's an active breakpoint\n    const shouldApply = this.#sortedBreakpoints.length > 0 ? this.#activeBreakpoint !== null : this.#isResponsive;\n\n    if (!shouldApply) {\n      return;\n    }\n\n    const hasHiddenColumns = this.#hiddenColumnSet.size > 0;\n    const hasValueOnlyColumns = this.#valueOnlyColumnSet.size > 0;\n\n    if (!hasHiddenColumns && !hasValueOnlyColumns) {\n      return;\n    }\n\n    // Mark cells for hidden columns and value-only columns\n    const cells = this.gridElement.querySelectorAll('.cell[data-field]');\n    for (const cell of cells) {\n      const field = cell.getAttribute('data-field');\n      if (!field) continue;\n\n      // Apply hidden attribute\n      if (this.#hiddenColumnSet.has(field)) {\n        cell.setAttribute('data-responsive-hidden', '');\n        cell.removeAttribute('data-responsive-value-only');\n      }\n      // Apply value-only attribute (shows value without header label)\n      else if (this.#valueOnlyColumnSet.has(field)) {\n        cell.setAttribute('data-responsive-value-only', '');\n        cell.removeAttribute('data-responsive-hidden');\n      }\n      // Clear any previous responsive attributes\n      else {\n        cell.removeAttribute('data-responsive-hidden');\n        cell.removeAttribute('data-responsive-value-only');\n      }\n    }\n  }\n\n  /**\n   * Check if width has crossed any breakpoint threshold.\n   * Handles both single breakpoint (legacy) and multi-breakpoint modes.\n   */\n  #checkBreakpoint(width: number): void {\n    // Multi-breakpoint mode\n    if (this.#sortedBreakpoints.length > 0) {\n      this.#checkMultiBreakpoint(width);\n      return;\n    }\n\n    // Legacy single breakpoint mode\n    const breakpoint = this.config.breakpoint ?? 0;\n\n    // Warn once if breakpoint not configured (0 means never responsive)\n    if (breakpoint === 0 && !this.#warnedAboutMissingBreakpoint) {\n      this.#warnedAboutMissingBreakpoint = true;\n      console.warn(\n        \"[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count.\",\n      );\n    }\n\n    const shouldBeResponsive = breakpoint > 0 && width < breakpoint;\n\n    if (shouldBeResponsive !== this.#isResponsive) {\n      this.#isResponsive = shouldBeResponsive;\n      this.#applyResponsiveState();\n      this.emit('responsive-change', {\n        isResponsive: shouldBeResponsive,\n        width,\n        breakpoint,\n      } satisfies ResponsiveChangeDetail);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Check breakpoints in multi-breakpoint mode.\n   * Evaluates breakpoints from largest to smallest, applying the first match.\n   */\n  #checkMultiBreakpoint(width: number): void {\n    // Find the active breakpoint (first one where width <= maxWidth)\n    // Since sorted largest to smallest, we find the largest matching breakpoint\n    let newActiveBreakpoint: BreakpointConfig | null = null;\n\n    for (const bp of this.#sortedBreakpoints) {\n      if (width <= bp.maxWidth) {\n        newActiveBreakpoint = bp;\n        // Continue to find the most specific (smallest) matching breakpoint\n      }\n    }\n\n    // Check if breakpoint changed\n    const breakpointChanged = newActiveBreakpoint !== this.#activeBreakpoint;\n\n    if (breakpointChanged) {\n      this.#activeBreakpoint = newActiveBreakpoint;\n\n      // Update hidden column sets from active breakpoint\n      if (newActiveBreakpoint?.hiddenColumns) {\n        this.#buildHiddenColumnSets(newActiveBreakpoint.hiddenColumns);\n      } else {\n        // Fall back to top-level hiddenColumns config\n        this.#buildHiddenColumnSets(this.config.hiddenColumns);\n      }\n\n      // Determine if we should be in card layout\n      const shouldBeResponsive = newActiveBreakpoint?.cardLayout === true;\n\n      if (shouldBeResponsive !== this.#isResponsive) {\n        this.#isResponsive = shouldBeResponsive;\n        this.#applyResponsiveState();\n      }\n\n      // Emit event for any breakpoint change\n      this.emit('responsive-change', {\n        isResponsive: this.#isResponsive,\n        width,\n        breakpoint: newActiveBreakpoint?.maxWidth ?? 0,\n      } satisfies ResponsiveChangeDetail);\n\n      this.requestRender();\n    }\n  }\n\n  /** Original row height before entering responsive mode, for restoration on exit */\n  #originalRowHeight?: number;\n\n  /**\n   * Apply the responsive state to the grid element.\n   * Handles scroll reset when entering responsive mode and row height restoration on exit.\n   */\n  #applyResponsiveState(): void {\n    this.gridElement.toggleAttribute('data-responsive', this.#isResponsive);\n\n    // Apply animation attribute if enabled (default: true)\n    const animate = this.config.animate !== false;\n    this.gridElement.toggleAttribute('data-responsive-animate', animate);\n\n    // Set custom animation duration if provided\n    if (this.config.animationDuration) {\n      this.gridElement.style.setProperty('--tbw-responsive-duration', `${this.config.animationDuration}ms`);\n    }\n\n    // Cast to internal type for virtualization access\n    const internalGrid = this.grid as unknown as InternalGrid;\n\n    if (this.#isResponsive) {\n      // Store original row height before responsive mode changes it\n      if (internalGrid._virtualization) {\n        this.#originalRowHeight = internalGrid._virtualization.rowHeight;\n      }\n\n      // Reset horizontal scroll position when entering responsive mode\n      // The CSS hides overflow but doesn't reset the scroll position\n      const scrollArea = this.gridElement.querySelector('.tbw-scroll-area') as HTMLElement | null;\n      if (scrollArea) {\n        scrollArea.scrollLeft = 0;\n      }\n    } else {\n      // Exiting responsive mode - clean up inline styles set by renderRow\n      // The rows are reused from the pool, so we need to remove the card-specific styles\n      const rows = this.gridElement.querySelectorAll('.data-grid-row');\n      for (const row of rows) {\n        (row as HTMLElement).style.height = '';\n        row.classList.remove('responsive-card');\n      }\n\n      // Restore original row height\n      if (this.#originalRowHeight && this.#originalRowHeight > 0 && internalGrid._virtualization) {\n        internalGrid._virtualization.rowHeight = this.#originalRowHeight;\n        this.#originalRowHeight = undefined;\n      }\n\n      // Clear cached measurements so they're remeasured fresh when re-entering responsive mode\n      // Without this, stale measurements cause incorrect height calculations after scrolling\n      this.#measuredCardHeight = undefined;\n      this.#measuredGroupRowHeight = undefined;\n      this.#lastCardRowCount = undefined;\n    }\n  }\n\n  /**\n   * Custom row rendering when cardRenderer is provided and in responsive mode.\n   *\n   * When a cardRenderer is configured, this hook takes over row rendering to display\n   * the custom card layout instead of the default cell structure.\n   *\n   * @param row - The row data object\n   * @param rowEl - The row DOM element to render into\n   * @param rowIndex - The index of the row in the data array\n   * @returns `true` if rendered (prevents default), `void` for default rendering\n   */\n  override renderRow(row: unknown, rowEl: HTMLElement, rowIndex: number): boolean | void {\n    // Only override when in responsive mode AND cardRenderer is provided\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return; // Let default rendering proceed\n    }\n\n    // Skip group rows from GroupingRowsPlugin - they have special structure\n    // and should use their own renderer\n    if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n      return; // Let GroupingRowsPlugin handle group row rendering\n    }\n\n    // Clear existing content\n    rowEl.replaceChildren();\n\n    // Call user's cardRenderer to get custom content\n    const cardContent = this.config.cardRenderer(row as T, rowIndex);\n\n    // Reset className - clears any stale classes from previous use (e.g., 'group-row' from recycled element)\n    // This follows the same pattern as GroupingRowsPlugin which sets className explicitly\n    rowEl.className = 'data-grid-row responsive-card';\n\n    // Handle cardRowHeight\n    const cardHeight = this.config.cardRowHeight ?? 'auto';\n    if (cardHeight !== 'auto') {\n      rowEl.style.height = `${cardHeight}px`;\n    } else {\n      // Remove any virtualization-set height for auto mode\n      rowEl.style.height = 'auto';\n    }\n\n    // Append the custom card content\n    rowEl.appendChild(cardContent);\n\n    return true; // We handled rendering\n  }\n\n  /**\n   * Handle keyboard navigation in responsive mode.\n   *\n   * In responsive mode, the visual layout is inverted:\n   * - Cells are stacked vertically within each \"card\" (row)\n   * - DOWN/UP visually moves within the card (between fields)\n   * - Page Down/Page Up or Ctrl+Down/Up moves between cards\n   *\n   * For custom cardRenderers, keyboard navigation is disabled entirely\n   * since the implementor controls the card content and should handle\n   * navigation via their own event handlers.\n   *\n   * @returns `true` if the event was handled and default behavior should be prevented\n   */\n  override onKeyDown(e: KeyboardEvent): boolean {\n    if (!this.#isResponsive) {\n      return false;\n    }\n\n    // If custom cardRenderer is provided, disable grid's keyboard navigation\n    // The implementor is responsible for their own navigation\n    if (this.config.cardRenderer) {\n      const navKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n      if (navKeys.includes(e.key)) {\n        // Let the event bubble - implementor can handle it\n        return false;\n      }\n    }\n\n    // Swap arrow key behavior for CSS-only responsive mode\n    // In card layout, cells are stacked vertically:\n    //   Card 1:       Card 2:\n    //     ID: 1         ID: 2\n    //     Name: Alice   Name: Bob  <- ArrowRight goes here\n    //     Dept: Eng     Dept: Mkt\n    //       ↓ ArrowDown goes here\n    //\n    // ArrowDown/Up = move within card (change column/field)\n    // ArrowRight/Left = move between cards (change row)\n    const maxRow = this.rows.length - 1;\n    const maxCol = this.visibleColumns.length - 1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        // Move down WITHIN card (to next field/column)\n        if (this.grid._focusCol < maxCol) {\n          this.grid._focusCol += 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        // At bottom of card - optionally move to next card's first field\n        if (this.grid._focusRow < maxRow) {\n          this.grid._focusRow += 1;\n          this.grid._focusCol = 0;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowUp':\n        // Move up WITHIN card (to previous field/column)\n        if (this.grid._focusCol > 0) {\n          this.grid._focusCol -= 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        // At top of card - optionally move to previous card's last field\n        if (this.grid._focusRow > 0) {\n          this.grid._focusRow -= 1;\n          this.grid._focusCol = maxCol;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowRight':\n        // Move to NEXT card (same field)\n        if (this.grid._focusRow < maxRow) {\n          this.grid._focusRow += 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowLeft':\n        // Move to PREVIOUS card (same field)\n        if (this.grid._focusRow > 0) {\n          this.grid._focusRow -= 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n    }\n\n    return false;\n  }\n\n  // ============================================\n  // Variable Height Support for Mixed Row Types\n  // ============================================\n\n  /** Measured card height from DOM for virtualization calculations */\n  #measuredCardHeight?: number;\n\n  /** Measured group row height from DOM for virtualization calculations */\n  #measuredGroupRowHeight?: number;\n\n  /** Last known card row count for detecting changes (e.g., group expand/collapse) */\n  #lastCardRowCount?: number;\n\n  /**\n   * Get the effective card height for virtualization calculations.\n   * Prioritizes DOM-measured height (actual rendered size) over config,\n   * since content can overflow the configured height.\n   */\n  #getCardHeight(): number {\n    // Prefer measured height - it reflects actual rendered size including overflow\n    if (this.#measuredCardHeight && this.#measuredCardHeight > 0) {\n      return this.#measuredCardHeight;\n    }\n    // Fall back to explicit config\n    const configHeight = this.config.cardRowHeight;\n    if (typeof configHeight === 'number' && configHeight > 0) {\n      return configHeight;\n    }\n    // Default fallback\n    return 80;\n  }\n\n  /**\n   * Get the effective group row height for virtualization calculations.\n   * Uses DOM-measured height, falling back to original row height.\n   */\n  #getGroupRowHeight(): number {\n    if (this.#measuredGroupRowHeight && this.#measuredGroupRowHeight > 0) {\n      return this.#measuredGroupRowHeight;\n    }\n    // Fall back to original row height (before responsive mode)\n    return this.#originalRowHeight ?? 28;\n  }\n\n  /**\n   * Check if there are any group rows in the current dataset.\n   * Used to determine if we have mixed row heights.\n   */\n  #hasGroupRows(): boolean {\n    for (const row of this.rows) {\n      if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Count group rows and card rows in the current dataset.\n   */\n  #countRowTypes(): { groupCount: number; cardCount: number } {\n    let groupCount = 0;\n    let cardCount = 0;\n    for (const row of this.rows) {\n      if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n        groupCount++;\n      } else {\n        cardCount++;\n      }\n    }\n    return { groupCount, cardCount };\n  }\n\n  /**\n   * Return total extra height contributed by mixed row heights.\n   * This is called by the grid's virtualization system to adjust scrollbar height.\n   *\n   * The grid calculates: totalRows * baseRowHeight + pluginExtraHeight\n   *\n   * For mixed layouts (groups + cards), we need to report the difference between\n   * actual heights and what the base calculation assumes:\n   * - Extra for groups: groupCount * (groupHeight - baseHeight)\n   * - Extra for cards: cardCount * (cardHeight - baseHeight)\n   */\n  override getExtraHeight(): number {\n    // Only applies when in responsive mode with cardRenderer\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return 0;\n    }\n\n    // Only report extra height when there are mixed row types (groups + cards)\n    // If all rows are cards, we update the virtualization row height instead\n    if (!this.#hasGroupRows()) {\n      return 0;\n    }\n\n    const baseHeight = this.#originalRowHeight ?? 28;\n    const groupHeight = this.#getGroupRowHeight();\n    const cardHeight = this.#getCardHeight();\n\n    const { groupCount, cardCount } = this.#countRowTypes();\n\n    // Calculate extra height for both row types\n    const groupExtra = groupCount * Math.max(0, groupHeight - baseHeight);\n    const cardExtra = cardCount * Math.max(0, cardHeight - baseHeight);\n\n    return groupExtra + cardExtra;\n  }\n\n  /**\n   * Return extra height that appears before a given row index.\n   * Used by virtualization to correctly calculate scroll positions.\n   *\n   * Like getExtraHeight, this accounts for both group and card row heights.\n   */\n  override getExtraHeightBefore(beforeRowIndex: number): number {\n    // Only applies when in responsive mode with cardRenderer\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return 0;\n    }\n\n    // Only report extra height when there are mixed row types\n    if (!this.#hasGroupRows()) {\n      return 0;\n    }\n\n    const baseHeight = this.#originalRowHeight ?? 28;\n    const groupHeight = this.#getGroupRowHeight();\n    const cardHeight = this.#getCardHeight();\n\n    const groupHeightDiff = Math.max(0, groupHeight - baseHeight);\n    const cardHeightDiff = Math.max(0, cardHeight - baseHeight);\n\n    // Count group rows and card rows before the given index\n    let groupsBefore = 0;\n    let cardsBefore = 0;\n    const rows = this.rows;\n    const maxIndex = Math.min(beforeRowIndex, rows.length);\n\n    for (let i = 0; i < maxIndex; i++) {\n      if ((rows[i] as { __isGroupRow?: boolean }).__isGroupRow) {\n        groupsBefore++;\n      } else {\n        cardsBefore++;\n      }\n    }\n\n    return groupsBefore * groupHeightDiff + cardsBefore * cardHeightDiff;\n  }\n\n  /**\n   * Count the number of card rows (non-group rows) in the current dataset.\n   */\n  #countCardRows(): number {\n    let count = 0;\n    for (const row of this.rows) {\n      if (!(row as { __isGroupRow?: boolean }).__isGroupRow) {\n        count++;\n      }\n    }\n    return count;\n  }\n\n  /** Pending refresh scheduled via microtask */\n  #pendingRefresh = false;\n\n  /**\n   * Measure card height from DOM after render and detect row count changes.\n   * Called in afterRender to ensure scroll calculations are accurate.\n   *\n   * This handles two scenarios:\n   * 1. Card height changes (content overflow, dynamic sizing)\n   * 2. Card row count changes (group expand/collapse)\n   * 3. Group row height changes\n   *\n   * For uniform card layouts (no groups), we update the virtualization row height\n   * directly to the card height. For mixed layouts (groups + cards), we use the\n   * getExtraHeight mechanism to report height differences.\n   *\n   * The refresh is deferred via microtask to avoid nested render cycles.\n   */\n  #measureCardHeightFromDOM(): void {\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return;\n    }\n\n    let needsRefresh = false;\n    const internalGrid = this.grid as unknown as InternalGrid;\n    const hasGroups = this.#hasGroupRows();\n\n    // Check if card row count changed (e.g., group expanded/collapsed)\n    const currentCardRowCount = this.#countCardRows();\n    if (currentCardRowCount !== this.#lastCardRowCount) {\n      this.#lastCardRowCount = currentCardRowCount;\n      needsRefresh = true;\n    }\n\n    // Measure actual group row height from DOM (for mixed layouts)\n    if (hasGroups) {\n      const groupRow = this.gridElement.querySelector('.data-grid-row.group-row') as HTMLElement | null;\n      if (groupRow) {\n        const height = groupRow.getBoundingClientRect().height;\n        if (height > 0 && height !== this.#measuredGroupRowHeight) {\n          this.#measuredGroupRowHeight = height;\n          needsRefresh = true;\n        }\n      }\n    }\n\n    // Measure actual card height from DOM\n    const cardRow = this.gridElement.querySelector('.data-grid-row.responsive-card') as HTMLElement | null;\n    if (cardRow) {\n      const height = cardRow.getBoundingClientRect().height;\n      if (height > 0 && height !== this.#measuredCardHeight) {\n        this.#measuredCardHeight = height;\n        needsRefresh = true;\n\n        // For uniform card layouts (no groups), update virtualization row height directly\n        // This ensures proper row recycling and translateY calculations\n        if (!hasGroups && internalGrid._virtualization) {\n          internalGrid._virtualization.rowHeight = height;\n        }\n      }\n    }\n\n    // Defer virtualization refresh to avoid nested render cycles\n    // This is called from afterRender, so we can't call refreshVirtualWindow synchronously\n    // Use scheduler's VIRTUALIZATION phase to batch properly and avoid duplicate afterRender calls\n    if (needsRefresh && !this.#pendingRefresh) {\n      this.#pendingRefresh = true;\n      queueMicrotask(() => {\n        this.#pendingRefresh = false;\n        // Only refresh if still attached and in responsive mode\n        if (this.grid && this.#isResponsive) {\n          // Request virtualization phase through grid's public API\n          // This goes through the scheduler which batches and handles afterRender properly\n          (this.grid as unknown as InternalGrid).refreshVirtualWindow?.(true, true);\n        }\n      });\n    }\n  }\n}\n"],"names":["ResponsivePlugin","BaseGridPlugin","styles","#resizeObserver","#isResponsive","#debounceTimer","#warnedAboutMissingBreakpoint","#currentWidth","#hiddenColumnSet","#valueOnlyColumnSet","#activeBreakpoint","#sortedBreakpoints","enabled","#applyResponsiveState","width","#checkBreakpoint","renderer","grid","#buildHiddenColumnSets","a","b","entries","hiddenColumns","col","#measureCardHeightFromDOM","hasHiddenColumns","hasValueOnlyColumns","cells","cell","field","#checkMultiBreakpoint","breakpoint","shouldBeResponsive","newActiveBreakpoint","bp","#originalRowHeight","animate","internalGrid","scrollArea","rows","row","#measuredCardHeight","#measuredGroupRowHeight","#lastCardRowCount","rowEl","rowIndex","cardContent","cardHeight","e","maxRow","maxCol","ensureCellVisible","#getCardHeight","configHeight","#getGroupRowHeight","#hasGroupRows","#countRowTypes","groupCount","cardCount","baseHeight","groupHeight","groupExtra","cardExtra","beforeRowIndex","groupHeightDiff","cardHeightDiff","groupsBefore","cardsBefore","maxIndex","i","#countCardRows","count","#pendingRefresh","needsRefresh","hasGroups","currentCardRowCount","groupRow","height","cardRow"],"mappings":"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"}
+{"version":3,"file":"responsive.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/responsive/ResponsivePlugin.ts"],"sourcesContent":["/**\n * Responsive Plugin\n *\n * Transforms the grid from tabular layout to a card/list layout when the grid\n * width falls below a configurable breakpoint. This enables grids to work in\n * narrow containers (split-pane UIs, mobile viewports, dashboard widgets).\n *\n * ## Installation\n *\n * ```ts\n * import { ResponsivePlugin } from '@toolbox-web/grid/plugins/responsive';\n *\n * const config: GridConfig = {\n *   plugins: [new ResponsivePlugin({ breakpoint: 500 })],\n * };\n * ```\n *\n * ## How It Works\n *\n * 1. ResizeObserver monitors the grid element's width\n * 2. When `width < breakpoint`, adds `data-responsive` attribute to grid\n * 3. CSS transforms cells from horizontal to vertical layout\n * 4. Each cell displays \"Header: Value\" using CSS `::before` pseudo-element\n *\n * @see [Responsive Demo](?path=/story/grid-plugins-responsive--default)\n */\n\nimport { ensureCellVisible } from '../../core/internal/keyboard';\nimport { BaseGridPlugin, type GridElement, type PluginManifest, type PluginQuery } from '../../core/plugin/base-plugin';\nimport type { InternalGrid } from '../../core/types';\nimport styles from './responsive.css?inline';\nimport type { BreakpointConfig, HiddenColumnConfig, ResponsiveChangeDetail, ResponsivePluginConfig } from './types';\n\n/**\n * Responsive Plugin for tbw-grid\n *\n * Adds automatic card layout mode when the grid width falls below a configurable\n * breakpoint. Perfect for responsive designs, split-pane UIs, and mobile viewports.\n *\n * @template T The row data type\n *\n * @example\n * ```ts\n * // Basic usage - switch to card layout below 500px\n * const config: GridConfig = {\n *   plugins: [new ResponsivePlugin({ breakpoint: 500 })],\n * };\n * ```\n *\n * @example\n * ```ts\n * // Hide less important columns in card mode\n * const config: GridConfig = {\n *   plugins: [\n *     new ResponsivePlugin({\n *       breakpoint: 600,\n *       hiddenColumns: ['createdAt', 'updatedAt'],\n *     }),\n *   ],\n * };\n * ```\n *\n * @example\n * ```ts\n * // Custom card renderer for advanced layouts\n * const config: GridConfig = {\n *   plugins: [\n *     new ResponsivePlugin({\n *       breakpoint: 400,\n *       cardRenderer: (row) => {\n *         const card = document.createElement('div');\n *         card.className = 'custom-card';\n *         card.innerHTML = `<strong>${row.name}</strong><br>${row.email}`;\n *         return card;\n *       },\n *     }),\n *   ],\n * };\n * ```\n */\nexport class ResponsivePlugin<T = unknown> extends BaseGridPlugin<ResponsivePluginConfig<T>> {\n  readonly name = 'responsive';\n  override readonly version = '1.0.0';\n  override readonly styles = styles;\n\n  /**\n   * Plugin manifest declaring incompatibilities with other plugins.\n   */\n  static override readonly manifest: PluginManifest = {\n    incompatibleWith: [\n      {\n        name: 'groupingRows',\n        reason:\n          'Responsive card layout does not yet support row grouping. ' +\n          'The variable row heights (cards vs group headers) cause scroll calculation issues.',\n      },\n    ],\n    queries: [\n      {\n        type: 'isCardMode',\n        description: 'Returns whether the grid is currently in responsive card mode',\n      },\n    ],\n  };\n\n  #resizeObserver?: ResizeObserver;\n  #isResponsive = false;\n  #debounceTimer?: ReturnType<typeof setTimeout>;\n  #warnedAboutMissingBreakpoint = false;\n  #currentWidth = 0;\n  /** Set of column fields to completely hide */\n  #hiddenColumnSet: Set<string> = new Set();\n  /** Set of column fields to show value only (no header label) */\n  #valueOnlyColumnSet: Set<string> = new Set();\n  /** Currently active breakpoint, or null if none */\n  #activeBreakpoint: BreakpointConfig | null = null;\n  /** Sorted breakpoints from largest to smallest */\n  #sortedBreakpoints: BreakpointConfig[] = [];\n\n  /**\n   * Check if currently in responsive mode.\n   * @returns `true` if the grid is in card layout mode\n   */\n  isResponsive(): boolean {\n    return this.#isResponsive;\n  }\n\n  /**\n   * Force responsive mode regardless of width.\n   * Useful for testing or manual control.\n   * @param enabled - Whether to enable responsive mode\n   */\n  setResponsive(enabled: boolean): void {\n    if (enabled !== this.#isResponsive) {\n      this.#isResponsive = enabled;\n      this.#applyResponsiveState();\n      this.emit('responsive-change', {\n        isResponsive: enabled,\n        width: this.#currentWidth,\n        breakpoint: this.config.breakpoint ?? 0,\n      } satisfies ResponsiveChangeDetail);\n    }\n  }\n\n  /**\n   * Update breakpoint dynamically.\n   * @param width - New breakpoint width in pixels\n   */\n  setBreakpoint(width: number): void {\n    this.config.breakpoint = width;\n    this.#checkBreakpoint(this.#currentWidth);\n  }\n\n  /**\n   * Set a custom card renderer.\n   * This allows framework adapters to provide template-based renderers at runtime.\n   * @param renderer - The card renderer function, or undefined to use default\n   */\n  setCardRenderer(renderer: ResponsivePluginConfig<T>['cardRenderer']): void {\n    this.config.cardRenderer = renderer;\n    // If already in responsive mode, trigger a re-render to apply the new renderer\n    if (this.#isResponsive) {\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Get current grid width.\n   * @returns Width of the grid element in pixels\n   */\n  getWidth(): number {\n    return this.#currentWidth;\n  }\n\n  /**\n   * Get the currently active breakpoint config (multi-breakpoint mode only).\n   * @returns The active BreakpointConfig, or null if no breakpoint is active\n   */\n  getActiveBreakpoint(): BreakpointConfig | null {\n    return this.#activeBreakpoint;\n  }\n\n  override attach(grid: GridElement): void {\n    super.attach(grid);\n\n    // Build hidden column sets from config\n    this.#buildHiddenColumnSets(this.config.hiddenColumns);\n\n    // Sort breakpoints from largest to smallest for evaluation\n    if (this.config.breakpoints?.length) {\n      this.#sortedBreakpoints = [...this.config.breakpoints].sort((a, b) => b.maxWidth - a.maxWidth);\n    }\n\n    // Observe the grid element itself (not internal viewport)\n    // This captures the container width including when shell panels open/close\n    this.#resizeObserver = new ResizeObserver((entries) => {\n      const width = entries[0]?.contentRect.width ?? 0;\n      this.#currentWidth = width;\n\n      // Debounce to avoid thrashing during resize drag\n      clearTimeout(this.#debounceTimer);\n      this.#debounceTimer = setTimeout(() => {\n        this.#checkBreakpoint(width);\n      }, this.config.debounceMs ?? 100);\n    });\n\n    this.#resizeObserver.observe(this.gridElement);\n  }\n\n  /**\n   * Build the hidden and value-only column sets from config.\n   */\n  #buildHiddenColumnSets(hiddenColumns?: HiddenColumnConfig[]): void {\n    this.#hiddenColumnSet.clear();\n    this.#valueOnlyColumnSet.clear();\n\n    if (!hiddenColumns) return;\n\n    for (const col of hiddenColumns) {\n      if (typeof col === 'string') {\n        this.#hiddenColumnSet.add(col);\n      } else if (col.showValue) {\n        this.#valueOnlyColumnSet.add(col.field);\n      } else {\n        this.#hiddenColumnSet.add(col.field);\n      }\n    }\n  }\n\n  override detach(): void {\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    clearTimeout(this.#debounceTimer);\n    this.#debounceTimer = undefined;\n\n    // Clean up attribute\n    if (this.gridElement) {\n      this.gridElement.removeAttribute('data-responsive');\n    }\n\n    super.detach();\n  }\n\n  /**\n   * Handle plugin queries.\n   * @internal\n   */\n  override handleQuery(query: PluginQuery): unknown {\n    if (query.type === 'isCardMode') {\n      return this.#isResponsive;\n    }\n    return undefined;\n  }\n\n  /**\n   * Apply hidden and value-only columns.\n   * In legacy mode (single breakpoint), only applies when in responsive mode.\n   * In multi-breakpoint mode, applies whenever there's an active breakpoint.\n   */\n  override afterRender(): void {\n    // Measure card height for virtualization calculations\n    this.#measureCardHeightFromDOM();\n\n    // In single breakpoint mode, only apply when responsive\n    // In multi-breakpoint mode, apply when there's an active breakpoint\n    const shouldApply = this.#sortedBreakpoints.length > 0 ? this.#activeBreakpoint !== null : this.#isResponsive;\n\n    if (!shouldApply) {\n      return;\n    }\n\n    const hasHiddenColumns = this.#hiddenColumnSet.size > 0;\n    const hasValueOnlyColumns = this.#valueOnlyColumnSet.size > 0;\n\n    if (!hasHiddenColumns && !hasValueOnlyColumns) {\n      return;\n    }\n\n    // Mark cells for hidden columns and value-only columns\n    const cells = this.gridElement.querySelectorAll('.cell[data-field]');\n    for (const cell of cells) {\n      const field = cell.getAttribute('data-field');\n      if (!field) continue;\n\n      // Apply hidden attribute\n      if (this.#hiddenColumnSet.has(field)) {\n        cell.setAttribute('data-responsive-hidden', '');\n        cell.removeAttribute('data-responsive-value-only');\n      }\n      // Apply value-only attribute (shows value without header label)\n      else if (this.#valueOnlyColumnSet.has(field)) {\n        cell.setAttribute('data-responsive-value-only', '');\n        cell.removeAttribute('data-responsive-hidden');\n      }\n      // Clear any previous responsive attributes\n      else {\n        cell.removeAttribute('data-responsive-hidden');\n        cell.removeAttribute('data-responsive-value-only');\n      }\n    }\n  }\n\n  /**\n   * Check if width has crossed any breakpoint threshold.\n   * Handles both single breakpoint (legacy) and multi-breakpoint modes.\n   */\n  #checkBreakpoint(width: number): void {\n    // Multi-breakpoint mode\n    if (this.#sortedBreakpoints.length > 0) {\n      this.#checkMultiBreakpoint(width);\n      return;\n    }\n\n    // Legacy single breakpoint mode\n    const breakpoint = this.config.breakpoint ?? 0;\n\n    // Warn once if breakpoint not configured (0 means never responsive)\n    if (breakpoint === 0 && !this.#warnedAboutMissingBreakpoint) {\n      this.#warnedAboutMissingBreakpoint = true;\n      console.warn(\n        \"[tbw-grid:ResponsivePlugin] No breakpoint configured. Responsive mode is disabled. Set a breakpoint based on your grid's column count.\",\n      );\n    }\n\n    const shouldBeResponsive = breakpoint > 0 && width < breakpoint;\n\n    if (shouldBeResponsive !== this.#isResponsive) {\n      this.#isResponsive = shouldBeResponsive;\n      this.#applyResponsiveState();\n      this.emit('responsive-change', {\n        isResponsive: shouldBeResponsive,\n        width,\n        breakpoint,\n      } satisfies ResponsiveChangeDetail);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Check breakpoints in multi-breakpoint mode.\n   * Evaluates breakpoints from largest to smallest, applying the first match.\n   */\n  #checkMultiBreakpoint(width: number): void {\n    // Find the active breakpoint (first one where width <= maxWidth)\n    // Since sorted largest to smallest, we find the largest matching breakpoint\n    let newActiveBreakpoint: BreakpointConfig | null = null;\n\n    for (const bp of this.#sortedBreakpoints) {\n      if (width <= bp.maxWidth) {\n        newActiveBreakpoint = bp;\n        // Continue to find the most specific (smallest) matching breakpoint\n      }\n    }\n\n    // Check if breakpoint changed\n    const breakpointChanged = newActiveBreakpoint !== this.#activeBreakpoint;\n\n    if (breakpointChanged) {\n      this.#activeBreakpoint = newActiveBreakpoint;\n\n      // Update hidden column sets from active breakpoint\n      if (newActiveBreakpoint?.hiddenColumns) {\n        this.#buildHiddenColumnSets(newActiveBreakpoint.hiddenColumns);\n      } else {\n        // Fall back to top-level hiddenColumns config\n        this.#buildHiddenColumnSets(this.config.hiddenColumns);\n      }\n\n      // Determine if we should be in card layout\n      const shouldBeResponsive = newActiveBreakpoint?.cardLayout === true;\n\n      if (shouldBeResponsive !== this.#isResponsive) {\n        this.#isResponsive = shouldBeResponsive;\n        this.#applyResponsiveState();\n      }\n\n      // Emit event for any breakpoint change\n      this.emit('responsive-change', {\n        isResponsive: this.#isResponsive,\n        width,\n        breakpoint: newActiveBreakpoint?.maxWidth ?? 0,\n      } satisfies ResponsiveChangeDetail);\n\n      this.requestRender();\n    }\n  }\n\n  /** Original row height before entering responsive mode, for restoration on exit */\n  #originalRowHeight?: number;\n\n  /**\n   * Apply the responsive state to the grid element.\n   * Handles scroll reset when entering responsive mode and row height restoration on exit.\n   */\n  #applyResponsiveState(): void {\n    this.gridElement.toggleAttribute('data-responsive', this.#isResponsive);\n\n    // Apply animation attribute if enabled (default: true)\n    const animate = this.config.animate !== false;\n    this.gridElement.toggleAttribute('data-responsive-animate', animate);\n\n    // Set custom animation duration if provided\n    if (this.config.animationDuration) {\n      this.gridElement.style.setProperty('--tbw-responsive-duration', `${this.config.animationDuration}ms`);\n    }\n\n    // Cast to internal type for virtualization access\n    const internalGrid = this.grid as unknown as InternalGrid;\n\n    if (this.#isResponsive) {\n      // Store original row height before responsive mode changes it\n      if (internalGrid._virtualization) {\n        this.#originalRowHeight = internalGrid._virtualization.rowHeight;\n      }\n\n      // Reset horizontal scroll position when entering responsive mode\n      // The CSS hides overflow but doesn't reset the scroll position\n      const scrollArea = this.gridElement.querySelector('.tbw-scroll-area') as HTMLElement | null;\n      if (scrollArea) {\n        scrollArea.scrollLeft = 0;\n      }\n    } else {\n      // Exiting responsive mode - clean up inline styles set by renderRow\n      // The rows are reused from the pool, so we need to remove the card-specific styles\n      const rows = this.gridElement.querySelectorAll('.data-grid-row');\n      for (const row of rows) {\n        (row as HTMLElement).style.height = '';\n        row.classList.remove('responsive-card');\n      }\n\n      // Restore original row height\n      if (this.#originalRowHeight && this.#originalRowHeight > 0 && internalGrid._virtualization) {\n        internalGrid._virtualization.rowHeight = this.#originalRowHeight;\n        this.#originalRowHeight = undefined;\n      }\n\n      // Clear cached measurements so they're remeasured fresh when re-entering responsive mode\n      // Without this, stale measurements cause incorrect height calculations after scrolling\n      this.#measuredCardHeight = undefined;\n      this.#measuredGroupRowHeight = undefined;\n      this.#lastCardRowCount = undefined;\n    }\n  }\n\n  /**\n   * Custom row rendering when cardRenderer is provided and in responsive mode.\n   *\n   * When a cardRenderer is configured, this hook takes over row rendering to display\n   * the custom card layout instead of the default cell structure.\n   *\n   * @param row - The row data object\n   * @param rowEl - The row DOM element to render into\n   * @param rowIndex - The index of the row in the data array\n   * @returns `true` if rendered (prevents default), `void` for default rendering\n   */\n  override renderRow(row: unknown, rowEl: HTMLElement, rowIndex: number): boolean | void {\n    // Only override when in responsive mode AND cardRenderer is provided\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return; // Let default rendering proceed\n    }\n\n    // Skip group rows from GroupingRowsPlugin - they have special structure\n    // and should use their own renderer\n    if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n      return; // Let GroupingRowsPlugin handle group row rendering\n    }\n\n    // Clear existing content\n    rowEl.replaceChildren();\n\n    // Call user's cardRenderer to get custom content\n    const cardContent = this.config.cardRenderer(row as T, rowIndex);\n\n    // Reset className - clears any stale classes from previous use (e.g., 'group-row' from recycled element)\n    // This follows the same pattern as GroupingRowsPlugin which sets className explicitly\n    rowEl.className = 'data-grid-row responsive-card';\n\n    // Handle cardRowHeight\n    const cardHeight = this.config.cardRowHeight ?? 'auto';\n    if (cardHeight !== 'auto') {\n      rowEl.style.height = `${cardHeight}px`;\n    } else {\n      // Remove any virtualization-set height for auto mode\n      rowEl.style.height = 'auto';\n    }\n\n    // Append the custom card content\n    rowEl.appendChild(cardContent);\n\n    return true; // We handled rendering\n  }\n\n  /**\n   * Handle keyboard navigation in responsive mode.\n   *\n   * In responsive mode, the visual layout is inverted:\n   * - Cells are stacked vertically within each \"card\" (row)\n   * - DOWN/UP visually moves within the card (between fields)\n   * - Page Down/Page Up or Ctrl+Down/Up moves between cards\n   *\n   * For custom cardRenderers, keyboard navigation is disabled entirely\n   * since the implementor controls the card content and should handle\n   * navigation via their own event handlers.\n   *\n   * @returns `true` if the event was handled and default behavior should be prevented\n   */\n  override onKeyDown(e: KeyboardEvent): boolean {\n    if (!this.#isResponsive) {\n      return false;\n    }\n\n    // If custom cardRenderer is provided, disable grid's keyboard navigation\n    // The implementor is responsible for their own navigation\n    if (this.config.cardRenderer) {\n      const navKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n      if (navKeys.includes(e.key)) {\n        // Let the event bubble - implementor can handle it\n        return false;\n      }\n    }\n\n    // Swap arrow key behavior for CSS-only responsive mode\n    // In card layout, cells are stacked vertically:\n    //   Card 1:       Card 2:\n    //     ID: 1         ID: 2\n    //     Name: Alice   Name: Bob  <- ArrowRight goes here\n    //     Dept: Eng     Dept: Mkt\n    //       ↓ ArrowDown goes here\n    //\n    // ArrowDown/Up = move within card (change column/field)\n    // ArrowRight/Left = move between cards (change row)\n    const maxRow = this.rows.length - 1;\n    const maxCol = this.visibleColumns.length - 1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        // Move down WITHIN card (to next field/column)\n        if (this.grid._focusCol < maxCol) {\n          this.grid._focusCol += 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        // At bottom of card - optionally move to next card's first field\n        if (this.grid._focusRow < maxRow) {\n          this.grid._focusRow += 1;\n          this.grid._focusCol = 0;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowUp':\n        // Move up WITHIN card (to previous field/column)\n        if (this.grid._focusCol > 0) {\n          this.grid._focusCol -= 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        // At top of card - optionally move to previous card's last field\n        if (this.grid._focusRow > 0) {\n          this.grid._focusRow -= 1;\n          this.grid._focusCol = maxCol;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowRight':\n        // Move to NEXT card (same field)\n        if (this.grid._focusRow < maxRow) {\n          this.grid._focusRow += 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n\n      case 'ArrowLeft':\n        // Move to PREVIOUS card (same field)\n        if (this.grid._focusRow > 0) {\n          this.grid._focusRow -= 1;\n          e.preventDefault();\n          ensureCellVisible(this.grid as unknown as InternalGrid);\n          return true;\n        }\n        break;\n    }\n\n    return false;\n  }\n\n  // ============================================\n  // Variable Height Support for Mixed Row Types\n  // ============================================\n\n  /** Measured card height from DOM for virtualization calculations */\n  #measuredCardHeight?: number;\n\n  /** Measured group row height from DOM for virtualization calculations */\n  #measuredGroupRowHeight?: number;\n\n  /** Last known card row count for detecting changes (e.g., group expand/collapse) */\n  #lastCardRowCount?: number;\n\n  /**\n   * Get the effective card height for virtualization calculations.\n   * Prioritizes DOM-measured height (actual rendered size) over config,\n   * since content can overflow the configured height.\n   */\n  #getCardHeight(): number {\n    // Prefer measured height - it reflects actual rendered size including overflow\n    if (this.#measuredCardHeight && this.#measuredCardHeight > 0) {\n      return this.#measuredCardHeight;\n    }\n    // Fall back to explicit config\n    const configHeight = this.config.cardRowHeight;\n    if (typeof configHeight === 'number' && configHeight > 0) {\n      return configHeight;\n    }\n    // Default fallback\n    return 80;\n  }\n\n  /**\n   * Get the effective group row height for virtualization calculations.\n   * Uses DOM-measured height, falling back to original row height.\n   */\n  #getGroupRowHeight(): number {\n    if (this.#measuredGroupRowHeight && this.#measuredGroupRowHeight > 0) {\n      return this.#measuredGroupRowHeight;\n    }\n    // Fall back to original row height (before responsive mode)\n    return this.#originalRowHeight ?? 28;\n  }\n\n  /**\n   * Check if there are any group rows in the current dataset.\n   * Used to determine if we have mixed row heights.\n   */\n  #hasGroupRows(): boolean {\n    for (const row of this.rows) {\n      if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Count group rows and card rows in the current dataset.\n   */\n  #countRowTypes(): { groupCount: number; cardCount: number } {\n    let groupCount = 0;\n    let cardCount = 0;\n    for (const row of this.rows) {\n      if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n        groupCount++;\n      } else {\n        cardCount++;\n      }\n    }\n    return { groupCount, cardCount };\n  }\n\n  /**\n   * Return total extra height contributed by mixed row heights.\n   * This is called by the grid's virtualization system to adjust scrollbar height.\n   *\n   * The grid calculates: totalRows * baseRowHeight + pluginExtraHeight\n   *\n   * For mixed layouts (groups + cards), we need to report the difference between\n   * actual heights and what the base calculation assumes:\n   * - Extra for groups: groupCount * (groupHeight - baseHeight)\n   * - Extra for cards: cardCount * (cardHeight - baseHeight)\n   */\n  override getExtraHeight(): number {\n    // Only applies when in responsive mode with cardRenderer\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return 0;\n    }\n\n    // Only report extra height when there are mixed row types (groups + cards)\n    // If all rows are cards, we update the virtualization row height instead\n    if (!this.#hasGroupRows()) {\n      return 0;\n    }\n\n    const baseHeight = this.#originalRowHeight ?? 28;\n    const groupHeight = this.#getGroupRowHeight();\n    const cardHeight = this.#getCardHeight();\n\n    const { groupCount, cardCount } = this.#countRowTypes();\n\n    // Calculate extra height for both row types\n    const groupExtra = groupCount * Math.max(0, groupHeight - baseHeight);\n    const cardExtra = cardCount * Math.max(0, cardHeight - baseHeight);\n\n    return groupExtra + cardExtra;\n  }\n\n  /**\n   * Return extra height that appears before a given row index.\n   * Used by virtualization to correctly calculate scroll positions.\n   *\n   * Like getExtraHeight, this accounts for both group and card row heights.\n   */\n  override getExtraHeightBefore(beforeRowIndex: number): number {\n    // Only applies when in responsive mode with cardRenderer\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return 0;\n    }\n\n    // Only report extra height when there are mixed row types\n    if (!this.#hasGroupRows()) {\n      return 0;\n    }\n\n    const baseHeight = this.#originalRowHeight ?? 28;\n    const groupHeight = this.#getGroupRowHeight();\n    const cardHeight = this.#getCardHeight();\n\n    const groupHeightDiff = Math.max(0, groupHeight - baseHeight);\n    const cardHeightDiff = Math.max(0, cardHeight - baseHeight);\n\n    // Count group rows and card rows before the given index\n    let groupsBefore = 0;\n    let cardsBefore = 0;\n    const rows = this.rows;\n    const maxIndex = Math.min(beforeRowIndex, rows.length);\n\n    for (let i = 0; i < maxIndex; i++) {\n      if ((rows[i] as { __isGroupRow?: boolean }).__isGroupRow) {\n        groupsBefore++;\n      } else {\n        cardsBefore++;\n      }\n    }\n\n    return groupsBefore * groupHeightDiff + cardsBefore * cardHeightDiff;\n  }\n\n  /**\n   * Count the number of card rows (non-group rows) in the current dataset.\n   */\n  #countCardRows(): number {\n    let count = 0;\n    for (const row of this.rows) {\n      if (!(row as { __isGroupRow?: boolean }).__isGroupRow) {\n        count++;\n      }\n    }\n    return count;\n  }\n\n  /** Pending refresh scheduled via microtask */\n  #pendingRefresh = false;\n\n  /**\n   * Measure card height from DOM after render and detect row count changes.\n   * Called in afterRender to ensure scroll calculations are accurate.\n   *\n   * This handles two scenarios:\n   * 1. Card height changes (content overflow, dynamic sizing)\n   * 2. Card row count changes (group expand/collapse)\n   * 3. Group row height changes\n   *\n   * For uniform card layouts (no groups), we update the virtualization row height\n   * directly to the card height. For mixed layouts (groups + cards), we use the\n   * getExtraHeight mechanism to report height differences.\n   *\n   * The refresh is deferred via microtask to avoid nested render cycles.\n   */\n  #measureCardHeightFromDOM(): void {\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return;\n    }\n\n    let needsRefresh = false;\n    const internalGrid = this.grid as unknown as InternalGrid;\n    const hasGroups = this.#hasGroupRows();\n\n    // Check if card row count changed (e.g., group expanded/collapsed)\n    const currentCardRowCount = this.#countCardRows();\n    if (currentCardRowCount !== this.#lastCardRowCount) {\n      this.#lastCardRowCount = currentCardRowCount;\n      needsRefresh = true;\n    }\n\n    // Measure actual group row height from DOM (for mixed layouts)\n    if (hasGroups) {\n      const groupRow = this.gridElement.querySelector('.data-grid-row.group-row') as HTMLElement | null;\n      if (groupRow) {\n        const height = groupRow.getBoundingClientRect().height;\n        if (height > 0 && height !== this.#measuredGroupRowHeight) {\n          this.#measuredGroupRowHeight = height;\n          needsRefresh = true;\n        }\n      }\n    }\n\n    // Measure actual card height from DOM\n    const cardRow = this.gridElement.querySelector('.data-grid-row.responsive-card') as HTMLElement | null;\n    if (cardRow) {\n      const height = cardRow.getBoundingClientRect().height;\n      if (height > 0 && height !== this.#measuredCardHeight) {\n        this.#measuredCardHeight = height;\n        needsRefresh = true;\n\n        // For uniform card layouts (no groups), update virtualization row height directly\n        // This ensures proper row recycling and translateY calculations\n        if (!hasGroups && internalGrid._virtualization) {\n          internalGrid._virtualization.rowHeight = height;\n        }\n      }\n    }\n\n    // Defer virtualization refresh to avoid nested render cycles\n    // This is called from afterRender, so we can't call refreshVirtualWindow synchronously\n    // Use scheduler's VIRTUALIZATION phase to batch properly and avoid duplicate afterRender calls\n    if (needsRefresh && !this.#pendingRefresh) {\n      this.#pendingRefresh = true;\n      queueMicrotask(() => {\n        this.#pendingRefresh = false;\n        // Only refresh if still attached and in responsive mode\n        if (this.grid && this.#isResponsive) {\n          // Request virtualization phase through grid's public API\n          // This goes through the scheduler which batches and handles afterRender properly\n          (this.grid as unknown as InternalGrid).refreshVirtualWindow?.(true, true);\n        }\n      });\n    }\n  }\n}\n"],"names":["ResponsivePlugin","BaseGridPlugin","styles","#resizeObserver","#isResponsive","#debounceTimer","#warnedAboutMissingBreakpoint","#currentWidth","#hiddenColumnSet","#valueOnlyColumnSet","#activeBreakpoint","#sortedBreakpoints","enabled","#applyResponsiveState","width","#checkBreakpoint","renderer","grid","#buildHiddenColumnSets","a","b","entries","hiddenColumns","col","query","#measureCardHeightFromDOM","hasHiddenColumns","hasValueOnlyColumns","cells","cell","field","#checkMultiBreakpoint","breakpoint","shouldBeResponsive","newActiveBreakpoint","bp","#originalRowHeight","animate","internalGrid","scrollArea","rows","row","#measuredCardHeight","#measuredGroupRowHeight","#lastCardRowCount","rowEl","rowIndex","cardContent","cardHeight","e","maxRow","maxCol","ensureCellVisible","#getCardHeight","configHeight","#getGroupRowHeight","#hasGroupRows","#countRowTypes","groupCount","cardCount","baseHeight","groupHeight","groupExtra","cardExtra","beforeRowIndex","groupHeightDiff","cardHeightDiff","groupsBefore","cardsBefore","maxIndex","i","#countCardRows","count","#pendingRefresh","needsRefresh","hasGroups","currentCardRowCount","groupRow","height","cardRow"],"mappings":"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"}

package/umd/plugins/selection.umd.js

@@ -1,4 +1,4 @@
-(function(h,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("../../core/internal/utils"),require("../../core/plugin/base-plugin"),require("../../core/plugin/expander-column")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/utils","../../core/plugin/base-plugin","../../core/plugin/expander-column"],g):(h=typeof globalThis<"u"?globalThis:h||self,g(h.TbwGridPlugin_selection={},h.TbwGrid,h.TbwGrid,h.TbwGrid))})(this,(function(h,g,y,f){"use strict";function w(r){return{startRow:Math.min(r.startRow,r.endRow),startCol:Math.min(r.startCol,r.endCol),endRow:Math.max(r.startRow,r.endRow),endCol:Math.max(r.startCol,r.endCol)}}function A(r){const e=w(r);return{from:{row:e.startRow,col:e.startCol},to:{row:e.endRow,col:e.endCol}}}function C(r){return r.map(A)}function S(r,e,t){const s=w(t);return r>=s.startRow&&r<=s.endRow&&e>=s.startCol&&e<=s.endCol}function p(r,e,t){return t.some(s=>S(r,e,s))}function v(r){const e=[],t=w(r);for(let s=t.startRow;s<=t.endRow;s++)for(let n=t.startCol;n<=t.endCol;n++)e.push({row:s,col:n});return e}function x(r){const e=new Map;for(const t of r)for(const s of v(t))e.set(`${s.row},${s.col}`,s);return[...e.values()]}function R(r,e){return{startRow:r.row,startCol:r.col,endRow:e.row,endCol:e.col}}function m(r,e){const t=w(r),s=w(e);return t.startRow===s.startRow&&t.startCol===s.startCol&&t.endRow===s.endRow&&t.endCol===s.endCol}const I="@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-selection-warning-bg, rgba(from var(--tbw-color-error) r g b / 50%))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";function k(r,e,t){if(r==="cell"&&e.selectedCell)return{mode:r,ranges:[{from:{row:e.selectedCell.row,col:e.selectedCell.col},to:{row:e.selectedCell.row,col:e.selectedCell.col}}]};if(r==="row"&&e.selected.size>0){const s=[...e.selected].map(n=>({from:{row:n,col:0},to:{row:n,col:t-1}}));return{mode:r,ranges:s}}return r==="range"&&e.ranges.length>0?{mode:r,ranges:C(e.ranges)}:{mode:r,ranges:[]}}class E extends y.BaseGridPlugin{static manifest={configRules:[{id:"selection/range-dblclick",severity:"warn",message:`"triggerOn: 'dblclick'" has no effect when mode is "range".
+(function(d,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("../../core/internal/utils"),require("../../core/plugin/base-plugin"),require("../../core/plugin/expander-column")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/utils","../../core/plugin/base-plugin","../../core/plugin/expander-column"],g):(d=typeof globalThis<"u"?globalThis:d||self,g(d.TbwGridPlugin_selection={},d.TbwGrid,d.TbwGrid,d.TbwGrid))})(this,(function(d,g,y,f){"use strict";function w(n){return{startRow:Math.min(n.startRow,n.endRow),startCol:Math.min(n.startCol,n.endCol),endRow:Math.max(n.startRow,n.endRow),endCol:Math.max(n.startCol,n.endCol)}}function S(n){const e=w(n);return{from:{row:e.startRow,col:e.startCol},to:{row:e.endRow,col:e.endCol}}}function C(n){return n.map(S)}function A(n,e,t){const s=w(t);return n>=s.startRow&&n<=s.endRow&&e>=s.startCol&&e<=s.endCol}function p(n,e,t){return t.some(s=>A(n,e,s))}function v(n){const e=[],t=w(n);for(let s=t.startRow;s<=t.endRow;s++)for(let r=t.startCol;r<=t.endCol;r++)e.push({row:s,col:r});return e}function x(n){const e=new Map;for(const t of n)for(const s of v(t))e.set(`${s.row},${s.col}`,s);return[...e.values()]}function R(n,e){return{startRow:n.row,startCol:n.col,endRow:e.row,endCol:e.col}}function m(n,e){const t=w(n),s=w(e);return t.startRow===s.startRow&&t.startCol===s.startCol&&t.endRow===s.endRow&&t.endCol===s.endCol}const I="@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-selection-warning-bg, rgba(from var(--tbw-color-error) r g b / 50%))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";function k(n,e,t){if(n==="cell"&&e.selectedCell)return{mode:n,ranges:[{from:{row:e.selectedCell.row,col:e.selectedCell.col},to:{row:e.selectedCell.row,col:e.selectedCell.col}}]};if(n==="row"&&e.selected.size>0){const s=[...e.selected].map(r=>({from:{row:r,col:0},to:{row:r,col:t-1}}));return{mode:n,ranges:s}}return n==="range"&&e.ranges.length>0?{mode:n,ranges:C(e.ranges)}:{mode:n,ranges:[]}}class E extends y.BaseGridPlugin{static manifest={queries:[{type:"getSelection",description:"Get the current selection state"}],configRules:[{id:"selection/range-dblclick",severity:"warn",message:`"triggerOn: 'dblclick'" has no effect when mode is "range".
   → Range selection uses drag interaction (mousedown → mousemove), not click events.
-  → The "triggerOn" option only affects "cell" and "row" selection modes.`,check:e=>e.mode==="range"&&e.triggerOn==="dblclick"}]};name="selection";styles=I;get defaultConfig(){return{mode:"cell",triggerOn:"click",enabled:!0}}selected=new Set;lastSelected=null;anchor=null;ranges=[];activeRange=null;cellAnchor=null;isDragging=!1;pendingKeyboardUpdate=null;selectedCell=null;isSelectionEnabled(){return this.config.enabled===!1?!1:this.grid.effectiveConfig?.selectable!==!1}checkSelectable(e,t){const{isSelectable:s}=this.config;if(!s)return!0;const n=this.rows[e];if(!n)return!1;const i=t!==void 0?this.columns[t]:void 0;return s(n,e,i,t)}isRowSelectable(e){return this.checkSelectable(e)}isCellSelectable(e,t){return this.checkSelectable(e,t)}detach(){this.selected.clear(),this.ranges=[],this.activeRange=null,this.cellAnchor=null,this.isDragging=!1,this.selectedCell=null,this.pendingKeyboardUpdate=null}onCellClick(e){if(!this.isSelectionEnabled())return!1;const{rowIndex:t,colIndex:s,originalEvent:n}=e,{mode:i,triggerOn:l="click"}=this.config;if(n.type!==l)return!1;const o=this.columns[s],d=o&&f.isUtilityColumn(o);if(i==="cell"){if(d||!this.isCellSelectable(t,s))return!1;const c=this.selectedCell;return c&&c.row===t&&c.col===s||(this.selectedCell={row:t,col:s},this.emit("selection-change",this.#e()),this.requestAfterRender()),!1}if(i==="row")return!this.isRowSelectable(t)||this.selected.size===1&&this.selected.has(t)||(this.selected.clear(),this.selected.add(t),this.lastSelected=t,this.emit("selection-change",this.#e()),this.requestAfterRender()),!1;if(i==="range"){if(d||!this.isCellSelectable(t,s))return!1;const c=n.shiftKey,u=n.ctrlKey||n.metaKey;if(c&&this.cellAnchor){const a=R(this.cellAnchor,{row:t,col:s}),b=this.ranges.length>0?this.ranges[this.ranges.length-1]:null;if(b&&m(b,a))return!1;u?this.ranges.length>0?this.ranges[this.ranges.length-1]=a:this.ranges.push(a):this.ranges=[a],this.activeRange=a}else if(u){const a={startRow:t,startCol:s,endRow:t,endCol:s};this.ranges.push(a),this.activeRange=a,this.cellAnchor={row:t,col:s}}else{const a={startRow:t,startCol:s,endRow:t,endCol:s};if(this.ranges.length===1&&m(this.ranges[0],a))return!1;this.ranges=[a],this.activeRange=a,this.cellAnchor={row:t,col:s}}return this.emit("selection-change",this.#e()),this.requestAfterRender(),!1}return!1}onKeyDown(e){if(!this.isSelectionEnabled())return!1;const{mode:t}=this.config,n=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Tab","Home","End","PageUp","PageDown"].includes(e.key);if(e.key==="Escape")return t==="cell"?this.selectedCell=null:t==="row"?(this.selected.clear(),this.anchor=null):t==="range"&&(this.ranges=[],this.activeRange=null,this.cellAnchor=null),this.emit("selection-change",this.#e()),this.requestAfterRender(),!0;if(t==="cell"&&n)return queueMicrotask(()=>{const i=this.grid._focusRow,l=this.grid._focusCol;this.isCellSelectable(i,l)?this.selectedCell={row:i,col:l}:this.selectedCell=null,this.emit("selection-change",this.#e()),this.requestAfterRender()}),!1;if(t==="row"&&(e.key==="ArrowUp"||e.key==="ArrowDown"))return queueMicrotask(()=>{const i=this.grid._focusRow;this.isRowSelectable(i)?(this.selected.clear(),this.selected.add(i),this.lastSelected=i):this.selected.clear(),this.emit("selection-change",this.#e()),this.requestAfterRender()}),!1;if(t==="range"&&n){const i=e.key==="Tab",l=e.shiftKey&&!i;return l&&!this.cellAnchor&&(this.cellAnchor={row:this.grid._focusRow,col:this.grid._focusCol}),this.pendingKeyboardUpdate={shiftKey:l},queueMicrotask(()=>this.requestAfterRender()),!1}if(t==="range"&&e.key==="a"&&(e.ctrlKey||e.metaKey)){const i=this.rows.length,l=this.columns.length;if(i>0&&l>0){e.preventDefault(),e.stopPropagation();const o={startRow:0,startCol:0,endRow:i-1,endCol:l-1};return this.ranges=[o],this.activeRange=o,this.emit("selection-change",this.#e()),this.requestAfterRender(),!0}}return!1}onCellMouseDown(e){if(!this.isSelectionEnabled()||this.config.mode!=="range"||e.rowIndex===void 0||e.colIndex===void 0||e.rowIndex<0)return;const t=this.columns[e.colIndex];if(t&&f.isUtilityColumn(t)||!this.isCellSelectable(e.rowIndex,e.colIndex)||e.originalEvent.shiftKey&&this.cellAnchor)return;this.isDragging=!0;const s=e.rowIndex,n=e.colIndex,i=e.originalEvent.ctrlKey||e.originalEvent.metaKey,l={startRow:s,startCol:n,endRow:s,endCol:n};return!i&&this.ranges.length===1&&m(this.ranges[0],l)?(this.cellAnchor={row:s,col:n},!0):(this.cellAnchor={row:s,col:n},i||(this.ranges=[]),this.ranges.push(l),this.activeRange=l,this.emit("selection-change",this.#e()),this.requestAfterRender(),!0)}onCellMouseMove(e){if(!this.isSelectionEnabled()||this.config.mode!=="range"||!this.isDragging||!this.cellAnchor||e.rowIndex===void 0||e.colIndex===void 0||e.rowIndex<0)return;let t=e.colIndex;const s=this.columns[t];if(s&&f.isUtilityColumn(s)){const l=this.columns.findIndex(o=>!f.isUtilityColumn(o));l>=0&&(t=l)}const n=R(this.cellAnchor,{row:e.rowIndex,col:t}),i=this.ranges.length>0?this.ranges[this.ranges.length-1]:null;return i&&m(i,n)||(this.ranges.length>0?this.ranges[this.ranges.length-1]=n:this.ranges.push(n),this.activeRange=n,this.emit("selection-change",this.#e()),this.requestAfterRender()),!0}onCellMouseUp(e){if(this.isSelectionEnabled()&&this.config.mode==="range"&&this.isDragging)return this.isDragging=!1,!0}#t(){const e=this.gridElement;if(!e)return;const{mode:t}=this.config,s=!!this.config.isSelectable;e.querySelectorAll(".cell").forEach(l=>{l.classList.remove("selected","top","bottom","first","last"),s&&l.removeAttribute("data-selectable")});const i=e.querySelectorAll(".data-grid-row");if(i.forEach(l=>{l.classList.remove("selected","row-focus"),s&&l.removeAttribute("data-selectable")}),t==="row"&&(g.clearCellFocus(e),i.forEach(l=>{const o=l.querySelector(".cell[data-row]"),d=g.getRowIndexFromCell(o);d>=0&&(s&&!this.isRowSelectable(d)&&l.setAttribute("data-selectable","false"),this.selected.has(d)&&l.classList.add("selected","row-focus"))})),(t==="cell"||t==="range")&&s&&e.querySelectorAll(".cell[data-row][data-col]").forEach(o=>{const d=parseInt(o.getAttribute("data-row")??"-1",10),c=parseInt(o.getAttribute("data-col")??"-1",10);d>=0&&c>=0&&(this.isCellSelectable(d,c)||o.setAttribute("data-selectable","false"))}),t==="range"&&this.ranges.length>0){g.clearCellFocus(e);const l=this.activeRange?w(this.activeRange):null,o=this.columns.findIndex(c=>!f.isUtilityColumn(c));this.columns.length-1,e.querySelectorAll(".cell[data-row][data-col]").forEach(c=>{const u=parseInt(c.getAttribute("data-row")??"-1",10),a=parseInt(c.getAttribute("data-col")??"-1",10);if(u>=0&&a>=0){const b=this.columns[a];if(b&&f.isUtilityColumn(b))return;if(p(u,a,this.ranges)&&(c.classList.add("selected"),l)){u===l.startRow&&c.classList.add("top"),u===l.endRow&&c.classList.add("bottom");const K=Math.max(l.startCol,o);a===K&&c.classList.add("first"),a===l.endCol&&c.classList.add("last")}}})}}afterRender(){if(!this.isSelectionEnabled())return;const e=this.gridElement;if(!e)return;const t=e.children[0],{mode:s}=this.config;if(this.pendingKeyboardUpdate&&s==="range"){const{shiftKey:n}=this.pendingKeyboardUpdate;this.pendingKeyboardUpdate=null;const i=this.grid._focusRow,l=this.grid._focusCol;if(n&&this.cellAnchor){const o=R(this.cellAnchor,{row:i,col:l});this.ranges=[o],this.activeRange=o}else n||(this.ranges=[],this.activeRange=null,this.cellAnchor={row:i,col:l});this.emit("selection-change",this.#e())}this.grid.setAttribute("data-selection-mode",s),t&&t.classList.toggle("selecting",this.isDragging),this.#t()}onScrollRender(){this.isSelectionEnabled()&&this.#t()}getSelection(){return{mode:this.config.mode,ranges:this.#e().ranges,anchor:this.cellAnchor}}getSelectedCells(){return x(this.ranges)}isCellSelected(e,t){return p(e,t,this.ranges)}clearSelection(){this.selectedCell=null,this.selected.clear(),this.anchor=null,this.ranges=[],this.activeRange=null,this.cellAnchor=null,this.emit("selection-change",{mode:this.config.mode,ranges:[]}),this.requestAfterRender()}setRanges(e){this.ranges=e.map(t=>({startRow:t.from.row,startCol:t.from.col,endRow:t.to.row,endCol:t.to.col})),this.activeRange=this.ranges.length>0?this.ranges[this.ranges.length-1]:null,this.emit("selection-change",{mode:this.config.mode,ranges:C(this.ranges)}),this.requestAfterRender()}#e(){return k(this.config.mode,{selectedCell:this.selectedCell,selected:this.selected,ranges:this.ranges},this.columns.length)}}h.SelectionPlugin=E,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
+  → The "triggerOn" option only affects "cell" and "row" selection modes.`,check:e=>e.mode==="range"&&e.triggerOn==="dblclick"}]};name="selection";styles=I;get defaultConfig(){return{mode:"cell",triggerOn:"click",enabled:!0}}selected=new Set;lastSelected=null;anchor=null;ranges=[];activeRange=null;cellAnchor=null;isDragging=!1;pendingKeyboardUpdate=null;selectedCell=null;isSelectionEnabled(){return this.config.enabled===!1?!1:this.grid.effectiveConfig?.selectable!==!1}checkSelectable(e,t){const{isSelectable:s}=this.config;if(!s)return!0;const r=this.rows[e];if(!r)return!1;const i=t!==void 0?this.columns[t]:void 0;return s(r,e,i,t)}isRowSelectable(e){return this.checkSelectable(e)}isCellSelectable(e,t){return this.checkSelectable(e,t)}attach(e){super.attach(e),this.on("filter-applied",()=>this.clearSelectionSilent()),this.on("grouping-state-change",()=>this.clearSelectionSilent()),this.on("tree-state-change",()=>this.clearSelectionSilent())}handleQuery(e){if(e.type==="getSelection")return this.getSelection()}detach(){this.selected.clear(),this.ranges=[],this.activeRange=null,this.cellAnchor=null,this.isDragging=!1,this.selectedCell=null,this.pendingKeyboardUpdate=null}clearSelectionSilent(){this.selected.clear(),this.ranges=[],this.activeRange=null,this.cellAnchor=null,this.selectedCell=null,this.lastSelected=null,this.anchor=null,this.requestAfterRender()}onCellClick(e){if(!this.isSelectionEnabled())return!1;const{rowIndex:t,colIndex:s,originalEvent:r}=e,{mode:i,triggerOn:l="click"}=this.config;if(r.type!==l)return!1;const o=this.columns[s],h=o&&f.isUtilityColumn(o);if(i==="cell"){if(h||!this.isCellSelectable(t,s))return!1;const c=this.selectedCell;return c&&c.row===t&&c.col===s||(this.selectedCell={row:t,col:s},this.emit("selection-change",this.#e()),this.requestAfterRender()),!1}if(i==="row")return!this.isRowSelectable(t)||this.selected.size===1&&this.selected.has(t)||(this.selected.clear(),this.selected.add(t),this.lastSelected=t,this.emit("selection-change",this.#e()),this.requestAfterRender()),!1;if(i==="range"){if(h||!this.isCellSelectable(t,s))return!1;const c=r.shiftKey,u=r.ctrlKey||r.metaKey;if(c&&this.cellAnchor){const a=R(this.cellAnchor,{row:t,col:s}),b=this.ranges.length>0?this.ranges[this.ranges.length-1]:null;if(b&&m(b,a))return!1;u?this.ranges.length>0?this.ranges[this.ranges.length-1]=a:this.ranges.push(a):this.ranges=[a],this.activeRange=a}else if(u){const a={startRow:t,startCol:s,endRow:t,endCol:s};this.ranges.push(a),this.activeRange=a,this.cellAnchor={row:t,col:s}}else{const a={startRow:t,startCol:s,endRow:t,endCol:s};if(this.ranges.length===1&&m(this.ranges[0],a))return!1;this.ranges=[a],this.activeRange=a,this.cellAnchor={row:t,col:s}}return this.emit("selection-change",this.#e()),this.requestAfterRender(),!1}return!1}onKeyDown(e){if(!this.isSelectionEnabled())return!1;const{mode:t}=this.config,r=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Tab","Home","End","PageUp","PageDown"].includes(e.key);if(e.key==="Escape")return t==="cell"?this.selectedCell=null:t==="row"?(this.selected.clear(),this.anchor=null):t==="range"&&(this.ranges=[],this.activeRange=null,this.cellAnchor=null),this.emit("selection-change",this.#e()),this.requestAfterRender(),!0;if(t==="cell"&&r)return queueMicrotask(()=>{const i=this.grid._focusRow,l=this.grid._focusCol;this.isCellSelectable(i,l)?this.selectedCell={row:i,col:l}:this.selectedCell=null,this.emit("selection-change",this.#e()),this.requestAfterRender()}),!1;if(t==="row"&&(e.key==="ArrowUp"||e.key==="ArrowDown"))return queueMicrotask(()=>{const i=this.grid._focusRow;this.isRowSelectable(i)?(this.selected.clear(),this.selected.add(i),this.lastSelected=i):this.selected.clear(),this.emit("selection-change",this.#e()),this.requestAfterRender()}),!1;if(t==="range"&&r){const i=e.key==="Tab",l=e.shiftKey&&!i;return l&&!this.cellAnchor&&(this.cellAnchor={row:this.grid._focusRow,col:this.grid._focusCol}),this.pendingKeyboardUpdate={shiftKey:l},queueMicrotask(()=>this.requestAfterRender()),!1}if(t==="range"&&e.key==="a"&&(e.ctrlKey||e.metaKey)){const i=this.rows.length,l=this.columns.length;if(i>0&&l>0){e.preventDefault(),e.stopPropagation();const o={startRow:0,startCol:0,endRow:i-1,endCol:l-1};return this.ranges=[o],this.activeRange=o,this.emit("selection-change",this.#e()),this.requestAfterRender(),!0}}return!1}onCellMouseDown(e){if(!this.isSelectionEnabled()||this.config.mode!=="range"||e.rowIndex===void 0||e.colIndex===void 0||e.rowIndex<0)return;const t=this.columns[e.colIndex];if(t&&f.isUtilityColumn(t)||!this.isCellSelectable(e.rowIndex,e.colIndex)||e.originalEvent.shiftKey&&this.cellAnchor)return;this.isDragging=!0;const s=e.rowIndex,r=e.colIndex,i=e.originalEvent.ctrlKey||e.originalEvent.metaKey,l={startRow:s,startCol:r,endRow:s,endCol:r};return!i&&this.ranges.length===1&&m(this.ranges[0],l)?(this.cellAnchor={row:s,col:r},!0):(this.cellAnchor={row:s,col:r},i||(this.ranges=[]),this.ranges.push(l),this.activeRange=l,this.emit("selection-change",this.#e()),this.requestAfterRender(),!0)}onCellMouseMove(e){if(!this.isSelectionEnabled()||this.config.mode!=="range"||!this.isDragging||!this.cellAnchor||e.rowIndex===void 0||e.colIndex===void 0||e.rowIndex<0)return;let t=e.colIndex;const s=this.columns[t];if(s&&f.isUtilityColumn(s)){const l=this.columns.findIndex(o=>!f.isUtilityColumn(o));l>=0&&(t=l)}const r=R(this.cellAnchor,{row:e.rowIndex,col:t}),i=this.ranges.length>0?this.ranges[this.ranges.length-1]:null;return i&&m(i,r)||(this.ranges.length>0?this.ranges[this.ranges.length-1]=r:this.ranges.push(r),this.activeRange=r,this.emit("selection-change",this.#e()),this.requestAfterRender()),!0}onCellMouseUp(e){if(this.isSelectionEnabled()&&this.config.mode==="range"&&this.isDragging)return this.isDragging=!1,!0}#t(){const e=this.gridElement;if(!e)return;const{mode:t}=this.config,s=!!this.config.isSelectable;e.querySelectorAll(".cell").forEach(l=>{l.classList.remove("selected","top","bottom","first","last"),s&&l.removeAttribute("data-selectable")});const i=e.querySelectorAll(".data-grid-row");if(i.forEach(l=>{l.classList.remove("selected","row-focus"),s&&l.removeAttribute("data-selectable")}),t==="row"&&(g.clearCellFocus(e),i.forEach(l=>{const o=l.querySelector(".cell[data-row]"),h=g.getRowIndexFromCell(o);h>=0&&(s&&!this.isRowSelectable(h)&&l.setAttribute("data-selectable","false"),this.selected.has(h)&&l.classList.add("selected","row-focus"))})),(t==="cell"||t==="range")&&s&&e.querySelectorAll(".cell[data-row][data-col]").forEach(o=>{const h=parseInt(o.getAttribute("data-row")??"-1",10),c=parseInt(o.getAttribute("data-col")??"-1",10);h>=0&&c>=0&&(this.isCellSelectable(h,c)||o.setAttribute("data-selectable","false"))}),t==="range"&&this.ranges.length>0){g.clearCellFocus(e);const l=this.activeRange?w(this.activeRange):null,o=this.columns.findIndex(c=>!f.isUtilityColumn(c));this.columns.length-1,e.querySelectorAll(".cell[data-row][data-col]").forEach(c=>{const u=parseInt(c.getAttribute("data-row")??"-1",10),a=parseInt(c.getAttribute("data-col")??"-1",10);if(u>=0&&a>=0){const b=this.columns[a];if(b&&f.isUtilityColumn(b))return;if(p(u,a,this.ranges)&&(c.classList.add("selected"),l)){u===l.startRow&&c.classList.add("top"),u===l.endRow&&c.classList.add("bottom");const q=Math.max(l.startCol,o);a===q&&c.classList.add("first"),a===l.endCol&&c.classList.add("last")}}})}}afterRender(){if(!this.isSelectionEnabled())return;const e=this.gridElement;if(!e)return;const t=e.children[0],{mode:s}=this.config;if(this.pendingKeyboardUpdate&&s==="range"){const{shiftKey:r}=this.pendingKeyboardUpdate;this.pendingKeyboardUpdate=null;const i=this.grid._focusRow,l=this.grid._focusCol;if(r&&this.cellAnchor){const o=R(this.cellAnchor,{row:i,col:l});this.ranges=[o],this.activeRange=o}else r||(this.ranges=[],this.activeRange=null,this.cellAnchor={row:i,col:l});this.emit("selection-change",this.#e())}this.grid.setAttribute("data-selection-mode",s),t&&t.classList.toggle("selecting",this.isDragging),this.#t()}onScrollRender(){this.isSelectionEnabled()&&this.#t()}getSelection(){return{mode:this.config.mode,ranges:this.#e().ranges,anchor:this.cellAnchor}}getSelectedCells(){return x(this.ranges)}isCellSelected(e,t){return p(e,t,this.ranges)}clearSelection(){this.selectedCell=null,this.selected.clear(),this.anchor=null,this.ranges=[],this.activeRange=null,this.cellAnchor=null,this.emit("selection-change",{mode:this.config.mode,ranges:[]}),this.requestAfterRender()}setRanges(e){this.ranges=e.map(t=>({startRow:t.from.row,startCol:t.from.col,endRow:t.to.row,endCol:t.to.col})),this.activeRange=this.ranges.length>0?this.ranges[this.ranges.length-1]:null,this.emit("selection-change",{mode:this.config.mode,ranges:C(this.ranges)}),this.requestAfterRender()}#e(){return k(this.config.mode,{selectedCell:this.selectedCell,selected:this.selected,ranges:this.ranges},this.columns.length)}}d.SelectionPlugin=E,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=selection.umd.js.map