@toolbox-web/grid-angular 2.2.0 → 2.3.0

package/README.md

@@ -77,18 +77,17 @@ export class MyGridComponent {
 
 ## Enabling Features
 
-`<tbw-grid>` supports three patterns for turning on plugins. Pick whichever fits the
+`<tbw-grid>` supports two patterns for turning on plugins. Pick whichever fits the
 component — they can be mixed.
 
-| Pattern                                                   | Best for                                                                         | v2 status                                                                              |
-| --------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| `gridConfig.features` (object literal)                    | Configuration-driven apps that prefer a single setup object                      | ✅ Unchanged — fully supported                                                         |
-| **Per-feature directive** (e.g. `GridFilteringDirective`) | Template-driven apps that want signal inputs/outputs **and** the smallest bundle | ✅ **Recommended** — the future-proof path                                             |
-| Inputs/outputs on `Grid` (e.g. `[filtering]`)             | v1.x apps already on this style                                                  | ⚠️ **Deprecated** — bindings remain for v1.x compatibility but will be removed in v2.0 |
+| Pattern                                                   | Best for                                                                         |
+| --------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `gridConfig.features` (object literal)                    | Configuration-driven apps that prefer a single setup object                      |
+| **Per-feature directive** (e.g. `GridFilteringDirective`) | Template-driven apps that want signal inputs/outputs **and** the smallest bundle |
 
-> Apps that only use `gridConfig` are **not affected** by the v2 cleanup — only consumers
-> binding feature inputs directly on `<tbw-grid>` need to add the matching per-feature
-> directive to their component's `imports` before v2.
+> **Upgrading from v2?** The per-feature inputs/outputs that used to live on the central
+> `Grid` directive were removed in v3. The migration is a one-line `imports` addition per
+> feature with zero template changes.
 
 ### Recommended: Per-Feature Directives
 
@@ -126,34 +125,24 @@ import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi
 - **Compile-time safety** — Angular errors with `Can't bind to 'filtering' since it isn't
 a known property of 'tbw-grid'` if you forget the directive (stronger than React/Vue,
   which silently drop unknown props, and stronger than the runtime guard on the WC core).
-- **Same bindings, same demos** — the directive's selector matches the existing
-  attributes (`tbw-grid[filtering], tbw-grid[filterChange]`), so migrating from the
-  legacy style is a one-line `imports` addition per feature with **zero template
-  changes**.
-
-### Legacy: Inputs/Outputs on `Grid` (deprecated)
-
-The v1.x style — declaring `[filtering]`, `(filterChange)`, etc. directly on the
-`Grid` directive without importing a per-feature directive — still works for the entire
-v1.x line and is mediated by a per-element claims registry so the two styles can coexist
-on the same grid without duplicate plugins or double-emitted events. The bindings are
-marked `@deprecated` in JSDoc; v2.0 will remove them, at which point a one-line directive
-import per feature is the migration.
+- **Same bindings, same demos** — the directive's selector matches the plain
+  attributes (`tbw-grid[filtering], tbw-grid[filterChange]`), so the template markup is
+  identical no matter which pattern you came from.
 
 ### How the side-effect import works
 
 1. **Import the feature** — A side-effect import registers the feature factory with the
    core grid (`@toolbox-web/grid/features/<name>`).
-2. **Bind the input** — The per-feature directive (or, in legacy code, the input on
-   `Grid`) instantiates the plugin with the input value.
+2. **Bind the input** — The per-feature directive instantiates the plugin with the input
+   value.
 
 ```typescript
-// 1. Side-effect import — required for either pattern
+// 1. Side-effect import
 import '@toolbox-web/grid-angular/features/selection';
 import '@toolbox-web/grid-angular/features/multi-sort';
 import '@toolbox-web/grid-angular/features/filtering';
 
-// 2a. Recommended — per-feature directives in `imports`
+// 2. Per-feature directives in `imports`
 import { GridSelectionDirective } from '@toolbox-web/grid-angular/features/selection';
 import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi-sort';
 import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filtering';
@@ -170,20 +159,6 @@ import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filte
     </tbw-grid>
   `,
 })
-
-// 2b. Legacy / deprecated — same bindings on Grid alone (works in v1.x)
-@Component({
-  imports: [Grid],
-  template: `
-    <tbw-grid
-      [rows]="rows"
-      [selection]="'range'"
-      [multiSort]="true"
-      [filtering]="true"
-      style="height: 400px; display: block;">
-    </tbw-grid>
-  `,
-})
 ```
 
 ### Why Side-Effect Imports?
@@ -196,9 +171,7 @@ import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filte
 ### Available Features
 
 Import the **directive** from `@toolbox-web/grid-angular/features/<name>` and add it
-alongside `Grid` in your component's `imports` (recommended). The same `[input]` /
-`(output)` bindings on the `Grid` directive itself are still accepted in v1.x but are
-`@deprecated`.
+alongside `Grid` in your component's `imports`.
 
 | Per-Feature Directive (recommended)                                                                                         | Input                             | Example                                                                    |
 | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
@@ -489,7 +462,8 @@ export class MyGridComponent {
 Add custom sidebar panels with `GridToolPanel`:
 
 ```typescript
-import { Grid, GridToolPanel } from '@toolbox-web/grid-angular';
+import { Grid } from '@toolbox-web/grid-angular';
+import { GridToolPanel } from '@toolbox-web/grid-angular/features/shell';
 
 @Component({
   imports: [Grid, GridToolPanel, QuickFiltersPanelComponent],
@@ -1157,11 +1131,10 @@ export class TextFilterComponent extends BaseFilterPanel {
 
 ### Grid Directive Inputs
 
-| Input           | Type               | Description                                       |
-| --------------- | ------------------ | ------------------------------------------------- |
-| `gridConfig`    | `GridConfig<TRow>` | Grid config with optional component class support |
-| `angularConfig` | `GridConfig<TRow>` | **Deprecated** - use `gridConfig` instead         |
-| `customStyles`  | `string`           | Custom CSS styles to inject into the grid         |
+| Input          | Type               | Description                                       |
+| -------------- | ------------------ | ------------------------------------------------- |
+| `gridConfig`   | `GridConfig<TRow>` | Grid config with optional component class support |
+| `customStyles` | `string`           | Custom CSS styles to inject into the grid         |
 
 ### Grid Directive Outputs
 
@@ -1184,6 +1157,9 @@ export class TextFilterComponent extends BaseFilterPanel {
 | `rowMove`           | `OutputEmitterRef<RowMoveDetail>`          | Row moved (drag & drop)      |
 | `groupToggle`       | `OutputEmitterRef<GroupToggleDetail>`      | Group expanded/collapsed     |
 | `treeExpand`        | `OutputEmitterRef<TreeExpandDetail>`       | Tree node expanded/collapsed |
+| `treeLoadStart`     | `OutputEmitterRef<TreeLoadStartDetail>`    | Lazy child loading started   |
+| `treeLoadEnd`       | `OutputEmitterRef<TreeLoadEndDetail>`      | Lazy child loading finished  |
+| `treeLoadError`     | `OutputEmitterRef<TreeLoadErrorDetail>`    | Lazy child loading failed    |
 | `detailExpand`      | `OutputEmitterRef<DetailExpandDetail>`     | Detail panel toggled         |
 | `responsiveChange`  | `OutputEmitterRef<ResponsiveChangeDetail>` | Responsive mode changed      |
 | `copy`              | `OutputEmitterRef<CopyDetail>`             | Data copied to clipboard     |
@@ -1223,12 +1199,6 @@ import type {
   CellRenderer,
   CellEditor,
   TypeDefault,
-  // Deprecated aliases
-  AngularGridConfig,
-  AngularColumnConfig,
-  AngularCellRenderer,
-  AngularCellEditor,
-  AngularTypeDefault,
 } from '@toolbox-web/grid-angular';
 
 // Reactive Forms types live with the editing feature

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

@@ -1191,7 +1191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * @category Directive
  */
 /**
- * Owns the binding(s) `[editing], [cellCommit], [cellCancel], [rowCommit], [changedRowsReset], [editOpen], [beforeEditClose], [editClose], [dirtyChange]` on `<tbw-grid>` for the matching feature plugin. See `GridFilteringDirective` for the full rationale.
+ * Owns the binding(s) `[editing], [cellCommit], [cellCancel], [rowCommit], [changedRowsReset], [editOpen], [beforeEditClose], [editClose], [dirtyChange], [baselinesCaptured]` on `<tbw-grid>` for the matching feature plugin. See `GridFilteringDirective` for the full rationale.
  *
  * @category Directive
  */
@@ -1212,6 +1212,14 @@ class GridEditingDirective {
     editClose = output();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dirtyChange = output();
+    /**
+     * Fired after the render pipeline captures new dirty-tracking baseline
+     * snapshots. `detail.count` is the **total** number of tracked baselines,
+     * not just the newly captured ones.
+     *
+     * @since 2.3.0
+     */
+    baselinesCaptured = output();
     listeners = new Map();
     static EVENTS = [
         'cell-commit',
@@ -1222,6 +1230,7 @@ class GridEditingDirective {
         'before-edit-close',
         'edit-close',
         'dirty-change',
+        'baselines-captured',
     ];
     constructor() {
         const grid = this.elementRef.nativeElement;
@@ -1249,6 +1258,7 @@ class GridEditingDirective {
         wire('edit-close', this.editClose);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         wire('dirty-change', this.dirtyChange);
+        wire('baselines-captured', this.baselinesCaptured);
     }
     ngOnDestroy() {
         const grid = this.elementRef.nativeElement;
@@ -1260,15 +1270,15 @@ class GridEditingDirective {
             unclaimEvent(grid, ev);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridEditingDirective, isStandalone: true, selector: "tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", cellCancel: "cellCancel", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridEditingDirective, isStandalone: true, selector: "tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange], tbw-grid[baselinesCaptured]", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellCommit: "cellCommit", cellCancel: "cellCancel", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange", baselinesCaptured: "baselinesCaptured" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditingDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange]',
+                    selector: 'tbw-grid[editing], tbw-grid[cellCommit], tbw-grid[cellCancel], tbw-grid[rowCommit], tbw-grid[changedRowsReset], tbw-grid[editOpen], tbw-grid[beforeEditClose], tbw-grid[editClose], tbw-grid[dirtyChange], tbw-grid[baselinesCaptured]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], baselinesCaptured: [{ type: i0.Output, args: ["baselinesCaptured"] }] } });
 
 /**
  * Base class for grid cell editors.