@toolbox-web/grid-angular 2.4.0 → 2.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Øystein Amundsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,7 +1,7 @@
 # @toolbox-web/grid-angular
 
 [![npm](https://img.shields.io/npm/v/@toolbox-web/grid-angular.svg)](https://www.npmjs.com/package/@toolbox-web/grid-angular)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-❤-ea4aaa?logo=github)](https://github.com/sponsors/OysteinAmundsen)
 
 Angular adapter for `@toolbox-web/grid` data grid component. Provides directives for declarative template-driven cell renderers and editors.
@@ -344,6 +344,38 @@ export class MyGridComponent {}
 
 > **Auto-wiring:** If your editor component emits a `commit` event with the new value, the adapter automatically calls the grid's commit function. Similarly for `cancel`. This means you can skip the explicit `onCommit`/`onCancel` bindings!
 
+### Custom Header Templates
+
+`*tbwHeader` and `*tbwHeaderLabel` are the Angular equivalent of React's
+`<GridColumn headerRenderer>` render prop and Vue's `#header` / `#headerLabel` slots.
+
+```typescript
+import { Grid, TbwHeader, TbwHeaderLabel } from '@toolbox-web/grid-angular';
+
+@Component({
+  imports: [Grid, TbwHeader, TbwHeaderLabel],
+  template: `
+    <tbw-grid [rows]="rows">
+      <!-- Label only — the grid keeps sort icons, filter buttons, resize handles -->
+      <tbw-grid-column field="name">
+        <strong *tbwHeaderLabel="let value">{{ value }}</strong>
+      </tbw-grid-column>
+
+      <!-- Whole header cell — you own the affordances -->
+      <tbw-grid-column field="salary" sortable>
+        <span *tbwHeader="let value; column as column">💰 {{ value }}</span>
+      </tbw-grid-column>
+    </tbw-grid>
+  `,
+})
+export class MyGridComponent {}
+```
+
+**`*tbwHeader` context:** `$implicit` / `value` (header text), `column`, `sortState`,
+`filterActive`, `cellEl`, `renderSortIcon()`, `renderFilterButton()`.
+
+**`*tbwHeaderLabel` context:** `$implicit` / `value`, `column`.
+
 ## Nested Directive Syntax (Alternative)
 
 For more explicit control, you can use the nested directive syntax with `<ng-template>`:
@@ -726,6 +758,20 @@ export class MyGridComponent {
 
 > **Tip:** Prefer feature props (see [Enabling Features](#enabling-features) above) for simpler code and tree-shaking.
 
+There is also a dedicated `[plugins]` input, matching `<DataGrid plugins={...}>` in React
+and `:plugins` in Vue. When `[plugins]` is set, feature directives are ignored — the array
+is the full plugin list:
+
+```typescript
+@Component({
+  imports: [Grid],
+  template: `<tbw-grid [rows]="rows" [plugins]="plugins" />`,
+})
+export class MyGridComponent {
+  plugins = [new SelectionPlugin({ mode: 'row' })];
+}
+```
+
 Or import all plugins at once (larger bundle, but convenient):
 
 ```typescript
@@ -1097,6 +1143,8 @@ export class TextFilterComponent extends BaseFilterPanel {
 | `GridFormArray`      | `tbw-grid[formControlName]`, `tbw-grid[formControl]` | Reactive Forms integration                      |
 | `TbwRenderer`        | `*tbwRenderer`                                       | Structural directive for cell views             |
 | `TbwEditor`          | `*tbwEditor`                                         | Structural directive for cell editors           |
+| `TbwHeader`          | `*tbwHeader`                                         | Structural directive for the whole header cell  |
+| `TbwHeaderLabel`     | `*tbwHeaderLabel`                                    | Structural directive for the header label only  |
 | `GridColumnView`     | `tbw-grid-column-view`                               | Nested directive for cell views                 |
 | `GridColumnEditor`   | `tbw-grid-column-editor`                             | Nested directive for cell editors               |
 | `GridDetailView`     | `tbw-grid-detail`                                    | Master-detail panel template                    |

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

@@ -1605,6 +1605,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Directive
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
+/**
+ * Resolves what a CVA editor should display.
+ *
+ * Precedence: a value this editor committed wins over the grid value (which
+ * goes stale after a commit — see `BaseGridEditorCVA.commitBoth`), which in
+ * turn wins over the value written by a form control.
+ *
+ * Exported for unit testing only — not re-exported from the package entry point.
+ *
+ * @internal
+ */
+function resolveEditorDisplayValue(committed, currentValue, cvaValue) {
+    if (committed)
+        return committed.value;
+    return currentValue ?? cvaValue;
+}
 /**
  * Base class for grid editors that also work as Angular form controls.
  *
@@ -1617,7 +1633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * |--------|---------|
  * | `cvaValue` | Signal holding the value written by the form control |
  * | `disabledState` | Signal tracking `setDisabledState` calls |
- * | `displayValue` | Computed that prefers grid value (`currentValue`) and falls back to `cvaValue` |
+ * | `displayValue` | Computed that prefers the last `commitBoth` value, then the grid value (`currentValue`), then `cvaValue` |
  * | `commitBoth(v)` | Commits via both CVA `onChange` and grid `commitValue` |
  * | `writeValue` / `registerOn*` / `setDisabledState` | Full CVA implementation |
  *
@@ -1679,18 +1695,30 @@ class BaseGridEditorCVA extends BaseGridEditor {
      */
     disabledState = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    /**
+     * Value most recently passed to {@link commitBoth}, wrapped so a committed
+     * `null` stays distinguishable from "nothing committed yet".
+     *
+     * The grid never pushes a cell's own committed value back to the editor that
+     * produced it — `EditingPlugin` skips its editor value callbacks when
+     * `source === 'user'`. In row edit mode every cell editor stays mounted after
+     * a commit, so the `value` input goes stale for the rest of the session.
+     * Editors that normalise or derive what they commit (e.g. a day number to a
+     * full date) would otherwise keep rendering the pre-commit value.
+     */
+    _committed = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_committed" }] : /* istanbul ignore next */ []));
     /**
      * Resolved display value.
      *
-     * Prefers `currentValue()` (grid context — from `control.value` or `value` input)
+     * Prefers a value committed by this editor (see {@link commitBoth}), then
+     * `currentValue()` (grid context — from `control.value` or `value` input),
      * and falls back to `cvaValue()` (standalone form context — from `writeValue`).
      *
      * Use this in your template instead of reading `currentValue()` directly
      * so the component works in both grid and standalone form contexts.
      */
-    displayValue = computed(() => {
-        return this.currentValue() ?? this.cvaValue();
-    }, /* @ts-ignore */
+    displayValue = computed(() => resolveEditorDisplayValue(this._committed(), this.currentValue(), this.cvaValue()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // ControlValueAccessor Implementation
@@ -1699,8 +1727,19 @@ class BaseGridEditorCVA extends BaseGridEditor {
      * Called by Angular forms when the form control value changes programmatically.
      */
     writeValue(value) {
+        this._committed.set(null);
         this.cvaValue.set(value);
     }
+    /**
+     * Discards the value committed by this editor so a genuinely external value
+     * (cascade, undo/redo, cell cancel) wins.
+     *
+     * Subclasses that override this **must** call `super.onExternalValueChange()`.
+     */
+    onExternalValueChange(newVal) {
+        this._committed.set(null);
+        super.onExternalValueChange(newVal);
+    }
     /**
      * Called by Angular forms to register a change callback.
      */
@@ -1734,6 +1773,8 @@ class BaseGridEditorCVA extends BaseGridEditor {
      * @param value - The new value to commit
      */
     commitBoth(value) {
+        // Keep the committed value visible: the grid will not push it back to us.
+        this._committed.set({ value });
         // Update CVA
         this.cvaValue.set(value);
         this._onChange(value);