@toolbox-web/grid-angular 0.13.2 → 0.14.0

package/README.md

@@ -559,7 +559,7 @@ The grid can be used as an Angular form control with `formControlName` or `formC
 ```typescript
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Grid, GridFormControl } from '@toolbox-web/grid-angular';
+import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
 import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
 import type { GridConfig } from '@toolbox-web/grid';
 
@@ -569,7 +569,7 @@ interface Employee {
 }
 
 @Component({
-  imports: [Grid, GridFormControl, ReactiveFormsModule],
+  imports: [Grid, GridFormArray, ReactiveFormsModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: `
     <tbw-grid [formControl]="employeesControl" [gridConfig]="config" style="height: 400px; display: block;" />
@@ -602,11 +602,11 @@ export class MyComponent {
 ```typescript
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Grid, GridFormControl } from '@toolbox-web/grid-angular';
+import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
 import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
 
 @Component({
-  imports: [Grid, GridFormControl, ReactiveFormsModule],
+  imports: [Grid, GridFormArray, ReactiveFormsModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: `
     <form [formGroup]="form">
@@ -670,7 +670,7 @@ Angular's form system automatically adds these classes to the grid element:
 
 Additionally, when the control is disabled:
 
-- `.form-disabled` - Added by `GridFormControl`
+- `.form-disabled` - Added by `GridFormArray`
 
 You can style these states:
 
@@ -692,7 +692,7 @@ For fine-grained control over validation and form state at the cell level, use a
 ```typescript
 import { Component, CUSTOM_ELEMENTS_SCHEMA, input, output } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Grid, GridFormControl, TbwEditor, TbwRenderer } from '@toolbox-web/grid-angular';
+import { Grid, GridFormArray, TbwEditor, TbwRenderer } from '@toolbox-web/grid-angular';
 import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
 
 // Custom editor that uses the FormControl directly
@@ -731,7 +731,7 @@ export class ValidatedInputComponent {
 }
 
 @Component({
-  imports: [Grid, GridFormControl, TbwRenderer, TbwEditor, ReactiveFormsModule, ValidatedInputComponent],
+  imports: [Grid, GridFormArray, TbwRenderer, TbwEditor, ReactiveFormsModule, ValidatedInputComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: `
     <tbw-grid [formControl]="employeesArray" [gridConfig]="config">
@@ -826,12 +826,12 @@ if (context?.hasFormGroups) {
 
 The adapter provides base classes that eliminate boilerplate when building custom editors and filter panels.
 
-| Base Class | Extends | Purpose |
-| --- | --- | --- |
-| `BaseGridEditor` | — | Common inputs (`value`, `row`, `column`, `control`), outputs (`commit`, `cancel`), validation helpers |
-| `BaseGridEditorCVA` | `BaseGridEditor` | Adds `ControlValueAccessor` for dual grid + standalone form use |
-| `BaseOverlayEditor` | `BaseGridEditor` | Floating overlay panel with CSS Anchor Positioning, focus gating, click-outside detection |
-| `BaseFilterPanel` | — | Ready-made `params` input for `FilteringPlugin`, with `applyAndClose()` / `clearAndClose()` helpers |
+| Base Class          | Extends          | Purpose                                                                                               |
+| ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------- |
+| `BaseGridEditor`    | —                | Common inputs (`value`, `row`, `column`, `control`), outputs (`commit`, `cancel`), validation helpers |
+| `BaseGridEditorCVA` | `BaseGridEditor` | Adds `ControlValueAccessor` for dual grid + standalone form use                                       |
+| `BaseOverlayEditor` | `BaseGridEditor` | Floating overlay panel with CSS Anchor Positioning, focus gating, click-outside detection             |
+| `BaseFilterPanel`   | —                | Ready-made `params` input for `FilteringPlugin`, with `applyAndClose()` / `clearAndClose()` helpers   |
 
 ### BaseOverlayEditor Example
 
@@ -853,7 +853,7 @@ import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
       <input type="date" [value]="currentValue()" (change)="selectAndClose($event.target.value)" />
       <button (click)="hideOverlay()">Cancel</button>
     </div>
-  `
+  `,
 })
 export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> implements AfterViewInit {
   @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
@@ -866,8 +866,12 @@ export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> implem
     if (this.isCellFocused()) this.showOverlay();
   }
 
-  protected getInlineInput() { return this.inputRef?.nativeElement ?? null; }
-  protected onOverlayOutsideClick() { this.hideOverlay(); }
+  protected getInlineInput() {
+    return this.inputRef?.nativeElement ?? null;
+  }
+  protected onOverlayOutsideClick() {
+    this.hideOverlay();
+  }
 
   selectAndClose(date: string): void {
     this.commitValue(date);
@@ -888,7 +892,7 @@ import { BaseFilterPanel } from '@toolbox-web/grid-angular';
     <input #input (keydown.enter)="applyAndClose()" />
     <button (click)="applyAndClose()">Apply</button>
     <button (click)="clearAndClose()">Clear</button>
-  `
+  `,
 })
 export class TextFilterComponent extends BaseFilterPanel {
   @ViewChild('input') input!: ElementRef<HTMLInputElement>;
@@ -908,7 +912,7 @@ export class TextFilterComponent extends BaseFilterPanel {
 | Directive          | Selector                                             | Description                            |
 | ------------------ | ---------------------------------------------------- | -------------------------------------- |
 | `Grid`             | `tbw-grid`                                           | Main directive, auto-registers adapter |
-| `GridFormControl`  | `tbw-grid[formControlName]`, `tbw-grid[formControl]` | Reactive Forms integration             |
+| `GridFormArray`    | `tbw-grid[formControlName]`, `tbw-grid[formControl]` | Reactive Forms integration             |
 | `TbwRenderer`      | `*tbwRenderer`                                       | Structural directive for cell views    |
 | `TbwEditor`        | `*tbwEditor`                                         | Structural directive for cell editors  |
 | `GridColumnView`   | `tbw-grid-column-view`                               | Nested directive for cell views        |
@@ -918,12 +922,12 @@ export class TextFilterComponent extends BaseFilterPanel {
 
 ### Base Classes
 
-| Class | Description |
-| --- | --- |
-| `BaseGridEditor<TRow, TValue>` | Base class for inline cell editors with validation helpers |
+| Class                             | Description                                                          |
+| --------------------------------- | -------------------------------------------------------------------- |
+| `BaseGridEditor<TRow, TValue>`    | Base class for inline cell editors with validation helpers           |
 | `BaseGridEditorCVA<TRow, TValue>` | `BaseGridEditor` + `ControlValueAccessor` for dual grid/form editors |
-| `BaseOverlayEditor<TRow, TValue>` | `BaseGridEditor` + floating overlay panel infrastructure |
-| `BaseFilterPanel` | Base class for custom filter panels with `params` input |
+| `BaseOverlayEditor<TRow, TValue>` | `BaseGridEditor` + floating overlay panel infrastructure             |
+| `BaseFilterPanel`                 | Base class for custom filter panels with `params` input              |
 
 ### Type Registry
 
@@ -951,12 +955,29 @@ export class TextFilterComponent extends BaseFilterPanel {
 
 ### Grid Directive Outputs
 
-| Output         | Type                              | Description          |
-| -------------- | --------------------------------- | -------------------- |
-| `cellCommit`   | `EventEmitter<CellCommitEvent>`   | Cell value committed |
-| `rowCommit`    | `EventEmitter<RowCommitEvent>`    | Row edit committed   |
-| `sortChange`   | `EventEmitter<SortChangeEvent>`   | Sort state changed   |
-| `columnResize` | `EventEmitter<ColumnResizeEvent>` | Column resized       |
+| Output              | Type                                       | Description                  |
+| ------------------- | ------------------------------------------ | ---------------------------- |
+| `cellCommit`        | `OutputEmitterRef<CellCommitEvent>`        | Cell value committed         |
+| `rowCommit`         | `OutputEmitterRef<RowCommitEvent>`         | Row edit committed           |
+| `sortChange`        | `OutputEmitterRef<SortChangeDetail>`       | Sort state changed           |
+| `columnResize`      | `OutputEmitterRef<ColumnResizeDetail>`     | Column resized               |
+| `cellClick`         | `OutputEmitterRef<CellClickDetail>`        | Cell clicked                 |
+| `rowClick`          | `OutputEmitterRef<RowClickDetail>`         | Row clicked                  |
+| `cellActivate`      | `OutputEmitterRef<CellActivateDetail>`     | Cell focus changed           |
+| `cellChange`        | `OutputEmitterRef<CellChangeDetail>`       | Cell value changed           |
+| `changedRowsReset`  | `OutputEmitterRef<ChangedRowsResetDetail>` | Changed rows cache cleared   |
+| `filterChange`      | `OutputEmitterRef<FilterChangeDetail>`     | Filter state changed         |
+| `columnMove`        | `OutputEmitterRef<ColumnMoveDetail>`       | Column moved                 |
+| `columnVisibility`  | `OutputEmitterRef<ColumnVisibilityDetail>` | Column visibility changed    |
+| `columnStateChange` | `OutputEmitterRef<GridColumnState>`        | Column state changed         |
+| `selectionChange`   | `OutputEmitterRef<SelectionChangeDetail>`  | Selection changed            |
+| `rowMove`           | `OutputEmitterRef<RowMoveDetail>`          | Row moved (drag & drop)      |
+| `groupToggle`       | `OutputEmitterRef<GroupToggleDetail>`      | Group expanded/collapsed     |
+| `treeExpand`        | `OutputEmitterRef<TreeExpandDetail>`       | Tree node expanded/collapsed |
+| `detailExpand`      | `OutputEmitterRef<DetailExpandDetail>`     | Detail panel toggled         |
+| `responsiveChange`  | `OutputEmitterRef<ResponsiveChangeDetail>` | Responsive mode changed      |
+| `copy`              | `OutputEmitterRef<CopyDetail>`             | Data copied to clipboard     |
+| `paste`             | `OutputEmitterRef<PasteDetail>`            | Data pasted from clipboard   |
 
 ### GridDetailView Inputs
 
@@ -1008,12 +1029,7 @@ import type {
 } from '@toolbox-web/grid-angular';
 
 // Base classes for custom editors and filter panels
-import {
-  BaseGridEditor,
-  BaseGridEditorCVA,
-  BaseOverlayEditor,
-  BaseFilterPanel,
-} from '@toolbox-web/grid-angular';
+import { BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, BaseFilterPanel } from '@toolbox-web/grid-angular';
 
 // Type guard for component class detection
 import { isComponentClass } from '@toolbox-web/grid-angular';

package/fesm2022/toolbox-web-grid-angular-features-selection.mjs

@@ -90,6 +90,7 @@ function injectGridSelection() {
     // Reactive selection state
     const selectionSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectionSignal" }] : []));
     const selectedRowIndicesSignal = signal([], ...(ngDevMode ? [{ debugName: "selectedRowIndicesSignal" }] : []));
+    const selectedRowsSignal = signal([], ...(ngDevMode ? [{ debugName: "selectedRowsSignal" }] : []));
     // Lazy discovery: cached grid reference
     let cachedGrid = null;
     let readyPromiseStarted = false;
@@ -104,6 +105,7 @@ function injectGridSelection() {
         if (plugin) {
             selectionSignal.set(plugin.getSelection());
             selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);
+            selectedRowsSignal.set(plugin.getSelectedRows());
         }
     };
     /**
@@ -151,6 +153,7 @@ function injectGridSelection() {
             selectionSignal.set(plugin.getSelection());
             const mode = plugin.config?.mode;
             selectedRowIndicesSignal.set(mode === 'row' ? plugin.getSelectedRowIndices() : []);
+            selectedRowsSignal.set(plugin.getSelectedRows());
         }
     };
     // Discover the grid after the first render so the selection-change
@@ -179,6 +182,7 @@ function injectGridSelection() {
         isReady: isReady.asReadonly(),
         selection: selectionSignal.asReadonly(),
         selectedRowIndices: selectedRowIndicesSignal.asReadonly(),
+        selectedRows: selectedRowsSignal.asReadonly(),
         selectAll: () => {
             const plugin = getPlugin();
             if (!plugin) {

package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport {\n  SelectionPlugin,\n  type CellRange,\n  type SelectionChangeDetail,\n  type SelectionResult,\n} from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state (imperative, point-in-time snapshot).\n   * For reactive selection state, use the `selection` signal instead.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Reactive selection state. Updates automatically whenever the selection changes.\n   * Null when no SelectionPlugin is active or no selection has been made yet.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selection()?.ranges?.length ?? 0 }} cells selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => (this.selection.selection()?.ranges?.length ?? 0) > 0);\n   * ```\n   */\n  selection: Signal<SelectionResult | null>;\n\n  /**\n   * Reactive selected row indices (sorted ascending). Updates automatically.\n   * Convenience signal for row-mode selection — returns `[]` in cell/range modes\n   * or when nothing is selected.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selectedRowIndices().length }} rows selected\n   *\n   * // In computed:\n   * readonly selectedRows = computed(() =>\n   *   this.selection.selectedRowIndices().map(i => this.rows[i])\n   * );\n   * ```\n   */\n  selectedRowIndices: Signal<number[]>;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive selection state\n  const selectionSignal = signal<SelectionResult | null>(null);\n  const selectedRowIndicesSignal = signal<number[]>([]);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Handle selection-change events from the grid.\n   * Updates both reactive signals.\n   */\n  const onSelectionChange = (e: Event): void => {\n    const detail = (e as CustomEvent<SelectionChangeDetail>).detail;\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  /**\n   * Attach the selection-change event listener to the grid element.\n   * Called once when the grid is first discovered.\n   */\n  const attachListener = (grid: DataGridElement<TRow>): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('selection-change', onSelectionChange);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('selection-change', onSelectionChange);\n    });\n  };\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListener(grid);\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  /**\n   * Sync reactive signals with the current plugin state.\n   * Called once when the grid is first discovered and ready.\n   */\n  const syncSignals = (): void => {\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      const mode = (plugin as any).config?.mode;\n      selectedRowIndicesSignal.set(mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  // Discover the grid after the first render so the selection-change\n  // listener is attached without requiring a programmatic method call.\n  // Uses a MutationObserver as fallback for lazy-rendered tabs, *ngIf,\n  // @defer, etc. where the grid may not be in the DOM on first render.\n  afterNextRender(() => {\n    const grid = getGrid();\n    if (grid) {\n      grid.ready?.().then(syncSignals);\n      return;\n    }\n\n    // Grid not in DOM yet — watch for it to appear.\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      const discovered = getGrid();\n      if (discovered) {\n        observer.disconnect();\n        discovered.ready?.().then(syncSignals);\n      }\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n    selection: selectionSignal.asReadonly(),\n    selectedRowIndices: selectedRowIndicesSignal.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport {\n  SelectionPlugin,\n  type CellRange,\n  type SelectionChangeDetail,\n  type SelectionResult,\n} from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods<TRow = unknown> {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state (imperative, point-in-time snapshot).\n   * For reactive selection state, use the `selection` signal instead.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Reactive selection state. Updates automatically whenever the selection changes.\n   * Null when no SelectionPlugin is active or no selection has been made yet.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selection()?.ranges?.length ?? 0 }} cells selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => (this.selection.selection()?.ranges?.length ?? 0) > 0);\n   * ```\n   */\n  selection: Signal<SelectionResult | null>;\n\n  /**\n   * Reactive selected row indices (sorted ascending). Updates automatically.\n   * Convenience signal for row-mode selection — returns `[]` in cell/range modes\n   * or when nothing is selected.\n   *\n   * **Prefer `selectedRows`** for getting actual row objects — it handles\n   * index-to-object resolution correctly regardless of sorting/filtering.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selectedRowIndices().length }} rows selected\n   * ```\n   */\n  selectedRowIndices: Signal<number[]>;\n\n  /**\n   * Reactive selected row objects. Updates automatically whenever the selection changes.\n   * Works in all selection modes (row, cell, range) — returns the actual row objects\n   * from the grid's processed (sorted/filtered) rows.\n   *\n   * This is the recommended way to get selected rows. Unlike manual index mapping,\n   * it correctly resolves rows even when the grid is sorted or filtered.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection<Employee>();\n   *\n   * // In template:\n   * // {{ selection.selectedRows().length }} rows selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => this.selection.selectedRows().length > 0);\n   * ```\n   */\n  selectedRows: Signal<TRow[]>;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods<TRow> {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive selection state\n  const selectionSignal = signal<SelectionResult | null>(null);\n  const selectedRowIndicesSignal = signal<number[]>([]);\n  const selectedRowsSignal = signal<TRow[]>([]);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Handle selection-change events from the grid.\n   * Updates both reactive signals.\n   */\n  const onSelectionChange = (e: Event): void => {\n    const detail = (e as CustomEvent<SelectionChangeDetail>).detail;\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);\n      selectedRowsSignal.set(plugin.getSelectedRows<TRow>());\n    }\n  };\n\n  /**\n   * Attach the selection-change event listener to the grid element.\n   * Called once when the grid is first discovered.\n   */\n  const attachListener = (grid: DataGridElement<TRow>): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('selection-change', onSelectionChange);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('selection-change', onSelectionChange);\n    });\n  };\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListener(grid);\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  /**\n   * Sync reactive signals with the current plugin state.\n   * Called once when the grid is first discovered and ready.\n   */\n  const syncSignals = (): void => {\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      const mode = (plugin as any).config?.mode;\n      selectedRowIndicesSignal.set(mode === 'row' ? plugin.getSelectedRowIndices() : []);\n      selectedRowsSignal.set(plugin.getSelectedRows<TRow>());\n    }\n  };\n\n  // Discover the grid after the first render so the selection-change\n  // listener is attached without requiring a programmatic method call.\n  // Uses a MutationObserver as fallback for lazy-rendered tabs, *ngIf,\n  // @defer, etc. where the grid may not be in the DOM on first render.\n  afterNextRender(() => {\n    const grid = getGrid();\n    if (grid) {\n      grid.ready?.().then(syncSignals);\n      return;\n    }\n\n    // Grid not in DOM yet — watch for it to appear.\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      const discovered = getGrid();\n      if (discovered) {\n        observer.disconnect();\n        discovered.ready?.().then(syncSignals);\n      }\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n    selection: selectionSignal.asReadonly(),\n    selectedRowIndices: selectedRowIndicesSignal.asReadonly(),\n    selectedRows: selectedRowsSignal.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbox-web-grid-angular.mjs

@@ -1141,6 +1141,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: '[tbwEditor]' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Editor Wiring Helpers
+ *
+ * Pure functions for wiring up commit/cancel handlers on editor components.
+ * Extracted from GridAdapter to enable unit testing without Angular DI.
+ *
+ * @internal
+ */
+// #region subscribeToOutput
+/**
+ * Subscribes to an Angular output on a component instance.
+ * Works with both EventEmitter and OutputEmitterRef (signal outputs).
+ *
+ * @param instance - The component instance (as a plain record)
+ * @param outputName - Name of the output property
+ * @param callback - Callback to invoke when the output emits
+ * @returns `true` if the output was found and subscribed, `false` otherwise
+ * @internal
+ */
+function subscribeToOutput(instance, outputName, callback) {
+    const output = instance[outputName];
+    if (!output)
+        return false;
+    // Check if it's an Observable-like (EventEmitter or OutputEmitterRef)
+    if (typeof output.subscribe === 'function') {
+        output.subscribe(callback);
+        return true;
+    }
+    return false;
+}
+// #endregion
+// #region wireEditorCallbacks
+/**
+ * Wire up commit/cancel handlers for an editor component.
+ *
+ * Supports both Angular outputs and DOM CustomEvents. When both fire
+ * (the BaseGridEditor pattern), a per-action flag prevents the callback
+ * from running twice.
+ *
+ * @param hostElement - The host DOM element for the editor
+ * @param instance - The component instance (as a plain record)
+ * @param commit - Callback to invoke when committing a value
+ * @param cancel - Callback to invoke when cancelling the edit
+ * @internal
+ */
+function wireEditorCallbacks(hostElement, instance, commit, cancel) {
+    // Guard: when both Angular output AND DOM event fire (BaseGridEditor.commitValue
+    // emits both), only the first should call commit/cancel(). The flags prevent
+    // double-fires that cause redundant cell-commit events and extra dirty-tracking work.
+    let commitHandledByOutput = false;
+    let cancelHandledByOutput = false;
+    subscribeToOutput(instance, 'commit', (value) => {
+        commitHandledByOutput = true;
+        commit(value);
+    });
+    subscribeToOutput(instance, 'cancel', () => {
+        cancelHandledByOutput = true;
+        cancel();
+    });
+    // Also listen for DOM CustomEvents as a fallback for editors that don't
+    // have Angular commit/cancel outputs (e.g., third-party web components).
+    hostElement.addEventListener('commit', (e) => {
+        e.stopPropagation();
+        if (commitHandledByOutput) {
+            // Already handled by the Angular output subscription — reset and skip.
+            commitHandledByOutput = false;
+            return;
+        }
+        const customEvent = e;
+        commit(customEvent.detail);
+    });
+    hostElement.addEventListener('cancel', (e) => {
+        e.stopPropagation();
+        if (cancelHandledByOutput) {
+            cancelHandledByOutput = false;
+            return;
+        }
+        cancel();
+    });
+}
+// #endregion
+
 /**
  * Type-level default registry for Angular applications.
  *
@@ -1363,6 +1445,32 @@ function getAnyEditorTemplate(element) {
  * - Handles editor callbacks (onCommit/onCancel)
  * - Manages view lifecycle and change detection
  */
+/**
+ * Synchronize an embedded view's rootNodes into a stable container element.
+ *
+ * Angular's control flow blocks (@if, @for, @switch) can dynamically add or
+ * remove rootNodes during `detectChanges()`. This helper ensures the container
+ * always reflects the current set of rootNodes, preventing orphaned or stale
+ * nodes when the template's DOM structure changes between renders.
+ */
+function syncRootNodes(viewRef, container) {
+    // Fast path: if the container already holds exactly the right nodes, skip DOM mutations.
+    const rootNodes = viewRef.rootNodes;
+    const children = container.childNodes;
+    let needsSync = children.length !== rootNodes.length;
+    if (!needsSync) {
+        for (let i = 0; i < rootNodes.length; i++) {
+            if (children[i] !== rootNodes[i]) {
+                needsSync = true;
+                break;
+            }
+        }
+    }
+    if (needsSync) {
+        // Clear and re-append. replaceChildren is efficient (single reflow).
+        container.replaceChildren(...rootNodes);
+    }
+}
 class GridAdapter {
     injector;
     appRef;
@@ -1494,11 +1602,17 @@ class GridAdapter {
             // This is important when only an editor template is provided (no view template)
             return undefined;
         }
-        // Cell cache for this column - maps cell element to its view ref and root node.
+        // Cell cache for this column - maps cell element to its view ref and container.
         // When the grid recycles pool elements during scroll, the same cellEl is reused
         // for different row data. By caching per cellEl, we reuse the Angular view and
         // just update its context instead of creating a new embedded view every time.
         // This matches what React and Vue adapters do with their cell caches.
+        //
+        // IMPORTANT: We always use a stable wrapper container (display:contents) rather
+        // than caching individual rootNodes. This is critical because Angular's control
+        // flow (@if, @for, @switch) can dynamically add/remove rootNodes during
+        // detectChanges(). If we cached a single rootNode, newly created nodes (e.g.,
+        // from an @if becoming true) would be orphaned outside the grid cell.
         const cellCache = new WeakMap();
         return (ctx) => {
             // Skip rendering if the cell is in editing mode
@@ -1516,7 +1630,10 @@ class GridAdapter {
                     cached.viewRef.context.row = ctx.row;
                     cached.viewRef.context.column = ctx.column;
                     cached.viewRef.detectChanges();
-                    return cached.rootNode;
+                    // Re-sync rootNodes into the container. Angular's control flow (@if/@for)
+                    // may have added or removed nodes during detectChanges().
+                    syncRootNodes(cached.viewRef, cached.container);
+                    return cached.container;
                 }
             }
             // Create the context for the template
@@ -1531,29 +1648,16 @@ class GridAdapter {
             this.viewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
-            // Find the first Element root node. When *tbwRenderer is used on <ng-container>,
-            // rootNodes[0] is a comment node (<!--ng-container-->); the actual content is in
-            // subsequent root nodes. For single-element templates, rootNodes[0] IS the element.
-            let rootNode = viewRef.rootNodes[0];
-            const elementNodes = viewRef.rootNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
-            if (elementNodes.length === 1) {
-                // Single element among the root nodes — use it directly
-                rootNode = elementNodes[0];
-            }
-            else if (elementNodes.length > 1) {
-                // Multiple element nodes — wrap in a span container so all are rendered
-                const wrapper = document.createElement('span');
-                wrapper.style.display = 'contents';
-                for (const node of viewRef.rootNodes) {
-                    wrapper.appendChild(node);
-                }
-                rootNode = wrapper;
-            }
+            // Always use a stable wrapper container so Angular can freely add/remove
+            // rootNodes (via @if, @for, etc.) without orphaning them outside the grid cell.
+            const container = document.createElement('span');
+            container.style.display = 'contents';
+            syncRootNodes(viewRef, container);
             // Cache for reuse on scroll recycles
             if (cellEl) {
-                cellCache.set(cellEl, { viewRef, rootNode });
+                cellCache.set(cellEl, { viewRef, container });
             }
-            return rootNode;
+            return container;
         };
     }
     /**
@@ -1872,24 +1976,6 @@ class GridAdapter {
         componentRef.changeDetectorRef.detectChanges();
         return { hostElement, componentRef };
     }
-    /**
-     * Wires up commit/cancel handlers for an editor component.
-     * Supports both Angular outputs and DOM CustomEvents.
-     * @internal
-     */
-    wireEditorCallbacks(hostElement, componentRef, commit, cancel) {
-        // Subscribe to Angular outputs (commit/cancel) on the component instance.
-        // This works with Angular's output() signal API.
-        const instance = componentRef.instance;
-        this.subscribeToOutput(instance, 'commit', commit);
-        this.subscribeToOutput(instance, 'cancel', cancel);
-        // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
-        hostElement.addEventListener('commit', (e) => {
-            const customEvent = e;
-            commit(customEvent.detail);
-        });
-        hostElement.addEventListener('cancel', () => cancel());
-    }
     /**
      * Creates a renderer function from an Angular component class.
      * @internal
@@ -1935,7 +2021,7 @@ class GridAdapter {
                 row: ctx.row,
                 column: ctx.column,
             }, true);
-            this.wireEditorCallbacks(hostElement, componentRef, (value) => ctx.commit(value), () => ctx.cancel());
+            wireEditorCallbacks(hostElement, componentRef.instance, (value) => ctx.commit(value), () => ctx.cancel());
             // Auto-update editor when value changes externally (e.g., via updateRow cascade).
             // This keeps Angular component editors in sync without manual DOM patching.
             ctx.onValueChange?.((newVal) => {
@@ -1987,20 +2073,6 @@ class GridAdapter {
             container.appendChild(hostElement);
         };
     }
-    /**
-     * Subscribes to an Angular output on a component instance.
-     * Works with both EventEmitter and OutputEmitterRef (signal outputs).
-     * @internal
-     */
-    subscribeToOutput(instance, outputName, callback) {
-        const output = instance[outputName];
-        if (!output)
-            return;
-        // Check if it's an Observable-like (EventEmitter or OutputEmitterRef)
-        if (typeof output.subscribe === 'function') {
-            output.subscribe(callback);
-        }
-    }
     /**
      * Sets component inputs using Angular's setInput API.
      * @internal