@toolbox-web/grid-angular 0.1.3 → 0.3.0

package/README.md

@@ -12,6 +12,8 @@ Angular adapter for `@toolbox-web/grid` data grid component. Provides directives
 - ✅ **Structural directives** - Clean `*tbwRenderer` and `*tbwEditor` syntax
 - ✅ **Template-driven renderers** - Use `<ng-template>` for custom cell views
 - ✅ **Template-driven editors** - Use `<ng-template>` for custom cell editors
+- ✅ **Component-class column config** - Specify component classes directly in `gridConfig.columns`
+- ✅ **Type-level defaults** - App-wide renderers/editors via `provideGridTypeDefaults()`
 - ✅ **Auto-wiring** - Editor components just emit events, no manual binding needed
 - ✅ **Full type safety** - Typed template contexts (`GridCellContext`, `GridEditorContext`)
 - ✅ **Angular 17+** - Standalone components, signals support
@@ -297,6 +299,160 @@ import { Grid, GridToolPanel } from '@toolbox-web/grid-angular';
 })
 ```
 
+## Type-Level Defaults
+
+Define app-wide renderers and editors for custom column types using `provideGridTypeDefaults()`:
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideGridTypeDefaults } from '@toolbox-web/grid-angular';
+import { CountryBadgeComponent, CountryEditorComponent, CurrencyCellComponent } from './components';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideGridTypeDefaults({
+      country: {
+        renderer: CountryBadgeComponent,
+        editor: CountryEditorComponent,
+      },
+      currency: {
+        renderer: CurrencyCellComponent,
+      },
+    }),
+  ],
+};
+```
+
+Then any grid with columns using `type: 'country'` will automatically use the registered components:
+
+```typescript
+// my-grid.component.ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Grid } from '@toolbox-web/grid-angular';
+import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
+import type { GridConfig } from '@toolbox-web/grid';
+
+@Component({
+  imports: [Grid],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<tbw-grid [rows]="data" [gridConfig]="config" />`,
+})
+export class MyGridComponent {
+  config: GridConfig = {
+    columns: [
+      { field: 'name', header: 'Name' },
+      { field: 'country', type: 'country', editable: true }, // Uses registered components
+      { field: 'salary', type: 'currency' },
+    ],
+    plugins: [new EditingPlugin()],
+  };
+}
+```
+
+**Services:**
+
+| Service              | Description                                 |
+| -------------------- | ------------------------------------------- |
+| `GridTypeRegistry`   | Injectable service for dynamic registration |
+| `GRID_TYPE_DEFAULTS` | Injection token for type defaults           |
+
+## Component-Class Column Config
+
+For maximum flexibility and type safety, you can specify Angular component classes directly in your `gridConfig.columns`. This approach gives you full control over the component lifecycle while keeping your grid configuration clean and concise.
+
+### Component Interfaces
+
+Your components should implement one of these interfaces:
+
+**Renderer components:**
+
+```typescript
+import { Component, input } from '@angular/core';
+import type { AngularCellRenderer, ColumnConfig } from '@toolbox-web/grid-angular';
+
+@Component({
+  selector: 'app-status-badge',
+  template: `<span [class]="'badge badge--' + value()">{{ value() }}</span>`,
+  standalone: true,
+})
+export class StatusBadgeComponent implements AngularCellRenderer<Employee, string> {
+  value = input.required<string>();
+  row = input.required<Employee>();
+  column = input<ColumnConfig>(); // Optional
+}
+```
+
+**Editor components:**
+
+```typescript
+import { Component, input, output } from '@angular/core';
+import type { AngularCellEditor, ColumnConfig } from '@toolbox-web/grid-angular';
+
+@Component({
+  selector: 'app-bonus-editor',
+  template: `
+    <input type="range" [min]="0" [max]="maxBonus()" [value]="value()" (input)="onInput($event)" />
+    <button (click)="cancel.emit()">Cancel</button>
+  `,
+  standalone: true,
+})
+export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
+  value = input.required<number>();
+  row = input.required<Employee>();
+  column = input<ColumnConfig>(); // Optional
+
+  commit = output<number>();
+  cancel = output<void>();
+
+  // Computed property using row data
+  maxBonus = computed(() => this.row().salary * 0.5);
+
+  onInput(event: Event) {
+    const newValue = Number((event.target as HTMLInputElement).value);
+    this.commit.emit(newValue);
+  }
+}
+```
+
+### Using Components in Grid Config
+
+Use `AngularGridConfig` and `angularConfig` input for type-safe component references:
+
+```typescript
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Grid, type AngularGridConfig } from '@toolbox-web/grid-angular';
+import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
+import { StatusBadgeComponent, BonusEditorComponent } from './components';
+
+@Component({
+  imports: [Grid],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<tbw-grid [angularConfig]="config" [rows]="employees" />`,
+})
+export class MyGridComponent {
+  config: AngularGridConfig<Employee> = {
+    columns: [
+      { field: 'name', header: 'Name' },
+      { field: 'status', header: 'Status', renderer: StatusBadgeComponent },
+      { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent },
+    ],
+    plugins: [new EditingPlugin()],
+  };
+}
+```
+
+> **Note:** Use `[angularConfig]` instead of `[gridConfig]` when using component classes. The directive automatically processes the config and converts component classes to grid-compatible functions.
+
+### Interfaces Reference
+
+| Interface             | Required Inputs    | Required Outputs   | Description        |
+| --------------------- | ------------------ | ------------------ | ------------------ |
+| `AngularCellRenderer` | `value()`, `row()` | -                  | Read-only renderer |
+| `AngularCellEditor`   | `value()`, `row()` | `commit`, `cancel` | Editable cell      |
+
+Both interfaces also support an optional `column()` input for accessing the column configuration.
+
 ## Using Plugins
 
 Import plugins individually for smaller bundles:
@@ -343,6 +499,21 @@ import { SelectionPlugin, FilteringPlugin } from '@toolbox-web/grid/all';
 | `GridDetailView`   | `tbw-grid-detail`        | Master-detail panel template           |
 | `GridToolPanel`    | `tbw-grid-tool-panel`    | Custom sidebar panel                   |
 
+### Type Registry
+
+| Export                      | Description                                  |
+| --------------------------- | -------------------------------------------- |
+| `provideGridTypeDefaults()` | Provider factory for app-level type defaults |
+| `GridTypeRegistry`          | Injectable service for dynamic registration  |
+| `GRID_TYPE_DEFAULTS`        | Injection token for type defaults            |
+
+### Grid Directive Inputs
+
+| Input           | Type                      | Description                                            |
+| --------------- | ------------------------- | ------------------------------------------------------ |
+| `angularConfig` | `AngularGridConfig<TRow>` | Grid config with component class support (recommended) |
+| `customStyles`  | `string`                  | Custom CSS styles to inject into the grid              |
+
 ### Grid Directive Outputs
 
 | Output         | Type                              | Description          |
@@ -373,15 +544,27 @@ import { SelectionPlugin, FilteringPlugin } from '@toolbox-web/grid/all';
 
 ```typescript
 import type {
+  // Template contexts
   GridCellContext,
   GridEditorContext,
   GridDetailContext,
   GridToolPanelContext,
-  CellCommitEvent,
-  RowCommitEvent,
   StructuralCellContext,
   StructuralEditorContext,
+  // Events
+  CellCommitEvent,
+  RowCommitEvent,
+  // Type-level defaults
+  AngularTypeDefault,
+  // Component-class column config
+  AngularCellRenderer,
+  AngularCellEditor,
+  AngularColumnConfig,
+  AngularGridConfig,
 } from '@toolbox-web/grid-angular';
+
+// Type guard for component class detection
+import { isComponentClass } from '@toolbox-web/grid-angular';
 ```
 
 ### AngularGridAdapter

package/index.d.ts

@@ -5,6 +5,10 @@
  * Provides directives for seamless Angular integration with the grid component.
  */
 export { AngularGridAdapter } from './lib/angular-grid-adapter';
+export { isComponentClass } from './lib/angular-column-config';
+export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, } from './lib/angular-column-config';
+export { GRID_TYPE_DEFAULTS, GridTypeRegistry, provideGridTypeDefaults } from './lib/grid-type-registry';
+export type { AngularTypeDefault } from './lib/grid-type-registry';
 export { GridColumnEditor } from './lib/directives/grid-column-editor.directive';
 export type { GridEditorContext } from './lib/directives/grid-column-editor.directive';
 export { GridColumnView } from './lib/directives/grid-column-view.directive';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-angular/src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,WAAW,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-angular/src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACzG,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,WAAW,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC"}