@toolbox-web/grid 1.11.0 → 1.12.1

package/umd/plugins/master-detail.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"master-detail.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/master-detail/master-detail.ts","../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.ts"],"sourcesContent":["/**\n * Master/Detail Core Logic\n *\n * Pure functions for managing detail row expansion state.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Uses `any` for maximum flexibility with user-defined row types.\n\n/**\n * Toggle the expansion state of a detail row.\n * Returns a new Set with the updated state.\n */\nexport function toggleDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  if (newExpanded.has(row)) {\n    newExpanded.delete(row);\n  } else {\n    newExpanded.add(row);\n  }\n  return newExpanded;\n}\n\n/**\n * Expand a detail row.\n * Returns a new Set with the row added.\n */\nexport function expandDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.add(row);\n  return newExpanded;\n}\n\n/**\n * Collapse a detail row.\n * Returns a new Set with the row removed.\n */\nexport function collapseDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.delete(row);\n  return newExpanded;\n}\n\n/**\n * Check if a detail row is expanded.\n */\nexport function isDetailExpanded(expandedRows: Set<object>, row: object): boolean {\n  return expandedRows.has(row);\n}\n\n/**\n * Create a detail element for a given row.\n * The element spans all columns and contains the rendered content.\n */\nexport function createDetailElement(\n  row: any,\n  rowIndex: number,\n  renderer: (row: any, rowIndex: number) => HTMLElement | string,\n  columnCount: number\n): HTMLElement {\n  const detailRow = document.createElement('div');\n  detailRow.className = 'master-detail-row';\n  detailRow.setAttribute('data-detail-for', String(rowIndex));\n  detailRow.setAttribute('role', 'row');\n\n  const detailCell = document.createElement('div');\n  detailCell.className = 'master-detail-cell';\n  detailCell.setAttribute('role', 'cell');\n  detailCell.style.gridColumn = `1 / ${columnCount + 1}`;\n\n  const content = renderer(row, rowIndex);\n  if (typeof content === 'string') {\n    detailCell.innerHTML = content;\n  } else if (content instanceof HTMLElement) {\n    detailCell.appendChild(content);\n  }\n\n  detailRow.appendChild(detailCell);\n  return detailRow;\n}\n","/**\n * Master/Detail Plugin (Class-based)\n *\n * Enables expandable detail rows showing additional content for each row.\n * Animation style is plugin-configured; respects grid-level animation.mode.\n */\n\nimport { evalTemplateString, sanitizeHTML } from '../../core/internal/sanitize';\nimport { BaseGridPlugin, CellClickEvent, GridElement, RowClickEvent } from '../../core/plugin/base-plugin';\nimport { createExpanderColumnConfig, findExpanderColumn, isExpanderColumn } from '../../core/plugin/expander-column';\nimport type { ColumnConfig } from '../../core/types';\nimport {\n  collapseDetailRow,\n  createDetailElement,\n  expandDetailRow,\n  isDetailExpanded,\n  toggleDetailRow,\n} from './master-detail';\nimport styles from './master-detail.css?inline';\nimport type { DetailExpandDetail, ExpandCollapseAnimation, MasterDetailConfig } from './types';\n\n/**\n * Master-Detail Plugin for tbw-grid\n *\n * Creates expandable detail rows that reveal additional content beneath each master row.\n * Perfect for order/line-item UIs, employee/department views, or any scenario where\n * you need to show related data without navigating away.\n *\n * ## Installation\n *\n * ```ts\n * import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `detailRenderer` | `(row) => HTMLElement \\| string` | required | Render function for detail content |\n * | `expandOnRowClick` | `boolean` | `false` | Expand when clicking the row |\n * | `detailHeight` | `number \\| 'auto'` | `'auto'` | Fixed height or auto-size |\n * | `collapseOnClickOutside` | `boolean` | `false` | Collapse when clicking outside |\n * | `showExpandColumn` | `boolean` | `true` | Show expand/collapse column |\n * | `animation` | `false \\| 'slide' \\| 'fade'` | `'slide'` | Animation style |\n *\n * ## Programmatic API\n *\n * | Method | Signature | Description |\n * |--------|-----------|-------------|\n * | `expandRow` | `(rowIndex) => void` | Expand a specific row |\n * | `collapseRow` | `(rowIndex) => void` | Collapse a specific row |\n * | `toggleRow` | `(rowIndex) => void` | Toggle row expansion |\n * | `expandAll` | `() => void` | Expand all rows |\n * | `collapseAll` | `() => void` | Collapse all rows |\n * | `isRowExpanded` | `(rowIndex) => boolean` | Check if row is expanded |\n *\n * ## CSS Custom Properties\n *\n * | Property | Default | Description |\n * |----------|---------|-------------|\n * | `--tbw-master-detail-bg` | `var(--tbw-color-row-alt)` | Detail row background |\n * | `--tbw-master-detail-border` | `var(--tbw-color-border)` | Detail row border |\n * | `--tbw-detail-padding` | `1em` | Detail content padding |\n * | `--tbw-animation-duration` | `200ms` | Expand/collapse animation |\n *\n * @example Basic Master-Detail with HTML Template\n * ```ts\n * import '@toolbox-web/grid';\n * import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';\n *\n * grid.gridConfig = {\n *   columns: [\n *     { field: 'orderId', header: 'Order ID' },\n *     { field: 'customer', header: 'Customer' },\n *     { field: 'total', header: 'Total', type: 'currency' },\n *   ],\n *   plugins: [\n *     new MasterDetailPlugin({\n *       detailRenderer: (row) => `\n *         <div class=\"order-details\">\n *           <h4>Order Items</h4>\n *           <ul>${row.items.map(i => `<li>${i.name} - $${i.price}</li>`).join('')}</ul>\n *         </div>\n *       `,\n *     }),\n *   ],\n * };\n * ```\n *\n * @example Nested Grid in Detail\n * ```ts\n * new MasterDetailPlugin({\n *   detailRenderer: (row) => {\n *     const childGrid = document.createElement('tbw-grid');\n *     childGrid.style.height = '200px';\n *     childGrid.gridConfig = { columns: [...] };\n *     childGrid.rows = row.items || [];\n *     return childGrid;\n *   },\n * })\n * ```\n *\n * @see {@link MasterDetailConfig} for all configuration options\n * @see {@link DetailExpandDetail} for expand/collapse event details\n *\n * @internal Extends BaseGridPlugin\n */\nexport class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfig> {\n  /** @internal */\n  readonly name = 'masterDetail';\n  /** @internal */\n  override readonly styles = styles;\n\n  /** @internal */\n  protected override get defaultConfig(): Partial<MasterDetailConfig> {\n    return {\n      detailHeight: 'auto',\n      expandOnRowClick: false,\n      collapseOnClickOutside: false,\n      // Note: showExpandColumn is intentionally NOT defaulted here.\n      // If undefined, processColumns() adds expander only when detailRenderer is provided.\n      // Set to true for framework adapters that register renderers asynchronously.\n      animation: 'slide', // Plugin's own default\n    };\n  }\n\n  // #region Light DOM Parsing\n\n  /**\n   * Called when plugin is attached to the grid.\n   * Parses light DOM for `<tbw-grid-detail>` elements to configure detail templates.\n   * @internal\n   */\n  override attach(grid: GridElement): void {\n    super.attach(grid);\n    this.parseLightDomDetail();\n  }\n\n  /**\n   * Parse `<tbw-grid-detail>` elements from the grid's light DOM.\n   *\n   * Allows declarative configuration:\n   * ```html\n   * <tbw-grid [rows]=\"data\">\n   *   <tbw-grid-detail>\n   *     <div class=\"detail-content\">\n   *       <p>Name: {{ row.name }}</p>\n   *       <p>Email: {{ row.email }}</p>\n   *     </div>\n   *   </tbw-grid-detail>\n   * </tbw-grid>\n   * ```\n   *\n   * Attributes:\n   * - `animation`: 'slide' | 'fade' | 'false' (default: 'slide')\n   * - `show-expand-column`: 'true' | 'false' (default: 'true')\n   * - `expand-on-row-click`: 'true' | 'false' (default: 'false')\n   * - `collapse-on-click-outside`: 'true' | 'false' (default: 'false')\n   * - `height`: number (pixels) or 'auto' (default: 'auto')\n   */\n  private parseLightDomDetail(): void {\n    const gridEl = this.grid as unknown as Element;\n    if (!gridEl || typeof gridEl.querySelector !== 'function') return;\n\n    const detailEl = gridEl.querySelector('tbw-grid-detail');\n    if (!detailEl) return;\n\n    // Check if a framework adapter wants to handle this element\n    // (e.g., Angular adapter intercepts for ng-template rendering)\n    const gridWithAdapter = gridEl as unknown as {\n      __frameworkAdapter?: {\n        parseDetailElement?: (el: Element) => ((row: any, rowIndex: number) => HTMLElement | string) | undefined;\n      };\n    };\n    if (gridWithAdapter.__frameworkAdapter?.parseDetailElement) {\n      const adapterRenderer = gridWithAdapter.__frameworkAdapter.parseDetailElement(detailEl);\n      if (adapterRenderer) {\n        this.config = { ...this.config, detailRenderer: adapterRenderer };\n        return;\n      }\n    }\n\n    // Parse attributes for configuration\n    const animation = detailEl.getAttribute('animation');\n    const showExpandColumn = detailEl.getAttribute('show-expand-column');\n    const expandOnRowClick = detailEl.getAttribute('expand-on-row-click');\n    const collapseOnClickOutside = detailEl.getAttribute('collapse-on-click-outside');\n    const heightAttr = detailEl.getAttribute('height');\n\n    const configUpdates: Partial<MasterDetailConfig> = {};\n\n    if (animation !== null) {\n      configUpdates.animation = animation === 'false' ? false : (animation as 'slide' | 'fade');\n    }\n    if (showExpandColumn !== null) {\n      configUpdates.showExpandColumn = showExpandColumn !== 'false';\n    }\n    if (expandOnRowClick !== null) {\n      configUpdates.expandOnRowClick = expandOnRowClick === 'true';\n    }\n    if (collapseOnClickOutside !== null) {\n      configUpdates.collapseOnClickOutside = collapseOnClickOutside === 'true';\n    }\n    if (heightAttr !== null) {\n      configUpdates.detailHeight = heightAttr === 'auto' ? 'auto' : parseInt(heightAttr, 10);\n    }\n\n    // Get template content from innerHTML\n    const templateHTML = detailEl.innerHTML.trim();\n    if (templateHTML && !this.config.detailRenderer) {\n      // Create a template-based renderer using the inner HTML\n      configUpdates.detailRenderer = (row: any, _rowIndex: number): string => {\n        // Evaluate template expressions like {{ row.field }}\n        const evaluated = evalTemplateString(templateHTML, { value: row, row });\n        // Sanitize the result to prevent XSS\n        return sanitizeHTML(evaluated);\n      };\n    }\n\n    // Merge updates into config\n    if (Object.keys(configUpdates).length > 0) {\n      this.config = { ...this.config, ...configUpdates };\n    }\n  }\n\n  // #endregion\n\n  // #region Animation Helpers\n\n  /**\n   * Get expand/collapse animation style from plugin config.\n   * Uses base class isAnimationEnabled to respect grid-level settings.\n   */\n  private get animationStyle(): ExpandCollapseAnimation {\n    if (!this.isAnimationEnabled) return false;\n    return this.config.animation ?? 'slide';\n  }\n\n  /**\n   * Apply expand animation to a detail element.\n   */\n  private animateExpand(detailEl: HTMLElement): void {\n    if (!this.isAnimationEnabled || this.animationStyle === false) return;\n\n    detailEl.classList.add('tbw-expanding');\n    detailEl.addEventListener(\n      'animationend',\n      () => {\n        detailEl.classList.remove('tbw-expanding');\n      },\n      { once: true },\n    );\n  }\n\n  /**\n   * Apply collapse animation to a detail element and remove after animation.\n   */\n  private animateCollapse(detailEl: HTMLElement, onComplete: () => void): void {\n    if (!this.isAnimationEnabled || this.animationStyle === false) {\n      onComplete();\n      return;\n    }\n\n    detailEl.classList.add('tbw-collapsing');\n    const cleanup = () => {\n      detailEl.classList.remove('tbw-collapsing');\n      onComplete();\n    };\n    detailEl.addEventListener('animationend', cleanup, { once: true });\n    // Fallback timeout in case animation doesn't fire\n    setTimeout(cleanup, this.animationDuration + 50);\n  }\n\n  // #endregion\n\n  // #region Internal State\n  private expandedRows: Set<any> = new Set();\n  private detailElements: Map<any, HTMLElement> = new Map();\n\n  /** Default height for detail rows when not configured */\n  private static readonly DEFAULT_DETAIL_HEIGHT = 150;\n\n  /**\n   * Get the estimated height for a detail row.\n   */\n  private getDetailHeight(row: any): number {\n    const detailEl = this.detailElements.get(row);\n    if (detailEl) return detailEl.offsetHeight;\n    return typeof this.config?.detailHeight === 'number'\n      ? this.config.detailHeight\n      : MasterDetailPlugin.DEFAULT_DETAIL_HEIGHT;\n  }\n\n  /**\n   * Toggle a row's detail and emit event.\n   */\n  private toggleAndEmit(row: any, rowIndex: number): void {\n    this.expandedRows = toggleDetailRow(this.expandedRows, row as object);\n    this.emit<DetailExpandDetail>('detail-expand', {\n      rowIndex,\n      row: row as Record<string, unknown>,\n      expanded: this.expandedRows.has(row as object),\n    });\n    this.requestRender();\n  }\n  // #endregion\n\n  // #region Lifecycle\n\n  /** @internal */\n  override detach(): void {\n    this.expandedRows.clear();\n    this.detailElements.clear();\n  }\n  // #endregion\n\n  // #region Hooks\n\n  /** @internal */\n  override processColumns(columns: readonly ColumnConfig[]): ColumnConfig[] {\n    // Determine whether to add the expander column:\n    // 1. If showExpandColumn === false: never add (explicit opt-out)\n    // 2. If showExpandColumn === true: always add (explicit opt-in, for framework adapters)\n    // 3. If showExpandColumn is undefined: add only if detailRenderer is provided\n    //\n    // This supports React/Angular adapters which register renderers asynchronously via light DOM.\n    // They must set showExpandColumn: true to get the column immediately, avoiding layout shift.\n    const shouldAddExpander =\n      this.config.showExpandColumn === true || (this.config.showExpandColumn !== false && !!this.config.detailRenderer);\n\n    if (!shouldAddExpander) {\n      return [...columns];\n    }\n\n    const cols = [...columns];\n\n    // Check if expander column already exists (from this or another plugin)\n    const existingExpander = findExpanderColumn(cols);\n    if (existingExpander) {\n      // Another plugin already added an expander column - don't add duplicate\n      // Our expand logic will be handled via onCellClick on the expander column\n      return cols;\n    }\n\n    // Create dedicated expander column that stays fixed at position 0\n    const expanderCol = createExpanderColumnConfig(this.name);\n    expanderCol.viewRenderer = (renderCtx) => {\n      const { row } = renderCtx;\n      const isExpanded = this.expandedRows.has(row as object);\n\n      const container = document.createElement('span');\n      container.className = 'master-detail-expander expander-cell';\n\n      // Expand/collapse toggle icon\n      const toggle = document.createElement('span');\n      toggle.className = `master-detail-toggle${isExpanded ? ' expanded' : ''}`;\n      // Use grid-level icons (fall back to defaults)\n      this.setIcon(toggle, this.resolveIcon(isExpanded ? 'collapse' : 'expand'));\n      // role=\"button\" is required for aria-expanded to be valid\n      toggle.setAttribute('role', 'button');\n      toggle.setAttribute('tabindex', '0');\n      toggle.setAttribute('aria-expanded', String(isExpanded));\n      toggle.setAttribute('aria-label', isExpanded ? 'Collapse details' : 'Expand details');\n      container.appendChild(toggle);\n\n      return container;\n    };\n\n    // Prepend expander column to ensure it's always first\n    return [expanderCol, ...cols];\n  }\n\n  /** @internal */\n  override onRowClick(event: RowClickEvent): boolean | void {\n    if (!this.config.expandOnRowClick || !this.config.detailRenderer) return;\n    this.toggleAndEmit(event.row, event.rowIndex);\n    return false;\n  }\n\n  /** @internal */\n  override onCellClick(event: CellClickEvent): boolean | void {\n    // Handle click on master-detail toggle icon (same pattern as TreePlugin)\n    const target = event.originalEvent?.target as HTMLElement;\n    if (target?.classList.contains('master-detail-toggle')) {\n      this.toggleAndEmit(event.row, event.rowIndex);\n      return true; // Prevent default handling\n    }\n\n    // Sync detail rows after cell click triggers refreshVirtualWindow\n    // This runs in microtask to ensure DOM updates are complete\n    if (this.expandedRows.size > 0) {\n      queueMicrotask(() => this.#syncDetailRows());\n    }\n    return; // Don't prevent default\n  }\n\n  /** @internal */\n  override onKeyDown(event: KeyboardEvent): boolean | void {\n    // SPACE toggles expansion when focus is on the expander column\n    if (event.key !== ' ') return;\n\n    const focusCol = this.grid._focusCol;\n    const focusRow = this.grid._focusRow;\n    const column = this.columns[focusCol];\n\n    // Only handle SPACE on expander column\n    if (!column || !isExpanderColumn(column)) return;\n\n    const row = this.rows[focusRow];\n    if (!row) return;\n\n    event.preventDefault();\n    this.toggleAndEmit(row, focusRow);\n\n    // Restore focus styling after render completes via render pipeline\n    this.requestRenderWithFocus();\n    return true;\n  }\n\n  /** @internal */\n  override afterRender(): void {\n    this.#syncDetailRows();\n  }\n\n  /**\n   * Called on scroll to sync detail elements with visible rows.\n   * Removes details for rows that scrolled out of view and reattaches for visible rows.\n   * @internal\n   */\n  override onScrollRender(): void {\n    if (!this.config.detailRenderer || this.expandedRows.size === 0) return;\n    // Full sync needed on scroll to clean up orphaned details\n    this.#syncDetailRows();\n  }\n\n  /**\n   * Full sync of detail rows - cleans up stale elements and creates new ones.\n   * Detail rows are inserted as siblings AFTER their master row to survive row rebuilds.\n   */\n  #syncDetailRows(): void {\n    if (!this.config.detailRenderer) return;\n\n    const body = this.gridElement?.querySelector('.rows');\n    if (!body) return;\n\n    // Build a map of row index -> row element for visible rows\n    const visibleRowMap = new Map<number, Element>();\n    const dataRows = body.querySelectorAll('.data-grid-row');\n    const columnCount = this.columns.length;\n\n    for (const rowEl of dataRows) {\n      const firstCell = rowEl.querySelector('.cell[data-row]');\n      const rowIndex = firstCell ? parseInt(firstCell.getAttribute('data-row') ?? '-1', 10) : -1;\n      if (rowIndex >= 0) {\n        visibleRowMap.set(rowIndex, rowEl);\n      }\n    }\n\n    // Remove detail rows whose parent row is no longer visible or no longer expanded\n    const existingDetails = body.querySelectorAll('.master-detail-row');\n    for (const detailEl of existingDetails) {\n      const forIndex = parseInt(detailEl.getAttribute('data-detail-for') ?? '-1', 10);\n      const row = forIndex >= 0 ? this.rows[forIndex] : undefined;\n      const isStillExpanded = row && this.expandedRows.has(row);\n      const isRowVisible = visibleRowMap.has(forIndex);\n\n      // Remove detail if not expanded or if parent row scrolled out\n      if (!isStillExpanded || !isRowVisible) {\n        detailEl.remove();\n        if (row) this.detailElements.delete(row);\n      }\n    }\n\n    // Insert detail rows for expanded rows that are visible\n    for (const [rowIndex, rowEl] of visibleRowMap) {\n      const row = this.rows[rowIndex];\n      if (!row || !this.expandedRows.has(row)) continue;\n\n      // Check if detail already exists for this row\n      const existingDetail = this.detailElements.get(row);\n      if (existingDetail) {\n        // Ensure it's positioned correctly (as next sibling of row element)\n        if (existingDetail.previousElementSibling !== rowEl) {\n          rowEl.after(existingDetail);\n        }\n        continue;\n      }\n\n      // Create new detail element\n      const detailEl = createDetailElement(row, rowIndex, this.config.detailRenderer, columnCount);\n\n      if (typeof this.config.detailHeight === 'number') {\n        detailEl.style.height = `${this.config.detailHeight}px`;\n      }\n\n      // Insert as sibling after the row element (not as child)\n      rowEl.after(detailEl);\n      this.detailElements.set(row, detailEl);\n\n      // Apply expand animation\n      this.animateExpand(detailEl);\n    }\n  }\n\n  /**\n   * Return total extra height from all expanded detail rows.\n   * Used by grid virtualization to adjust scrollbar height.\n   */\n  override getExtraHeight(): number {\n    let totalHeight = 0;\n    for (const row of this.expandedRows) {\n      totalHeight += this.getDetailHeight(row);\n    }\n    return totalHeight;\n  }\n\n  /**\n   * Return extra height that appears before a given row index.\n   * This is the sum of heights of all expanded details whose parent row is before the given index.\n   */\n  override getExtraHeightBefore(beforeRowIndex: number): number {\n    let totalHeight = 0;\n    for (const row of this.expandedRows) {\n      const rowIndex = this.rows.indexOf(row);\n      // Include detail if it's for a row before the given index\n      if (rowIndex >= 0 && rowIndex < beforeRowIndex) {\n        totalHeight += this.getDetailHeight(row);\n      }\n    }\n    return totalHeight;\n  }\n\n  /**\n   * Adjust the virtualization start index to keep expanded row visible while its detail is visible.\n   * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.\n   */\n  override adjustVirtualStart(start: number, scrollTop: number, rowHeight: number): number {\n    if (this.expandedRows.size === 0) return start;\n\n    // Build sorted list of expanded row indices for cumulative height calculation\n    const expandedIndices: Array<{ index: number; row: any }> = [];\n    for (const row of this.expandedRows) {\n      const index = this.rows.indexOf(row);\n      if (index >= 0) {\n        expandedIndices.push({ index, row });\n      }\n    }\n    expandedIndices.sort((a, b) => a.index - b.index);\n\n    let minStart = start;\n\n    // Calculate actual scroll position for each expanded row,\n    // accounting for cumulative detail heights before it\n    let cumulativeExtraHeight = 0;\n\n    for (const { index: rowIndex, row } of expandedIndices) {\n      // Actual position includes all detail heights before this row\n      const actualRowTop = rowIndex * rowHeight + cumulativeExtraHeight;\n      const detailHeight = this.getDetailHeight(row);\n      const actualDetailBottom = actualRowTop + rowHeight + detailHeight;\n\n      // Update cumulative height for next iteration\n      cumulativeExtraHeight += detailHeight;\n\n      // Skip rows that are at or after the calculated start\n      if (rowIndex >= start) continue;\n\n      // If any part of the detail is still visible (below the scroll position),\n      // we need to keep the parent row in the render range\n      if (actualDetailBottom > scrollTop) {\n        if (rowIndex < minStart) {\n          minStart = rowIndex;\n        }\n      }\n    }\n\n    return minStart;\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Expand the detail row at the given index.\n   * @param rowIndex - Index of the row to expand\n   */\n  expand(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = expandDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Collapse the detail row at the given index.\n   * @param rowIndex - Index of the row to collapse\n   */\n  collapse(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = collapseDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Toggle the detail row at the given index.\n   * @param rowIndex - Index of the row to toggle\n   */\n  toggle(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = toggleDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Check if the detail row at the given index is expanded.\n   * @param rowIndex - Index of the row to check\n   * @returns Whether the detail row is expanded\n   */\n  isExpanded(rowIndex: number): boolean {\n    const row = this.rows[rowIndex];\n    return row ? isDetailExpanded(this.expandedRows, row) : false;\n  }\n\n  /**\n   * Expand all detail rows.\n   */\n  expandAll(): void {\n    for (const row of this.rows) {\n      this.expandedRows.add(row);\n    }\n    this.requestRender();\n  }\n\n  /**\n   * Collapse all detail rows.\n   */\n  collapseAll(): void {\n    this.expandedRows.clear();\n    this.requestRender();\n  }\n\n  /**\n   * Get the indices of all expanded rows.\n   * @returns Array of row indices that are expanded\n   */\n  getExpandedRows(): number[] {\n    const indices: number[] = [];\n    for (const row of this.expandedRows) {\n      const idx = this.rows.indexOf(row);\n      if (idx >= 0) indices.push(idx);\n    }\n    return indices;\n  }\n\n  /**\n   * Get the detail element for a specific row.\n   * @param rowIndex - Index of the row\n   * @returns The detail HTMLElement or undefined\n   */\n  getDetailElement(rowIndex: number): HTMLElement | undefined {\n    const row = this.rows[rowIndex];\n    return row ? this.detailElements.get(row) : undefined;\n  }\n\n  /**\n   * Re-parse light DOM to refresh the detail renderer.\n   * Call this after framework templates are registered (e.g., Angular ngAfterContentInit).\n   *\n   * This allows frameworks to register templates asynchronously and then\n   * update the plugin's detailRenderer.\n   */\n  refreshDetailRenderer(): void {\n    // Force re-parse by temporarily clearing the renderer\n    const currentRenderer = this.config.detailRenderer;\n    this.config = { ...this.config, detailRenderer: undefined };\n    this.parseLightDomDetail();\n\n    // If no new renderer was found, restore the original\n    if (!this.config.detailRenderer && currentRenderer) {\n      this.config = { ...this.config, detailRenderer: currentRenderer };\n    }\n\n    // Request a COLUMNS phase re-render so processColumns runs again with the new detailRenderer\n    // This ensures the expand toggle is added to the first column.\n    // Must use refreshColumns() (COLUMNS phase) not requestRender() (ROWS phase)\n    // because processColumns only runs at COLUMNS phase or higher.\n    if (this.config.detailRenderer) {\n      const grid = this.grid as unknown as { refreshColumns?: () => void };\n      if (typeof grid.refreshColumns === 'function') {\n        grid.refreshColumns();\n      } else {\n        // Fallback to requestRender if refreshColumns not available\n        this.requestRender();\n      }\n    }\n  }\n  // #endregion\n}\n"],"names":["toggleDetailRow","expandedRows","row","newExpanded","expandDetailRow","collapseDetailRow","isDetailExpanded","createDetailElement","rowIndex","renderer","columnCount","detailRow","detailCell","content","MasterDetailPlugin","BaseGridPlugin","styles","grid","gridEl","detailEl","gridWithAdapter","adapterRenderer","animation","showExpandColumn","expandOnRowClick","collapseOnClickOutside","heightAttr","configUpdates","templateHTML","_rowIndex","evaluated","evalTemplateString","sanitizeHTML","onComplete","cleanup","columns","cols","findExpanderColumn","expanderCol","createExpanderColumnConfig","renderCtx","isExpanded","container","toggle","event","#syncDetailRows","focusCol","focusRow","column","isExpanderColumn","body","visibleRowMap","dataRows","rowEl","firstCell","existingDetails","forIndex","isStillExpanded","isRowVisible","existingDetail","totalHeight","beforeRowIndex","start","scrollTop","rowHeight","expandedIndices","index","a","b","minStart","cumulativeExtraHeight","actualRowTop","detailHeight","actualDetailBottom","indices","idx","currentRenderer"],"mappings":"wfAaO,SAASA,EAAgBC,EAA2BC,EAA0B,CACnF,MAAMC,EAAc,IAAI,IAAIF,CAAY,EACxC,OAAIE,EAAY,IAAID,CAAG,EACrBC,EAAY,OAAOD,CAAG,EAEtBC,EAAY,IAAID,CAAG,EAEdC,CACT,CAMO,SAASC,EAAgBH,EAA2BC,EAA0B,CACnF,MAAMC,EAAc,IAAI,IAAIF,CAAY,EACxC,OAAAE,EAAY,IAAID,CAAG,EACZC,CACT,CAMO,SAASE,EAAkBJ,EAA2BC,EAA0B,CACrF,MAAMC,EAAc,IAAI,IAAIF,CAAY,EACxC,OAAAE,EAAY,OAAOD,CAAG,EACfC,CACT,CAKO,SAASG,EAAiBL,EAA2BC,EAAsB,CAChF,OAAOD,EAAa,IAAIC,CAAG,CAC7B,CAMO,SAASK,EACdL,EACAM,EACAC,EACAC,EACa,CACb,MAAMC,EAAY,SAAS,cAAc,KAAK,EAC9CA,EAAU,UAAY,oBACtBA,EAAU,aAAa,kBAAmB,OAAOH,CAAQ,CAAC,EAC1DG,EAAU,aAAa,OAAQ,KAAK,EAEpC,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/CA,EAAW,UAAY,qBACvBA,EAAW,aAAa,OAAQ,MAAM,EACtCA,EAAW,MAAM,WAAa,OAAOF,EAAc,CAAC,GAEpD,MAAMG,EAAUJ,EAASP,EAAKM,CAAQ,EACtC,OAAI,OAAOK,GAAY,SACrBD,EAAW,UAAYC,EACdA,aAAmB,aAC5BD,EAAW,YAAYC,CAAO,EAGhCF,EAAU,YAAYC,CAAU,EACzBD,CACT,0oDC4BO,MAAMG,UAA2BC,EAAAA,cAAmC,CAEhE,KAAO,eAEE,OAASC,EAG3B,IAAuB,eAA6C,CAClE,MAAO,CACL,aAAc,OACd,iBAAkB,GAClB,uBAAwB,GAIxB,UAAW,OAAA,CAEf,CASS,OAAOC,EAAyB,CACvC,MAAM,OAAOA,CAAI,EACjB,KAAK,oBAAA,CACP,CAwBQ,qBAA4B,CAClC,MAAMC,EAAS,KAAK,KACpB,GAAI,CAACA,GAAU,OAAOA,EAAO,eAAkB,WAAY,OAE3D,MAAMC,EAAWD,EAAO,cAAc,iBAAiB,EACvD,GAAI,CAACC,EAAU,OAIf,MAAMC,EAAkBF,EAKxB,GAAIE,EAAgB,oBAAoB,mBAAoB,CAC1D,MAAMC,EAAkBD,EAAgB,mBAAmB,mBAAmBD,CAAQ,EACtF,GAAIE,EAAiB,CACnB,KAAK,OAAS,CAAE,GAAG,KAAK,OAAQ,eAAgBA,CAAA,EAChD,MACF,CACF,CAGA,MAAMC,EAAYH,EAAS,aAAa,WAAW,EAC7CI,EAAmBJ,EAAS,aAAa,oBAAoB,EAC7DK,EAAmBL,EAAS,aAAa,qBAAqB,EAC9DM,EAAyBN,EAAS,aAAa,2BAA2B,EAC1EO,EAAaP,EAAS,aAAa,QAAQ,EAE3CQ,EAA6C,CAAA,EAE/CL,IAAc,OAChBK,EAAc,UAAYL,IAAc,QAAU,GAASA,GAEzDC,IAAqB,OACvBI,EAAc,iBAAmBJ,IAAqB,SAEpDC,IAAqB,OACvBG,EAAc,iBAAmBH,IAAqB,QAEpDC,IAA2B,OAC7BE,EAAc,uBAAyBF,IAA2B,QAEhEC,IAAe,OACjBC,EAAc,aAAeD,IAAe,OAAS,OAAS,SAASA,EAAY,EAAE,GAIvF,MAAME,EAAeT,EAAS,UAAU,KAAA,EACpCS,GAAgB,CAAC,KAAK,OAAO,iBAE/BD,EAAc,eAAiB,CAACzB,EAAU2B,IAA8B,CAEtE,MAAMC,EAAYC,EAAAA,mBAAmBH,EAAc,CAAE,MAAO1B,EAAK,IAAAA,EAAK,EAEtE,OAAO8B,EAAAA,aAAaF,CAAS,CAC/B,GAIE,OAAO,KAAKH,CAAa,EAAE,OAAS,IACtC,KAAK,OAAS,CAAE,GAAG,KAAK,OAAQ,GAAGA,CAAA,EAEvC,CAUA,IAAY,gBAA0C,CACpD,OAAK,KAAK,mBACH,KAAK,OAAO,WAAa,QADK,EAEvC,CAKQ,cAAcR,EAA6B,CAC7C,CAAC,KAAK,oBAAsB,KAAK,iBAAmB,KAExDA,EAAS,UAAU,IAAI,eAAe,EACtCA,EAAS,iBACP,eACA,IAAM,CACJA,EAAS,UAAU,OAAO,eAAe,CAC3C,EACA,CAAE,KAAM,EAAA,CAAK,EAEjB,CAKQ,gBAAgBA,EAAuBc,EAA8B,CAC3E,GAAI,CAAC,KAAK,oBAAsB,KAAK,iBAAmB,GAAO,CAC7DA,EAAA,EACA,MACF,CAEAd,EAAS,UAAU,IAAI,gBAAgB,EACvC,MAAMe,EAAU,IAAM,CACpBf,EAAS,UAAU,OAAO,gBAAgB,EAC1Cc,EAAA,CACF,EACAd,EAAS,iBAAiB,eAAgBe,EAAS,CAAE,KAAM,GAAM,EAEjE,WAAWA,EAAS,KAAK,kBAAoB,EAAE,CACjD,CAKQ,iBAA6B,IAC7B,mBAA4C,IAGpD,OAAwB,sBAAwB,IAKxC,gBAAgBhC,EAAkB,CACxC,MAAMiB,EAAW,KAAK,eAAe,IAAIjB,CAAG,EAC5C,OAAIiB,EAAiBA,EAAS,aACvB,OAAO,KAAK,QAAQ,cAAiB,SACxC,KAAK,OAAO,aACZL,EAAmB,qBACzB,CAKQ,cAAcZ,EAAUM,EAAwB,CACtD,KAAK,aAAeR,EAAgB,KAAK,aAAcE,CAAa,EACpE,KAAK,KAAyB,gBAAiB,CAC7C,SAAAM,EACA,IAAAN,EACA,SAAU,KAAK,aAAa,IAAIA,CAAa,CAAA,CAC9C,EACD,KAAK,cAAA,CACP,CAMS,QAAe,CACtB,KAAK,aAAa,MAAA,EAClB,KAAK,eAAe,MAAA,CACtB,CAMS,eAAeiC,EAAkD,CAWxE,GAAI,EAFF,KAAK,OAAO,mBAAqB,IAAS,KAAK,OAAO,mBAAqB,IAAS,CAAC,CAAC,KAAK,OAAO,gBAGlG,MAAO,CAAC,GAAGA,CAAO,EAGpB,MAAMC,EAAO,CAAC,GAAGD,CAAO,EAIxB,GADyBE,EAAAA,mBAAmBD,CAAI,EAI9C,OAAOA,EAIT,MAAME,EAAcC,EAAAA,2BAA2B,KAAK,IAAI,EACxD,OAAAD,EAAY,aAAgBE,GAAc,CACxC,KAAM,CAAE,IAAAtC,GAAQsC,EACVC,EAAa,KAAK,aAAa,IAAIvC,CAAa,EAEhDwC,EAAY,SAAS,cAAc,MAAM,EAC/CA,EAAU,UAAY,uCAGtB,MAAMC,EAAS,SAAS,cAAc,MAAM,EAC5C,OAAAA,EAAO,UAAY,uBAAuBF,EAAa,YAAc,EAAE,GAEvE,KAAK,QAAQE,EAAQ,KAAK,YAAYF,EAAa,WAAa,QAAQ,CAAC,EAEzEE,EAAO,aAAa,OAAQ,QAAQ,EACpCA,EAAO,aAAa,WAAY,GAAG,EACnCA,EAAO,aAAa,gBAAiB,OAAOF,CAAU,CAAC,EACvDE,EAAO,aAAa,aAAcF,EAAa,mBAAqB,gBAAgB,EACpFC,EAAU,YAAYC,CAAM,EAErBD,CACT,EAGO,CAACJ,EAAa,GAAGF,CAAI,CAC9B,CAGS,WAAWQ,EAAsC,CACxD,GAAI,GAAC,KAAK,OAAO,kBAAoB,CAAC,KAAK,OAAO,gBAClD,YAAK,cAAcA,EAAM,IAAKA,EAAM,QAAQ,EACrC,EACT,CAGS,YAAYA,EAAuC,CAG1D,GADeA,EAAM,eAAe,QACxB,UAAU,SAAS,sBAAsB,EACnD,YAAK,cAAcA,EAAM,IAAKA,EAAM,QAAQ,EACrC,GAKL,KAAK,aAAa,KAAO,GAC3B,eAAe,IAAM,KAAKC,IAAiB,CAG/C,CAGS,UAAUD,EAAsC,CAEvD,GAAIA,EAAM,MAAQ,IAAK,OAEvB,MAAME,EAAW,KAAK,KAAK,UACrBC,EAAW,KAAK,KAAK,UACrBC,EAAS,KAAK,QAAQF,CAAQ,EAGpC,GAAI,CAACE,GAAU,CAACC,EAAAA,iBAAiBD,CAAM,EAAG,OAE1C,MAAM9C,EAAM,KAAK,KAAK6C,CAAQ,EAC9B,GAAK7C,EAEL,OAAA0C,EAAM,eAAA,EACN,KAAK,cAAc1C,EAAK6C,CAAQ,EAGhC,KAAK,uBAAA,EACE,EACT,CAGS,aAAoB,CAC3B,KAAKF,GAAA,CACP,CAOS,gBAAuB,CAC1B,CAAC,KAAK,OAAO,gBAAkB,KAAK,aAAa,OAAS,GAE9D,KAAKA,GAAA,CACP,CAMAA,IAAwB,CACtB,GAAI,CAAC,KAAK,OAAO,eAAgB,OAEjC,MAAMK,EAAO,KAAK,aAAa,cAAc,OAAO,EACpD,GAAI,CAACA,EAAM,OAGX,MAAMC,MAAoB,IACpBC,EAAWF,EAAK,iBAAiB,gBAAgB,EACjDxC,EAAc,KAAK,QAAQ,OAEjC,UAAW2C,KAASD,EAAU,CAC5B,MAAME,EAAYD,EAAM,cAAc,iBAAiB,EACjD7C,EAAW8C,EAAY,SAASA,EAAU,aAAa,UAAU,GAAK,KAAM,EAAE,EAAI,GACpF9C,GAAY,GACd2C,EAAc,IAAI3C,EAAU6C,CAAK,CAErC,CAGA,MAAME,EAAkBL,EAAK,iBAAiB,oBAAoB,EAClE,UAAW/B,KAAYoC,EAAiB,CACtC,MAAMC,EAAW,SAASrC,EAAS,aAAa,iBAAiB,GAAK,KAAM,EAAE,EACxEjB,EAAMsD,GAAY,EAAI,KAAK,KAAKA,CAAQ,EAAI,OAC5CC,EAAkBvD,GAAO,KAAK,aAAa,IAAIA,CAAG,EAClDwD,EAAeP,EAAc,IAAIK,CAAQ,GAG3C,CAACC,GAAmB,CAACC,KACvBvC,EAAS,OAAA,EACLjB,GAAK,KAAK,eAAe,OAAOA,CAAG,EAE3C,CAGA,SAAW,CAACM,EAAU6C,CAAK,IAAKF,EAAe,CAC7C,MAAMjD,EAAM,KAAK,KAAKM,CAAQ,EAC9B,GAAI,CAACN,GAAO,CAAC,KAAK,aAAa,IAAIA,CAAG,EAAG,SAGzC,MAAMyD,EAAiB,KAAK,eAAe,IAAIzD,CAAG,EAClD,GAAIyD,EAAgB,CAEdA,EAAe,yBAA2BN,GAC5CA,EAAM,MAAMM,CAAc,EAE5B,QACF,CAGA,MAAMxC,EAAWZ,EAAoBL,EAAKM,EAAU,KAAK,OAAO,eAAgBE,CAAW,EAEvF,OAAO,KAAK,OAAO,cAAiB,WACtCS,EAAS,MAAM,OAAS,GAAG,KAAK,OAAO,YAAY,MAIrDkC,EAAM,MAAMlC,CAAQ,EACpB,KAAK,eAAe,IAAIjB,EAAKiB,CAAQ,EAGrC,KAAK,cAAcA,CAAQ,CAC7B,CACF,CAMS,gBAAyB,CAChC,IAAIyC,EAAc,EAClB,UAAW1D,KAAO,KAAK,aACrB0D,GAAe,KAAK,gBAAgB1D,CAAG,EAEzC,OAAO0D,CACT,CAMS,qBAAqBC,EAAgC,CAC5D,IAAID,EAAc,EAClB,UAAW1D,KAAO,KAAK,aAAc,CACnC,MAAMM,EAAW,KAAK,KAAK,QAAQN,CAAG,EAElCM,GAAY,GAAKA,EAAWqD,IAC9BD,GAAe,KAAK,gBAAgB1D,CAAG,EAE3C,CACA,OAAO0D,CACT,CAMS,mBAAmBE,EAAeC,EAAmBC,EAA2B,CACvF,GAAI,KAAK,aAAa,OAAS,EAAG,OAAOF,EAGzC,MAAMG,EAAsD,CAAA,EAC5D,UAAW/D,KAAO,KAAK,aAAc,CACnC,MAAMgE,EAAQ,KAAK,KAAK,QAAQhE,CAAG,EAC/BgE,GAAS,GACXD,EAAgB,KAAK,CAAE,MAAAC,EAAO,IAAAhE,CAAA,CAAK,CAEvC,CACA+D,EAAgB,KAAK,CAACE,EAAGC,IAAMD,EAAE,MAAQC,EAAE,KAAK,EAEhD,IAAIC,EAAWP,EAIXQ,EAAwB,EAE5B,SAAW,CAAE,MAAO9D,EAAU,IAAAN,CAAA,IAAS+D,EAAiB,CAEtD,MAAMM,EAAe/D,EAAWwD,EAAYM,EACtCE,EAAe,KAAK,gBAAgBtE,CAAG,EACvCuE,EAAqBF,EAAeP,EAAYQ,EAGtDF,GAAyBE,EAGrB,EAAAhE,GAAYsD,IAIZW,EAAqBV,GACnBvD,EAAW6D,IACbA,EAAW7D,EAGjB,CAEA,OAAO6D,CACT,CASA,OAAO7D,EAAwB,CAC7B,MAAMN,EAAM,KAAK,KAAKM,CAAQ,EAC1BN,IACF,KAAK,aAAeE,EAAgB,KAAK,aAAcF,CAAG,EAC1D,KAAK,cAAA,EAET,CAMA,SAASM,EAAwB,CAC/B,MAAMN,EAAM,KAAK,KAAKM,CAAQ,EAC1BN,IACF,KAAK,aAAeG,EAAkB,KAAK,aAAcH,CAAG,EAC5D,KAAK,cAAA,EAET,CAMA,OAAOM,EAAwB,CAC7B,MAAMN,EAAM,KAAK,KAAKM,CAAQ,EAC1BN,IACF,KAAK,aAAeF,EAAgB,KAAK,aAAcE,CAAG,EAC1D,KAAK,cAAA,EAET,CAOA,WAAWM,EAA2B,CACpC,MAAMN,EAAM,KAAK,KAAKM,CAAQ,EAC9B,OAAON,EAAMI,EAAiB,KAAK,aAAcJ,CAAG,EAAI,EAC1D,CAKA,WAAkB,CAChB,UAAWA,KAAO,KAAK,KACrB,KAAK,aAAa,IAAIA,CAAG,EAE3B,KAAK,cAAA,CACP,CAKA,aAAoB,CAClB,KAAK,aAAa,MAAA,EAClB,KAAK,cAAA,CACP,CAMA,iBAA4B,CAC1B,MAAMwE,EAAoB,CAAA,EAC1B,UAAWxE,KAAO,KAAK,aAAc,CACnC,MAAMyE,EAAM,KAAK,KAAK,QAAQzE,CAAG,EAC7ByE,GAAO,GAAGD,EAAQ,KAAKC,CAAG,CAChC,CACA,OAAOD,CACT,CAOA,iBAAiBlE,EAA2C,CAC1D,MAAMN,EAAM,KAAK,KAAKM,CAAQ,EAC9B,OAAON,EAAM,KAAK,eAAe,IAAIA,CAAG,EAAI,MAC9C,CASA,uBAA8B,CAE5B,MAAM0E,EAAkB,KAAK,OAAO,eAapC,GAZA,KAAK,OAAS,CAAE,GAAG,KAAK,OAAQ,eAAgB,MAAA,EAChD,KAAK,oBAAA,EAGD,CAAC,KAAK,OAAO,gBAAkBA,IACjC,KAAK,OAAS,CAAE,GAAG,KAAK,OAAQ,eAAgBA,CAAA,GAO9C,KAAK,OAAO,eAAgB,CAC9B,MAAM3D,EAAO,KAAK,KACd,OAAOA,EAAK,gBAAmB,WACjCA,EAAK,eAAA,EAGL,KAAK,cAAA,CAET,CACF,CAEF"}
+{"version":3,"file":"master-detail.umd.js","sources":["../../../../../libs/grid/src/lib/plugins/master-detail/master-detail.ts","../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.ts"],"sourcesContent":["/**\n * Master/Detail Core Logic\n *\n * Pure functions for managing detail row expansion state.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Uses `any` for maximum flexibility with user-defined row types.\n\n/**\n * Toggle the expansion state of a detail row.\n * Returns a new Set with the updated state.\n */\nexport function toggleDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  if (newExpanded.has(row)) {\n    newExpanded.delete(row);\n  } else {\n    newExpanded.add(row);\n  }\n  return newExpanded;\n}\n\n/**\n * Expand a detail row.\n * Returns a new Set with the row added.\n */\nexport function expandDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.add(row);\n  return newExpanded;\n}\n\n/**\n * Collapse a detail row.\n * Returns a new Set with the row removed.\n */\nexport function collapseDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.delete(row);\n  return newExpanded;\n}\n\n/**\n * Check if a detail row is expanded.\n */\nexport function isDetailExpanded(expandedRows: Set<object>, row: object): boolean {\n  return expandedRows.has(row);\n}\n\n/**\n * Create a detail element for a given row.\n * The element spans all columns and contains the rendered content.\n */\nexport function createDetailElement(\n  row: any,\n  rowIndex: number,\n  renderer: (row: any, rowIndex: number) => HTMLElement | string,\n  columnCount: number\n): HTMLElement {\n  const detailRow = document.createElement('div');\n  detailRow.className = 'master-detail-row';\n  detailRow.setAttribute('data-detail-for', String(rowIndex));\n  detailRow.setAttribute('role', 'row');\n\n  const detailCell = document.createElement('div');\n  detailCell.className = 'master-detail-cell';\n  detailCell.setAttribute('role', 'cell');\n  detailCell.style.gridColumn = `1 / ${columnCount + 1}`;\n\n  const content = renderer(row, rowIndex);\n  if (typeof content === 'string') {\n    detailCell.innerHTML = content;\n  } else if (content instanceof HTMLElement) {\n    detailCell.appendChild(content);\n  }\n\n  detailRow.appendChild(detailCell);\n  return detailRow;\n}\n","/**\n * Master/Detail Plugin (Class-based)\n *\n * Enables expandable detail rows showing additional content for each row.\n * Animation style is plugin-configured; respects grid-level animation.mode.\n */\n\nimport { evalTemplateString, sanitizeHTML } from '../../core/internal/sanitize';\nimport { BaseGridPlugin, CellClickEvent, GridElement, RowClickEvent } from '../../core/plugin/base-plugin';\nimport { createExpanderColumnConfig, findExpanderColumn, isExpanderColumn } from '../../core/plugin/expander-column';\nimport type { ColumnConfig } from '../../core/types';\nimport {\n  collapseDetailRow,\n  createDetailElement,\n  expandDetailRow,\n  isDetailExpanded,\n  toggleDetailRow,\n} from './master-detail';\nimport styles from './master-detail.css?inline';\nimport type { DetailExpandDetail, ExpandCollapseAnimation, MasterDetailConfig } from './types';\n\n/**\n * Master-Detail Plugin for tbw-grid\n *\n * Creates expandable detail rows that reveal additional content beneath each master row.\n * Perfect for order/line-item UIs, employee/department views, or any scenario where\n * you need to show related data without navigating away.\n *\n * ## Installation\n *\n * ```ts\n * import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';\n * ```\n *\n * ## Configuration Options\n *\n * | Option | Type | Default | Description |\n * |--------|------|---------|-------------|\n * | `detailRenderer` | `(row) => HTMLElement \\| string` | required | Render function for detail content |\n * | `expandOnRowClick` | `boolean` | `false` | Expand when clicking the row |\n * | `detailHeight` | `number \\| 'auto'` | `'auto'` | Fixed height or auto-size |\n * | `collapseOnClickOutside` | `boolean` | `false` | Collapse when clicking outside |\n * | `showExpandColumn` | `boolean` | `true` | Show expand/collapse column |\n * | `animation` | `false \\| 'slide' \\| 'fade'` | `'slide'` | Animation style |\n *\n * ## Programmatic API\n *\n * | Method | Signature | Description |\n * |--------|-----------|-------------|\n * | `expandRow` | `(rowIndex) => void` | Expand a specific row |\n * | `collapseRow` | `(rowIndex) => void` | Collapse a specific row |\n * | `toggleRow` | `(rowIndex) => void` | Toggle row expansion |\n * | `expandAll` | `() => void` | Expand all rows |\n * | `collapseAll` | `() => void` | Collapse all rows |\n * | `isRowExpanded` | `(rowIndex) => boolean` | Check if row is expanded |\n *\n * ## CSS Custom Properties\n *\n * | Property | Default | Description |\n * |----------|---------|-------------|\n * | `--tbw-master-detail-bg` | `var(--tbw-color-row-alt)` | Detail row background |\n * | `--tbw-master-detail-border` | `var(--tbw-color-border)` | Detail row border |\n * | `--tbw-detail-padding` | `1em` | Detail content padding |\n * | `--tbw-animation-duration` | `200ms` | Expand/collapse animation |\n *\n * @example Basic Master-Detail with HTML Template\n * ```ts\n * import '@toolbox-web/grid';\n * import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';\n *\n * grid.gridConfig = {\n *   columns: [\n *     { field: 'orderId', header: 'Order ID' },\n *     { field: 'customer', header: 'Customer' },\n *     { field: 'total', header: 'Total', type: 'currency' },\n *   ],\n *   plugins: [\n *     new MasterDetailPlugin({\n *       detailRenderer: (row) => `\n *         <div class=\"order-details\">\n *           <h4>Order Items</h4>\n *           <ul>${row.items.map(i => `<li>${i.name} - $${i.price}</li>`).join('')}</ul>\n *         </div>\n *       `,\n *     }),\n *   ],\n * };\n * ```\n *\n * @example Nested Grid in Detail\n * ```ts\n * new MasterDetailPlugin({\n *   detailRenderer: (row) => {\n *     const childGrid = document.createElement('tbw-grid');\n *     childGrid.style.height = '200px';\n *     childGrid.gridConfig = { columns: [...] };\n *     childGrid.rows = row.items || [];\n *     return childGrid;\n *   },\n * })\n * ```\n *\n * @see {@link MasterDetailConfig} for all configuration options\n * @see {@link DetailExpandDetail} for expand/collapse event details\n *\n * @internal Extends BaseGridPlugin\n */\nexport class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfig> {\n  /** @internal */\n  readonly name = 'masterDetail';\n  /** @internal */\n  override readonly styles = styles;\n\n  /** @internal */\n  protected override get defaultConfig(): Partial<MasterDetailConfig> {\n    return {\n      detailHeight: 'auto',\n      expandOnRowClick: false,\n      collapseOnClickOutside: false,\n      // Note: showExpandColumn is intentionally NOT defaulted here.\n      // If undefined, processColumns() adds expander only when detailRenderer is provided.\n      // Set to true for framework adapters that register renderers asynchronously.\n      animation: 'slide', // Plugin's own default\n    };\n  }\n\n  // #region Light DOM Parsing\n\n  /**\n   * Called when plugin is attached to the grid.\n   * Parses light DOM for `<tbw-grid-detail>` elements to configure detail templates.\n   * @internal\n   */\n  override attach(grid: GridElement): void {\n    super.attach(grid);\n    this.parseLightDomDetail();\n  }\n\n  /**\n   * Parse `<tbw-grid-detail>` elements from the grid's light DOM.\n   *\n   * Allows declarative configuration:\n   * ```html\n   * <tbw-grid [rows]=\"data\">\n   *   <tbw-grid-detail>\n   *     <div class=\"detail-content\">\n   *       <p>Name: {{ row.name }}</p>\n   *       <p>Email: {{ row.email }}</p>\n   *     </div>\n   *   </tbw-grid-detail>\n   * </tbw-grid>\n   * ```\n   *\n   * Attributes:\n   * - `animation`: 'slide' | 'fade' | 'false' (default: 'slide')\n   * - `show-expand-column`: 'true' | 'false' (default: 'true')\n   * - `expand-on-row-click`: 'true' | 'false' (default: 'false')\n   * - `collapse-on-click-outside`: 'true' | 'false' (default: 'false')\n   * - `height`: number (pixels) or 'auto' (default: 'auto')\n   */\n  private parseLightDomDetail(): void {\n    const gridEl = this.grid as unknown as Element;\n    if (!gridEl || typeof gridEl.querySelector !== 'function') return;\n\n    const detailEl = gridEl.querySelector('tbw-grid-detail');\n    if (!detailEl) return;\n\n    // Check if a framework adapter wants to handle this element\n    // (e.g., Angular adapter intercepts for ng-template rendering)\n    const gridWithAdapter = gridEl as unknown as {\n      __frameworkAdapter?: {\n        parseDetailElement?: (el: Element) => ((row: any, rowIndex: number) => HTMLElement | string) | undefined;\n      };\n    };\n    if (gridWithAdapter.__frameworkAdapter?.parseDetailElement) {\n      const adapterRenderer = gridWithAdapter.__frameworkAdapter.parseDetailElement(detailEl);\n      if (adapterRenderer) {\n        this.config = { ...this.config, detailRenderer: adapterRenderer };\n        return;\n      }\n    }\n\n    // Parse attributes for configuration\n    const animation = detailEl.getAttribute('animation');\n    const showExpandColumn = detailEl.getAttribute('show-expand-column');\n    const expandOnRowClick = detailEl.getAttribute('expand-on-row-click');\n    const collapseOnClickOutside = detailEl.getAttribute('collapse-on-click-outside');\n    const heightAttr = detailEl.getAttribute('height');\n\n    const configUpdates: Partial<MasterDetailConfig> = {};\n\n    if (animation !== null) {\n      configUpdates.animation = animation === 'false' ? false : (animation as 'slide' | 'fade');\n    }\n    if (showExpandColumn !== null) {\n      configUpdates.showExpandColumn = showExpandColumn !== 'false';\n    }\n    if (expandOnRowClick !== null) {\n      configUpdates.expandOnRowClick = expandOnRowClick === 'true';\n    }\n    if (collapseOnClickOutside !== null) {\n      configUpdates.collapseOnClickOutside = collapseOnClickOutside === 'true';\n    }\n    if (heightAttr !== null) {\n      configUpdates.detailHeight = heightAttr === 'auto' ? 'auto' : parseInt(heightAttr, 10);\n    }\n\n    // Get template content from innerHTML\n    const templateHTML = detailEl.innerHTML.trim();\n    if (templateHTML && !this.config.detailRenderer) {\n      // Create a template-based renderer using the inner HTML\n      configUpdates.detailRenderer = (row: any, _rowIndex: number): string => {\n        // Evaluate template expressions like {{ row.field }}\n        const evaluated = evalTemplateString(templateHTML, { value: row, row });\n        // Sanitize the result to prevent XSS\n        return sanitizeHTML(evaluated);\n      };\n    }\n\n    // Merge updates into config\n    if (Object.keys(configUpdates).length > 0) {\n      this.config = { ...this.config, ...configUpdates };\n    }\n  }\n\n  // #endregion\n\n  // #region Animation Helpers\n\n  /**\n   * Get expand/collapse animation style from plugin config.\n   * Uses base class isAnimationEnabled to respect grid-level settings.\n   */\n  private get animationStyle(): ExpandCollapseAnimation {\n    if (!this.isAnimationEnabled) return false;\n    return this.config.animation ?? 'slide';\n  }\n\n  /**\n   * Apply expand animation to a detail element.\n   * Returns true if animation was applied, false if skipped.\n   * When animated, height measurement is deferred to animationend to avoid\n   * measuring during the max-height: 0 CSS animation constraint.\n   */\n  private animateExpand(detailEl: HTMLElement, row?: any, rowIndex?: number): boolean {\n    if (!this.isAnimationEnabled || this.animationStyle === false) return false;\n\n    detailEl.classList.add('tbw-expanding');\n\n    let measured = false;\n    const measureOnce = () => {\n      if (measured) return;\n      measured = true;\n      detailEl.classList.remove('tbw-expanding');\n\n      // Measure height AFTER animation completes - the element now has its\n      // natural height without the max-height constraint from the animation.\n      if (row !== undefined && rowIndex !== undefined) {\n        this.#measureAndCacheDetailHeight(detailEl, row, rowIndex);\n      }\n    };\n\n    detailEl.addEventListener('animationend', measureOnce, { once: true });\n    // Fallback timeout in case animationend doesn't fire (e.g., element detached,\n    // animation removed, or framework rendering delays). Matches animateCollapse pattern.\n    setTimeout(measureOnce, this.animationDuration + 50);\n    return true;\n  }\n\n  /**\n   * Apply collapse animation to a detail element and remove after animation.\n   */\n  private animateCollapse(detailEl: HTMLElement, onComplete: () => void): void {\n    if (!this.isAnimationEnabled || this.animationStyle === false) {\n      onComplete();\n      return;\n    }\n\n    detailEl.classList.add('tbw-collapsing');\n    const cleanup = () => {\n      detailEl.classList.remove('tbw-collapsing');\n      onComplete();\n    };\n    detailEl.addEventListener('animationend', cleanup, { once: true });\n    // Fallback timeout in case animation doesn't fire\n    setTimeout(cleanup, this.animationDuration + 50);\n  }\n\n  /**\n   * Measure a detail element's height and update the position cache if it changed.\n   * Used after layout settles (RAF) or after animation completes (animationend).\n   */\n  #measureAndCacheDetailHeight(detailEl: HTMLElement, row: any, rowIndex: number): void {\n    if (!detailEl.isConnected) return;\n\n    const height = detailEl.offsetHeight;\n    if (height > 0) {\n      const previousHeight = this.measuredDetailHeights.get(row);\n      this.measuredDetailHeights.set(row, height);\n\n      // Only invalidate if height actually changed\n      // This triggers an incremental position cache update, not a full rebuild\n      if (previousHeight !== height) {\n        this.grid.invalidateRowHeight(rowIndex);\n      }\n    }\n  }\n\n  // #endregion\n\n  // #region Internal State\n  private expandedRows: Set<any> = new Set();\n  private detailElements: Map<any, HTMLElement> = new Map();\n  /** Cached measured heights - persists even when elements are virtualized out */\n  private measuredDetailHeights: Map<any, number> = new Map();\n  /** Rows that were just expanded by user action and should animate.\n   * Prevents re-animation when rows scroll back into the virtual window. */\n  private rowsToAnimate: Set<any> = new Set();\n\n  /** Default height for detail rows when not configured */\n  private static readonly DEFAULT_DETAIL_HEIGHT = 150;\n\n  /**\n   * Get the estimated height for a detail row.\n   * Uses cached measured height when available (survives virtualization).\n   * Avoids reading offsetHeight during CSS animations to prevent poisoning the cache.\n   */\n  private getDetailHeight(row: any): number {\n    // Try DOM element first - works for tests and when element is connected\n    const detailEl = this.detailElements.get(row);\n    if (detailEl) {\n      // Skip DOM measurement if currently animating (max-height constraint gives wrong value)\n      const isAnimating = detailEl.classList.contains('tbw-expanding') || detailEl.classList.contains('tbw-collapsing');\n      if (!isAnimating) {\n        const height = detailEl.offsetHeight;\n        if (height > 0) {\n          // Cache the measurement for when this row is virtualized out\n          this.measuredDetailHeights.set(row, height);\n          return height;\n        }\n      }\n    }\n\n    // DOM element missing, detached, or animating - check cached measurement\n    const cachedHeight = this.measuredDetailHeights.get(row);\n    if (cachedHeight && cachedHeight > 0) {\n      return cachedHeight;\n    }\n\n    // Fallback to config or default\n    return typeof this.config?.detailHeight === 'number'\n      ? this.config.detailHeight\n      : MasterDetailPlugin.DEFAULT_DETAIL_HEIGHT;\n  }\n\n  /**\n   * Toggle a row's detail and emit event.\n   */\n  private toggleAndEmit(row: any, rowIndex: number): void {\n    this.expandedRows = toggleDetailRow(this.expandedRows, row as object);\n    const expanded = this.expandedRows.has(row as object);\n    if (expanded) {\n      this.rowsToAnimate.add(row);\n    }\n    this.emit<DetailExpandDetail>('detail-expand', {\n      rowIndex,\n      row: row as Record<string, unknown>,\n      expanded,\n    });\n    this.requestRender();\n  }\n  // #endregion\n\n  // #region Lifecycle\n\n  /** @internal */\n  override detach(): void {\n    this.expandedRows.clear();\n    this.detailElements.clear();\n    this.measuredDetailHeights.clear();\n    this.rowsToAnimate.clear();\n  }\n  // #endregion\n\n  // #region Hooks\n\n  /** @internal */\n  override processColumns(columns: readonly ColumnConfig[]): ColumnConfig[] {\n    // Determine whether to add the expander column:\n    // 1. If showExpandColumn === false: never add (explicit opt-out)\n    // 2. If showExpandColumn === true: always add (explicit opt-in, for framework adapters)\n    // 3. If showExpandColumn is undefined: add only if detailRenderer is provided\n    //\n    // This supports React/Angular adapters which register renderers asynchronously via light DOM.\n    // They must set showExpandColumn: true to get the column immediately, avoiding layout shift.\n    const shouldAddExpander =\n      this.config.showExpandColumn === true || (this.config.showExpandColumn !== false && !!this.config.detailRenderer);\n\n    if (!shouldAddExpander) {\n      return [...columns];\n    }\n\n    const cols = [...columns];\n\n    // Check if expander column already exists (from this or another plugin)\n    const existingExpander = findExpanderColumn(cols);\n    if (existingExpander) {\n      // Another plugin already added an expander column - don't add duplicate\n      // Our expand logic will be handled via onCellClick on the expander column\n      return cols;\n    }\n\n    // Create dedicated expander column that stays fixed at position 0\n    const expanderCol = createExpanderColumnConfig(this.name);\n    expanderCol.viewRenderer = (renderCtx) => {\n      const { row } = renderCtx;\n      const isExpanded = this.expandedRows.has(row as object);\n\n      const container = document.createElement('span');\n      container.className = 'master-detail-expander expander-cell';\n\n      // Expand/collapse toggle icon\n      const toggle = document.createElement('span');\n      toggle.className = `master-detail-toggle${isExpanded ? ' expanded' : ''}`;\n      // Use grid-level icons (fall back to defaults)\n      this.setIcon(toggle, this.resolveIcon(isExpanded ? 'collapse' : 'expand'));\n      // role=\"button\" is required for aria-expanded to be valid\n      toggle.setAttribute('role', 'button');\n      toggle.setAttribute('tabindex', '0');\n      toggle.setAttribute('aria-expanded', String(isExpanded));\n      toggle.setAttribute('aria-label', isExpanded ? 'Collapse details' : 'Expand details');\n      container.appendChild(toggle);\n\n      return container;\n    };\n\n    // Prepend expander column to ensure it's always first\n    return [expanderCol, ...cols];\n  }\n\n  /** @internal */\n  override onRowClick(event: RowClickEvent): boolean | void {\n    if (!this.config.expandOnRowClick || !this.config.detailRenderer) return;\n    this.toggleAndEmit(event.row, event.rowIndex);\n    return false;\n  }\n\n  /** @internal */\n  override onCellClick(event: CellClickEvent): boolean | void {\n    // Handle click on master-detail toggle icon (same pattern as TreePlugin)\n    const target = event.originalEvent?.target as HTMLElement;\n    if (target?.classList.contains('master-detail-toggle')) {\n      this.toggleAndEmit(event.row, event.rowIndex);\n      return true; // Prevent default handling\n    }\n\n    // Sync detail rows after cell click triggers refreshVirtualWindow\n    // This runs in microtask to ensure DOM updates are complete\n    if (this.expandedRows.size > 0) {\n      queueMicrotask(() => this.#syncDetailRows());\n    }\n    return; // Don't prevent default\n  }\n\n  /** @internal */\n  override onKeyDown(event: KeyboardEvent): boolean | void {\n    // SPACE toggles expansion when focus is on the expander column\n    if (event.key !== ' ') return;\n\n    const focusCol = this.grid._focusCol;\n    const focusRow = this.grid._focusRow;\n    const column = this.columns[focusCol];\n\n    // Only handle SPACE on expander column\n    if (!column || !isExpanderColumn(column)) return;\n\n    const row = this.rows[focusRow];\n    if (!row) return;\n\n    event.preventDefault();\n    this.toggleAndEmit(row, focusRow);\n\n    // Restore focus styling after render completes via render pipeline\n    this.requestRenderWithFocus();\n    return true;\n  }\n\n  /** @internal */\n  override afterRender(): void {\n    this.#syncDetailRows();\n  }\n\n  /**\n   * Called on scroll to sync detail elements with visible rows.\n   * Removes details for rows that scrolled out of view and reattaches for visible rows.\n   * @internal\n   */\n  override onScrollRender(): void {\n    if (!this.config.detailRenderer || this.expandedRows.size === 0) return;\n    // Full sync needed on scroll to clean up orphaned details\n    this.#syncDetailRows();\n  }\n\n  /**\n   * Full sync of detail rows - cleans up stale elements and creates new ones.\n   * Detail rows are inserted as siblings AFTER their master row to survive row rebuilds.\n   *\n   * PERF: Uses the grid's row pool (_rowPool) and virtual window (_virtualization.start/end)\n   * to avoid querySelectorAll on every scroll frame. The pool is index-aligned with the\n   * virtual window, so pool[i] corresponds to row index (start + i).\n   */\n  #syncDetailRows(): void {\n    if (!this.config.detailRenderer) return;\n\n    const body = this.gridElement?.querySelector('.rows');\n    if (!body) return;\n\n    // Use grid's virtualization state and row pool for O(1) lookups instead of querySelectorAll.\n    // The row pool is an array of DOM elements aligned to the virtual window:\n    // _rowPool[i] renders row data at index (_virtualization.start + i).\n    const gridInternal = this.grid as any;\n    const rowPool: HTMLElement[] | undefined = gridInternal._rowPool;\n    const vStart: number = gridInternal._virtualization?.start ?? 0;\n    const vEnd: number = gridInternal._virtualization?.end ?? 0;\n    const columnCount = this.columns.length;\n\n    // Build visible row index set from the virtual window range\n    const visibleStart = vStart;\n    const visibleEnd = vEnd;\n\n    // Build a map of row index -> row element using the pool (O(n) where n = visible rows)\n    const visibleRowMap = new Map<number, Element>();\n    if (rowPool) {\n      const poolLen = Math.min(rowPool.length, visibleEnd - visibleStart);\n      for (let i = 0; i < poolLen; i++) {\n        const rowEl = rowPool[i];\n        if (rowEl.parentNode === body) {\n          visibleRowMap.set(visibleStart + i, rowEl);\n        }\n      }\n    } else {\n      // Fallback: use querySelectorAll if pool is not accessible\n      const dataRows = body.querySelectorAll('.data-grid-row');\n      for (const rowEl of dataRows) {\n        const firstCell = rowEl.querySelector('.cell[data-row]');\n        const rowIndex = firstCell ? parseInt(firstCell.getAttribute('data-row') ?? '-1', 10) : -1;\n        if (rowIndex >= 0) {\n          visibleRowMap.set(rowIndex, rowEl);\n        }\n      }\n    }\n\n    // Remove detail rows whose parent row is no longer visible or no longer expanded.\n    // Iterate the detailElements map (which we own) instead of querySelectorAll.\n    for (const [row, detailEl] of this.detailElements) {\n      const rowIndex = this.rows.indexOf(row);\n      const isStillExpanded = this.expandedRows.has(row);\n      const isRowVisible = rowIndex >= 0 && visibleRowMap.has(rowIndex);\n\n      if (!isStillExpanded || !isRowVisible) {\n        if (detailEl.parentNode) detailEl.remove();\n        this.detailElements.delete(row);\n      }\n    }\n\n    // Insert detail rows for expanded rows that are visible\n    for (const [rowIndex, rowEl] of visibleRowMap) {\n      const row = this.rows[rowIndex];\n      if (!row || !this.expandedRows.has(row)) continue;\n\n      // Check if detail already exists for this row\n      const existingDetail = this.detailElements.get(row);\n      if (existingDetail) {\n        // Ensure it's positioned correctly (as next sibling of row element)\n        if (existingDetail.previousElementSibling !== rowEl) {\n          rowEl.after(existingDetail);\n        }\n        continue;\n      }\n\n      // Create new detail element\n      const detailEl = createDetailElement(row, rowIndex, this.config.detailRenderer, columnCount);\n\n      if (typeof this.config.detailHeight === 'number') {\n        detailEl.style.height = `${this.config.detailHeight}px`;\n      }\n\n      // Insert as sibling after the row element (not as child)\n      rowEl.after(detailEl);\n      this.detailElements.set(row, detailEl);\n\n      // Only animate if this row was just expanded by a user action (click, keyboard, API).\n      // Rows re-appearing from scroll (virtualization) should not re-animate.\n      const shouldAnimate = this.rowsToAnimate.has(row);\n      if (shouldAnimate) {\n        this.rowsToAnimate.delete(row);\n      }\n\n      const willAnimate = shouldAnimate && this.animateExpand(detailEl, row, rowIndex);\n\n      if (!willAnimate) {\n        // No animation - measure height after layout settles via RAF\n        requestAnimationFrame(() => {\n          this.#measureAndCacheDetailHeight(detailEl, row, rowIndex);\n        });\n      }\n      // When animating, measurement is deferred to animationend callback\n      // (inside animateExpand) to avoid measuring during max-height: 0 constraint\n    }\n  }\n\n  /**\n   * Return total extra height from all expanded detail rows.\n   * Used by grid virtualization to adjust scrollbar height.\n   *\n   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.\n   */\n  override getExtraHeight(): number {\n    let totalHeight = 0;\n    for (const row of this.expandedRows) {\n      totalHeight += this.getDetailHeight(row);\n    }\n    return totalHeight;\n  }\n\n  /**\n   * Return extra height that appears before a given row index.\n   * This is the sum of heights of all expanded details whose parent row is before the given index.\n   *\n   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.\n   */\n  override getExtraHeightBefore(beforeRowIndex: number): number {\n    let totalHeight = 0;\n    for (const row of this.expandedRows) {\n      const rowIndex = this.rows.indexOf(row);\n      // Include detail if it's for a row before the given index\n      if (rowIndex >= 0 && rowIndex < beforeRowIndex) {\n        totalHeight += this.getDetailHeight(row);\n      }\n    }\n    return totalHeight;\n  }\n\n  /**\n   * Get the height of a specific row, including any expanded detail content.\n   * Always returns a height to ensure the position cache uses plugin-controlled values\n   * rather than stale DOM measurements.\n   *\n   * @param row - The row data\n   * @param _index - The row index (unused, but part of the interface)\n   * @returns The row height in pixels (base height for collapsed, base + detail for expanded)\n   */\n  override getRowHeight(row: unknown, _index: number): number | undefined {\n    const isExpanded = this.expandedRows.has(row as object);\n\n    if (!isExpanded) {\n      // Collapsed row - return undefined to let the grid use its measured/estimated height.\n      // This ensures the position cache uses the correct row height from CSS/config.\n      return undefined;\n    }\n\n    // Row is expanded - return base height plus detail height\n    // Use grid's defaultRowHeight which reflects the actual measured/configured height\n    const baseHeight = this.grid.defaultRowHeight ?? 28;\n    const detailHeight = this.getDetailHeight(row);\n\n    return baseHeight + detailHeight;\n  }\n\n  /**\n   * Adjust the virtualization start index to keep expanded row visible while its detail is visible.\n   * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.\n   */\n  override adjustVirtualStart(start: number, scrollTop: number, rowHeight: number): number {\n    if (this.expandedRows.size === 0) return start;\n\n    // Use position cache for accurate row positions when available (variable heights mode)\n    const positionCache = (this.grid as any)?._virtualization?.positionCache as\n      | Array<{ offset: number; height: number }>\n      | undefined;\n\n    let minStart = start;\n\n    if (positionCache && positionCache.length > 0) {\n      // Variable heights: use position cache for accurate offset\n      for (const row of this.expandedRows) {\n        const rowIndex = this.rows.indexOf(row);\n        if (rowIndex < 0 || rowIndex >= start) continue;\n\n        // Position cache already includes cumulative heights from all expanded details\n        const detailBottom = positionCache[rowIndex].offset + positionCache[rowIndex].height;\n\n        if (detailBottom > scrollTop && rowIndex < minStart) {\n          minStart = rowIndex;\n        }\n      }\n    } else {\n      // Fixed heights fallback: accumulate detail heights manually\n      // Build sorted list of expanded row indices for cumulative height calculation\n      const expandedIndices: Array<{ index: number; row: any }> = [];\n      for (const row of this.expandedRows) {\n        const index = this.rows.indexOf(row);\n        if (index >= 0) {\n          expandedIndices.push({ index, row });\n        }\n      }\n      expandedIndices.sort((a, b) => a.index - b.index);\n\n      let cumulativeExtraHeight = 0;\n\n      for (const { index: rowIndex, row } of expandedIndices) {\n        const actualRowTop = rowIndex * rowHeight + cumulativeExtraHeight;\n        const detailHeight = this.getDetailHeight(row);\n        const actualDetailBottom = actualRowTop + rowHeight + detailHeight;\n\n        cumulativeExtraHeight += detailHeight;\n\n        if (rowIndex >= start) continue;\n\n        if (actualDetailBottom > scrollTop && rowIndex < minStart) {\n          minStart = rowIndex;\n        }\n      }\n    }\n\n    return minStart;\n  }\n  // #endregion\n\n  // #region Public API\n\n  /**\n   * Expand the detail row at the given index.\n   * @param rowIndex - Index of the row to expand\n   */\n  expand(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.rowsToAnimate.add(row);\n      this.expandedRows = expandDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Collapse the detail row at the given index.\n   * @param rowIndex - Index of the row to collapse\n   */\n  collapse(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = collapseDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Toggle the detail row at the given index.\n   * @param rowIndex - Index of the row to toggle\n   */\n  toggle(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = toggleDetailRow(this.expandedRows, row);\n      if (this.expandedRows.has(row)) {\n        this.rowsToAnimate.add(row);\n      }\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Check if the detail row at the given index is expanded.\n   * @param rowIndex - Index of the row to check\n   * @returns Whether the detail row is expanded\n   */\n  isExpanded(rowIndex: number): boolean {\n    const row = this.rows[rowIndex];\n    return row ? isDetailExpanded(this.expandedRows, row) : false;\n  }\n\n  /**\n   * Expand all detail rows.\n   */\n  expandAll(): void {\n    for (const row of this.rows) {\n      this.rowsToAnimate.add(row);\n      this.expandedRows.add(row);\n    }\n    this.requestRender();\n  }\n\n  /**\n   * Collapse all detail rows.\n   */\n  collapseAll(): void {\n    this.expandedRows.clear();\n    this.requestRender();\n  }\n\n  /**\n   * Get the indices of all expanded rows.\n   * @returns Array of row indices that are expanded\n   */\n  getExpandedRows(): number[] {\n    const indices: number[] = [];\n    for (const row of this.expandedRows) {\n      const idx = this.rows.indexOf(row);\n      if (idx >= 0) indices.push(idx);\n    }\n    return indices;\n  }\n\n  /**\n   * Get the detail element for a specific row.\n   * @param rowIndex - Index of the row\n   * @returns The detail HTMLElement or undefined\n   */\n  getDetailElement(rowIndex: number): HTMLElement | undefined {\n    const row = this.rows[rowIndex];\n    return row ? this.detailElements.get(row) : undefined;\n  }\n\n  /**\n   * Re-parse light DOM to refresh the detail renderer.\n   * Call this after framework templates are registered (e.g., Angular ngAfterContentInit).\n   *\n   * This allows frameworks to register templates asynchronously and then\n   * update the plugin's detailRenderer.\n   */\n  refreshDetailRenderer(): void {\n    // Force re-parse by temporarily clearing the renderer\n    const currentRenderer = this.config.detailRenderer;\n    this.config = { ...this.config, detailRenderer: undefined };\n    this.parseLightDomDetail();\n\n    // If no new renderer was found, restore the original\n    if (!this.config.detailRenderer && currentRenderer) {\n      this.config = { ...this.config, detailRenderer: currentRenderer };\n    }\n\n    // Request a COLUMNS phase re-render so processColumns runs again with the new detailRenderer\n    // This ensures the expand toggle is added to the first column.\n    // Must use refreshColumns() (COLUMNS phase) not requestRender() (ROWS phase)\n    // because processColumns only runs at COLUMNS phase or higher.\n    if (this.config.detailRenderer) {\n      const grid = this.grid as unknown as { refreshColumns?: () => void };\n      if (typeof grid.refreshColumns === 'function') {\n        grid.refreshColumns();\n      } else {\n        // Fallback to requestRender if refreshColumns not available\n        this.requestRender();\n      }\n    }\n  }\n  // #endregion\n}\n"],"names":["toggleDetailRow","expandedRows","row","newExpanded","expandDetailRow","collapseDetailRow","isDetailExpanded","createDetailElement","rowIndex","renderer","columnCount","detailRow","detailCell","content","MasterDetailPlugin","BaseGridPlugin","styles","grid","gridEl","detailEl","gridWithAdapter","adapterRenderer","animation","showExpandColumn","expandOnRowClick","collapseOnClickOutside","heightAttr","configUpdates","templateHTML","_rowIndex","evaluated","evalTemplateString","sanitizeHTML","measured","measureOnce","#measureAndCacheDetailHeight","onComplete","cleanup","height","previousHeight","cachedHeight","expanded","columns","cols","findExpanderColumn","expanderCol","createExpanderColumnConfig","renderCtx","isExpanded","container","toggle","event","#syncDetailRows","focusCol","focusRow","column","isExpanderColumn","body","gridInternal","rowPool","vStart","vEnd","visibleStart","visibleEnd","visibleRowMap","poolLen","i","rowEl","dataRows","firstCell","isStillExpanded","isRowVisible","existingDetail","shouldAnimate","totalHeight","beforeRowIndex","_index","baseHeight","detailHeight","start","scrollTop","rowHeight","positionCache","minStart","expandedIndices","index","a","b","cumulativeExtraHeight","actualRowTop","actualDetailBottom","indices","idx","currentRenderer"],"mappings":"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"}

package/umd/plugins/responsive.umd.js

@@ -1,2 +1,2 @@
-(function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("../../core/internal/keyboard"),require("../../core/internal/sanitize"),require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/keyboard","../../core/internal/sanitize","../../core/plugin/base-plugin"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.TbwGridPlugin_responsive={},l.TbwGrid,l.TbwGrid,l.TbwGrid))})(this,(function(l,h,g,f){"use strict";const w='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-inline-start: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;inset-inline-start: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-inline-end: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-inline-end: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 v extends f.BaseGridPlugin{name="responsive";version="1.0.0";styles=w;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.#u(),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.#R(),this.#c(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)}#R(){const t=this.grid;if(!t||typeof t.querySelector!="function")return;const e=t.querySelector("tbw-grid-responsive-card");if(!e)return;const i=t;if(i.__frameworkAdapter?.parseResponsiveCardElement){const o=i.__frameworkAdapter.parseResponsiveCardElement(e);o&&(this.config={...this.config,cardRenderer:o})}const r=e.getAttribute("breakpoint"),s=e.getAttribute("card-row-height"),n=e.getAttribute("hidden-columns"),a=e.getAttribute("hide-header"),c=e.getAttribute("debounce-ms"),d={};if(r!==null){const o=parseInt(r,10);isNaN(o)||(d.breakpoint=o)}if(s!==null&&(d.cardRowHeight=s==="auto"?"auto":parseInt(s,10)),n!==null&&(d.hiddenColumns=n.split(",").map(o=>o.trim()).filter(o=>o.length>0)),a!==null&&(d.hideHeader=a!=="false"),c!==null){const o=parseInt(c,10);isNaN(o)||(d.debounceMs=o)}const u=e.innerHTML.trim();u&&!this.config.cardRenderer&&!i.__frameworkAdapter?.parseResponsiveCardElement&&(d.cardRenderer=o=>{const b=g.evalTemplateString(u,{value:o,row:o}),m=g.sanitizeHTML(b),p=document.createElement("div");return p.className="tbw-responsive-card-content",p.innerHTML=m,p}),Object.keys(d).length>0&&(this.config={...this.config,...d})}#c(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.#A(),!(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 n=s.getAttribute("data-field");n&&(this.#s.has(n)?(s.setAttribute("data-responsive-hidden",""),s.removeAttribute("data-responsive-value-only")):this.#d.has(n)?(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.#y(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.#u(),this.emit("responsive-change",{isResponsive:i,width:t,breakpoint:e}),this.requestRender())}#y(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.#c(e.hiddenColumns):this.#c(this.config.hiddenColumns);const r=e?.cardLayout===!0;r!==this.#t&&(this.#t=r,this.#u()),this.emit("responsive-change",{isResponsive:this.#t,width:t,breakpoint:e?.maxWidth??0}),this.requestRender()}}#e;#u(){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.#p=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(),h.ensureCellVisible(this.grid),!0;if(this.grid._focusRow<e)return this.grid._focusRow+=1,this.grid._focusCol=0,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<e)return this.grid._focusRow+=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break}return!1}#i;#r;#p;#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}#g(){for(const t of this.rows)if(t.__isGroupRow)return!0;return!1}#C(){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.#g())return 0;const t=this.#e??28,e=this.#m(),i=this.#b(),{groupCount:r,cardCount:s}=this.#C(),n=r*Math.max(0,e-t),a=s*Math.max(0,i-t);return n+a}getExtraHeightBefore(t){if(!this.#t||!this.config.cardRenderer||!this.#g())return 0;const e=this.#e??28,i=this.#m(),r=this.#b(),s=Math.max(0,i-e),n=Math.max(0,r-e);let a=0,c=0;const d=this.rows,u=Math.min(t,d.length);for(let o=0;o<u;o++)d[o].__isGroupRow?a++:c++;return a*s+c*n}#k(){let t=0;for(const e of this.rows)e.__isGroupRow||t++;return t}#f=!1;#A(){if(!this.#t||!this.config.cardRenderer)return;let t=!1;const e=this.grid,i=this.#g(),r=this.#k();if(r!==this.#p&&(this.#p=r,t=!0),i){const n=this.gridElement.querySelector(".data-grid-row.group-row");if(n){const a=n.getBoundingClientRect().height;a>0&&a!==this.#r&&(this.#r=a,t=!0)}}const s=this.gridElement.querySelector(".data-grid-row.responsive-card");if(s){const n=s.getBoundingClientRect().height;n>0&&n!==this.#i&&(this.#i=n,t=!0,!i&&e._virtualization&&(e._virtualization.rowHeight=n))}t&&!this.#f&&(this.#f=!0,queueMicrotask(()=>{this.#f=!1,this.grid&&this.#t&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}l.ResponsivePlugin=v,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+(function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("../../core/internal/keyboard"),require("../../core/internal/sanitize"),require("../../core/plugin/base-plugin")):typeof define=="function"&&define.amd?define(["exports","../../core/internal/keyboard","../../core/internal/sanitize","../../core/plugin/base-plugin"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.TbwGridPlugin_responsive={},l.TbwGrid,l.TbwGrid,l.TbwGrid))})(this,(function(l,h,g,f){"use strict";const w='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-inline-start: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;inset-inline-start: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-inline-end: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-inline-end: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 v extends f.BaseGridPlugin{name="responsive";version="1.0.0";styles=w;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;#b=!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.#u(),this.emit("responsive-change",{isResponsive:t,width:this.#a,breakpoint:this.config.breakpoint??0}))}setBreakpoint(t){this.config.breakpoint=t,this.#m(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.#R(),this.#c(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.#m(i)},this.config.debounceMs??100)}),this.#o.observe(this.gridElement)}#R(){const t=this.grid;if(!t||typeof t.querySelector!="function")return;const e=t.querySelector("tbw-grid-responsive-card");if(!e)return;const i=t;if(i.__frameworkAdapter?.parseResponsiveCardElement){const o=i.__frameworkAdapter.parseResponsiveCardElement(e);o&&(this.config={...this.config,cardRenderer:o})}const r=e.getAttribute("breakpoint"),s=e.getAttribute("card-row-height"),n=e.getAttribute("hidden-columns"),a=e.getAttribute("hide-header"),c=e.getAttribute("debounce-ms"),d={};if(r!==null){const o=parseInt(r,10);isNaN(o)||(d.breakpoint=o)}if(s!==null&&(d.cardRowHeight=s==="auto"?"auto":parseInt(s,10)),n!==null&&(d.hiddenColumns=n.split(",").map(o=>o.trim()).filter(o=>o.length>0)),a!==null&&(d.hideHeader=a!=="false"),c!==null){const o=parseInt(c,10);isNaN(o)||(d.debounceMs=o)}const u=e.innerHTML.trim();u&&!this.config.cardRenderer&&!i.__frameworkAdapter?.parseResponsiveCardElement&&(d.cardRenderer=o=>{const b=g.evalTemplateString(u,{value:o,row:o}),m=g.sanitizeHTML(b),p=document.createElement("div");return p.className="tbw-responsive-card-content",p.innerHTML=m,p}),Object.keys(d).length>0&&(this.config={...this.config,...d})}#c(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.#A(),!(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 n=s.getAttribute("data-field");n&&(this.#s.has(n)?(s.setAttribute("data-responsive-hidden",""),s.removeAttribute("data-responsive-value-only")):this.#d.has(n)?(s.setAttribute("data-responsive-value-only",""),s.removeAttribute("data-responsive-hidden")):(s.removeAttribute("data-responsive-hidden"),s.removeAttribute("data-responsive-value-only")))}}#m(t){if(this.#l.length>0){this.#y(t);return}const e=this.config.breakpoint??0;e===0&&!this.#b&&(this.#b=!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.#u(),this.emit("responsive-change",{isResponsive:i,width:t,breakpoint:e}),this.requestRender())}#y(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.#c(e.hiddenColumns):this.#c(this.config.hiddenColumns);const r=e?.cardLayout===!0;r!==this.#t&&(this.#t=r,this.#u()),this.emit("responsive-change",{isResponsive:this.#t,width:t,breakpoint:e?.maxWidth??0}),this.requestRender()}}#e;#u(){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.#p=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(),h.ensureCellVisible(this.grid),!0;if(this.grid._focusRow<e)return this.grid._focusRow+=1,this.grid._focusCol=0,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowUp":if(this.grid._focusCol>0)return this.grid._focusCol-=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;if(this.grid._focusRow>0)return this.grid._focusRow-=1,this.grid._focusCol=i,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowRight":if(this.grid._focusRow<e)return this.grid._focusRow+=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break;case"ArrowLeft":if(this.grid._focusRow>0)return this.grid._focusRow-=1,t.preventDefault(),h.ensureCellVisible(this.grid),!0;break}return!1}#i;#r;#p;#g(){if(this.#i&&this.#i>0)return this.#i;const t=this.config.cardRowHeight;return typeof t=="number"&&t>0?t:80}#f(){return this.#r&&this.#r>0?this.#r:this.#e??28}#w(){for(const t of this.rows)if(t.__isGroupRow)return!0;return!1}#C(){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.#w())return 0;const t=this.#e??28,e=this.#f(),i=this.#g(),{groupCount:r,cardCount:s}=this.#C(),n=r*Math.max(0,e-t),a=s*Math.max(0,i-t);return n+a}getExtraHeightBefore(t){if(!this.#t||!this.config.cardRenderer||!this.#w())return 0;const e=this.#e??28,i=this.#f(),r=this.#g(),s=Math.max(0,i-e),n=Math.max(0,r-e);let a=0,c=0;const d=this.rows,u=Math.min(t,d.length);for(let o=0;o<u;o++)d[o].__isGroupRow?a++:c++;return a*s+c*n}getRowHeight(t,e){if(!(!this.#t||!this.config.cardRenderer))return t.__isGroupRow?this.#f():this.#g()}#k(){let t=0;for(const e of this.rows)e.__isGroupRow||t++;return t}#v=!1;#A(){if(!this.#t||!this.config.cardRenderer)return;let t=!1;const e=this.grid,i=this.#w(),r=this.#k();if(r!==this.#p&&(this.#p=r,t=!0),i){const n=this.gridElement.querySelector(".data-grid-row.group-row");if(n){const a=n.getBoundingClientRect().height;a>0&&a!==this.#r&&(this.#r=a,t=!0)}}const s=this.gridElement.querySelector(".data-grid-row.responsive-card");if(s){const n=s.getBoundingClientRect().height;n>0&&n!==this.#i&&(this.#i=n,t=!0,!i&&e._virtualization&&(e._virtualization.rowHeight=n))}t&&!this.#v&&(this.#v=!0,queueMicrotask(()=>{this.#v=!1,this.grid&&this.#t&&this.grid.refreshVirtualWindow?.(!0,!0)}))}}l.ResponsivePlugin=v,Object.defineProperty(l,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 { evalTemplateString, sanitizeHTML } from '../../core/internal/sanitize';\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    // Parse light DOM configuration first (may update this.config)\n    this.#parseLightDomCard();\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  // #region Light DOM Parsing\n\n  /**\n   * Parse `<tbw-grid-responsive-card>` elements from the grid's light DOM.\n   *\n   * Allows declarative configuration:\n   * ```html\n   * <tbw-grid [rows]=\"data\">\n   *   <tbw-grid-responsive-card breakpoint=\"500\" card-row-height=\"80\">\n   *     <div class=\"custom-card\">\n   *       <strong>{{ row.name }}</strong>\n   *       <span>{{ row.email }}</span>\n   *     </div>\n   *   </tbw-grid-responsive-card>\n   * </tbw-grid>\n   * ```\n   *\n   * Attributes:\n   * - `breakpoint`: number - Width threshold for responsive mode\n   * - `card-row-height`: number | 'auto' - Card height (default: 'auto')\n   * - `hidden-columns`: string - Comma-separated fields to hide\n   * - `hide-header`: 'true' | 'false' - Hide header row (default: 'true')\n   * - `debounce-ms`: number - Resize debounce delay (default: 100)\n   */\n  #parseLightDomCard(): void {\n    const gridEl = this.grid as unknown as Element;\n    if (!gridEl || typeof gridEl.querySelector !== 'function') return;\n\n    const cardEl = gridEl.querySelector('tbw-grid-responsive-card');\n    if (!cardEl) return;\n\n    // Check if a framework adapter wants to handle this element\n    // (e.g., React adapter intercepts for JSX rendering)\n    const gridWithAdapter = gridEl as unknown as {\n      __frameworkAdapter?: {\n        parseResponsiveCardElement?: (el: Element) => ((row: T, rowIndex: number) => HTMLElement) | undefined;\n      };\n    };\n    if (gridWithAdapter.__frameworkAdapter?.parseResponsiveCardElement) {\n      const adapterRenderer = gridWithAdapter.__frameworkAdapter.parseResponsiveCardElement(cardEl);\n      if (adapterRenderer) {\n        this.config = { ...this.config, cardRenderer: adapterRenderer };\n        // Continue to parse attributes even if adapter provides renderer\n      }\n    }\n\n    // Parse attributes for configuration\n    const breakpointAttr = cardEl.getAttribute('breakpoint');\n    const cardRowHeightAttr = cardEl.getAttribute('card-row-height');\n    const hiddenColumnsAttr = cardEl.getAttribute('hidden-columns');\n    const hideHeaderAttr = cardEl.getAttribute('hide-header');\n    const debounceMsAttr = cardEl.getAttribute('debounce-ms');\n\n    const configUpdates: Partial<ResponsivePluginConfig<T>> = {};\n\n    if (breakpointAttr !== null) {\n      const breakpoint = parseInt(breakpointAttr, 10);\n      if (!isNaN(breakpoint)) {\n        configUpdates.breakpoint = breakpoint;\n      }\n    }\n\n    if (cardRowHeightAttr !== null) {\n      configUpdates.cardRowHeight = cardRowHeightAttr === 'auto' ? 'auto' : parseInt(cardRowHeightAttr, 10);\n    }\n\n    if (hiddenColumnsAttr !== null) {\n      // Parse comma-separated field names\n      configUpdates.hiddenColumns = hiddenColumnsAttr\n        .split(',')\n        .map((s) => s.trim())\n        .filter((s) => s.length > 0);\n    }\n\n    if (hideHeaderAttr !== null) {\n      configUpdates.hideHeader = hideHeaderAttr !== 'false';\n    }\n\n    if (debounceMsAttr !== null) {\n      const debounceMs = parseInt(debounceMsAttr, 10);\n      if (!isNaN(debounceMs)) {\n        configUpdates.debounceMs = debounceMs;\n      }\n    }\n\n    // Get template content from innerHTML (only if no renderer already set)\n    const templateHTML = cardEl.innerHTML.trim();\n    if (templateHTML && !this.config.cardRenderer && !gridWithAdapter.__frameworkAdapter?.parseResponsiveCardElement) {\n      // Create a template-based renderer using the inner HTML\n      configUpdates.cardRenderer = (row: T): HTMLElement => {\n        // Evaluate template expressions like {{ row.field }}\n        const evaluated = evalTemplateString(templateHTML, { value: row, row: row as Record<string, unknown> });\n        // Sanitize the result to prevent XSS\n        const sanitized = sanitizeHTML(evaluated);\n        const container = document.createElement('div');\n        container.className = 'tbw-responsive-card-content';\n        container.innerHTML = sanitized;\n        return container;\n      };\n    }\n\n    // Merge updates into config (light DOM values override constructor config)\n    if (Object.keys(configUpdates).length > 0) {\n      this.config = { ...this.config, ...configUpdates };\n    }\n  }\n\n  // #endregion\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","#parseLightDomCard","#buildHiddenColumnSets","a","b","entries","gridEl","cardEl","gridWithAdapter","adapterRenderer","breakpointAttr","cardRowHeightAttr","hiddenColumnsAttr","hideHeaderAttr","debounceMsAttr","configUpdates","breakpoint","s","debounceMs","templateHTML","row","evaluated","evalTemplateString","sanitized","sanitizeHTML","container","hiddenColumns","col","query","#measureCardHeightFromDOM","hasHiddenColumns","hasValueOnlyColumns","cells","cell","field","#checkMultiBreakpoint","shouldBeResponsive","newActiveBreakpoint","bp","#originalRowHeight","animate","internalGrid","scrollArea","rows","#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 { evalTemplateString, sanitizeHTML } from '../../core/internal/sanitize';\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    // Parse light DOM configuration first (may update this.config)\n    this.#parseLightDomCard();\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  // #region Light DOM Parsing\n\n  /**\n   * Parse `<tbw-grid-responsive-card>` elements from the grid's light DOM.\n   *\n   * Allows declarative configuration:\n   * ```html\n   * <tbw-grid [rows]=\"data\">\n   *   <tbw-grid-responsive-card breakpoint=\"500\" card-row-height=\"80\">\n   *     <div class=\"custom-card\">\n   *       <strong>{{ row.name }}</strong>\n   *       <span>{{ row.email }}</span>\n   *     </div>\n   *   </tbw-grid-responsive-card>\n   * </tbw-grid>\n   * ```\n   *\n   * Attributes:\n   * - `breakpoint`: number - Width threshold for responsive mode\n   * - `card-row-height`: number | 'auto' - Card height (default: 'auto')\n   * - `hidden-columns`: string - Comma-separated fields to hide\n   * - `hide-header`: 'true' | 'false' - Hide header row (default: 'true')\n   * - `debounce-ms`: number - Resize debounce delay (default: 100)\n   */\n  #parseLightDomCard(): void {\n    const gridEl = this.grid as unknown as Element;\n    if (!gridEl || typeof gridEl.querySelector !== 'function') return;\n\n    const cardEl = gridEl.querySelector('tbw-grid-responsive-card');\n    if (!cardEl) return;\n\n    // Check if a framework adapter wants to handle this element\n    // (e.g., React adapter intercepts for JSX rendering)\n    const gridWithAdapter = gridEl as unknown as {\n      __frameworkAdapter?: {\n        parseResponsiveCardElement?: (el: Element) => ((row: T, rowIndex: number) => HTMLElement) | undefined;\n      };\n    };\n    if (gridWithAdapter.__frameworkAdapter?.parseResponsiveCardElement) {\n      const adapterRenderer = gridWithAdapter.__frameworkAdapter.parseResponsiveCardElement(cardEl);\n      if (adapterRenderer) {\n        this.config = { ...this.config, cardRenderer: adapterRenderer };\n        // Continue to parse attributes even if adapter provides renderer\n      }\n    }\n\n    // Parse attributes for configuration\n    const breakpointAttr = cardEl.getAttribute('breakpoint');\n    const cardRowHeightAttr = cardEl.getAttribute('card-row-height');\n    const hiddenColumnsAttr = cardEl.getAttribute('hidden-columns');\n    const hideHeaderAttr = cardEl.getAttribute('hide-header');\n    const debounceMsAttr = cardEl.getAttribute('debounce-ms');\n\n    const configUpdates: Partial<ResponsivePluginConfig<T>> = {};\n\n    if (breakpointAttr !== null) {\n      const breakpoint = parseInt(breakpointAttr, 10);\n      if (!isNaN(breakpoint)) {\n        configUpdates.breakpoint = breakpoint;\n      }\n    }\n\n    if (cardRowHeightAttr !== null) {\n      configUpdates.cardRowHeight = cardRowHeightAttr === 'auto' ? 'auto' : parseInt(cardRowHeightAttr, 10);\n    }\n\n    if (hiddenColumnsAttr !== null) {\n      // Parse comma-separated field names\n      configUpdates.hiddenColumns = hiddenColumnsAttr\n        .split(',')\n        .map((s) => s.trim())\n        .filter((s) => s.length > 0);\n    }\n\n    if (hideHeaderAttr !== null) {\n      configUpdates.hideHeader = hideHeaderAttr !== 'false';\n    }\n\n    if (debounceMsAttr !== null) {\n      const debounceMs = parseInt(debounceMsAttr, 10);\n      if (!isNaN(debounceMs)) {\n        configUpdates.debounceMs = debounceMs;\n      }\n    }\n\n    // Get template content from innerHTML (only if no renderer already set)\n    const templateHTML = cardEl.innerHTML.trim();\n    if (templateHTML && !this.config.cardRenderer && !gridWithAdapter.__frameworkAdapter?.parseResponsiveCardElement) {\n      // Create a template-based renderer using the inner HTML\n      configUpdates.cardRenderer = (row: T): HTMLElement => {\n        // Evaluate template expressions like {{ row.field }}\n        const evaluated = evalTemplateString(templateHTML, { value: row, row: row as Record<string, unknown> });\n        // Sanitize the result to prevent XSS\n        const sanitized = sanitizeHTML(evaluated);\n        const container = document.createElement('div');\n        container.className = 'tbw-responsive-card-content';\n        container.innerHTML = sanitized;\n        return container;\n      };\n    }\n\n    // Merge updates into config (light DOM values override constructor config)\n    if (Object.keys(configUpdates).length > 0) {\n      this.config = { ...this.config, ...configUpdates };\n    }\n  }\n\n  // #endregion\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   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.\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   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.\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   * Get the height of a specific row based on its type (group row vs card row).\n   * Returns undefined if not in responsive mode.\n   *\n   * @param row - The row data\n   * @param _index - The row index (unused, but part of the interface)\n   * @returns The row height in pixels, or undefined if not in responsive mode\n   */\n  override getRowHeight(row: unknown, _index: number): number | undefined {\n    // Only applies when in responsive mode with cardRenderer\n    if (!this.#isResponsive || !this.config.cardRenderer) {\n      return undefined;\n    }\n\n    // Check if this is a group row\n    if ((row as { __isGroupRow?: boolean }).__isGroupRow) {\n      return this.#getGroupRowHeight();\n    }\n\n    // Regular card row\n    return this.#getCardHeight();\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","#parseLightDomCard","#buildHiddenColumnSets","a","b","entries","gridEl","cardEl","gridWithAdapter","adapterRenderer","breakpointAttr","cardRowHeightAttr","hiddenColumnsAttr","hideHeaderAttr","debounceMsAttr","configUpdates","breakpoint","s","debounceMs","templateHTML","row","evaluated","evalTemplateString","sanitized","sanitizeHTML","container","hiddenColumns","col","query","#measureCardHeightFromDOM","hasHiddenColumns","hasValueOnlyColumns","cells","cell","field","#checkMultiBreakpoint","shouldBeResponsive","newActiveBreakpoint","bp","#originalRowHeight","animate","internalGrid","scrollArea","rows","#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","_index","#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(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:has(.selection){-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".
+(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(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 p(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 C(n,e,t){return t.some(s=>A(n,e,s))}function x(n){const e=[],t=w(n);for(let s=t.startRow;s<=t.endRow;s++)for(let i=t.startCol;i<=t.endCol;i++)e.push({row:s,col:i});return e}function v(n){const e=new Map;for(const t of n)for(const s of x(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:has(.selection){-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);padding-top:calc(var(--tbw-cell-padding, 2px 8px) - 2px)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color);padding-bottom:calc(var(--tbw-cell-padding, 2px 8px) - 2px)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color);padding-left:calc(var(--tbw-cell-padding, 2px 8px) - 2px)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color);padding-right:calc(var(--tbw-cell-padding, 2px 8px) - 2px)}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(i=>({from:{row:i,col:0},to:{row:i,col:t-1}}));return{mode:n,ranges:s}}return n==="range"&&e.ranges.length>0?{mode:n,ranges:p(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 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"})}));
+  → 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 i=this.rows[e];if(!i)return!1;const r=t!==void 0?this.columns[t]:void 0;return s(i,e,r,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:i}=e,{mode:r,triggerOn:l="click"}=this.config;if(i.type!==l)return!1;const o=this.columns[s],d=o&&f.isUtilityColumn(o);if(r==="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(r==="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(r==="range"){if(d||!this.isCellSelectable(t,s))return!1;const c=i.shiftKey,u=i.ctrlKey||i.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,i=["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"&&i)return queueMicrotask(()=>{const r=this.grid._focusRow,l=this.grid._focusCol;this.isCellSelectable(r,l)?this.selectedCell={row:r,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 r=this.grid._focusRow;this.isRowSelectable(r)?(this.selected.clear(),this.selected.add(r),this.lastSelected=r):this.selected.clear(),this.emit("selection-change",this.#e()),this.requestAfterRender()}),!1;if(t==="range"&&i){const r=e.key==="Tab",l=e.shiftKey&&!r;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 r=this.rows.length,l=this.columns.length;if(r>0&&l>0){e.preventDefault(),e.stopPropagation();const o={startRow:0,startCol:0,endRow:r-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,i=e.colIndex,r=e.originalEvent.ctrlKey||e.originalEvent.metaKey,l={startRow:s,startCol:i,endRow:s,endCol:i};return!r&&this.ranges.length===1&&m(this.ranges[0],l)?(this.cellAnchor={row:s,col:i},!0):(this.cellAnchor={row:s,col:i},r||(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 i=R(this.cellAnchor,{row:e.rowIndex,col:t}),r=this.ranges.length>0?this.ranges[this.ranges.length-1]:null;return r&&m(r,i)||(this.ranges.length>0?this.ranges[this.ranges.length-1]=i:this.ranges.push(i),this.activeRange=i,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 r=e.querySelectorAll(".data-grid-row");if(r.forEach(l=>{l.classList.remove("selected","row-focus"),s&&l.removeAttribute("data-selectable")}),t==="row"&&(g.clearCellFocus(e),r.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(C(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:i}=this.pendingKeyboardUpdate;this.pendingKeyboardUpdate=null;const r=this.grid._focusRow,l=this.grid._focusCol;if(i&&this.cellAnchor){const o=R(this.cellAnchor,{row:r,col:l});this.ranges=[o],this.activeRange=o}else i||(this.ranges=[],this.activeRange=null,this.cellAnchor={row:r,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 v(this.ranges)}isCellSelected(e,t){return C(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:p(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"})}));
 //# sourceMappingURL=selection.umd.js.map