@toolbox-web/grid-angular 1.9.0 → 2.0.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/fesm2022/toolbox-web-grid-angular-features-editing.mjs +2317 -4
  2. package/fesm2022/toolbox-web-grid-angular-features-editing.mjs.map +1 -1
  3. package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs +91 -2
  4. package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs.map +1 -1
  5. package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs +97 -4
  6. package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs.map +1 -1
  7. package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs +1 -15
  8. package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs.map +1 -1
  9. package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs +109 -3
  10. package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs.map +1 -1
  11. package/fesm2022/toolbox-web-grid-angular-features-shell.mjs +452 -0
  12. package/fesm2022/toolbox-web-grid-angular-features-shell.mjs.map +1 -1
  13. package/fesm2022/toolbox-web-grid-angular.mjs +768 -4649
  14. package/fesm2022/toolbox-web-grid-angular.mjs.map +1 -1
  15. package/package.json +2 -6
  16. package/types/toolbox-web-grid-angular-features-editing.d.ts +1181 -4
  17. package/types/toolbox-web-grid-angular-features-editing.d.ts.map +1 -1
  18. package/types/toolbox-web-grid-angular-features-filtering.d.ts +102 -7
  19. package/types/toolbox-web-grid-angular-features-filtering.d.ts.map +1 -1
  20. package/types/toolbox-web-grid-angular-features-master-detail.d.ts +88 -4
  21. package/types/toolbox-web-grid-angular-features-master-detail.d.ts.map +1 -1
  22. package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts +2 -7
  23. package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts.map +1 -1
  24. package/types/toolbox-web-grid-angular-features-responsive.d.ts +109 -3
  25. package/types/toolbox-web-grid-angular-features-responsive.d.ts.map +1 -1
  26. package/types/toolbox-web-grid-angular-features-shell.d.ts +229 -0
  27. package/types/toolbox-web-grid-angular-features-shell.d.ts.map +1 -1
  28. package/types/toolbox-web-grid-angular.d.ts +483 -2929
  29. package/types/toolbox-web-grid-angular.d.ts.map +1 -1
  30. package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs +0 -70
  31. package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs.map +0 -1
  32. package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts +0 -25
  33. package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts.map +0 -1
@@ -1,10 +1,8 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { Type, EnvironmentInjector, ApplicationRef, ViewContainerRef, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken, EnvironmentProviders, Signal, ElementRef, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
3
- import { GridConfig as GridConfig$1, ColumnConfig as ColumnConfig$1, TypeDefault as TypeDefault$1, FrameworkAdapter, ColumnViewRenderer, ColumnEditorSpec, GridIcons, DataGridElement, FeatureConfig, ExpandCollapseAnimation, FitMode, ColumnInferenceMode, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState, TbwScrollDetail, DataGridEventMap } from '@toolbox-web/grid';
2
+ import { Type, EnvironmentInjector, ApplicationRef, ViewContainerRef, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken, EnvironmentProviders, Signal, OnInit, AfterContentInit, OnDestroy } from '@angular/core';
3
+ import { GridConfig as GridConfig$1, ColumnConfig as ColumnConfig$1, ColumnEditorSpec, TypeDefault as TypeDefault$1, FrameworkAdapter, ColumnViewRenderer, GridIcons, DataGridElement, FeatureConfig, FitMode, ColumnInferenceMode, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState, TbwScrollDetail, DataGridEventMap } from '@toolbox-web/grid';
4
4
  import { FilterPanelRenderer, FilterPanelParams } from '@toolbox-web/grid/plugins/filtering';
5
- import { AbstractControl, ControlValueAccessor, FormArray, FormGroup } from '@angular/forms';
6
- import { EditingConfig, CellCancelDetail, EditOpenDetail, BeforeEditCloseDetail, EditCloseDetail, DirtyChangeDetail, ChangedRowsResetDetail } from '@toolbox-web/grid/plugins/editing';
7
- import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, FilterConfig, ReorderConfig, VisibilityConfig, GroupingColumnsConfig, ColumnVirtualizationConfig, RowReorderConfig, RowDragDropConfig, GroupingRowsConfig, PinnedRowsConfig, TreeConfig, MasterDetailConfig, ResponsivePluginConfig, UndoRedoConfig, ExportConfig, PrintConfig, PivotConfig, ServerSideConfig, TooltipConfig, DataChangeDetail, FilterChangeDetail, ColumnResizeResetDetail, ColumnMoveDetail, ColumnVisibilityDetail, SelectionChangeDetail, RowMoveDetail, RowDragStartDetail, RowDragEndDetail, RowDropDetail, RowTransferDetail, GroupToggleDetail, GroupExpandDetail, GroupCollapseDetail, TreeExpandDetail, DetailExpandDetail, ResponsiveChangeDetail, ContextMenuOpenDetail, CopyDetail, PasteDetail, UndoRedoDetail, ExportCompleteDetail, PrintStartDetail, PrintCompleteDetail, RenderDetail } from '@toolbox-web/grid/all';
5
+ import { DataChangeDetail, ColumnResizeResetDetail, RenderDetail } from '@toolbox-web/grid/all';
8
6
  export { PluginFactory, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getRegisteredFeatures, isFeatureRegistered, registerFeature } from '@toolbox-web/grid/features/registry';
9
7
 
10
8
  /**
@@ -356,6 +354,26 @@ type RowRendererBridge = <TRow = unknown>(gridElement: HTMLElement, adapter: Gri
356
354
  * @since 1.4.0
357
355
  */
358
356
  type FilterPanelTypeDefaultBridge = (rendererValue: unknown, adapter: GridAdapter) => NonNullable<TypeDefault$1['filterPanelRenderer']> | undefined;
357
+ /**
358
+ * Installer signature for the template-based cell editor. Given a column/editor
359
+ * light-DOM element + adapter, returns the `ColumnEditorSpec` the grid should
360
+ * use, or undefined if no Angular editor template (`*tbwEditor` /
361
+ * `<tbw-grid-column-editor>`) is registered for that element. Installed by
362
+ * `@toolbox-web/grid-angular/features/editing`; without it, template-based
363
+ * editors are not resolved (component-class editors are unaffected).
364
+ * @internal
365
+ * @since 3.0.0
366
+ */
367
+ type EditorSpecBridge = <TRow = unknown, TValue = unknown>(element: HTMLElement, adapter: GridAdapter) => ColumnEditorSpec<TRow, TValue> | undefined;
368
+ /**
369
+ * Installer signature for the tool-panel renderer. Given a tool-panel
370
+ * light-DOM element + adapter, returns the imperative renderer the grid should
371
+ * use, or undefined if no Angular tool-panel template is registered. Installed
372
+ * by `@toolbox-web/grid-angular/features/shell`.
373
+ * @internal
374
+ * @since 3.0.0
375
+ */
376
+ type ToolPanelRendererBridge = (element: HTMLElement, adapter: GridAdapter) => ((container: HTMLElement) => void | (() => void)) | undefined;
359
377
  /**
360
378
  * Install the master-detail row-renderer bridge. Called once on import by
361
379
  * `@toolbox-web/grid-angular/features/master-detail`.
@@ -379,6 +397,20 @@ declare function registerResponsiveCardRendererBridge(bridge: RowRendererBridge)
379
397
  * @since 1.4.0
380
398
  */
381
399
  declare function registerFilterPanelTypeDefaultBridge(bridge: FilterPanelTypeDefaultBridge): void;
400
+ /**
401
+ * Install the template-based editor bridge. Called once on import by
402
+ * `@toolbox-web/grid-angular/features/editing`.
403
+ * @internal Plugin API
404
+ * @since 3.0.0
405
+ */
406
+ declare function registerEditorSpecBridge(bridge: EditorSpecBridge): void;
407
+ /**
408
+ * Install the tool-panel renderer bridge. Called once on import by
409
+ * `@toolbox-web/grid-angular/features/shell`.
410
+ * @internal Plugin API
411
+ * @since 3.0.0
412
+ */
413
+ declare function registerToolPanelRendererBridge(bridge: ToolPanelRendererBridge): void;
382
414
 
383
415
  /** @since 0.11.0 */
384
416
  declare class GridAdapter implements FrameworkAdapter {
@@ -454,7 +486,8 @@ declare class GridAdapter implements FrameworkAdapter {
454
486
  processColumn<TRow = unknown>(column: ColumnConfig<TRow>): ColumnConfig$1<TRow>;
455
487
  /**
456
488
  * Determines if this adapter can handle the given element.
457
- * Checks if a template is registered for this element (structural or nested).
489
+ * Checks if a template is registered for this element (structural or nested
490
+ * view template, or a template-based editor resolved by the editing feature).
458
491
  */
459
492
  canHandle(element: HTMLElement): boolean;
460
493
  /**
@@ -507,8 +540,10 @@ declare class GridAdapter implements FrameworkAdapter {
507
540
  */
508
541
  parseResponsiveCardElement<TRow = unknown>(cardElement: Element): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
509
542
  /**
510
- * Creates a tool panel renderer from a light DOM element.
511
- * The renderer creates an Angular template-based panel content.
543
+ * Creates a tool panel renderer from a light DOM element. Tool-panel
544
+ * templates are owned by `@toolbox-web/grid-angular/features/shell`; delegate
545
+ * to its bridge, which returns undefined when the feature is not imported or
546
+ * no tool-panel template is registered for this element.
512
547
  */
513
548
  createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
514
549
  /**
@@ -610,6 +645,30 @@ declare class GridAdapter implements FrameworkAdapter {
610
645
  * @internal
611
646
  */
612
647
  createTrackedEmbeddedView<TCtx>(template: TemplateRef<TCtx>, context: TCtx): EmbeddedViewRef<TCtx>;
648
+ /**
649
+ * Create an editor embedded view from a `TemplateRef`: tracks it in the
650
+ * per-cell editor pool (swept by `releaseCell()` when the grid recycles the
651
+ * cell), wraps its root nodes in a stable `display:contents` span, and runs
652
+ * the registered editor-mount hooks against that span. Public so the editing
653
+ * feature secondary entry can mount `*tbwEditor` / `<tbw-grid-column-editor>`
654
+ * templates without reaching into the adapter's private view pools or
655
+ * mount-hook fan-out.
656
+ * @internal
657
+ * @since 3.0.0
658
+ */
659
+ createEditorTemplateView<TCtx>(template: TemplateRef<TCtx>, context: TCtx): {
660
+ container: HTMLElement;
661
+ viewRef: EmbeddedViewRef<TCtx>;
662
+ };
663
+ /**
664
+ * Re-sync an editor embedded view's root nodes into its `display:contents`
665
+ * container after an external `detectChanges()` (Angular control flow may
666
+ * have added/removed nodes). Public for the editing feature's external
667
+ * value-change handler.
668
+ * @internal
669
+ * @since 3.0.0
670
+ */
671
+ syncEditorTemplateView(viewRef: EmbeddedViewRef<unknown>, container: HTMLElement): void;
613
672
  /**
614
673
  * Processes a GroupingColumnsConfig. Delegates to the feature config
615
674
  * preprocessor installed by `@toolbox-web/grid-angular/features/grouping-columns`,
@@ -1057,3037 +1116,635 @@ declare function injectGrid<TRow = unknown>(selector?: string): InjectGridReturn
1057
1116
  *
1058
1117
  * @since 0.6.0
1059
1118
  */
1060
- type FeatureName = Exclude<keyof FeatureConfig, '__brand'>;
1119
+ type DerivedFeatureName = Exclude<keyof FeatureConfig, '__brand'>;
1120
+ type FeatureName = [DerivedFeatureName] extends [never] ? string : DerivedFeatureName;
1061
1121
 
1062
1122
  /**
1063
- * Base class for Angular filter panel components.
1123
+ * Context object passed to the cell renderer template.
1124
+ * Contains the cell value, row data, and column configuration.
1125
+ * @since 0.1.0
1126
+ */
1127
+ interface GridCellContext<TValue = unknown, TRow = unknown> {
1128
+ /** The cell value for this column */
1129
+ $implicit: TValue;
1130
+ /** The cell value (explicit binding) */
1131
+ value: TValue;
1132
+ /** The full row data object */
1133
+ row: TRow;
1134
+ /** The column configuration */
1135
+ column: unknown;
1136
+ }
1137
+ /**
1138
+ * Directive that captures an `<ng-template>` for use as a cell renderer.
1064
1139
  *
1065
- * Provides a ready-made `params` input and common lifecycle helpers
1066
- * (`applyAndClose`, `clearAndClose`) so consumers only need to implement
1067
- * their filter logic in `applyFilter()`.
1140
+ * This enables declarative Angular component usage with proper input bindings
1141
+ * that satisfy Angular's AOT compiler.
1068
1142
  *
1069
1143
  * ## Usage
1070
1144
  *
1071
- * ```typescript
1072
- * import { Component, viewChild, ElementRef } from '@angular/core';
1073
- * import { BaseFilterPanel } from '@toolbox-web/grid-angular';
1074
- *
1075
- * @Component({
1076
- * selector: 'app-text-filter',
1077
- * template: `
1078
- * <input #input (keydown.enter)="applyAndClose()" />
1079
- * <button (click)="applyAndClose()">Apply</button>
1080
- * <button (click)="clearAndClose()">Clear</button>
1081
- * `
1082
- * })
1083
- * export class TextFilterComponent extends BaseFilterPanel {
1084
- * input = viewChild.required<ElementRef<HTMLInputElement>>('input');
1085
- *
1086
- * applyFilter(): void {
1087
- * this.params().applyTextFilter('contains', this.input().nativeElement.value);
1088
- * }
1089
- * }
1145
+ * ```html
1146
+ * <tbw-grid-column field="status">
1147
+ * <tbw-grid-column-view>
1148
+ * <ng-template let-value let-row="row">
1149
+ * <app-status-badge [value]="value" [row]="row" />
1150
+ * </ng-template>
1151
+ * </tbw-grid-column-view>
1152
+ * </tbw-grid-column>
1090
1153
  * ```
1091
1154
  *
1092
- * ## Template Syntax
1155
+ * The template context provides:
1156
+ * - `$implicit` / `value`: The cell value
1157
+ * - `row`: The full row data object
1158
+ * - `column`: The column configuration
1093
1159
  *
1094
- * The grid's filtering plugin will mount this component and provide `params`
1095
- * automatically. No manual wiring is required:
1160
+ * Import the directive in your component:
1096
1161
  *
1097
1162
  * ```typescript
1098
- * gridConfig = {
1099
- * columns: [
1100
- * { field: 'name', filterable: true, filterPanel: TextFilterComponent },
1101
- * ],
1102
- * };
1103
- * ```
1163
+ * import { GridColumnView } from '@toolbox-web/grid-angular';
1104
1164
  *
1105
- * @typeParam TRow - The row data type (available via `params().column`)
1165
+ * @Component({
1166
+ * imports: [GridColumnView],
1167
+ * // ...
1168
+ * })
1169
+ * ```
1106
1170
  *
1107
- * MOVE-IN-V2: this class will physically move into
1108
- * `@toolbox-web/grid-angular/features/filtering` in v2.0.0; the deprecated
1109
- * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
1110
- * the same time. Consumers should already be importing from the feature entry.
1111
- * @since 0.13.0
1171
+ * @category Directive
1172
+ * @since 0.1.0
1112
1173
  */
1113
- declare abstract class BaseFilterPanel implements FilterPanel {
1114
- /**
1115
- * Filter panel parameters injected by the grid's filtering plugin.
1116
- *
1117
- * Provides access to:
1118
- * - `field` — the column field name
1119
- * - `column` — full column configuration
1120
- * - `uniqueValues` — distinct values in the column
1121
- * - `excludedValues` — currently excluded values (set filter)
1122
- * - `searchText` — current search text
1123
- * - `applySetFilter(excluded)` — apply a set-based (include/exclude) filter
1124
- * - `applyTextFilter(operator, value, valueTo?)` — apply a text/number filter
1125
- * - `clearFilter()` — clear the filter for this column
1126
- * - `closePanel()` — close the filter panel
1127
- */
1128
- readonly params: _angular_core.InputSignal<FilterPanelParams>;
1129
- /**
1130
- * Implement this to apply your filter logic.
1131
- *
1132
- * Called by {@link applyAndClose} before closing the panel.
1133
- * Use `this.params()` to access the filter API.
1134
- *
1135
- * @example
1136
- * ```typescript
1137
- * applyFilter(): void {
1138
- * this.params().applyTextFilter('contains', this.searchText);
1139
- * }
1140
- * ```
1141
- */
1142
- abstract applyFilter(): void;
1174
+ declare class GridColumnView {
1175
+ private elementRef;
1143
1176
  /**
1144
- * Apply the filter then close the panel.
1145
- *
1146
- * Calls {@link applyFilter} followed by `params().closePanel()`.
1147
- * Bind this to your "Apply" button or Enter key handler.
1177
+ * Query for the ng-template content child.
1148
1178
  */
1149
- applyAndClose(): void;
1179
+ template: _angular_core.Signal<TemplateRef<any> | undefined>;
1180
+ /** Effect that triggers when the template is available */
1181
+ private onTemplateReceived;
1150
1182
  /**
1151
- * Clear the filter then close the panel.
1152
- *
1153
- * Calls `params().clearFilter()` followed by `params().closePanel()`.
1154
- * Bind this to your "Clear" / "Reset" button.
1183
+ * Static type guard for template context.
1184
+ * Enables type inference in templates.
1155
1185
  */
1156
- clearAndClose(): void;
1157
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseFilterPanel, never>;
1158
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseFilterPanel, never, never, { "params": { "alias": "params"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
1186
+ static ngTemplateContextGuard(dir: GridColumnView, ctx: unknown): ctx is GridCellContext;
1187
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnView, never>;
1188
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnView, "tbw-grid-column-view", never, {}, {}, ["template"], never, true, never>;
1159
1189
  }
1160
1190
 
1161
1191
  /**
1162
- * Base class for grid cell editors.
1192
+ * Directive that registers `<tbw-grid-column>` as a known Angular element.
1163
1193
  *
1164
- * Provides common functionality for Angular cell editors:
1165
- * - Automatic value resolution from FormControl or value input
1166
- * - Common inputs (value, row, column, control)
1167
- * - Common outputs (commit, cancel)
1168
- * - Validation state helpers
1194
+ * This directive exists so that Angular's template compiler recognises
1195
+ * `<tbw-grid-column>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
1196
+ * The underlying web component reads its attributes (`field`, `header`,
1197
+ * `type`, `width`, etc.) directly from the DOM, so no `@Input()` forwarding
1198
+ * is needed — Angular's standard property/attribute binding handles it.
1169
1199
  *
1170
1200
  * ## Usage
1171
1201
  *
1172
1202
  * ```typescript
1173
1203
  * import { Component } from '@angular/core';
1174
- * import { BaseGridEditor } from '@toolbox-web/grid-angular';
1204
+ * import { Grid, TbwGridColumn, TbwRenderer } from '@toolbox-web/grid-angular';
1175
1205
  *
1176
1206
  * @Component({
1177
- * selector: 'app-my-editor',
1178
- * template: \`
1179
- * <input
1180
- * [value]="currentValue()"
1181
- * [class.is-invalid]="isInvalid()"
1182
- * (input)="commitValue($event.target.value)"
1183
- * (keydown.escape)="cancelEdit()"
1184
- * />
1185
- * @if (hasErrors()) {
1186
- * <div class="error">{{ firstErrorMessage() }}</div>
1187
- * }
1188
- * \`
1207
+ * imports: [Grid, TbwGridColumn, TbwRenderer],
1208
+ * template: `
1209
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
1210
+ * <tbw-grid-column field="status">
1211
+ * <app-status-badge *tbwRenderer="let value" [value]="value" />
1212
+ * </tbw-grid-column>
1213
+ * </tbw-grid>
1214
+ * `
1189
1215
  * })
1190
- * export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
1191
- * // Override to customize error messages
1192
- * protected override getErrorMessage(errorKey: string): string {
1193
- * if (errorKey === 'required') return 'This field is required';
1194
- * if (errorKey === 'minlength') return 'Too short';
1195
- * return super.getErrorMessage(errorKey);
1196
- * }
1197
- * }
1198
- * ```
1199
- *
1200
- * ## Template Syntax
1201
- *
1202
- * When using the base class, you only need to pass the control:
1203
- *
1204
- * ```html
1205
- * <tbw-grid-column field="name">
1206
- * <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
1207
- * </tbw-grid-column>
1208
- * ```
1209
- *
1210
- * Or without FormArray binding (fallback to value):
1211
- *
1212
- * ```html
1213
- * <tbw-grid-column field="name">
1214
- * <app-my-editor *tbwEditor="let value" [value]="value" />
1215
- * </tbw-grid-column>
1216
+ * export class MyComponent { }
1216
1217
  * ```
1217
1218
  *
1218
- * @typeParam TRow - The row data type
1219
- * @typeParam TValue - The cell value type
1220
- *
1221
- * MOVE-IN-V2: this class will physically move into
1222
- * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
1223
- * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
1224
- * the same time. Consumers should already be importing from the feature entry.
1225
- * @since 0.5.0
1219
+ * @category Directive
1220
+ * @since 0.13.0
1226
1221
  */
1227
- declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
1228
- protected readonly elementRef: ElementRef<any>;
1229
- private readonly _destroyRef;
1230
- /** Cleanup function for the edit-close listener */
1231
- private _editCloseCleanup;
1232
- /**
1233
- * The cell value. Used when FormControl is not available.
1234
- * When a FormControl is provided, value is derived from control.value instead.
1235
- */
1236
- readonly value: _angular_core.InputSignal<TValue | undefined>;
1237
- /**
1238
- * The full row data object.
1239
- */
1240
- readonly row: _angular_core.InputSignal<TRow | undefined>;
1241
- /**
1242
- * The column configuration.
1243
- */
1244
- readonly column: _angular_core.InputSignal<ColumnConfig$1<TRow> | undefined>;
1245
- /**
1246
- * The FormControl for this cell, if the grid is bound to a FormArray.
1247
- * When provided, the editor uses control.value instead of the value input.
1248
- */
1249
- readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
1250
- /**
1251
- * Emits when the user commits a new value.
1252
- * Emits `null` when a nullable field is cleared.
1253
- */
1254
- readonly commit: _angular_core.OutputEmitterRef<TValue | null>;
1255
- /**
1256
- * Emits when the user cancels editing.
1257
- */
1258
- readonly cancel: _angular_core.OutputEmitterRef<void>;
1259
- /**
1260
- * The current value, derived from FormControl if available, otherwise from value input.
1261
- * This is the recommended way to get the current value in your editor template.
1262
- */
1263
- readonly currentValue: _angular_core.Signal<TValue | undefined>;
1264
- /**
1265
- * Whether the control is invalid (has validation errors).
1266
- * Returns false if no FormControl is available.
1267
- */
1268
- readonly isInvalid: _angular_core.Signal<boolean>;
1269
- /**
1270
- * Whether the control is dirty (has been modified).
1271
- * Returns false if no FormControl is available.
1272
- */
1273
- readonly isDirty: _angular_core.Signal<boolean>;
1274
- /**
1275
- * Whether the control has been touched.
1276
- * Returns false if no FormControl is available.
1277
- */
1278
- readonly isTouched: _angular_core.Signal<boolean>;
1279
- /**
1280
- * Whether the control has any validation errors.
1281
- */
1282
- readonly hasErrors: _angular_core.Signal<boolean>;
1283
- /**
1284
- * The first error message from the control's validation errors.
1285
- * Returns an empty string if no errors.
1286
- */
1287
- readonly firstErrorMessage: _angular_core.Signal<string>;
1288
- /**
1289
- * All error messages from the control's validation errors.
1290
- */
1291
- readonly allErrorMessages: _angular_core.Signal<string[]>;
1292
- constructor();
1293
- private _initEditCloseListener;
1294
- /**
1295
- * Whether this editor's cell is the currently focused cell.
1296
- *
1297
- * In row editing mode the grid creates editors for every editable cell
1298
- * in the row simultaneously. Use this to conditionally auto-focus inputs
1299
- * or open panels only in the active cell.
1300
- *
1301
- * Performs a synchronous DOM check — safe to call from `ngAfterViewInit`.
1302
- */
1303
- protected isCellFocused(): boolean;
1304
- /**
1305
- * Called **before** the grid clears editing state and destroys editor DOM.
1306
- *
1307
- * At this point the commit callback is still active, so subclasses can
1308
- * call {@link commitValue} to flush any pending/deferred values.
1309
- *
1310
- * This fires only on the **commit** path (not on revert/cancel).
1311
- * Use {@link onEditClose} for cleanup that should happen on both paths.
1312
- */
1313
- protected onBeforeEditClose(): void;
1314
- /**
1315
- * Called when the grid ends the editing session for this cell.
1316
- *
1317
- * Override to perform cleanup such as closing overlay panels, autocomplete
1318
- * dropdowns, or other floating UI that lives at `<body>` level and would
1319
- * otherwise persist after the editor DOM is removed.
1320
- *
1321
- * The listener is set up automatically via `afterNextRender` — no manual
1322
- * wiring required.
1323
- */
1324
- protected onEditClose(): void;
1325
- /**
1326
- * Called by the grid adapter when the cell value changes externally
1327
- * (e.g., via `updateRow()` cascade or undo/redo).
1328
- *
1329
- * Override in subclasses to reset internal state (search text, selection
1330
- * flags, etc.) so the editor displays the updated value.
1331
- *
1332
- * This runs **synchronously** before the value input is updated, giving
1333
- * the editor a chance to clear stale state before the next change-detection
1334
- * pass re-reads the template.
1335
- *
1336
- * @param _newVal The new cell value being pushed from the grid
1337
- */
1338
- onExternalValueChange(_newVal: TValue): void;
1339
- /**
1340
- * Commit a new value. Emits the commit output AND dispatches a DOM event.
1341
- * The DOM event enables the grid's auto-wiring to catch the commit.
1342
- * Call this when the user confirms their edit.
1343
- */
1344
- commitValue(newValue: TValue | null): void;
1345
- /**
1346
- * Cancel editing. Emits the cancel output AND dispatches a DOM event.
1347
- * Call this when the user cancels (e.g., presses Escape).
1348
- */
1349
- cancelEdit(): void;
1350
- /**
1351
- * Get a human-readable error message for a validation error.
1352
- * Override this method to customize error messages for your editor.
1353
- *
1354
- * @param errorKey - The validation error key (e.g., 'required', 'minlength')
1355
- * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
1356
- * @returns A human-readable error message
1357
- */
1358
- protected getErrorMessage(errorKey: string, errorValue?: unknown): string;
1359
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseGridEditor<any, any>, never>;
1360
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseGridEditor<any, any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "row": { "alias": "row"; "required": false; "isSignal": true; }; "column": { "alias": "column"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, { "commit": "commit"; "cancel": "cancel"; }, never, never, true, never>;
1222
+ declare class TbwGridColumn {
1223
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridColumn, never>;
1224
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridColumn, "tbw-grid-column", never, {}, {}, never, never, true, never>;
1361
1225
  }
1362
1226
 
1363
1227
  /**
1364
- * Base class for grid editors that also work as Angular form controls.
1365
- *
1366
- * Combines `BaseGridEditor` with `ControlValueAccessor` so the same component
1367
- * can be used inside a `<tbw-grid>` **and** in a standalone `<form>`.
1368
- *
1369
- * ## What it provides
1228
+ * Directive that registers `<tbw-grid-header>` as a known Angular element.
1370
1229
  *
1371
- * | Member | Purpose |
1372
- * |--------|---------|
1373
- * | `cvaValue` | Signal holding the value written by the form control |
1374
- * | `disabledState` | Signal tracking `setDisabledState` calls |
1375
- * | `displayValue` | Computed that prefers grid value (`currentValue`) and falls back to `cvaValue` |
1376
- * | `commitBoth(v)` | Commits via both CVA `onChange` and grid `commitValue` |
1377
- * | `writeValue` / `registerOn*` / `setDisabledState` | Full CVA implementation |
1230
+ * This directive exists so that Angular's template compiler recognises
1231
+ * `<tbw-grid-header>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
1232
+ * The grid's `config-manager` reads attributes like `title` directly
1233
+ * from the DOM element.
1378
1234
  *
1379
1235
  * ## Usage
1380
1236
  *
1381
1237
  * ```typescript
1382
- * import { Component, forwardRef } from '@angular/core';
1383
- * import { NG_VALUE_ACCESSOR } from '@angular/forms';
1384
- * import { BaseGridEditorCVA } from '@toolbox-web/grid-angular';
1238
+ * import { Component } from '@angular/core';
1239
+ * import { Grid, TbwGridHeader } from '@toolbox-web/grid-angular';
1385
1240
  *
1386
1241
  * @Component({
1387
- * selector: 'app-date-picker',
1388
- * providers: [{
1389
- * provide: NG_VALUE_ACCESSOR,
1390
- * useExisting: forwardRef(() => DatePickerComponent),
1391
- * multi: true,
1392
- * }],
1242
+ * imports: [Grid, TbwGridHeader],
1393
1243
  * template: `
1394
- * <input
1395
- * type="date"
1396
- * [value]="displayValue()"
1397
- * [disabled]="disabledState()"
1398
- * (change)="commitBoth($event.target.value)"
1399
- * (keydown.escape)="cancelEdit()"
1400
- * />
1244
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
1245
+ * <tbw-grid-header title="My Grid Title"></tbw-grid-header>
1246
+ * </tbw-grid>
1401
1247
  * `
1402
1248
  * })
1403
- * export class DatePickerComponent extends BaseGridEditorCVA<MyRow, string> {}
1249
+ * export class MyComponent { }
1404
1250
  * ```
1405
1251
  *
1406
- * > **Note:** Subclasses must still provide `NG_VALUE_ACCESSOR` themselves
1407
- * > because `forwardRef(() => ConcreteClass)` must reference the concrete
1408
- * > component — this is an Angular limitation.
1409
- *
1410
- * @typeParam TRow - The row data type
1411
- * @typeParam TValue - The cell/control value type
1412
- *
1413
- * MOVE-IN-V2: this class will physically move into
1414
- * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
1415
- * re-export from the main `@toolbox-web/grid-angular` entry will be removed at
1416
- * the same time. Consumers should already be importing from the feature entry.
1252
+ * @category Directive
1417
1253
  * @since 0.13.0
1418
1254
  */
1419
- declare abstract class BaseGridEditorCVA<TRow = unknown, TValue = unknown> extends BaseGridEditor<TRow, TValue> implements ControlValueAccessor {
1420
- /** Internal onChange callback registered by the form control. */
1421
- private _onChange;
1422
- /** Internal onTouched callback registered by the form control. */
1423
- private _onTouched;
1424
- /**
1425
- * Signal holding the value written by the form control via `writeValue()`.
1426
- * Updated when the form control pushes a new value (e.g. `patchValue`, `setValue`).
1427
- */
1428
- protected readonly cvaValue: _angular_core.WritableSignal<TValue | null>;
1429
- /**
1430
- * Signal tracking the disabled state set by the form control.
1431
- * Updated when `setDisabledState()` is called by Angular's forms module.
1432
- */
1433
- readonly disabledState: _angular_core.WritableSignal<boolean>;
1434
- /**
1435
- * Resolved display value.
1436
- *
1437
- * Prefers `currentValue()` (grid context — from `control.value` or `value` input)
1438
- * and falls back to `cvaValue()` (standalone form context — from `writeValue`).
1439
- *
1440
- * Use this in your template instead of reading `currentValue()` directly
1441
- * so the component works in both grid and standalone form contexts.
1442
- */
1443
- readonly displayValue: _angular_core.Signal<TValue | null>;
1444
- /**
1445
- * Called by Angular forms when the form control value changes programmatically.
1446
- */
1447
- writeValue(value: TValue | null): void;
1448
- /**
1449
- * Called by Angular forms to register a change callback.
1450
- */
1451
- registerOnChange(fn: (value: TValue | null) => void): void;
1452
- /**
1453
- * Called by Angular forms to register a touched callback.
1454
- */
1455
- registerOnTouched(fn: () => void): void;
1456
- /**
1457
- * Called by Angular forms to set the disabled state.
1458
- */
1459
- setDisabledState(isDisabled: boolean): void;
1460
- /**
1461
- * Commit a value through both the CVA (form control) and the grid.
1462
- *
1463
- * - Calls the CVA `onChange` callback (updates the form control)
1464
- * - Marks the control as touched
1465
- * - Calls `commitValue()` (emits grid commit event + DOM `CustomEvent`)
1466
- *
1467
- * Use this instead of `commitValue()` when your editor doubles as a form control.
1468
- *
1469
- * @param value - The new value to commit
1470
- */
1471
- protected commitBoth(value: TValue | null): void;
1472
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseGridEditorCVA<any, any>, never>;
1473
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseGridEditorCVA<any, any>, never, never, {}, {}, never, never, true, never>;
1255
+ declare class TbwGridHeader {
1256
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridHeader, never>;
1257
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridHeader, "tbw-grid-header", never, {}, {}, never, never, true, never>;
1474
1258
  }
1475
1259
 
1476
1260
  /**
1477
- * Position of the overlay panel relative to its anchor cell.
1261
+ * Directive that registers `<tbw-grid-tool-buttons>` as a known Angular element.
1478
1262
  *
1479
- * - `'below'` — panel appears below the cell, left-aligned (default)
1480
- * - `'above'` — panel appears above the cell, left-aligned
1481
- * - `'below-right'` — panel appears below the cell, right-aligned
1482
- * - `'over-top-left'` — panel top-left corner aligns with cell top-left corner (opens downward)
1483
- * - `'over-bottom-left'` — panel bottom-left corner aligns with cell bottom-left corner (opens upward)
1484
- * @since 0.13.0
1485
- */
1486
- type OverlayPosition = 'below' | 'above' | 'below-right' | 'over-top-left' | 'over-bottom-left';
1487
- /**
1488
- * Base class for grid editors that display a floating overlay panel.
1489
- *
1490
- * Provides infrastructure for:
1491
- * - **Overlay positioning** — CSS Anchor Positioning with JS fallback
1492
- * - **Focus gating** — in row editing mode, the panel only opens for the focused cell
1493
- * - **Click-outside detection** — closes the panel when clicking outside
1494
- * - **MutationObserver** — detects cell focus changes (row editing mode)
1495
- * - **Escape handling** — closes the panel and returns focus to the inline input
1496
- * - **Synthetic Tab dispatch** — advances grid focus after overlay close
1497
- * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
1498
- * - **External focus registration** — auto-registers the panel via `grid.registerExternalFocusContainer()` so the grid keeps `data-has-focus` and editors stay open while the overlay has focus
1263
+ * This directive exists so that Angular's template compiler recognises
1264
+ * `<tbw-grid-tool-buttons>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
1265
+ * The grid's shell reads toolbar buttons directly from the DOM.
1499
1266
  *
1500
1267
  * ## Usage
1501
1268
  *
1502
1269
  * ```typescript
1503
- * import { Component, viewChild, ElementRef, effect } from '@angular/core';
1504
- * import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
1270
+ * import { Component } from '@angular/core';
1271
+ * import { Grid, TbwGridToolButtons } from '@toolbox-web/grid-angular';
1505
1272
  *
1506
1273
  * @Component({
1507
- * selector: 'app-date-editor',
1274
+ * imports: [Grid, TbwGridToolButtons],
1508
1275
  * template: `
1509
- * <input
1510
- * #inlineInput
1511
- * readonly
1512
- * [value]="currentValue()"
1513
- * (click)="onInlineClick()"
1514
- * (keydown)="onInlineKeydown($event)"
1515
- * />
1516
- * <div #panel class="tbw-overlay-panel" style="width: 280px;">
1517
- * <!-- your date picker UI here -->
1518
- * <div class="actions">
1519
- * <button (click)="selectAndClose(selectedDate)">OK</button>
1520
- * <button (click)="hideOverlay()">Cancel</button>
1521
- * </div>
1522
- * </div>
1276
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
1277
+ * <tbw-grid-tool-buttons>
1278
+ * <button (click)="doSomething()">Action</button>
1279
+ * </tbw-grid-tool-buttons>
1280
+ * </tbw-grid>
1523
1281
  * `
1524
1282
  * })
1525
- * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
1526
- * panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
1527
- * inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
1528
- *
1529
- * protected override overlayPosition = 'below' as const;
1530
- *
1531
- * constructor() {
1532
- * super();
1533
- * effect(() => {
1534
- * const panel = this.panelRef().nativeElement;
1535
- * this.initOverlay(panel);
1536
- * if (this.isCellFocused()) this.showOverlay();
1537
- * });
1538
- * }
1539
- *
1540
- * protected getInlineInput(): HTMLInputElement | null {
1541
- * return this.inputRef()?.nativeElement ?? null;
1542
- * }
1543
- *
1544
- * protected onOverlayOutsideClick(): void {
1545
- * this.hideOverlay();
1546
- * }
1547
- *
1548
- * selectAndClose(date: string): void {
1549
- * this.commitValue(date);
1550
- * this.hideOverlay();
1551
- * }
1552
- * }
1283
+ * export class MyComponent { }
1553
1284
  * ```
1554
1285
  *
1555
- * @example
1556
- * ```typescript
1557
- * @Component({
1558
- * template: `
1559
- * <input #inlineInput readonly [value]="currentValue()"
1560
- * (click)="onInlineClick()" (keydown)="onInlineKeydown($event)" />
1561
- * <div #panel style="width: 280px">
1562
- * <!-- overlay content -->
1563
- * </div>
1564
- * `
1565
- * })
1566
- * export class MyEditor extends BaseOverlayEditor<MyRow, string> {
1567
- * panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
1568
- * inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
1569
- *
1570
- * constructor() {
1571
- * super();
1572
- * effect(() => this.initOverlay(this.panelRef().nativeElement));
1573
- * }
1574
- *
1575
- * protected getInlineInput() { return this.inputRef()?.nativeElement ?? null; }
1576
- * protected onOverlayOutsideClick() { this.hideOverlay(); }
1577
- * }
1578
- * ```
1579
- *
1580
- * @typeParam TRow - The row data type
1581
- * @typeParam TValue - The cell value type
1582
- *
1583
- * MOVE-IN-V2: this class (and its companion `OverlayPosition` type) will
1584
- * physically move into `@toolbox-web/grid-angular/features/editing` in v2.0.0;
1585
- * the deprecated re-export from the main `@toolbox-web/grid-angular` entry
1586
- * will be removed at the same time. Consumers should already be importing
1587
- * from the feature entry.
1286
+ * @category Directive
1588
1287
  * @since 0.13.0
1589
1288
  */
1590
- declare abstract class BaseOverlayEditor<TRow = unknown, TValue = unknown> extends BaseGridEditor<TRow, TValue> {
1591
- private readonly _elementRef;
1592
- private readonly _overlayDestroyRef;
1593
- /**
1594
- * Position of the overlay panel relative to the anchor cell.
1595
- * Override in subclasses to change the default position.
1596
- *
1597
- * @default 'below'
1598
- */
1599
- protected overlayPosition: OverlayPosition;
1600
- /** The overlay panel element (set via `initOverlay()`). */
1601
- private _panel;
1602
- /** Whether the overlay is currently visible. */
1603
- protected _isOpen: boolean;
1604
- /** Unique anchor ID for CSS Anchor Positioning. */
1605
- private _anchorId;
1606
- /** Whether the browser supports CSS Anchor Positioning. */
1607
- private _supportsAnchor;
1608
- /** AbortController for all overlay-related listeners. */
1609
- private _abortCtrl;
1610
- /** MutationObserver watching cell focus class changes. */
1611
- protected _focusObserver: MutationObserver | null;
1612
- constructor();
1613
- /**
1614
- * Initialise the overlay with the panel element.
1615
- *
1616
- * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
1617
- * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
1618
- *
1619
- * @param panel - The overlay panel DOM element
1620
- */
1621
- protected initOverlay(panel: HTMLElement): void;
1622
- /**
1623
- * Show the overlay panel.
1624
- *
1625
- * If CSS Anchor Positioning is not supported, falls back to JS-based
1626
- * positioning using `getBoundingClientRect()`.
1627
- */
1628
- protected showOverlay(): void;
1629
- /**
1630
- * Hide the overlay panel.
1631
- *
1632
- * @param suppressTabAdvance - When `true`, skip synthetic Tab dispatch
1633
- * (useful when hiding is triggered by an external focus change).
1634
- */
1635
- protected hideOverlay(suppressTabAdvance?: boolean): void;
1636
- /**
1637
- * Close and immediately re-open the overlay.
1638
- * Useful after the panel content changes size and needs repositioning.
1639
- */
1640
- protected reopenOverlay(): void;
1641
- /**
1642
- * Remove the overlay from the DOM and clean up all listeners.
1643
- *
1644
- * Called automatically on `DestroyRef.onDestroy`. Can also be called
1645
- * manually if the editor needs early cleanup.
1646
- */
1647
- protected teardownOverlay(): void;
1648
- /**
1649
- * Override in `edit-close` handler to also hide the overlay.
1650
- * This is called automatically by `BaseGridEditor` when the grid
1651
- * ends the editing session.
1652
- */
1653
- protected onEditClose(): void;
1654
- /**
1655
- * Keydown handler for the inline readonly input.
1656
- *
1657
- * - **Enter / Space / ArrowDown / F2** → open overlay
1658
- * - **Escape** → calls {@link handleEscape}
1659
- *
1660
- * Bind this to `(keydown)` on your inline input element.
1661
- */
1662
- onInlineKeydown(event: KeyboardEvent): void;
1663
- /**
1664
- * Click handler for the inline input.
1665
- * Opens the overlay and calls {@link onOverlayOpened}.
1666
- *
1667
- * Bind this to `(click)` on your inline input element.
1668
- */
1669
- onInlineClick(): void;
1670
- /**
1671
- * Handle Escape key press.
1672
- *
1673
- * If the overlay is open, closes it and returns focus to the inline input.
1674
- * If the overlay is already closed, cancels the edit entirely.
1675
- */
1676
- protected handleEscape(event: Event): void;
1677
- /**
1678
- * Dispatch a synthetic Tab key event to advance grid focus.
1679
- *
1680
- * Call this after committing a value and closing the overlay so the
1681
- * grid moves focus to the next cell.
1682
- *
1683
- * @param backward - When `true`, dispatch Shift+Tab to move backwards.
1684
- */
1685
- protected advanceGridFocus(backward?: boolean): void;
1686
- /**
1687
- * Return the inline input element, if any.
1688
- *
1689
- * Used by overlay infrastructure to return focus after hiding.
1690
- * Return `null` if there is no inline input.
1691
- */
1692
- protected abstract getInlineInput(): HTMLInputElement | null;
1693
- /**
1694
- * Called when a pointerdown event occurs outside the overlay panel
1695
- * and outside the editor's host element.
1696
- *
1697
- * Typically, subclasses call `hideOverlay()` here.
1698
- */
1699
- protected abstract onOverlayOutsideClick(): void;
1700
- /**
1701
- * Called after the overlay is shown.
1702
- *
1703
- * Override to focus an element inside the panel, start animations, etc.
1704
- * Default implementation is a no-op.
1705
- */
1706
- protected onOverlayOpened(): void;
1707
- /** Find the parent cell element for this editor. */
1708
- private _getCell;
1709
- /** Find the parent `<tbw-grid>` element for this editor. */
1710
- private _getGridElement;
1711
- /**
1712
- * JS fallback positioning for browsers without CSS Anchor Positioning.
1713
- * Uses `getBoundingClientRect()` with viewport overflow detection.
1714
- */
1715
- private _positionWithJs;
1716
- /**
1717
- * Document pointerdown handler for click-outside detection.
1718
- * Fires `onOverlayOutsideClick()` if the click is outside the panel
1719
- * and outside the editor's host element.
1720
- */
1721
- private _onDocumentPointerDown;
1722
- /**
1723
- * Handle the grid's `tbw-scroll` CustomEvent while the overlay is open.
1724
- *
1725
- * When the viewport scrolls, the anchored overlay would otherwise float
1726
- * over content that no longer corresponds to the edited cell (or the
1727
- * cell may be virtualized out entirely). Treat scroll as a dismissal
1728
- * signal equivalent to clicking outside so subclasses' overlay-outside
1729
- * handler drives the appropriate commit/cancel path.
1730
- */
1731
- private _onGridScroll;
1732
- /**
1733
- * Set up a MutationObserver on the parent cell to watch for
1734
- * `cell-focus` class changes. This handles row-editing mode where
1735
- * all editors exist simultaneously but only the focused cell's
1736
- * editor should have its overlay visible.
1737
- *
1738
- * A `justOpened` flash guard suppresses the observer from
1739
- * immediately closing the overlay when `beginBulkEdit()` moves
1740
- * focus to the first editable column. Without this guard,
1741
- * double-click triggers a "flash open then close" effect.
1742
- */
1743
- protected _setupFocusObserver(): void;
1744
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseOverlayEditor<any, any>, never>;
1745
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseOverlayEditor<any, any>, never, never, {}, {}, never, never, true, never>;
1289
+ declare class TbwGridToolButtons {
1290
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridToolButtons, never>;
1291
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridToolButtons, "tbw-grid-tool-buttons", never, {}, {}, never, never, true, never>;
1746
1292
  }
1747
1293
 
1748
1294
  /**
1749
- * Context object passed to the cell editor template.
1750
- * Contains the cell value, row data, column configuration, and commit/cancel functions.
1751
- * @since 0.1.0
1752
- */
1753
- interface GridEditorContext<TValue = unknown, TRow = unknown> {
1754
- /** The cell value for this column */
1755
- $implicit: TValue;
1756
- /** The cell value (explicit binding) */
1757
- value: TValue;
1758
- /** The full row data object */
1759
- row: TRow;
1760
- /** Field name being edited */
1761
- field: string;
1762
- /** The column configuration */
1763
- column: unknown;
1764
- /** Stable row identifier (from `getRowId`). Empty string if no `getRowId` is configured. */
1765
- rowId: string;
1766
- /**
1767
- * Callback function to commit the edited value.
1768
- * Use with Angular event binding: `(commit)="onCommit($event)"`
1769
- */
1770
- onCommit: (value: TValue) => void;
1771
- /**
1772
- * Callback function to cancel editing.
1773
- * Use with Angular event binding: `(cancel)="onCancel()"`
1774
- */
1775
- onCancel: () => void;
1776
- /**
1777
- * Update other fields in this row while the editor is open.
1778
- * Changes trigger `cell-change` events with source `'cascade'`.
1779
- */
1780
- updateRow: (changes: Partial<TRow>) => void;
1781
- /**
1782
- * Register a callback to receive value updates when the cell is modified
1783
- * externally (e.g., via `updateRow()` from another cell's commit).
1784
- *
1785
- * The framework adapter auto-patches `value`/`$implicit` for template editors,
1786
- * but custom components may use this for additional reactivity.
1787
- */
1788
- onValueChange?: (callback: (newValue: TValue) => void) => void;
1789
- /**
1790
- * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
1791
- *
1792
- * This allows custom editors to bind directly to the control for validation display:
1793
- * ```html
1794
- * <input *tbwEditor="let value; control as ctrl"
1795
- * [formControl]="ctrl"
1796
- * [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
1797
- * ```
1798
- *
1799
- * Returns `undefined` if:
1800
- * - The grid is not bound to a FormArray
1801
- * - The FormArray doesn't contain FormGroups
1802
- * - The field doesn't exist in the FormGroup
1803
- */
1804
- control?: AbstractControl;
1805
- }
1806
- /**
1807
- * Directive that captures an `<ng-template>` for use as a cell editor.
1808
- *
1809
- * This enables declarative Angular component usage with proper input bindings
1810
- * that satisfy Angular's AOT compiler.
1811
- *
1812
- * ## Usage
1295
+ * Column shorthand parsing for `@toolbox-web/grid-angular`.
1813
1296
  *
1814
- * ```html
1815
- * <tbw-grid-column field="status" editable>
1816
- * <tbw-grid-column-editor>
1817
- * <ng-template let-value let-row="row" let-onCommit="onCommit" let-onCancel="onCancel">
1818
- * <app-status-select
1819
- * [value]="value"
1820
- * [row]="row"
1821
- * (commit)="onCommit($event)"
1822
- * (cancel)="onCancel()"
1823
- * />
1824
- * </ng-template>
1825
- * </tbw-grid-column-editor>
1826
- * </tbw-grid-column>
1827
- * ```
1297
+ * Intentionally duplicated across the React, Vue, and Angular adapters so each
1298
+ * adapter has zero shared-runtime dependency. Do not extract into a shared
1299
+ * package: the helpers are tiny (~100 lines), the duplication keeps each
1300
+ * adapter independently tree-shakeable, and a shared package would force
1301
+ * consumers to install an extra dep just to import shorthand support.
1828
1302
  *
1829
- * The template context provides:
1830
- * - `$implicit` / `value`: The cell value
1831
- * - `row`: The full row data object
1832
- * - `column`: The column configuration
1833
- * - `onCommit`: Callback function to commit the new value
1834
- * - `onCancel`: Callback function to cancel editing
1303
+ * If you change behavior here, mirror the change in `grid-react` and
1304
+ * `grid-vue`. The three implementations are kept byte-equivalent.
1305
+ */
1306
+
1307
+ /**
1308
+ * Type for column shorthand notation.
1835
1309
  *
1836
- * Import the directive in your component:
1310
+ * Supports:
1311
+ * - Simple string: `'name'` → `{ field: 'name', header: 'Name' }`
1312
+ * - With type: `'salary:number'` → `{ field: 'salary', header: 'Salary', type: 'number' }`
1313
+ * - Full config object: `{ field: 'id', header: 'ID', width: 80 }` (passed through)
1837
1314
  *
1315
+ * @example
1838
1316
  * ```typescript
1839
- * import { GridColumnEditor } from '@toolbox-web/grid-angular';
1840
- *
1841
- * @Component({
1842
- * imports: [GridColumnEditor],
1843
- * // ...
1844
- * })
1317
+ * // All equivalent:
1318
+ * const cols1 = ['id', 'name', 'email'];
1319
+ * const cols2 = ['id:number', 'name:string', 'email'];
1320
+ * const cols3 = [{ field: 'id' }, { field: 'name' }, { field: 'email' }];
1845
1321
  * ```
1322
+ * @since 1.4.0
1323
+ */
1324
+ type ColumnShorthand<TRow = unknown> = string | ColumnConfig$1<TRow>;
1325
+ /**
1326
+ * Parse a column shorthand string into a ColumnConfig.
1846
1327
  *
1847
- * @category Directive
1328
+ * Supports formats:
1329
+ * - `'fieldName'` → `{ field: 'fieldName', header: 'Field Name' }`
1330
+ * - `'fieldName:type'` → `{ field: 'fieldName', header: 'Field Name', type: 'type' }`
1848
1331
  *
1849
- * MOVE-IN-V2: this directive (and its companion `GridEditorContext` type and
1850
- * `getEditorTemplate` helper) will physically move into
1851
- * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
1852
- * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
1853
- * at the same time. Consumers should already be importing from the feature
1854
- * entry.
1855
- * @since 0.1.0
1332
+ * @param shorthand - The shorthand string (e.g., 'name', 'salary:number')
1333
+ * @returns A ColumnConfig object
1334
+ * @since 1.4.0
1856
1335
  */
1857
- declare class GridColumnEditor {
1858
- private elementRef;
1859
- /**
1860
- * Query for the ng-template content child.
1861
- */
1862
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
1863
- /** Effect that triggers when the template is available */
1864
- private onTemplateReceived;
1865
- /**
1866
- * Static type guard for template context.
1867
- * Enables type inference in templates.
1868
- */
1869
- static ngTemplateContextGuard(dir: GridColumnEditor, ctx: unknown): ctx is GridEditorContext;
1870
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnEditor, never>;
1871
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnEditor, "tbw-grid-column-editor", never, {}, {}, ["template"], never, true, never>;
1872
- }
1336
+ declare function parseColumnShorthand<TRow = unknown>(shorthand: string): ColumnConfig$1<TRow>;
1337
+ /**
1338
+ * Normalize an array of column shorthands to ColumnConfig objects.
1339
+ *
1340
+ * @param columns - Array of column shorthands (strings or ColumnConfig objects)
1341
+ * @returns Array of ColumnConfig objects
1342
+ * @since 1.4.0
1343
+ */
1344
+ declare function normalizeColumns<TRow = unknown>(columns: ColumnShorthand<TRow>[]): ColumnConfig$1<TRow>[];
1345
+ /**
1346
+ * Apply column defaults to a list of columns. Individual column properties
1347
+ * override defaults.
1348
+ * @since 1.4.0
1349
+ */
1350
+ declare function applyColumnDefaults<TRow = unknown>(columns: ColumnConfig$1<TRow>[], defaults: Partial<ColumnConfig$1<TRow>> | undefined): ColumnConfig$1<TRow>[];
1351
+ /** Check if an array of columns contains any shorthand strings. * @since 1.4.0
1352
+ */
1353
+ declare function hasColumnShorthands<TRow>(columns: ColumnShorthand<TRow>[]): boolean;
1873
1354
 
1874
1355
  /**
1875
- * Context object passed to the cell renderer template.
1876
- * Contains the cell value, row data, and column configuration.
1877
- * @since 0.1.0
1356
+ * Event detail for cell commit events.
1357
+ * @since 0.1.1
1878
1358
  */
1879
- interface GridCellContext<TValue = unknown, TRow = unknown> {
1880
- /** The cell value for this column */
1881
- $implicit: TValue;
1882
- /** The cell value (explicit binding) */
1359
+ interface CellCommitEvent<TRow = unknown, TValue = unknown> {
1360
+ /** The row data object */
1361
+ row: TRow;
1362
+ /** The field name of the edited column */
1363
+ field: string;
1364
+ /** The new value after edit */
1883
1365
  value: TValue;
1884
- /** The full row data object */
1366
+ /** The row index in the data array */
1367
+ rowIndex: number;
1368
+ /** Array of all rows that have been modified */
1369
+ changedRows: TRow[];
1370
+ /** Set of row indices that have been modified */
1371
+ changedRowIndices: Set<number>;
1372
+ /** Whether this is the first modification to this row */
1373
+ firstTimeForRow: boolean;
1374
+ }
1375
+ /**
1376
+ * Event detail for row commit events (bulk editing).
1377
+ * @since 0.1.1
1378
+ */
1379
+ interface RowCommitEvent<TRow = unknown> {
1380
+ /** The row data object */
1885
1381
  row: TRow;
1886
- /** The column configuration */
1887
- column: unknown;
1382
+ /** The row index in the data array */
1383
+ rowIndex: number;
1384
+ /** Array of all rows that have been modified */
1385
+ changedRows: TRow[];
1386
+ /** Set of row indices that have been modified */
1387
+ changedRowIndices: Set<number>;
1388
+ /** Whether this is the first modification to this row */
1389
+ firstTimeForRow: boolean;
1888
1390
  }
1889
1391
  /**
1890
- * Directive that captures an `<ng-template>` for use as a cell renderer.
1392
+ * Directive that automatically registers the Angular adapter with tbw-grid elements.
1891
1393
  *
1892
- * This enables declarative Angular component usage with proper input bindings
1893
- * that satisfy Angular's AOT compiler.
1394
+ * This directive eliminates the need to manually register the adapter in your component
1395
+ * constructor. Simply import this directive and it will handle adapter registration.
1894
1396
  *
1895
1397
  * ## Usage
1896
1398
  *
1897
- * ```html
1898
- * <tbw-grid-column field="status">
1899
- * <tbw-grid-column-view>
1900
- * <ng-template let-value let-row="row">
1901
- * <app-status-badge [value]="value" [row]="row" />
1902
- * </ng-template>
1903
- * </tbw-grid-column-view>
1904
- * </tbw-grid-column>
1905
- * ```
1906
- *
1907
- * The template context provides:
1908
- * - `$implicit` / `value`: The cell value
1909
- * - `row`: The full row data object
1910
- * - `column`: The column configuration
1911
- *
1912
- * Import the directive in your component:
1913
- *
1914
1399
  * ```typescript
1915
- * import { GridColumnView } from '@toolbox-web/grid-angular';
1400
+ * import { Component } from '@angular/core';
1401
+ * import { Grid } from '@toolbox-web/grid-angular';
1916
1402
  *
1917
1403
  * @Component({
1918
- * imports: [GridColumnView],
1919
- * // ...
1404
+ * selector: 'app-root',
1405
+ * imports: [Grid],
1406
+ * template: `
1407
+ * <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
1408
+ * <!-- column templates -->
1409
+ * </tbw-grid>
1410
+ * `
1920
1411
  * })
1412
+ * export class AppComponent {
1413
+ * rows = [...];
1414
+ * config = {...};
1415
+ * myStyles = `.my-class { color: red; }`;
1416
+ * }
1921
1417
  * ```
1922
1418
  *
1923
- * @category Directive
1924
- * @since 0.1.0
1925
- */
1926
- declare class GridColumnView {
1927
- private elementRef;
1928
- /**
1929
- * Query for the ng-template content child.
1930
- */
1931
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
1932
- /** Effect that triggers when the template is available */
1933
- private onTemplateReceived;
1934
- /**
1935
- * Static type guard for template context.
1936
- * Enables type inference in templates.
1937
- */
1938
- static ngTemplateContextGuard(dir: GridColumnView, ctx: unknown): ctx is GridCellContext;
1939
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnView, never>;
1940
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnView, "tbw-grid-column-view", never, {}, {}, ["template"], never, true, never>;
1941
- }
1942
-
1943
- /**
1944
- * Directive that registers `<tbw-grid-column>` as a known Angular element.
1945
- *
1946
- * This directive exists so that Angular's template compiler recognises
1947
- * `<tbw-grid-column>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
1948
- * The underlying web component reads its attributes (`field`, `header`,
1949
- * `type`, `width`, etc.) directly from the DOM, so no `@Input()` forwarding
1950
- * is needed — Angular's standard property/attribute binding handles it.
1951
- *
1952
- * ## Usage
1953
- *
1954
- * ```typescript
1955
- * import { Component } from '@angular/core';
1956
- * import { Grid, TbwGridColumn, TbwRenderer } from '@toolbox-web/grid-angular';
1957
- *
1958
- * @Component({
1959
- * imports: [Grid, TbwGridColumn, TbwRenderer],
1960
- * template: `
1961
- * <tbw-grid [rows]="rows" [gridConfig]="config">
1962
- * <tbw-grid-column field="status">
1963
- * <app-status-badge *tbwRenderer="let value" [value]="value" />
1964
- * </tbw-grid-column>
1965
- * </tbw-grid>
1966
- * `
1967
- * })
1968
- * export class MyComponent { }
1969
- * ```
1970
- *
1971
- * @category Directive
1972
- * @since 0.13.0
1973
- */
1974
- declare class TbwGridColumn {
1975
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridColumn, never>;
1976
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridColumn, "tbw-grid-column", never, {}, {}, never, never, true, never>;
1977
- }
1978
-
1979
- /**
1980
- * Context object passed to the detail renderer template.
1981
- * Contains the row data for the expanded detail view.
1982
- * @since 0.1.0
1983
- */
1984
- interface GridDetailContext<TRow = unknown> {
1985
- /** The row data (implicit binding for let-row) */
1986
- $implicit: TRow;
1987
- /** The row data (explicit binding) */
1988
- row: TRow;
1989
- }
1990
- /**
1991
- * Gets the detail template registered for a given grid element.
1992
- * Used by AngularGridAdapter to retrieve templates at render time.
1993
- * @since 0.1.0
1994
- */
1995
- declare function getDetailTemplate(gridElement: HTMLElement): TemplateRef<GridDetailContext> | undefined;
1996
- /**
1997
- * Directive that captures an `<ng-template>` for use as a master-detail row renderer.
1419
+ * The directive automatically:
1420
+ * - Creates a GridAdapter instance
1421
+ * - Registers it with the GridElement
1422
+ * - Injects custom styles into the grid
1423
+ * - Handles cleanup on destruction
1998
1424
  *
1999
- * This enables declarative Angular component usage for expandable detail rows
2000
- * that appear below the main row when expanded.
1425
+ * ## Multi-version coexistence
2001
1426
  *
2002
- * ## Usage
1427
+ * In single-version apps the directive matches the bare `<tbw-grid>` tag. When
1428
+ * two different grid versions share a page, the second-loaded bundle registers
1429
+ * under a version-suffixed tag (e.g. `<tbw-grid-v2-15-0>`). Because Angular
1430
+ * matches selectors at compile time, a runtime-only tag cannot be matched by
1431
+ * tag name. The directive therefore also matches the stable `[data-tbw-grid]`
1432
+ * attribute, so a suffixed grid can opt in by adding it literally:
2003
1433
  *
2004
1434
  * ```html
2005
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2006
- * <tbw-grid-detail [showExpandColumn]="true" animation="slide">
2007
- * <ng-template let-row>
2008
- * <app-detail-panel [employee]="row" />
2009
- * </ng-template>
2010
- * </tbw-grid-detail>
2011
- * </tbw-grid>
2012
- * ```
2013
- *
2014
- * The template context provides:
2015
- * - `$implicit` / `row`: The full row data object
2016
- *
2017
- * Import the directive from the master-detail feature entry:
2018
- *
2019
- * ```typescript
2020
- * import { GridDetailView } from '@toolbox-web/grid-angular/features/master-detail';
2021
- *
2022
- * @Component({
2023
- * imports: [GridDetailView],
2024
- * // ...
2025
- * })
1435
+ * <tbw-grid-v2-15-0 data-tbw-grid [rows]="rows" [gridConfig]="config"></tbw-grid-v2-15-0>
2026
1436
  * ```
2027
1437
  *
2028
- * > Note: `GridDetailView` is also re-exported from `@toolbox-web/grid-angular`
2029
- * > for backwards compatibility, but that re-export is deprecated and will be
2030
- * > removed in v2.0.0. Always import from the feature entry.
2031
- *
2032
- * @example
2033
- * ```html
2034
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2035
- * <tbw-grid-detail [showExpandColumn]="true" animation="slide">
2036
- * <ng-template let-row>
2037
- * <app-detail-panel [employee]="row" />
2038
- * </ng-template>
2039
- * </tbw-grid-detail>
2040
- * </tbw-grid>
2041
- * ```
1438
+ * Read the concrete tag from `DataGridElement.activeTag` of the bundle you
1439
+ * imported. See the multi-version coexistence guide.
2042
1440
  *
2043
1441
  * @category Directive
2044
1442
  * @since 0.1.0
2045
1443
  */
2046
- declare class GridDetailView {
1444
+ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
2047
1445
  private elementRef;
2048
- /** Whether to show the expand/collapse column. Default: true */
2049
- showExpandColumn: _angular_core.InputSignal<boolean>;
2050
- /** Animation style for expand/collapse. Default: 'slide' */
2051
- animation: _angular_core.InputSignal<ExpandCollapseAnimation>;
2052
- /**
2053
- * Query for the ng-template content child.
2054
- */
2055
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
2056
- /** Effect that triggers when the template is available */
2057
- private onTemplateReceived;
2058
- /**
2059
- * Static type guard for template context.
2060
- * Enables type inference in templates.
2061
- */
2062
- static ngTemplateContextGuard(dir: GridDetailView, ctx: unknown): ctx is GridDetailContext;
2063
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridDetailView, never>;
2064
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridDetailView, "tbw-grid-detail", never, { "showExpandColumn": { "alias": "showExpandColumn"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
2065
- }
2066
-
2067
- /**
2068
- * Context provided to the grid containing form-related information.
2069
- * This can be accessed by other directives to get form controls.
2070
- * @since 0.5.0
2071
- */
2072
- interface FormArrayContext {
2073
- /** Get the row data at a specific index */
2074
- getRow<T = unknown>(rowIndex: number): T | null;
2075
- /** Update a field value at a specific row */
2076
- updateField(rowIndex: number, field: string, value: unknown): void;
2077
- /** Get the current form value (all rows) */
2078
- getValue<T = unknown>(): T[];
2079
- /**
2080
- * Get the FormControl for a specific cell.
2081
- * Only available when using FormArray with FormGroup rows.
2082
- *
2083
- * @param rowIndex - The row index
2084
- * @param field - The field name
2085
- * @returns The AbstractControl for the cell, or undefined if not available
2086
- */
2087
- getControl(rowIndex: number, field: string): AbstractControl | undefined;
2088
- /**
2089
- * Whether the grid is backed by a FormArray of FormGroups.
2090
- * When true, `getControl()` will return cell-level controls.
2091
- */
2092
- hasFormGroups: boolean;
1446
+ private injector;
1447
+ private appRef;
1448
+ private viewContainerRef;
1449
+ private iconRegistry;
1450
+ private adapter;
1451
+ constructor();
2093
1452
  /**
2094
- * Get the FormGroup for a specific row.
2095
- * Only available when using FormArray with FormGroup rows.
1453
+ * Custom CSS styles to inject into the grid.
1454
+ * Use this to style custom cell renderers, editors, or detail panels.
2096
1455
  *
2097
- * @param rowIndex - The row index
2098
- * @returns The FormGroup for the row, or undefined if not available
2099
- */
2100
- getRowFormGroup(rowIndex: number): FormGroup | undefined;
2101
- /**
2102
- * Check if a row is valid (all controls in the FormGroup are valid).
2103
- * Returns true if not using FormArray or if the row doesn't exist.
1456
+ * @example
1457
+ * ```typescript
1458
+ * // In your component
1459
+ * customStyles = `
1460
+ * .my-detail-panel { padding: 16px; }
1461
+ * .my-status-badge { border-radius: 4px; }
1462
+ * `;
1463
+ * ```
2104
1464
  *
2105
- * @param rowIndex - The row index
2106
- * @returns true if the row is valid, false if any control is invalid
1465
+ * ```html
1466
+ * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
1467
+ * ```
2107
1468
  */
2108
- isRowValid(rowIndex: number): boolean;
1469
+ customStyles: _angular_core.InputSignal<string | undefined>;
2109
1470
  /**
2110
- * Check if a row has been touched (any control in the FormGroup is touched).
2111
- * Returns false if not using FormArray or if the row doesn't exist.
1471
+ * Grid-wide sorting toggle.
1472
+ * When false, disables sorting for all columns regardless of their individual `sortable` setting.
1473
+ * When true (default), columns with `sortable: true` can be sorted.
2112
1474
  *
2113
- * @param rowIndex - The row index
2114
- * @returns true if any control in the row is touched
2115
- */
2116
- isRowTouched(rowIndex: number): boolean;
2117
- /**
2118
- * Check if a row is dirty (any control in the FormGroup is dirty).
2119
- * Returns false if not using FormArray or if the row doesn't exist.
1475
+ * This is a core grid config property, not a plugin feature.
1476
+ * For multi-column sorting, also add the `[multiSort]` feature.
2120
1477
  *
2121
- * @param rowIndex - The row index
2122
- * @returns true if any control in the row is dirty
2123
- */
2124
- isRowDirty(rowIndex: number): boolean;
2125
- /**
2126
- * Get validation errors for a specific row.
2127
- * Aggregates errors from all controls in the FormGroup.
1478
+ * @default true
2128
1479
  *
2129
- * @param rowIndex - The row index
2130
- * @returns Object with field names as keys and their errors, or null if no errors
2131
- */
2132
- getRowErrors(rowIndex: number): Record<string, unknown> | null;
2133
- }
2134
- /**
2135
- * Gets the FormArrayContext from a grid element, if present.
2136
- * @internal
2137
- * @since 0.5.0
2138
- */
2139
- declare function getFormArrayContext(gridElement: HTMLElement): FormArrayContext | undefined;
2140
- /**
2141
- * Directive that binds a FormArray directly to the grid.
2142
- *
2143
- * This is the recommended way to integrate tbw-grid with Angular Reactive Forms.
2144
- * Use a FormArray of FormGroups for row-level validation and cell-level control access.
2145
- *
2146
- * ## Usage
2147
- *
2148
- * ```typescript
2149
- * import { Component, inject } from '@angular/core';
2150
- * import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
2151
- * import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
2152
- *
2153
- * @Component({
2154
- * imports: [Grid, GridFormArray, ReactiveFormsModule],
2155
- * template: \`
2156
- * <form [formGroup]="form">
2157
- * <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
2158
- * </form>
2159
- * \`
2160
- * })
2161
- * export class MyComponent {
2162
- * private fb = inject(FormBuilder);
2163
- *
2164
- * form = this.fb.group({
2165
- * rows: this.fb.array([
2166
- * this.fb.group({ name: 'Alice', age: 30 }),
2167
- * this.fb.group({ name: 'Bob', age: 25 }),
2168
- * ])
2169
- * });
2170
- *
2171
- * columns = [
2172
- * { field: 'name', header: 'Name', editable: true },
2173
- * { field: 'age', header: 'Age', editable: true }
2174
- * ];
2175
- * }
2176
- * ```
2177
- *
2178
- * ## How It Works
2179
- *
2180
- * - **FormArray → Grid**: The grid displays the FormArray's value as rows
2181
- * - **Grid → FormArray**: When a cell is edited, the corresponding FormControl is updated
2182
- * - FormArrayContext is available for accessing cell-level controls
2183
- *
2184
- * ## Features
2185
- *
2186
- * - Works naturally with FormArray inside a FormGroup
2187
- * - Provides cell-level FormControl access for validation
2188
- * - Supports row-level validation state aggregation
2189
- * - Automatically syncs FormArray changes to the grid
2190
- *
2191
- * @example
2192
- * ```html
2193
- * <form [formGroup]="form">
2194
- * <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
2195
- * </form>
2196
- * ```
2197
- *
2198
- * @category Directive
2199
- *
2200
- * MOVE-IN-V2: this directive (and its `FormArrayContext` type and
2201
- * `getFormArrayContext` helper) will physically move into
2202
- * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
2203
- * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
2204
- * at the same time. Consumers should already be importing from the feature
2205
- * entry.
2206
- * @since 0.5.0
2207
- */
2208
- declare class GridFormArray implements OnInit, OnDestroy {
2209
- #private;
2210
- private readonly destroyRef;
2211
- private elementRef;
2212
- private cellCommitUnsub;
2213
- private cellCancelUnsub;
2214
- private rowCommitUnsub;
2215
- private touchListener;
2216
- private valueChangesSubscription;
2217
- private statusChangesSubscriptions;
2218
- /**
2219
- * The FormArray to bind to the grid.
2220
- */
2221
- readonly formArray: _angular_core.InputSignal<FormArray<any>>;
2222
- /**
2223
- * Whether to automatically sync Angular validation state to grid's visual invalid styling.
1480
+ * @example
1481
+ * ```html
1482
+ * <!-- Disable all sorting -->
1483
+ * <tbw-grid [sortable]="false" />
2224
1484
  *
2225
- * When enabled:
2226
- * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
2227
- * - When a FormControl becomes valid, `clearInvalid()` is called
2228
- * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
2229
- * - In grid mode: validation state is synced on initial render and updated reactively
1485
+ * <!-- Enable sorting (default) - columns still need sortable: true -->
1486
+ * <tbw-grid [sortable]="true" />
2230
1487
  *
2231
- * @default true
1488
+ * <!-- Enable multi-column sorting -->
1489
+ * <tbw-grid [sortable]="true" [multiSort]="true" />
1490
+ * ```
2232
1491
  */
2233
- readonly syncValidation: _angular_core.InputSignal<boolean>;
1492
+ sortable: _angular_core.InputSignal<boolean | undefined>;
2234
1493
  /**
2235
- * Effect that sets up valueChanges subscription when FormArray changes.
2236
- * This handles both initial binding and when the FormArray reference changes.
2237
- */
2238
- private syncFormArrayToGrid;
2239
- ngOnInit(): void;
2240
- ngOnDestroy(): void;
2241
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridFormArray, never>;
2242
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFormArray, "tbw-grid[formArray]", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; "syncValidation": { "alias": "syncValidation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
2243
- }
2244
-
2245
- /**
2246
- * Context object passed to the header content template.
2247
- * @since 1.7.0
2248
- */
2249
- interface GridHeaderContentContext {
2250
- /** The grid element (implicit binding for `let-grid`). */
2251
- $implicit: DataGridElement;
2252
- /** The grid element. */
2253
- grid: DataGridElement;
2254
- }
2255
- /**
2256
- * Declarative wrapper around the grid's imperative
2257
- * {@link DataGridElement.registerHeaderContent} API.
2258
- *
2259
- * Captures an `<ng-template>` and mounts it as an Angular embedded view into
2260
- * the slot the grid provides for header content. Must be a child of
2261
- * `<tbw-grid>`.
2262
- *
2263
- * ## Usage
2264
- *
2265
- * ```html
2266
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2267
- * <tbw-grid-header-content id="calendar-nav" [order]="0">
2268
- * <ng-template let-grid>
2269
- * <app-header-nav [year]="year()" (yearChange)="setYear($event)" />
2270
- * </ng-template>
2271
- * </tbw-grid-header-content>
2272
- * </tbw-grid>
2273
- * ```
2274
- *
2275
- * @category Directive
2276
- * @since 1.7.0
2277
- */
2278
- declare class GridHeaderContent {
2279
- private elementRef;
2280
- private viewContainerRef;
2281
- private destroyRef;
2282
- /** Unique identifier for this header content entry. Optional — defaults to a stable generated id. */
2283
- id: _angular_core.InputSignal<string | undefined>;
2284
- /** Render order priority. Lower values appear first. @default 100 */
2285
- order: _angular_core.InputSignal<number>;
2286
- /** The template to mount into the grid's header content slot. */
2287
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
2288
- private viewRef;
2289
- private registeredId;
2290
- private resolvedId;
2291
- private destroyed;
2292
- constructor();
2293
- private lastOrder;
2294
- private register;
2295
- private unregister;
2296
- private findGrid;
2297
- /** Type guard for template context inference. */
2298
- static ngTemplateContextGuard(_dir: GridHeaderContent, ctx: unknown): ctx is GridHeaderContentContext;
2299
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridHeaderContent, never>;
2300
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridHeaderContent, "tbw-grid-header-content", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
2301
- }
2302
-
2303
- /**
2304
- * Directive that registers `<tbw-grid-header>` as a known Angular element.
2305
- *
2306
- * This directive exists so that Angular's template compiler recognises
2307
- * `<tbw-grid-header>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
2308
- * The grid's `config-manager` reads attributes like `title` directly
2309
- * from the DOM element.
2310
- *
2311
- * ## Usage
2312
- *
2313
- * ```typescript
2314
- * import { Component } from '@angular/core';
2315
- * import { Grid, TbwGridHeader } from '@toolbox-web/grid-angular';
2316
- *
2317
- * @Component({
2318
- * imports: [Grid, TbwGridHeader],
2319
- * template: `
2320
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2321
- * <tbw-grid-header title="My Grid Title"></tbw-grid-header>
2322
- * </tbw-grid>
2323
- * `
2324
- * })
2325
- * export class MyComponent { }
2326
- * ```
2327
- *
2328
- * @category Directive
2329
- * @since 0.13.0
2330
- */
2331
- declare class TbwGridHeader {
2332
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridHeader, never>;
2333
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridHeader, "tbw-grid-header", never, {}, {}, never, never, true, never>;
2334
- }
2335
-
2336
- /**
2337
- * Gets the FormArrayContext from a grid element, if present.
2338
- * @internal
2339
- * @since 0.11.0
2340
- */
2341
- declare function getLazyFormContext(gridElement: HTMLElement): FormArrayContext | undefined;
2342
- /**
2343
- * Factory function type for creating FormGroups lazily.
2344
- * Called when a row enters edit mode for the first time.
2345
- *
2346
- * @template TRow The row data type
2347
- * @param row The row data object
2348
- * @param rowIndex The row index in the grid
2349
- * @returns A FormGroup for the row (only include editable fields)
2350
- * @since 0.11.0
2351
- */
2352
- type LazyFormFactory<TRow = unknown> = (row: TRow, rowIndex: number) => FormGroup;
2353
- /**
2354
- * Event emitted when a row's form values have changed.
2355
- * @since 0.11.0
2356
- */
2357
- interface RowFormChangeEvent<TRow = unknown> {
2358
- /** The row index */
2359
- rowIndex: number;
2360
- /** The row ID (if available) */
2361
- rowId?: string;
2362
- /** The original row data */
2363
- row: TRow;
2364
- /** The FormGroup for this row */
2365
- formGroup: FormGroup;
2366
- /** The current form values */
2367
- values: Partial<TRow>;
2368
- /** Whether the form is valid */
2369
- valid: boolean;
2370
- /** Whether the form is dirty */
2371
- dirty: boolean;
2372
- }
2373
- /**
2374
- * Directive that provides lazy FormGroup creation for grid editing.
2375
- *
2376
- * Unlike `GridFormArray` which creates all FormGroups upfront, this directive
2377
- * creates FormGroups on-demand only when a row enters edit mode. This provides
2378
- * much better performance for large datasets while still enabling full
2379
- * Angular Reactive Forms integration.
2380
- *
2381
- * ## Key Benefits
2382
- *
2383
- * - **Performance**: Only creates FormGroups for rows being edited (20-100x fewer controls)
2384
- * - **Same DX**: Editors still receive `control` in their context for validation
2385
- * - **Memory efficient**: FormGroups are cleaned up when rows exit edit mode
2386
- *
2387
- * ## Usage
2388
- *
2389
- * ```typescript
2390
- * import { Component, inject, signal } from '@angular/core';
2391
- * import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
2392
- * import { Grid, GridLazyForm, TbwEditor } from '@toolbox-web/grid-angular';
2393
- *
2394
- * @Component({
2395
- * imports: [Grid, GridLazyForm, TbwEditor, ReactiveFormsModule],
2396
- * template: \`
2397
- * <tbw-grid
2398
- * [rows]="employees()"
2399
- * [lazyForm]="createRowForm"
2400
- * [gridConfig]="config">
2401
- *
2402
- * <tbw-grid-column field="firstName">
2403
- * <input *tbwEditor="let _; control as ctrl"
2404
- * [formControl]="ctrl"
2405
- * [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
2406
- * </tbw-grid-column>
2407
- * </tbw-grid>
2408
- * \`
2409
- * })
2410
- * export class MyComponent {
2411
- * private fb = inject(FormBuilder);
2412
- * employees = signal(generateEmployees(1000));
2413
- *
2414
- * // Factory called when editing starts - only include editable fields!
2415
- * createRowForm = (row: Employee): FormGroup => this.fb.group({
2416
- * firstName: [row.firstName, Validators.required],
2417
- * lastName: [row.lastName, Validators.minLength(2)],
2418
- * salary: [row.salary, [Validators.required, Validators.min(0)]],
2419
- * });
2420
- *
2421
- * gridConfig = { columns: [...] };
2422
- * }
2423
- * ```
2424
- *
2425
- * ## How It Works
2426
- *
2427
- * 1. Rows come from `[rows]` input (plain data array)
2428
- * 2. When a cell enters edit mode, the FormGroup is created lazily
2429
- * 3. Editors receive the FormControl in their template context
2430
- * 4. On commit, FormGroup values are synced back to the row
2431
- * 5. FormGroup is cleaned up when the row exits edit mode (configurable)
2432
- *
2433
- * ## Performance Comparison
2434
- *
2435
- * | Rows | GridFormArray (20 fields) | GridLazyForm |
2436
- * |------|---------------------------|--------------|
2437
- * | 100 | 2,000 controls | ~20 controls |
2438
- * | 500 | 10,000 controls | ~20 controls |
2439
- * | 1000 | 20,000 controls | ~20 controls |
2440
- *
2441
- * @example
2442
- * ```html
2443
- * <tbw-grid [rows]="employees()" [lazyForm]="createRowForm" [gridConfig]="gridConfig" />
2444
- * ```
2445
- *
2446
- * @see GridFormArray For small datasets with full upfront validation
2447
- * @category Directive
2448
- *
2449
- * MOVE-IN-V2: this directive (and its `LazyFormFactory`, `RowFormChangeEvent`
2450
- * types and `getLazyFormContext` helper) will physically move into
2451
- * `@toolbox-web/grid-angular/features/editing` in v2.0.0; the deprecated
2452
- * re-exports from the main `@toolbox-web/grid-angular` entry will be removed
2453
- * at the same time. Consumers should already be importing from the feature
2454
- * entry.
2455
- * @since 0.11.0
2456
- */
2457
- declare class GridLazyForm<TRow = unknown> implements OnInit, OnDestroy {
2458
- #private;
2459
- private elementRef;
2460
- private formGroupCache;
2461
- private rowIndexMap;
2462
- private editingRowIndex;
2463
- private cellCommitUnsub;
2464
- private rowCommitUnsub;
2465
- private rowsChangeUnsub;
2466
- /**
2467
- * Factory function to create a FormGroup for a row.
2468
- * Called lazily when the row first enters edit mode.
2469
- *
2470
- * @example
2471
- * ```typescript
2472
- * createRowForm = (row: Employee): FormGroup => this.fb.group({
2473
- * firstName: [row.firstName, Validators.required],
2474
- * lastName: [row.lastName],
2475
- * salary: [row.salary, [Validators.min(0)]],
2476
- * });
2477
- * ```
2478
- */
2479
- readonly lazyForm: _angular_core.InputSignal<LazyFormFactory<TRow>>;
2480
- /**
2481
- * Whether to automatically sync Angular validation state to grid's visual invalid styling.
2482
- *
2483
- * When enabled:
2484
- * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
2485
- * - When a FormControl becomes valid, `clearInvalid()` is called
2486
- * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
2487
- *
2488
- * @default true
2489
- */
2490
- readonly syncValidation: _angular_core.InputSignal<boolean>;
2491
- /**
2492
- * Whether to keep FormGroups cached after a row exits edit mode.
2493
- *
2494
- * - `true`: FormGroups are kept, preserving dirty/touched state across edit sessions
2495
- * - `false`: FormGroups are disposed when the row exits edit mode (default)
2496
- *
2497
- * @default false
2498
- */
2499
- readonly keepFormGroups: _angular_core.InputSignal<boolean>;
2500
- /**
2501
- * Emitted when a row's form values change.
2502
- * Useful for auto-save, validation display, or syncing to external state.
2503
- */
2504
- readonly rowFormChange: _angular_core.OutputEmitterRef<RowFormChangeEvent<TRow>>;
2505
- ngOnInit(): void;
2506
- ngOnDestroy(): void;
2507
- /**
2508
- * Gets the FormGroup for a row, if it exists.
2509
- * Unlike the context methods, this does NOT create a FormGroup lazily.
2510
- *
2511
- * @param rowIndex The row index
2512
- * @returns The FormGroup or undefined
2513
- */
2514
- getFormGroup(rowIndex: number): FormGroup | undefined;
2515
- /**
2516
- * Gets all cached FormGroups.
2517
- * Useful for bulk validation or inspection.
2518
- *
2519
- * @returns Map of row objects to their FormGroups
2520
- */
2521
- getAllFormGroups(): ReadonlyMap<TRow, FormGroup>;
2522
- /**
2523
- * Clears all cached FormGroups.
2524
- * Useful when the underlying data changes significantly.
2525
- */
2526
- clearAllFormGroups(): void;
2527
- /**
2528
- * Validates all currently cached FormGroups.
2529
- *
2530
- * @returns true if all FormGroups are valid, false otherwise
2531
- */
2532
- validateAll(): boolean;
2533
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridLazyForm<any>, never>;
2534
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridLazyForm<any>, "tbw-grid[lazyForm]", never, { "lazyForm": { "alias": "lazyForm"; "required": true; "isSignal": true; }; "syncValidation": { "alias": "syncValidation"; "required": false; "isSignal": true; }; "keepFormGroups": { "alias": "keepFormGroups"; "required": false; "isSignal": true; }; }, { "rowFormChange": "rowFormChange"; }, never, never, true, never>;
2535
- }
2536
-
2537
- /**
2538
- * Context object passed to the responsive card template.
2539
- *
2540
- * @template TRow - The type of row data
2541
- *
2542
- * @example
2543
- * ```html
2544
- * <tbw-grid-responsive-card>
2545
- * <ng-template let-row let-index="index">
2546
- * <div class="card-content">
2547
- * <span>{{ row.name }}</span>
2548
- * <span>Row #{{ index }}</span>
2549
- * </div>
2550
- * </ng-template>
2551
- * </tbw-grid-responsive-card>
2552
- * ```
2553
- * @since 0.4.0
2554
- */
2555
- interface GridResponsiveCardContext<TRow = unknown> {
2556
- /**
2557
- * The row data (available as `let-row` or `let-myVar`).
2558
- */
2559
- $implicit: TRow;
2560
- /**
2561
- * The row data (explicit access via `let-row="row"`).
2562
- */
2563
- row: TRow;
2564
- /**
2565
- * The row index (zero-based).
2566
- */
2567
- index: number;
2568
- }
2569
- /**
2570
- * Retrieves the responsive card template for a grid element.
2571
- *
2572
- * @param gridElement - The grid element to look up
2573
- * @returns The template reference or undefined if not found
2574
- * @since 0.4.0
2575
- */
2576
- declare function getResponsiveCardTemplate(gridElement: HTMLElement): TemplateRef<GridResponsiveCardContext> | undefined;
2577
- /**
2578
- * Directive for providing custom Angular templates for responsive card layout.
2579
- *
2580
- * Use this directive to define how each row should render when the grid
2581
- * is in responsive/mobile mode. The template receives the row data and index.
2582
- *
2583
- * ## Usage
2584
- *
2585
- * ```html
2586
- * <tbw-grid [rows]="employees">
2587
- * <tbw-grid-responsive-card>
2588
- * <ng-template let-employee let-idx="index">
2589
- * <div class="employee-card">
2590
- * <img [src]="employee.avatar" alt="">
2591
- * <div class="info">
2592
- * <strong>{{ employee.name }}</strong>
2593
- * <span>{{ employee.department }}</span>
2594
- * </div>
2595
- * </div>
2596
- * </ng-template>
2597
- * </tbw-grid-responsive-card>
2598
- * </tbw-grid>
2599
- * ```
2600
- *
2601
- * ## Important Notes
2602
- *
2603
- * - The ResponsivePlugin must be added to your grid config
2604
- * - The Grid directive will automatically configure the plugin's cardRenderer
2605
- * - Template context provides `$implicit` (row), `row`, and `index`
2606
- *
2607
- * @see ResponsivePlugin
2608
- * @category Directive
2609
- * @since 0.4.0
2610
- */
2611
- declare class GridResponsiveCard<TRow = unknown> {
2612
- private elementRef;
2613
- /**
2614
- * Card row height in pixels. Use `'auto'` for dynamic height based on content.
2615
- *
2616
- * Mirrors to the `card-row-height` attribute on the underlying
2617
- * `<tbw-grid-responsive-card>` element which the ResponsivePlugin reads.
2618
- *
2619
- * @default 'auto'
2620
- */
2621
- cardRowHeight: _angular_core.InputSignal<number | "auto" | undefined>;
2622
- /**
2623
- * The ng-template containing the card content.
2624
- */
2625
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
2626
- /**
2627
- * Effect that registers the template when it becomes available.
2628
- */
2629
- private onTemplateReceived;
2630
- /**
2631
- * Effect that mirrors the `cardRowHeight` input to the kebab-cased attribute
2632
- * read by the ResponsivePlugin.
2633
- */
2634
- private onCardRowHeightChange;
2635
- /**
2636
- * Type guard for template context inference.
2637
- */
2638
- static ngTemplateContextGuard<T>(_directive: GridResponsiveCard<T>, context: unknown): context is GridResponsiveCardContext<T>;
2639
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridResponsiveCard<any>, never>;
2640
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridResponsiveCard<any>, "tbw-grid-responsive-card", never, { "cardRowHeight": { "alias": "cardRowHeight"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
2641
- }
2642
-
2643
- /**
2644
- * Directive that registers `<tbw-grid-tool-buttons>` as a known Angular element.
2645
- *
2646
- * This directive exists so that Angular's template compiler recognises
2647
- * `<tbw-grid-tool-buttons>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
2648
- * The grid's shell reads toolbar buttons directly from the DOM.
2649
- *
2650
- * ## Usage
2651
- *
2652
- * ```typescript
2653
- * import { Component } from '@angular/core';
2654
- * import { Grid, TbwGridToolButtons } from '@toolbox-web/grid-angular';
2655
- *
2656
- * @Component({
2657
- * imports: [Grid, TbwGridToolButtons],
2658
- * template: `
2659
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2660
- * <tbw-grid-tool-buttons>
2661
- * <button (click)="doSomething()">Action</button>
2662
- * </tbw-grid-tool-buttons>
2663
- * </tbw-grid>
2664
- * `
2665
- * })
2666
- * export class MyComponent { }
2667
- * ```
2668
- *
2669
- * @category Directive
2670
- * @since 0.13.0
2671
- */
2672
- declare class TbwGridToolButtons {
2673
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridToolButtons, never>;
2674
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridToolButtons, "tbw-grid-tool-buttons", never, {}, {}, never, never, true, never>;
2675
- }
2676
-
2677
- /**
2678
- * Context object passed to the tool panel template.
2679
- * Provides access to grid-related information for the panel content.
2680
- * @since 0.1.0
2681
- */
2682
- interface GridToolPanelContext {
2683
- /** The grid element (implicit binding) */
2684
- $implicit: HTMLElement;
2685
- /** The grid element */
2686
- grid: HTMLElement;
2687
- }
2688
- /**
2689
- * Directive that captures an `<ng-template>` for use as a custom tool panel.
2690
- *
2691
- * This enables declarative Angular component usage for tool panels
2692
- * that appear in the grid's side panel.
2693
- *
2694
- * ## Usage
2695
- *
2696
- * ```html
2697
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2698
- * <tbw-grid-tool-panel
2699
- * id="quick-filters"
2700
- * title="Quick Filters"
2701
- * icon="🔍"
2702
- * tooltip="Apply quick filters"
2703
- * [order]="10"
2704
- * >
2705
- * <ng-template let-grid>
2706
- * <app-quick-filters [grid]="grid" />
2707
- * </ng-template>
2708
- * </tbw-grid-tool-panel>
2709
- * </tbw-grid>
2710
- * ```
2711
- *
2712
- * The template context provides:
2713
- * - `$implicit` / `grid`: The grid element reference
2714
- *
2715
- * ### Attributes
2716
- *
2717
- * - `id` (required): Unique identifier for the panel
2718
- * - `title` (required): Panel title shown in accordion header
2719
- * - `icon`: Icon for accordion section header (emoji or text)
2720
- * - `tooltip`: Tooltip for accordion section header
2721
- * - `order`: Panel order priority (lower = first, default: 100)
2722
- *
2723
- * Import the directive in your component:
2724
- *
2725
- * ```typescript
2726
- * import { GridToolPanel } from '@toolbox-web/grid-angular';
2727
- *
2728
- * @Component({
2729
- * imports: [GridToolPanel],
2730
- * // ...
2731
- * })
2732
- * ```
2733
- *
2734
- * @example
2735
- * ```html
2736
- * <tbw-grid [rows]="rows">
2737
- * <tbw-grid-tool-panel id="quick-filters" title="Quick Filters" icon="\uD83D\uDD0D">
2738
- * <ng-template let-grid>
2739
- * <app-quick-filters [grid]="grid" />
2740
- * </ng-template>
2741
- * </tbw-grid-tool-panel>
2742
- * </tbw-grid>
2743
- * ```
2744
- *
2745
- * @category Directive
2746
- * @since 0.1.0
2747
- */
2748
- declare class GridToolPanel {
2749
- private elementRef;
2750
- /** Unique panel identifier (required) */
2751
- id: _angular_core.InputSignal<string>;
2752
- /** Panel title shown in accordion header (required) */
2753
- title: _angular_core.InputSignal<string>;
2754
- /** Icon for accordion section header (emoji or text) */
2755
- icon: _angular_core.InputSignal<string | undefined>;
2756
- /** Tooltip for accordion section header */
2757
- tooltip: _angular_core.InputSignal<string | undefined>;
2758
- /** Panel order priority (lower = first, default: 100) */
2759
- order: _angular_core.InputSignal<number>;
2760
- /**
2761
- * Query for the ng-template content child.
2762
- */
2763
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
2764
- /** Effect that triggers when the template is available */
2765
- private onTemplateReceived;
2766
- /**
2767
- * Static type guard for template context.
2768
- * Enables type inference in templates.
2769
- */
2770
- static ngTemplateContextGuard(dir: GridToolPanel, ctx: unknown): ctx is GridToolPanelContext;
2771
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridToolPanel, never>;
2772
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridToolPanel, "tbw-grid-tool-panel", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
2773
- }
2774
-
2775
- /**
2776
- * Context object passed to the toolbar content template.
2777
- * @since 1.7.0
2778
- */
2779
- interface GridToolbarContentContext {
2780
- /** The grid element (implicit binding for `let-grid`). */
2781
- $implicit: DataGridElement;
2782
- /** The grid element. */
2783
- grid: DataGridElement;
2784
- }
2785
- /**
2786
- * Declarative wrapper around the grid's imperative
2787
- * {@link DataGridElement.registerToolbarContent} API.
2788
- *
2789
- * Captures an `<ng-template>` and mounts it as an Angular embedded view into
2790
- * the slot the grid provides for toolbar content. Must be a child of
2791
- * `<tbw-grid>`.
2792
- *
2793
- * Prefer this over `<tbw-grid-tool-buttons>` (light DOM) when you need
2794
- * Angular template bindings to component state. Use the light-DOM form for
2795
- * static markup that should be moved verbatim into the toolbar.
2796
- *
2797
- * ## Usage
2798
- *
2799
- * ```html
2800
- * <tbw-grid [rows]="rows" [gridConfig]="config">
2801
- * <tbw-grid-toolbar-content id="calendar-nav" [order]="0">
2802
- * <ng-template let-grid>
2803
- * <app-toolbar-nav (prev)="prev()" (today)="today()" (next)="next()" />
2804
- * </ng-template>
2805
- * </tbw-grid-toolbar-content>
2806
- * </tbw-grid>
2807
- * ```
2808
- *
2809
- * @category Directive
2810
- * @since 1.7.0
2811
- */
2812
- declare class GridToolbarContent {
2813
- private elementRef;
2814
- private viewContainerRef;
2815
- private destroyRef;
2816
- id: _angular_core.InputSignal<string | undefined>;
2817
- order: _angular_core.InputSignal<number>;
2818
- template: _angular_core.Signal<TemplateRef<any> | undefined>;
2819
- private viewRef;
2820
- private registeredId;
2821
- private resolvedId;
2822
- private lastOrder;
2823
- private destroyed;
2824
- constructor();
2825
- private register;
2826
- private unregister;
2827
- private findGrid;
2828
- static ngTemplateContextGuard(_dir: GridToolbarContent, ctx: unknown): ctx is GridToolbarContentContext;
2829
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridToolbarContent, never>;
2830
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridToolbarContent, "tbw-grid-toolbar-content", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
2831
- }
2832
-
2833
- /**
2834
- * Column shorthand parsing for `@toolbox-web/grid-angular`.
2835
- *
2836
- * Intentionally duplicated across the React, Vue, and Angular adapters so each
2837
- * adapter has zero shared-runtime dependency. Do not extract into a shared
2838
- * package: the helpers are tiny (~100 lines), the duplication keeps each
2839
- * adapter independently tree-shakeable, and a shared package would force
2840
- * consumers to install an extra dep just to import shorthand support.
2841
- *
2842
- * If you change behavior here, mirror the change in `grid-react` and
2843
- * `grid-vue`. The three implementations are kept byte-equivalent.
2844
- */
2845
-
2846
- /**
2847
- * Type for column shorthand notation.
2848
- *
2849
- * Supports:
2850
- * - Simple string: `'name'` → `{ field: 'name', header: 'Name' }`
2851
- * - With type: `'salary:number'` → `{ field: 'salary', header: 'Salary', type: 'number' }`
2852
- * - Full config object: `{ field: 'id', header: 'ID', width: 80 }` (passed through)
2853
- *
2854
- * @example
2855
- * ```typescript
2856
- * // All equivalent:
2857
- * const cols1 = ['id', 'name', 'email'];
2858
- * const cols2 = ['id:number', 'name:string', 'email'];
2859
- * const cols3 = [{ field: 'id' }, { field: 'name' }, { field: 'email' }];
2860
- * ```
2861
- * @since 1.4.0
2862
- */
2863
- type ColumnShorthand<TRow = unknown> = string | ColumnConfig$1<TRow>;
2864
- /**
2865
- * Parse a column shorthand string into a ColumnConfig.
2866
- *
2867
- * Supports formats:
2868
- * - `'fieldName'` → `{ field: 'fieldName', header: 'Field Name' }`
2869
- * - `'fieldName:type'` → `{ field: 'fieldName', header: 'Field Name', type: 'type' }`
2870
- *
2871
- * @param shorthand - The shorthand string (e.g., 'name', 'salary:number')
2872
- * @returns A ColumnConfig object
2873
- * @since 1.4.0
2874
- */
2875
- declare function parseColumnShorthand<TRow = unknown>(shorthand: string): ColumnConfig$1<TRow>;
2876
- /**
2877
- * Normalize an array of column shorthands to ColumnConfig objects.
2878
- *
2879
- * @param columns - Array of column shorthands (strings or ColumnConfig objects)
2880
- * @returns Array of ColumnConfig objects
2881
- * @since 1.4.0
2882
- */
2883
- declare function normalizeColumns<TRow = unknown>(columns: ColumnShorthand<TRow>[]): ColumnConfig$1<TRow>[];
2884
- /**
2885
- * Apply column defaults to a list of columns. Individual column properties
2886
- * override defaults.
2887
- * @since 1.4.0
2888
- */
2889
- declare function applyColumnDefaults<TRow = unknown>(columns: ColumnConfig$1<TRow>[], defaults: Partial<ColumnConfig$1<TRow>> | undefined): ColumnConfig$1<TRow>[];
2890
- /** Check if an array of columns contains any shorthand strings. * @since 1.4.0
2891
- */
2892
- declare function hasColumnShorthands<TRow>(columns: ColumnShorthand<TRow>[]): boolean;
2893
-
2894
- /**
2895
- * Event detail for cell commit events.
2896
- * @since 0.1.1
2897
- */
2898
- interface CellCommitEvent<TRow = unknown, TValue = unknown> {
2899
- /** The row data object */
2900
- row: TRow;
2901
- /** The field name of the edited column */
2902
- field: string;
2903
- /** The new value after edit */
2904
- value: TValue;
2905
- /** The row index in the data array */
2906
- rowIndex: number;
2907
- /** Array of all rows that have been modified */
2908
- changedRows: TRow[];
2909
- /** Set of row indices that have been modified */
2910
- changedRowIndices: Set<number>;
2911
- /** Whether this is the first modification to this row */
2912
- firstTimeForRow: boolean;
2913
- }
2914
- /**
2915
- * Event detail for row commit events (bulk editing).
2916
- * @since 0.1.1
2917
- */
2918
- interface RowCommitEvent<TRow = unknown> {
2919
- /** The row data object */
2920
- row: TRow;
2921
- /** The row index in the data array */
2922
- rowIndex: number;
2923
- /** Array of all rows that have been modified */
2924
- changedRows: TRow[];
2925
- /** Set of row indices that have been modified */
2926
- changedRowIndices: Set<number>;
2927
- /** Whether this is the first modification to this row */
2928
- firstTimeForRow: boolean;
2929
- }
2930
- /**
2931
- * Directive that automatically registers the Angular adapter with tbw-grid elements.
2932
- *
2933
- * This directive eliminates the need to manually register the adapter in your component
2934
- * constructor. Simply import this directive and it will handle adapter registration.
2935
- *
2936
- * ## Usage
2937
- *
2938
- * ```typescript
2939
- * import { Component } from '@angular/core';
2940
- * import { Grid } from '@toolbox-web/grid-angular';
2941
- *
2942
- * @Component({
2943
- * selector: 'app-root',
2944
- * imports: [Grid],
2945
- * template: `
2946
- * <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
2947
- * <!-- column templates -->
2948
- * </tbw-grid>
2949
- * `
2950
- * })
2951
- * export class AppComponent {
2952
- * rows = [...];
2953
- * config = {...};
2954
- * myStyles = `.my-class { color: red; }`;
2955
- * }
2956
- * ```
2957
- *
2958
- * The directive automatically:
2959
- * - Creates a GridAdapter instance
2960
- * - Registers it with the GridElement
2961
- * - Injects custom styles into the grid
2962
- * - Handles cleanup on destruction
2963
- *
2964
- * ## Multi-version coexistence
2965
- *
2966
- * In single-version apps the directive matches the bare `<tbw-grid>` tag. When
2967
- * two different grid versions share a page, the second-loaded bundle registers
2968
- * under a version-suffixed tag (e.g. `<tbw-grid-v2-15-0>`). Because Angular
2969
- * matches selectors at compile time, a runtime-only tag cannot be matched by
2970
- * tag name. The directive therefore also matches the stable `[data-tbw-grid]`
2971
- * attribute, so a suffixed grid can opt in by adding it literally:
2972
- *
2973
- * ```html
2974
- * <tbw-grid-v2-15-0 data-tbw-grid [rows]="rows" [gridConfig]="config"></tbw-grid-v2-15-0>
2975
- * ```
2976
- *
2977
- * Read the concrete tag from `DataGridElement.activeTag` of the bundle you
2978
- * imported. See the multi-version coexistence guide.
2979
- *
2980
- * @category Directive
2981
- * @since 0.1.0
2982
- */
2983
- declare class Grid implements OnInit, AfterContentInit, OnDestroy {
2984
- private elementRef;
2985
- private injector;
2986
- private appRef;
2987
- private viewContainerRef;
2988
- private iconRegistry;
2989
- private adapter;
2990
- constructor();
2991
- /**
2992
- * Custom CSS styles to inject into the grid.
2993
- * Use this to style custom cell renderers, editors, or detail panels.
2994
- *
2995
- * @example
2996
- * ```typescript
2997
- * // In your component
2998
- * customStyles = `
2999
- * .my-detail-panel { padding: 16px; }
3000
- * .my-status-badge { border-radius: 4px; }
3001
- * `;
3002
- * ```
3003
- *
3004
- * ```html
3005
- * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
3006
- * ```
3007
- */
3008
- customStyles: _angular_core.InputSignal<string | undefined>;
3009
- /**
3010
- * Grid-wide sorting toggle.
3011
- * When false, disables sorting for all columns regardless of their individual `sortable` setting.
3012
- * When true (default), columns with `sortable: true` can be sorted.
3013
- *
3014
- * This is a core grid config property, not a plugin feature.
3015
- * For multi-column sorting, also add the `[multiSort]` feature.
3016
- *
3017
- * @default true
3018
- *
3019
- * @example
3020
- * ```html
3021
- * <!-- Disable all sorting -->
3022
- * <tbw-grid [sortable]="false" />
3023
- *
3024
- * <!-- Enable sorting (default) - columns still need sortable: true -->
3025
- * <tbw-grid [sortable]="true" />
3026
- *
3027
- * <!-- Enable multi-column sorting -->
3028
- * <tbw-grid [sortable]="true" [multiSort]="true" />
3029
- * ```
3030
- */
3031
- sortable: _angular_core.InputSignal<boolean | undefined>;
3032
- /**
3033
- * Grid-wide filtering toggle.
3034
- * When false, disables filtering for all columns regardless of their individual `filterable` setting.
3035
- * When true (default), columns with `filterable: true` can be filtered.
3036
- *
3037
- * Requires the FilteringPlugin to be loaded.
3038
- *
3039
- * @default true
3040
- *
3041
- * @example
3042
- * ```html
3043
- * <!-- Disable all filtering -->
3044
- * <tbw-grid [filterable]="false" [filtering]="true" />
3045
- *
3046
- * <!-- Enable filtering (default) -->
3047
- * <tbw-grid [filterable]="true" [filtering]="true" />
3048
- * ```
3049
- */
3050
- filterable: _angular_core.InputSignal<boolean | undefined>;
3051
- /**
3052
- * Grid-wide selection toggle.
3053
- * When false, disables selection for all rows/cells.
3054
- * When true (default), selection is enabled based on plugin mode.
3055
- *
3056
- * Requires the SelectionPlugin to be loaded.
3057
- *
3058
- * @default true
3059
- *
3060
- * @example
3061
- * ```html
3062
- * <!-- Disable all selection -->
3063
- * <tbw-grid [selectable]="false" [selection]="'range'" />
3064
- *
3065
- * <!-- Enable selection (default) -->
3066
- * <tbw-grid [selectable]="true" [selection]="'range'" />
3067
- * ```
3068
- */
3069
- selectable: _angular_core.InputSignal<boolean | undefined>;
3070
- /**
3071
- * Show a loading overlay on the grid.
3072
- * Use this during initial data fetch or refresh operations.
3073
- *
3074
- * For row/cell loading states, access the grid element directly:
3075
- * - `grid.setRowLoading(rowId, true/false)`
3076
- * - `grid.setCellLoading(rowId, field, true/false)`
3077
- *
3078
- * @default false
3079
- *
3080
- * @example
3081
- * ```html
3082
- * <!-- Show loading during data fetch -->
3083
- * <tbw-grid [loading]="isLoading" [rows]="rows" />
3084
- * ```
3085
- *
3086
- * ```typescript
3087
- * isLoading = true;
3088
- *
3089
- * ngOnInit() {
3090
- * this.dataService.fetchData().subscribe(data => {
3091
- * this.rows = data;
3092
- * this.isLoading = false;
3093
- * });
3094
- * }
3095
- * ```
3096
- */
3097
- loading: _angular_core.InputSignal<boolean | undefined>;
3098
- /**
3099
- * The data rows to display in the grid.
3100
- *
3101
- * Accepts an array of data objects. Each object represents one row.
3102
- * The grid reads property values for each column's `field` from these objects.
3103
- *
3104
- * @example
3105
- * ```html
3106
- * <tbw-grid [rows]="employees()" [gridConfig]="config" />
3107
- * ```
3108
- */
3109
- rows: _angular_core.InputSignal<any[] | undefined>;
3110
- /**
3111
- * Column configuration array.
3112
- *
3113
- * Accepts either full `ColumnConfig` objects or shorthand strings such as
3114
- * `'name'` or `'salary:number'`. Shorthands auto-generate human-readable
3115
- * headers from the field name.
3116
- *
3117
- * Shorthand for setting columns without wrapping them in a full `gridConfig`.
3118
- * If both `columns` and `gridConfig.columns` are set, `columns` takes precedence
3119
- * (see configuration precedence system).
3120
- *
3121
- * @example
3122
- * ```html
3123
- * <tbw-grid [rows]="data" [columns]="['id:number', 'name', { field: 'status', editable: true }]" />
3124
- * ```
3125
- */
3126
- columns: _angular_core.InputSignal<ColumnShorthand<any>[] | undefined>;
3127
- /**
3128
- * Default column properties applied to every column in `columns`.
3129
- * Individual column properties override these defaults.
3130
- *
3131
- * @example
3132
- * ```html
3133
- * <tbw-grid
3134
- * [columnDefaults]="{ sortable: true, resizable: true }"
3135
- * [columns]="[{ field: 'id', sortable: false }, { field: 'name' }]"
3136
- * />
3137
- * ```
3138
- */
3139
- columnDefaults: _angular_core.InputSignal<Partial<ColumnConfig<any>> | undefined>;
3140
- /**
3141
- * Column sizing strategy.
3142
- *
3143
- * - `'stretch'` (default) — columns stretch to fill available width
3144
- * - `'fixed'` — columns use their declared widths; enables horizontal scrolling
3145
- * - `'auto-fit'` — columns auto-size to content, then stretch to fill
3146
- *
3147
- * @default 'stretch'
3148
- *
3149
- * @example
3150
- * ```html
3151
- * <tbw-grid [rows]="data" fitMode="fixed" />
3152
- * <tbw-grid [rows]="data" [fitMode]="dynamicMode()" />
3153
- * ```
3154
- */
3155
- fitMode: _angular_core.InputSignal<FitMode | undefined>;
3156
- /**
3157
- * How automatic column inference combines with explicitly provided columns.
3158
- *
3159
- * - `'auto'` (default): infer only when no columns are provided.
3160
- * - `'merge'`: always infer from data, then overlay provided columns by `field`.
3161
- *
3162
- * @example
3163
- * ```html
3164
- * <tbw-grid [rows]="data" columnInference="merge" />
3165
- * <tbw-grid [rows]="data" [columnInference]="mode()" />
3166
- * ```
3167
- */
3168
- columnInference: _angular_core.InputSignal<ColumnInferenceMode | undefined>;
3169
- /**
3170
- * Grid configuration object with optional Angular-specific extensions.
3171
- *
3172
- * Accepts Angular-augmented `GridConfig` from `@toolbox-web/grid-angular`.
3173
- * You can specify Angular component classes directly for renderers and editors.
3174
- *
3175
- * Component classes must implement the appropriate interfaces:
3176
- * - Renderers: `CellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
3177
- * - Editors: `CellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
3178
- *
3179
- * @example
3180
- * ```typescript
3181
- * // Simple config with plain renderers
3182
- * config: GridConfig = {
3183
- * columns: [
3184
- * { field: 'name', header: 'Name' },
3185
- * { field: 'active', type: 'boolean' }
3186
- * ],
3187
- * typeDefaults: {
3188
- * boolean: { renderer: (ctx) => ctx.value ? '✓' : '✗' }
3189
- * }
3190
- * };
3191
- *
3192
- * // Config with component classes
3193
- * config: GridConfig<Employee> = {
3194
- * columns: [
3195
- * { field: 'name', header: 'Name' },
3196
- * { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
3197
- * ]
3198
- * };
3199
- * ```
3200
- *
3201
- * ```html
3202
- * <tbw-grid [gridConfig]="config" [rows]="employees"></tbw-grid>
3203
- * ```
3204
- */
3205
- gridConfig: _angular_core.InputSignal<GridConfig<any> | undefined>;
3206
- /**
3207
- * Enable cell/row/range selection.
3208
- *
3209
- * **Requires feature import:**
3210
- * ```typescript
3211
- * import '@toolbox-web/grid-angular/features/selection';
3212
- * ```
3213
- *
3214
- * @example
3215
- * ```html
3216
- * <!-- Shorthand - just the mode -->
3217
- * <tbw-grid [selection]="'range'" />
3218
- *
3219
- * <!-- Full config object -->
3220
- * <tbw-grid [selection]="{ mode: 'range', checkbox: true }" />
3221
- * ```
3222
- *
3223
- * @deprecated Use `GridSelectionDirective` from
3224
- * `@toolbox-web/grid-angular/features/selection`. Will be removed in v2.0.0.
3225
- */
3226
- selection: _angular_core.InputSignal<"row" | SelectionConfig<any> | "cell" | "range" | undefined>;
3227
- /**
3228
- * Enable inline cell editing.
3229
- *
3230
- * **Requires feature import:**
3231
- * ```typescript
3232
- * import '@toolbox-web/grid-angular/features/editing';
3233
- * ```
3234
- *
3235
- * @example
3236
- * ```html
3237
- * <!-- Enable with default trigger (dblclick) -->
3238
- * <tbw-grid [editing]="true" />
3239
- *
3240
- * <!-- Specify trigger -->
3241
- * <tbw-grid [editing]="'click'" />
3242
- * <tbw-grid [editing]="'dblclick'" />
3243
- * <tbw-grid [editing]="'manual'" />
3244
- *
3245
- * <!-- Full config with callbacks -->
3246
- * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
3247
- * ```
3248
- *
3249
- * @deprecated Use `GridEditingDirective` from
3250
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3251
- */
3252
- editing: _angular_core.InputSignal<boolean | "click" | "dblclick" | "manual" | EditingConfig | undefined>;
3253
- /**
3254
- * Enable clipboard copy/paste. Requires selection to be enabled.
3255
- *
3256
- * **Requires feature import:**
3257
- * ```typescript
3258
- * import '@toolbox-web/grid-angular/features/clipboard';
3259
- * ```
3260
- *
3261
- * @example
3262
- * ```html
3263
- * <tbw-grid [selection]="'range'" [clipboard]="true" />
3264
- * ```
3265
- *
3266
- * @deprecated Use `GridClipboardDirective` from
3267
- * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
3268
- */
3269
- clipboard: _angular_core.InputSignal<boolean | ClipboardConfig | undefined>;
3270
- /**
3271
- * Enable right-click context menu.
3272
- *
3273
- * **Requires feature import:**
3274
- * ```typescript
3275
- * import '@toolbox-web/grid-angular/features/context-menu';
3276
- * ```
3277
- *
3278
- * @example
3279
- * ```html
3280
- * <tbw-grid [contextMenu]="true" />
3281
- * ```
3282
- *
3283
- * @deprecated Use `GridContextMenuDirective` from
3284
- * `@toolbox-web/grid-angular/features/context-menu`. Will be removed in v2.0.0.
3285
- */
3286
- contextMenu: _angular_core.InputSignal<boolean | ContextMenuConfig | undefined>;
3287
- /**
3288
- * Enable multi-column sorting.
3289
- *
3290
- * Multi-sort allows users to sort by multiple columns simultaneously.
3291
- * For basic single-column sorting, columns with `sortable: true` work without this plugin.
3292
- *
3293
- * **Requires feature import:**
3294
- * ```typescript
3295
- * import '@toolbox-web/grid-angular/features/multi-sort';
3296
- * ```
3297
- *
3298
- * @example
3299
- * ```html
3300
- * <!-- Enable multi-column sorting -->
3301
- * <tbw-grid [multiSort]="true" />
3302
- *
3303
- * <!-- Limit to single column (uses plugin but restricts to 1 column) -->
3304
- * <tbw-grid [multiSort]="'single'" />
3305
- *
3306
- * <!-- Full config -->
3307
- * <tbw-grid [multiSort]="{ maxSortColumns: 3 }" />
3308
- * ```
3309
- *
3310
- * @deprecated Use `GridMultiSortDirective` from
3311
- * `@toolbox-web/grid-angular/features/multi-sort`. Will be removed in v2.0.0.
3312
- */
3313
- multiSort: _angular_core.InputSignal<boolean | "multi" | MultiSortConfig | "single" | undefined>;
3314
- /**
3315
- * Enable column filtering.
3316
- *
3317
- * **Requires feature import:**
3318
- * ```typescript
3319
- * import '@toolbox-web/grid-angular/features/filtering';
3320
- * ```
3321
- *
3322
- * @example
3323
- * ```html
3324
- * <tbw-grid [filtering]="true" />
3325
- * <tbw-grid [filtering]="{ debounceMs: 200 }" />
3326
- * ```
3327
- *
3328
- * @deprecated Use `GridFilteringDirective` from
3329
- * `@toolbox-web/grid-angular/features/filtering` and add it to your
3330
- * component's `imports`. The directive owns the `filtering` input + the
3331
- * `filterChange` output and lets the typed surface tree-shake away when
3332
- * the feature is not imported. This input remains as a non-breaking shim
3333
- * and will be removed in v2.0.0.
3334
- */
3335
- filtering: _angular_core.InputSignal<boolean | FilterConfig<any> | undefined>;
3336
- /**
3337
- * Enable column drag-to-reorder.
3338
- *
3339
- * **Requires feature import:**
3340
- * ```typescript
3341
- * import '@toolbox-web/grid-angular/features/reorder-columns';
3342
- * ```
3343
- *
3344
- * @example
3345
- * ```html
3346
- * <tbw-grid [reorderColumns]="true" />
3347
- * ```
3348
- *
3349
- * @deprecated Use `GridReorderColumnsDirective` from
3350
- * `@toolbox-web/grid-angular/features/reorder-columns`. Will be removed in v2.0.0.
3351
- */
3352
- reorderColumns: _angular_core.InputSignal<boolean | ReorderConfig | undefined>;
3353
- /**
3354
- * Enable column visibility toggle panel.
3355
- *
3356
- * **Requires feature import:**
3357
- * ```typescript
3358
- * import '@toolbox-web/grid-angular/features/visibility';
3359
- * ```
3360
- *
3361
- * @example
3362
- * ```html
3363
- * <tbw-grid [visibility]="true" />
3364
- * ```
3365
- *
3366
- * @deprecated Use `GridVisibilityDirective` from
3367
- * `@toolbox-web/grid-angular/features/visibility`. Will be removed in v2.0.0.
3368
- */
3369
- visibility: _angular_core.InputSignal<boolean | VisibilityConfig | undefined>;
3370
- /**
3371
- * Enable pinned/sticky columns.
3372
- * Columns are pinned via the `sticky` column property.
3373
- *
3374
- * **Requires feature import:**
3375
- * ```typescript
3376
- * import '@toolbox-web/grid-angular/features/pinned-columns';
3377
- * ```
3378
- *
3379
- * @example
3380
- * ```html
3381
- * <tbw-grid [pinnedColumns]="true" [columns]="[
3382
- * { field: 'id', pinned: 'left' },
3383
- * { field: 'name' },
3384
- * { field: 'actions', pinned: 'right' }
3385
- * ]" />
3386
- * ```
3387
- *
3388
- * @deprecated Use `GridPinnedColumnsDirective` from
3389
- * `@toolbox-web/grid-angular/features/pinned-columns`. Will be removed in v2.0.0.
3390
- */
3391
- pinnedColumns: _angular_core.InputSignal<boolean | undefined>;
3392
- /**
3393
- * Enable multi-level column headers (column groups).
3394
- *
3395
- * **Requires feature import:**
3396
- * ```typescript
3397
- * import '@toolbox-web/grid-angular/features/grouping-columns';
3398
- * ```
3399
- *
3400
- * @example
3401
- * ```html
3402
- * <tbw-grid [groupingColumns]="true" />
3403
- * ```
3404
- *
3405
- * @deprecated Use `GridGroupingColumnsDirective` from
3406
- * `@toolbox-web/grid-angular/features/grouping-columns`. Will be removed in v2.0.0.
3407
- */
3408
- groupingColumns: _angular_core.InputSignal<boolean | GroupingColumnsConfig | undefined>;
3409
- /**
3410
- * Enable horizontal column virtualization for wide grids.
3411
- *
3412
- * **Requires feature import:**
3413
- * ```typescript
3414
- * import '@toolbox-web/grid-angular/features/column-virtualization';
3415
- * ```
3416
- *
3417
- * @example
3418
- * ```html
3419
- * <tbw-grid [columnVirtualization]="true" />
3420
- * ```
3421
- *
3422
- * @deprecated Use `GridColumnVirtualizationDirective` from
3423
- * `@toolbox-web/grid-angular/features/column-virtualization`. Will be removed in v2.0.0.
3424
- */
3425
- columnVirtualization: _angular_core.InputSignal<boolean | ColumnVirtualizationConfig | undefined>;
3426
- /**
3427
- * Enable row drag-to-reorder.
3428
- *
3429
- * @deprecated Use `rowDragDrop` instead. `reorderRows` remains as an alias.
3430
- *
3431
- * **Requires feature import:**
3432
- * ```typescript
3433
- * import '@toolbox-web/grid-angular/features/reorder-rows';
3434
- * ```
3435
- */
3436
- reorderRows: _angular_core.InputSignal<boolean | RowReorderConfig | undefined>;
3437
- /**
3438
- * Enable row drag-and-drop within and across grids.
3439
- *
3440
- * **Requires feature import:**
3441
- * ```typescript
3442
- * import '@toolbox-web/grid-angular/features/row-drag-drop';
3443
- * ```
3444
- *
3445
- * @example
3446
- * ```html
3447
- * <tbw-grid [rowDragDrop]="{ dropZone: 'employees', operation: 'move' }" />
3448
- * ```
3449
- *
3450
- * @deprecated Use `GridRowDragDropDirective` from
3451
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3452
- */
3453
- rowDragDrop: _angular_core.InputSignal<boolean | RowDragDropConfig<any> | undefined>;
3454
- /**
3455
- * Enable row grouping by field values.
3456
- *
3457
- * **Requires feature import:**
3458
- * ```typescript
3459
- * import '@toolbox-web/grid-angular/features/grouping-rows';
3460
- * ```
3461
- *
3462
- * @example
3463
- * ```html
3464
- * <tbw-grid [groupingRows]="{ groupBy: ['department'] }" />
3465
- * ```
3466
- *
3467
- * @deprecated Use `GridGroupingRowsDirective` from
3468
- * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
3469
- */
3470
- groupingRows: _angular_core.InputSignal<GroupingRowsConfig | undefined>;
3471
- /**
3472
- * Enable pinned rows (aggregation/status bar).
3473
- *
3474
- * **Requires feature import:**
3475
- * ```typescript
3476
- * import '@toolbox-web/grid-angular/features/pinned-rows';
3477
- * ```
3478
- *
3479
- * @example
3480
- * ```html
3481
- * <tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />
3482
- * ```
3483
- *
3484
- * @deprecated Use `GridPinnedRowsDirective` from
3485
- * `@toolbox-web/grid-angular/features/pinned-rows`. Will be removed in v2.0.0.
3486
- */
3487
- pinnedRows: _angular_core.InputSignal<boolean | PinnedRowsConfig | undefined>;
3488
- /**
3489
- * Enable hierarchical tree view.
3490
- *
3491
- * **Requires feature import:**
3492
- * ```typescript
3493
- * import '@toolbox-web/grid-angular/features/tree';
3494
- * ```
3495
- *
3496
- * @example
3497
- * ```html
3498
- * <tbw-grid [tree]="{ childrenField: 'children' }" />
3499
- * ```
3500
- *
3501
- * @deprecated Use `GridTreeDirective` from
3502
- * `@toolbox-web/grid-angular/features/tree`. Will be removed in v2.0.0.
3503
- */
3504
- tree: _angular_core.InputSignal<boolean | TreeConfig | undefined>;
3505
- /**
3506
- * Enable master-detail expandable rows.
3507
- *
3508
- * **Requires feature import:**
3509
- * ```typescript
3510
- * import '@toolbox-web/grid-angular/features/master-detail';
3511
- * ```
3512
- *
3513
- * @example
3514
- * ```html
3515
- * <tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />
3516
- * ```
3517
- *
3518
- * @deprecated Use `GridMasterDetailDirective` from
3519
- * `@toolbox-web/grid-angular/features/master-detail`. Will be removed in v2.0.0.
3520
- */
3521
- masterDetail: _angular_core.InputSignal<MasterDetailConfig | undefined>;
3522
- /**
3523
- * Enable responsive card layout for narrow viewports.
3524
- *
3525
- * **Requires feature import:**
3526
- * ```typescript
3527
- * import '@toolbox-web/grid-angular/features/responsive';
3528
- * ```
3529
- *
3530
- * @example
3531
- * ```html
3532
- * <tbw-grid [responsive]="{ breakpoint: 768 }" />
3533
- * ```
3534
- *
3535
- * @deprecated Use `GridResponsiveDirective` from
3536
- * `@toolbox-web/grid-angular/features/responsive`. Will be removed in v2.0.0.
3537
- */
3538
- responsive: _angular_core.InputSignal<boolean | ResponsivePluginConfig<unknown> | undefined>;
3539
- /**
3540
- * Enable undo/redo for cell edits. Requires editing to be enabled.
3541
- *
3542
- * **Requires feature import:**
3543
- * ```typescript
3544
- * import '@toolbox-web/grid-angular/features/undo-redo';
3545
- * ```
3546
- *
3547
- * @example
3548
- * ```html
3549
- * <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />
3550
- * ```
3551
- *
3552
- * @deprecated Use `GridUndoRedoDirective` from
3553
- * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
3554
- */
3555
- undoRedo: _angular_core.InputSignal<boolean | UndoRedoConfig | undefined>;
3556
- /**
3557
- * Enable CSV/JSON export functionality.
3558
- *
3559
- * **Requires feature import:**
3560
- * ```typescript
3561
- * import '@toolbox-web/grid-angular/features/export';
3562
- * ```
3563
- *
3564
- * @example
3565
- * ```html
3566
- * <tbw-grid [export]="true" />
3567
- * <tbw-grid [export]="{ filename: 'data.csv' }" />
3568
- * ```
3569
- *
3570
- * @deprecated Use `GridExportDirective` from
3571
- * `@toolbox-web/grid-angular/features/export`. Will be removed in v2.0.0.
3572
- */
3573
- exportFeature: _angular_core.InputSignal<boolean | ExportConfig | undefined>;
3574
- /**
3575
- * Enable print functionality.
3576
- *
3577
- * **Requires feature import:**
3578
- * ```typescript
3579
- * import '@toolbox-web/grid-angular/features/print';
3580
- * ```
3581
- *
3582
- * @example
3583
- * ```html
3584
- * <tbw-grid [print]="true" />
3585
- * ```
3586
- *
3587
- * @deprecated Use `GridPrintDirective` from
3588
- * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
3589
- */
3590
- print: _angular_core.InputSignal<boolean | PrintConfig | undefined>;
3591
- /**
3592
- * Enable pivot table functionality.
3593
- *
3594
- * **Requires feature import:**
3595
- * ```typescript
3596
- * import '@toolbox-web/grid-angular/features/pivot';
3597
- * ```
3598
- *
3599
- * @example
3600
- * ```html
3601
- * <tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />
3602
- * ```
3603
- *
3604
- * @deprecated Use `GridPivotDirective` from
3605
- * `@toolbox-web/grid-angular/features/pivot`. Will be removed in v2.0.0.
3606
- */
3607
- pivot: _angular_core.InputSignal<PivotConfig | undefined>;
3608
- /**
3609
- * Enable server-side data operations.
3610
- *
3611
- * **Requires feature import:**
3612
- * ```typescript
3613
- * import '@toolbox-web/grid-angular/features/server-side';
3614
- * ```
3615
- *
3616
- * @example
3617
- * ```html
3618
- * <tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />
3619
- * ```
3620
- *
3621
- * @deprecated Use `GridServerSideDirective` from
3622
- * `@toolbox-web/grid-angular/features/server-side`. Will be removed in v2.0.0.
3623
- */
3624
- serverSide: _angular_core.InputSignal<ServerSideConfig | undefined>;
3625
- /**
3626
- * Controls the tooltip behavior for the grid.
3627
- *
3628
- * @example
3629
- * ```html
3630
- * <tbw-grid [tooltip]="true" />
3631
- * <tbw-grid [tooltip]="{ header: true, cell: false }" />
3632
- * ```
3633
- *
3634
- * @deprecated Use `GridTooltipDirective` from
3635
- * `@toolbox-web/grid-angular/features/tooltip`. Will be removed in v2.0.0.
3636
- */
3637
- tooltip: _angular_core.InputSignal<boolean | TooltipConfig | undefined>;
3638
- /**
3639
- * Emitted when a cell is clicked.
3640
- *
3641
- * @example
3642
- * ```html
3643
- * <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
3644
- * ```
3645
- */
3646
- cellClick: _angular_core.OutputEmitterRef<CellClickDetail<any>>;
3647
- /**
3648
- * Emitted when a row is clicked.
3649
- *
3650
- * @example
3651
- * ```html
3652
- * <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
3653
- * ```
3654
- */
3655
- rowClick: _angular_core.OutputEmitterRef<RowClickDetail<any>>;
3656
- /**
3657
- * Emitted when a cell is activated (Enter key or double-click).
3658
- *
3659
- * @example
3660
- * ```html
3661
- * <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
3662
- * ```
3663
- */
3664
- cellActivate: _angular_core.OutputEmitterRef<CellActivateDetail<any>>;
3665
- /**
3666
- * Emitted when a cell value changes (before commit).
3667
- *
3668
- * @example
3669
- * ```html
3670
- * <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
3671
- * ```
3672
- */
3673
- cellChange: _angular_core.OutputEmitterRef<CellChangeDetail<any>>;
3674
- /**
3675
- * Emitted when a cell value is committed (inline editing).
3676
- * Provides the row, field, new value, and change tracking information.
3677
- *
3678
- * @example
3679
- * ```html
3680
- * <tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>
3681
- * ```
3682
- *
3683
- * ```typescript
3684
- * onCellCommit(event: CellCommitEvent) {
3685
- * console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
3686
- * }
3687
- * ```
3688
- *
3689
- * @deprecated Use `GridEditingDirective` from
3690
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3691
- */
3692
- cellCommit: _angular_core.OutputEmitterRef<CellCommitEvent<unknown, unknown>>;
3693
- /**
3694
- * Emitted when a cell edit is cancelled (Escape, click outside without
3695
- * commit, or `editor.cancel()`).
3696
- *
3697
- * @example
3698
- * ```html
3699
- * <tbw-grid (cellCancel)="onCellCancel($event)">...</tbw-grid>
3700
- * ```
3701
- *
3702
- * @deprecated Use `GridEditingDirective` from
3703
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3704
- */
3705
- cellCancel: _angular_core.OutputEmitterRef<CellCancelDetail>;
3706
- /**
3707
- * Emitted when a cell editor opens.
3708
- *
3709
- * @example
3710
- * ```html
3711
- * <tbw-grid (editOpen)="onEditOpen($event)">...</tbw-grid>
3712
- * ```
3713
- *
3714
- * @deprecated Use `GridEditingDirective` from
3715
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3716
- */
3717
- editOpen: _angular_core.OutputEmitterRef<EditOpenDetail<any>>;
3718
- /**
3719
- * Emitted before an editor closes. Useful for last-chance validation.
3720
- *
3721
- * @example
3722
- * ```html
3723
- * <tbw-grid (beforeEditClose)="onBeforeEditClose($event)">...</tbw-grid>
3724
- * ```
3725
- *
3726
- * @deprecated Use `GridEditingDirective` from
3727
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3728
- */
3729
- beforeEditClose: _angular_core.OutputEmitterRef<BeforeEditCloseDetail<any>>;
3730
- /**
3731
- * Emitted after an editor closes (whether committed or cancelled).
3732
- *
3733
- * @example
3734
- * ```html
3735
- * <tbw-grid (editClose)="onEditClose($event)">...</tbw-grid>
3736
- * ```
3737
- *
3738
- * @deprecated Use `GridEditingDirective` from
3739
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3740
- */
3741
- editClose: _angular_core.OutputEmitterRef<EditCloseDetail<any>>;
3742
- /**
3743
- * Emitted when the dirty / changed-rows state transitions.
3744
- *
3745
- * @example
3746
- * ```html
3747
- * <tbw-grid (dirtyChange)="onDirtyChange($event)">...</tbw-grid>
3748
- * ```
3749
- *
3750
- * @deprecated Use `GridEditingDirective` from
3751
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3752
- */
3753
- dirtyChange: _angular_core.OutputEmitterRef<DirtyChangeDetail<any>>;
3754
- /**
3755
- * Emitted when row data is replaced (e.g. via the `rows` setter).
3756
- *
3757
- * @example
3758
- * ```html
3759
- * <tbw-grid (dataChange)="onDataChange($event)">...</tbw-grid>
3760
- * ```
3761
- */
3762
- dataChange: _angular_core.OutputEmitterRef<DataChangeDetail>;
3763
- /**
3764
- * Emitted when a row's values are committed (bulk/row editing).
3765
- * Provides the row data and change tracking information.
3766
- *
3767
- * @example
3768
- * ```html
3769
- * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
3770
- * ```
3771
- *
3772
- * @deprecated Use `GridEditingDirective` from
3773
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3774
- */
3775
- rowCommit: _angular_core.OutputEmitterRef<RowCommitEvent<unknown>>;
3776
- /**
3777
- * Emitted when the changed rows are reset.
3778
- *
3779
- * @example
3780
- * ```html
3781
- * <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
3782
- * ```
3783
- *
3784
- * @deprecated Use `GridEditingDirective` from
3785
- * `@toolbox-web/grid-angular/features/editing`. Will be removed in v2.0.0.
3786
- */
3787
- changedRowsReset: _angular_core.OutputEmitterRef<ChangedRowsResetDetail<unknown>>;
3788
- /**
3789
- * Emitted when sort state changes.
3790
- *
3791
- * @example
3792
- * ```html
3793
- * <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
3794
- * ```
3795
- */
3796
- sortChange: _angular_core.OutputEmitterRef<SortChangeDetail>;
3797
- /**
3798
- * Emitted when filter values change.
1494
+ * Grid-wide filtering toggle.
1495
+ * When false, disables filtering for all columns regardless of their individual `filterable` setting.
1496
+ * When true (default), columns with `filterable: true` can be filtered.
3799
1497
  *
3800
- * @example
3801
- * ```html
3802
- * <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
3803
- * ```
1498
+ * Requires the FilteringPlugin to be loaded.
3804
1499
  *
3805
- * @deprecated Use `GridFilteringDirective` from
3806
- * `@toolbox-web/grid-angular/features/filtering` (the directive
3807
- * declares the `(filterChange)` output). This output remains as a
3808
- * non-breaking shim and will be removed in v2.0.0.
3809
- */
3810
- filterChange: _angular_core.OutputEmitterRef<FilterChangeDetail>;
3811
- /**
3812
- * Emitted when a column is resized.
1500
+ * @default true
3813
1501
  *
3814
1502
  * @example
3815
1503
  * ```html
3816
- * <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
1504
+ * <!-- Disable all filtering -->
1505
+ * <tbw-grid [filterable]="false" [filtering]="true" />
1506
+ *
1507
+ * <!-- Enable filtering (default) -->
1508
+ * <tbw-grid [filterable]="true" [filtering]="true" />
3817
1509
  * ```
3818
1510
  */
3819
- columnResize: _angular_core.OutputEmitterRef<ColumnResizeDetail>;
1511
+ filterable: _angular_core.InputSignal<boolean | undefined>;
3820
1512
  /**
3821
- * Emitted when a column's width is reset (double-click on the resize handle).
1513
+ * Grid-wide selection toggle.
1514
+ * When false, disables selection for all rows/cells.
1515
+ * When true (default), selection is enabled based on plugin mode.
1516
+ *
1517
+ * Requires the SelectionPlugin to be loaded.
1518
+ *
1519
+ * @default true
3822
1520
  *
3823
1521
  * @example
3824
1522
  * ```html
3825
- * <tbw-grid (columnResizeReset)="onColumnResizeReset($event)">...</tbw-grid>
1523
+ * <!-- Disable all selection -->
1524
+ * <tbw-grid [selectable]="false" [selection]="'range'" />
1525
+ *
1526
+ * <!-- Enable selection (default) -->
1527
+ * <tbw-grid [selectable]="true" [selection]="'range'" />
3826
1528
  * ```
3827
1529
  */
3828
- columnResizeReset: _angular_core.OutputEmitterRef<ColumnResizeResetDetail>;
1530
+ selectable: _angular_core.InputSignal<boolean | undefined>;
3829
1531
  /**
3830
- * Emitted when a column is moved via drag-and-drop.
1532
+ * Show a loading overlay on the grid.
1533
+ * Use this during initial data fetch or refresh operations.
3831
1534
  *
3832
- * @example
3833
- * ```html
3834
- * <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
3835
- * ```
1535
+ * For row/cell loading states, access the grid element directly:
1536
+ * - `grid.setRowLoading(rowId, true/false)`
1537
+ * - `grid.setCellLoading(rowId, field, true/false)`
3836
1538
  *
3837
- * @deprecated Use `GridReorderColumnsDirective` from
3838
- * `@toolbox-web/grid-angular/features/reorder-columns`. Will be removed in v2.0.0.
3839
- */
3840
- columnMove: _angular_core.OutputEmitterRef<ColumnMoveDetail>;
3841
- /**
3842
- * Emitted when a column is shown or hidden — either via the visibility
3843
- * sidebar, `grid.toggleColumnVisibility(field)`, `grid.setColumnVisible(field, visible)`,
3844
- * or `grid.showAllColumns()`.
1539
+ * @default false
3845
1540
  *
3846
1541
  * @example
3847
1542
  * ```html
3848
- * <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
1543
+ * <!-- Show loading during data fetch -->
1544
+ * <tbw-grid [loading]="isLoading" [rows]="rows" />
3849
1545
  * ```
3850
1546
  *
3851
- * @deprecated Use `GridVisibilityDirective` from
3852
- * `@toolbox-web/grid-angular/features/visibility`. Will be removed in v2.0.0.
3853
- */
3854
- columnVisibility: _angular_core.OutputEmitterRef<ColumnVisibilityDetail>;
3855
- /**
3856
- * Emitted when column state changes (resize, reorder, visibility).
1547
+ * ```typescript
1548
+ * isLoading = true;
3857
1549
  *
3858
- * @example
3859
- * ```html
3860
- * <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
1550
+ * ngOnInit() {
1551
+ * this.dataService.fetchData().subscribe(data => {
1552
+ * this.rows = data;
1553
+ * this.isLoading = false;
1554
+ * });
1555
+ * }
3861
1556
  * ```
3862
1557
  */
3863
- columnStateChange: _angular_core.OutputEmitterRef<GridColumnState>;
1558
+ loading: _angular_core.InputSignal<boolean | undefined>;
3864
1559
  /**
3865
- * Emitted when selection changes.
1560
+ * The data rows to display in the grid.
1561
+ *
1562
+ * Accepts an array of data objects. Each object represents one row.
1563
+ * The grid reads property values for each column's `field` from these objects.
3866
1564
  *
3867
1565
  * @example
3868
1566
  * ```html
3869
- * <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
1567
+ * <tbw-grid [rows]="employees()" [gridConfig]="config" />
3870
1568
  * ```
3871
- *
3872
- * @deprecated Use `GridSelectionDirective` from
3873
- * `@toolbox-web/grid-angular/features/selection`. Will be removed in v2.0.0.
3874
1569
  */
3875
- selectionChange: _angular_core.OutputEmitterRef<SelectionChangeDetail>;
1570
+ rows: _angular_core.InputSignal<any[] | undefined>;
3876
1571
  /**
3877
- * Emitted when a row is moved via drag-and-drop.
1572
+ * Column configuration array.
1573
+ *
1574
+ * Accepts either full `ColumnConfig` objects or shorthand strings such as
1575
+ * `'name'` or `'salary:number'`. Shorthands auto-generate human-readable
1576
+ * headers from the field name.
1577
+ *
1578
+ * Shorthand for setting columns without wrapping them in a full `gridConfig`.
1579
+ * If both `columns` and `gridConfig.columns` are set, `columns` takes precedence
1580
+ * (see configuration precedence system).
3878
1581
  *
3879
1582
  * @example
3880
1583
  * ```html
3881
- * <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
1584
+ * <tbw-grid [rows]="data" [columns]="['id:number', 'name', { field: 'status', editable: true }]" />
3882
1585
  * ```
3883
- *
3884
- * @deprecated Use `GridRowDragDropDirective` from
3885
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3886
1586
  */
3887
- rowMove: _angular_core.OutputEmitterRef<RowMoveDetail<any>>;
1587
+ columns: _angular_core.InputSignal<ColumnShorthand<any>[] | undefined>;
3888
1588
  /**
3889
- * Emitted when a row drag starts. Cancelable via `event.preventDefault()`.
1589
+ * Default column properties applied to every column in `columns`.
1590
+ * Individual column properties override these defaults.
3890
1591
  *
3891
1592
  * @example
3892
1593
  * ```html
3893
- * <tbw-grid (rowDragStart)="onRowDragStart($event)">...</tbw-grid>
1594
+ * <tbw-grid
1595
+ * [columnDefaults]="{ sortable: true, resizable: true }"
1596
+ * [columns]="[{ field: 'id', sortable: false }, { field: 'name' }]"
1597
+ * />
3894
1598
  * ```
3895
- *
3896
- * @deprecated Use `GridRowDragDropDirective` from
3897
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3898
- */
3899
- rowDragStart: _angular_core.OutputEmitterRef<RowDragStartDetail<any>>;
3900
- /**
3901
- * Emitted when a row drag ends (after drop or cancel).
3902
- *
3903
- * @deprecated Use `GridRowDragDropDirective` from
3904
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3905
1599
  */
3906
- rowDragEnd: _angular_core.OutputEmitterRef<RowDragEndDetail<any>>;
1600
+ columnDefaults: _angular_core.InputSignal<Partial<ColumnConfig<any>> | undefined>;
3907
1601
  /**
3908
- * Emitted on the target grid when rows are dropped from another grid.
3909
- * Cancelable via `event.preventDefault()`.
1602
+ * Column sizing strategy.
3910
1603
  *
3911
- * @deprecated Use `GridRowDragDropDirective` from
3912
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3913
- */
3914
- rowDrop: _angular_core.OutputEmitterRef<RowDropDetail<any>>;
3915
- /**
3916
- * Emitted on BOTH source and target grids after a successful cross-grid
3917
- * row transfer.
1604
+ * - `'stretch'` (default) — columns stretch to fill available width
1605
+ * - `'fixed'` — columns use their declared widths; enables horizontal scrolling
1606
+ * - `'auto-fit'` — columns auto-size to content, then stretch to fill
3918
1607
  *
3919
- * @deprecated Use `GridRowDragDropDirective` from
3920
- * `@toolbox-web/grid-angular/features/row-drag-drop`. Will be removed in v2.0.0.
3921
- */
3922
- rowTransfer: _angular_core.OutputEmitterRef<RowTransferDetail<any>>;
3923
- /**
3924
- * Emitted when a group is expanded or collapsed.
1608
+ * @default 'stretch'
3925
1609
  *
3926
1610
  * @example
3927
1611
  * ```html
3928
- * <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
1612
+ * <tbw-grid [rows]="data" fitMode="fixed" />
1613
+ * <tbw-grid [rows]="data" [fitMode]="dynamicMode()" />
3929
1614
  * ```
3930
- *
3931
- * @deprecated Use `GridGroupingRowsDirective` from
3932
- * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
3933
1615
  */
3934
- groupToggle: _angular_core.OutputEmitterRef<GroupToggleDetail>;
1616
+ fitMode: _angular_core.InputSignal<FitMode | undefined>;
3935
1617
  /**
3936
- * Emitted when a group is expanded.
1618
+ * How automatic column inference combines with explicitly provided columns.
1619
+ *
1620
+ * - `'auto'` (default): infer only when no columns are provided.
1621
+ * - `'merge'`: always infer from data, then overlay provided columns by `field`.
3937
1622
  *
3938
1623
  * @example
3939
1624
  * ```html
3940
- * <tbw-grid (groupExpand)="onGroupExpand($event)">...</tbw-grid>
1625
+ * <tbw-grid [rows]="data" columnInference="merge" />
1626
+ * <tbw-grid [rows]="data" [columnInference]="mode()" />
3941
1627
  * ```
3942
- *
3943
- * @deprecated Use `GridGroupingRowsDirective` from
3944
- * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
3945
1628
  */
3946
- groupExpand: _angular_core.OutputEmitterRef<GroupExpandDetail>;
1629
+ columnInference: _angular_core.InputSignal<ColumnInferenceMode | undefined>;
3947
1630
  /**
3948
- * Emitted when a group is collapsed.
1631
+ * Grid configuration object with optional Angular-specific extensions.
3949
1632
  *
3950
- * @example
3951
- * ```html
3952
- * <tbw-grid (groupCollapse)="onGroupCollapse($event)">...</tbw-grid>
3953
- * ```
1633
+ * Accepts Angular-augmented `GridConfig` from `@toolbox-web/grid-angular`.
1634
+ * You can specify Angular component classes directly for renderers and editors.
3954
1635
  *
3955
- * @deprecated Use `GridGroupingRowsDirective` from
3956
- * `@toolbox-web/grid-angular/features/grouping-rows`. Will be removed in v2.0.0.
3957
- */
3958
- groupCollapse: _angular_core.OutputEmitterRef<GroupCollapseDetail>;
3959
- /**
3960
- * Emitted when a tree node is expanded.
1636
+ * Component classes must implement the appropriate interfaces:
1637
+ * - Renderers: `CellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
1638
+ * - Editors: `CellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
3961
1639
  *
3962
1640
  * @example
3963
- * ```html
3964
- * <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
3965
- * ```
1641
+ * ```typescript
1642
+ * // Simple config with plain renderers
1643
+ * config: GridConfig = {
1644
+ * columns: [
1645
+ * { field: 'name', header: 'Name' },
1646
+ * { field: 'active', type: 'boolean' }
1647
+ * ],
1648
+ * typeDefaults: {
1649
+ * boolean: { renderer: (ctx) => ctx.value ? '✓' : '✗' }
1650
+ * }
1651
+ * };
3966
1652
  *
3967
- * @deprecated Use `GridTreeDirective` from
3968
- * `@toolbox-web/grid-angular/features/tree`. Will be removed in v2.0.0.
3969
- */
3970
- treeExpand: _angular_core.OutputEmitterRef<TreeExpandDetail<any>>;
3971
- /**
3972
- * Emitted when a detail panel is expanded or collapsed.
1653
+ * // Config with component classes
1654
+ * config: GridConfig<Employee> = {
1655
+ * columns: [
1656
+ * { field: 'name', header: 'Name' },
1657
+ * { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
1658
+ * ]
1659
+ * };
1660
+ * ```
3973
1661
  *
3974
- * @example
3975
1662
  * ```html
3976
- * <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
1663
+ * <tbw-grid [gridConfig]="config" [rows]="employees"></tbw-grid>
3977
1664
  * ```
3978
- *
3979
- * @deprecated Use `GridMasterDetailDirective` from
3980
- * `@toolbox-web/grid-angular/features/master-detail`. Will be removed in v2.0.0.
3981
1665
  */
3982
- detailExpand: _angular_core.OutputEmitterRef<DetailExpandDetail>;
1666
+ gridConfig: _angular_core.InputSignal<GridConfig<any> | undefined>;
3983
1667
  /**
3984
- * Emitted when responsive mode changes (table ↔ card).
1668
+ * Emitted when a cell is clicked.
3985
1669
  *
3986
1670
  * @example
3987
1671
  * ```html
3988
- * <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
1672
+ * <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
3989
1673
  * ```
3990
- *
3991
- * @deprecated Use `GridResponsiveDirective` from
3992
- * `@toolbox-web/grid-angular/features/responsive`. Will be removed in v2.0.0.
3993
1674
  */
3994
- responsiveChange: _angular_core.OutputEmitterRef<ResponsiveChangeDetail>;
1675
+ cellClick: _angular_core.OutputEmitterRef<CellClickDetail<any>>;
3995
1676
  /**
3996
- * Emitted when the context menu opens.
1677
+ * Emitted when a row is clicked.
3997
1678
  *
3998
1679
  * @example
3999
1680
  * ```html
4000
- * <tbw-grid (contextMenuOpen)="onContextMenuOpen($event)">...</tbw-grid>
1681
+ * <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
4001
1682
  * ```
4002
- *
4003
- * @deprecated Use `GridContextMenuDirective` from
4004
- * `@toolbox-web/grid-angular/features/context-menu`. Will be removed in v2.0.0.
4005
1683
  */
4006
- contextMenuOpen: _angular_core.OutputEmitterRef<ContextMenuOpenDetail>;
1684
+ rowClick: _angular_core.OutputEmitterRef<RowClickDetail<any>>;
4007
1685
  /**
4008
- * Emitted when cells are copied to clipboard.
1686
+ * Emitted when a cell is activated (Enter key or double-click).
4009
1687
  *
4010
1688
  * @example
4011
1689
  * ```html
4012
- * <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
1690
+ * <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
4013
1691
  * ```
4014
- *
4015
- * @deprecated Use `GridClipboardDirective` from
4016
- * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
4017
1692
  */
4018
- copy: _angular_core.OutputEmitterRef<CopyDetail>;
1693
+ cellActivate: _angular_core.OutputEmitterRef<CellActivateDetail<any>>;
4019
1694
  /**
4020
- * Emitted when cells are pasted from clipboard.
1695
+ * Emitted when a cell value changes (before commit).
4021
1696
  *
4022
1697
  * @example
4023
1698
  * ```html
4024
- * <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
1699
+ * <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
4025
1700
  * ```
4026
- *
4027
- * @deprecated Use `GridClipboardDirective` from
4028
- * `@toolbox-web/grid-angular/features/clipboard`. Will be removed in v2.0.0.
4029
1701
  */
4030
- paste: _angular_core.OutputEmitterRef<PasteDetail>;
1702
+ cellChange: _angular_core.OutputEmitterRef<CellChangeDetail<any>>;
4031
1703
  /**
4032
- * Emitted when an undo action is performed.
1704
+ * Emitted when row data is replaced (e.g. via the `rows` setter).
4033
1705
  *
4034
1706
  * @example
4035
1707
  * ```html
4036
- * <tbw-grid (undo)="onUndo($event)">...</tbw-grid>
1708
+ * <tbw-grid (dataChange)="onDataChange($event)">...</tbw-grid>
4037
1709
  * ```
4038
- *
4039
- * @deprecated Use `GridUndoRedoDirective` from
4040
- * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
4041
1710
  */
4042
- undo: _angular_core.OutputEmitterRef<UndoRedoDetail>;
1711
+ dataChange: _angular_core.OutputEmitterRef<DataChangeDetail>;
4043
1712
  /**
4044
- * Emitted when a redo action is performed.
1713
+ * Emitted when sort state changes.
4045
1714
  *
4046
1715
  * @example
4047
1716
  * ```html
4048
- * <tbw-grid (redo)="onRedo($event)">...</tbw-grid>
1717
+ * <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
4049
1718
  * ```
4050
- *
4051
- * @deprecated Use `GridUndoRedoDirective` from
4052
- * `@toolbox-web/grid-angular/features/undo-redo`. Will be removed in v2.0.0.
4053
1719
  */
4054
- redo: _angular_core.OutputEmitterRef<UndoRedoDetail>;
1720
+ sortChange: _angular_core.OutputEmitterRef<SortChangeDetail>;
4055
1721
  /**
4056
- * Emitted when export completes.
1722
+ * Emitted when a column is resized.
4057
1723
  *
4058
1724
  * @example
4059
1725
  * ```html
4060
- * <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
1726
+ * <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
4061
1727
  * ```
4062
- *
4063
- * @deprecated Use `GridExportDirective` from
4064
- * `@toolbox-web/grid-angular/features/export`. Will be removed in v2.0.0.
4065
1728
  */
4066
- exportComplete: _angular_core.OutputEmitterRef<ExportCompleteDetail>;
1729
+ columnResize: _angular_core.OutputEmitterRef<ColumnResizeDetail>;
4067
1730
  /**
4068
- * Emitted when print starts.
1731
+ * Emitted when a column's width is reset (double-click on the resize handle).
4069
1732
  *
4070
1733
  * @example
4071
1734
  * ```html
4072
- * <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
1735
+ * <tbw-grid (columnResizeReset)="onColumnResizeReset($event)">...</tbw-grid>
4073
1736
  * ```
4074
- *
4075
- * @deprecated Use `GridPrintDirective` from
4076
- * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
4077
1737
  */
4078
- printStart: _angular_core.OutputEmitterRef<PrintStartDetail>;
1738
+ columnResizeReset: _angular_core.OutputEmitterRef<ColumnResizeResetDetail>;
4079
1739
  /**
4080
- * Emitted when print completes.
1740
+ * Emitted when column state changes (resize, reorder, visibility).
4081
1741
  *
4082
1742
  * @example
4083
1743
  * ```html
4084
- * <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
1744
+ * <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
4085
1745
  * ```
4086
- *
4087
- * @deprecated Use `GridPrintDirective` from
4088
- * `@toolbox-web/grid-angular/features/print`. Will be removed in v2.0.0.
4089
1746
  */
4090
- printComplete: _angular_core.OutputEmitterRef<PrintCompleteDetail>;
1747
+ columnStateChange: _angular_core.OutputEmitterRef<GridColumnState>;
4091
1748
  /**
4092
1749
  * Emitted (rAF-batched) when the grid's viewport is scrolled vertically.
4093
1750
  *
@@ -4123,36 +1780,43 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
4123
1780
  */
4124
1781
  render: _angular_core.OutputEmitterRef<RenderDetail>;
4125
1782
  private readonly eventOutputMap;
4126
- /** Events deliberately not exposed as Angular outputs. Keep empty unless documented. */
1783
+ /**
1784
+ * Events deliberately not exposed as outputs on the `Grid` directive.
1785
+ *
1786
+ * Every entry here is a **feature-owned** event surfaced by its per-feature
1787
+ * directive instead (e.g. `GridEditingDirective` declares `(cellCommit)`,
1788
+ * `GridSelectionDirective` declares `(selectionChange)`). The directive
1789
+ * claims the DOM event via `claimEvent` so it is the sole emitter. The v1.x
1790
+ * shims that forwarded these events from `Grid` were removed in v3.0.0 —
1791
+ * consumers must import the relevant feature directive.
1792
+ */
4127
1793
  private _intentionallyOmittedEvents;
4128
1794
  private _assertEventOutputMapCoversCore;
4129
1795
  private eventListeners;
4130
1796
  ngOnInit(): void;
4131
1797
  /**
4132
- * Sets up event listeners for all outputs using the eventOutputMap.
1798
+ * Sets up event listeners for the core outputs in `eventOutputMap`.
4133
1799
  *
4134
- * Hybrid v1.x / v2 ownership: events claimed by an attribute-selector
4135
- * feature directive (via `claimEvent` in `feature-claims.ts`) are skipped
4136
- * here so the directive's own `output()` is the sole emitter. Without
4137
- * this skip both this directive's deprecated output and the directive's
4138
- * new output would fire for the same DOM event.
1800
+ * Feature-owned events (e.g. `cell-commit`, `selection-change`) are not in
1801
+ * `eventOutputMap` — they are surfaced by their per-feature directive, which
1802
+ * claims the DOM event via `claimEvent`. Events still claimed here are
1803
+ * skipped so the claiming directive's `output()` is the sole emitter.
4139
1804
  */
4140
1805
  private setupEventListeners;
4141
1806
  /**
4142
- * Creates plugins from feature inputs.
1807
+ * Creates plugins from the per-feature directive claims.
4143
1808
  * Uses the feature registry to allow tree-shaking - only imported features are bundled.
4144
1809
  * Per-feature config bridging (e.g. converting Angular component classes inside
4145
1810
  * `groupingColumns` / `groupingRows` / `pinnedRows` configs to renderer functions)
4146
1811
  * runs via `getFeatureConfigPreprocessor`, populated by feature secondary entries.
4147
1812
  *
4148
- * Hybrid v1.x / v2 ownership: when an attribute-selector feature directive
4149
- * (e.g. `GridFilteringDirective`) is present on the same `<tbw-grid>`
4150
- * element it claims its feature in `feature-claims.ts`. We then read the
4151
- * claim's config getter — which transitively reads the directive's input
4152
- * signal, establishing reactive dependency tracking — instead of the
4153
- * deprecated input on this directive. This keeps the existing `[filtering]`
4154
- * binding working when used directly on `<tbw-grid>` (no directive, no
4155
- * claim) while letting the directive own the binding when imported.
1813
+ * v3 ownership: feature configuration is owned entirely by the per-feature
1814
+ * attribute-selector directives (e.g. `GridFilteringDirective`). When such a
1815
+ * directive is present on the same `<tbw-grid>` element it claims its feature
1816
+ * in `feature-claims.ts`; we read the claim's config getter — which
1817
+ * transitively reads the directive's input signal, establishing reactive
1818
+ * dependency tracking. The deprecated per-feature inputs that previously
1819
+ * lived on this directive were removed in v3.0.0.
4156
1820
  *
4157
1821
  * Returns the array of created plugins (doesn't modify grid).
4158
1822
  */
@@ -4165,7 +1829,7 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
4165
1829
  private registerCustomStyles;
4166
1830
  ngOnDestroy(): void;
4167
1831
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
4168
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid,[data-tbw-grid]", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnDefaults": { "alias": "columnDefaults"; "required": false; "isSignal": true; }; "fitMode": { "alias": "fitMode"; "required": false; "isSignal": true; }; "columnInference": { "alias": "columnInference"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "clipboard": { "alias": "clipboard"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorderColumns": { "alias": "reorderColumns"; "required": false; "isSignal": true; }; "visibility": { "alias": "visibility"; "required": false; "isSignal": true; }; "pinnedColumns": { "alias": "pinnedColumns"; "required": false; "isSignal": true; }; "groupingColumns": { "alias": "groupingColumns"; "required": false; "isSignal": true; }; "columnVirtualization": { "alias": "columnVirtualization"; "required": false; "isSignal": true; }; "reorderRows": { "alias": "reorderRows"; "required": false; "isSignal": true; }; "rowDragDrop": { "alias": "rowDragDrop"; "required": false; "isSignal": true; }; "groupingRows": { "alias": "groupingRows"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "masterDetail": { "alias": "masterDetail"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "undoRedo": { "alias": "undoRedo"; "required": false; "isSignal": true; }; "exportFeature": { "alias": "export"; "required": false; "isSignal": true; }; "print": { "alias": "print"; "required": false; "isSignal": true; }; "pivot": { "alias": "pivot"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "cellClick": "cellClick"; "rowClick": "rowClick"; "cellActivate": "cellActivate"; "cellChange": "cellChange"; "cellCommit": "cellCommit"; "cellCancel": "cellCancel"; "editOpen": "editOpen"; "beforeEditClose": "beforeEditClose"; "editClose": "editClose"; "dirtyChange": "dirtyChange"; "dataChange": "dataChange"; "rowCommit": "rowCommit"; "changedRowsReset": "changedRowsReset"; "sortChange": "sortChange"; "filterChange": "filterChange"; "columnResize": "columnResize"; "columnResizeReset": "columnResizeReset"; "columnMove": "columnMove"; "columnVisibility": "columnVisibility"; "columnStateChange": "columnStateChange"; "selectionChange": "selectionChange"; "rowMove": "rowMove"; "rowDragStart": "rowDragStart"; "rowDragEnd": "rowDragEnd"; "rowDrop": "rowDrop"; "rowTransfer": "rowTransfer"; "groupToggle": "groupToggle"; "groupExpand": "groupExpand"; "groupCollapse": "groupCollapse"; "treeExpand": "treeExpand"; "detailExpand": "detailExpand"; "responsiveChange": "responsiveChange"; "contextMenuOpen": "contextMenuOpen"; "copy": "copy"; "paste": "paste"; "undo": "undo"; "redo": "redo"; "exportComplete": "exportComplete"; "printStart": "printStart"; "printComplete": "printComplete"; "tbwScroll": "tbwScroll"; "render": "render"; }, never, never, true, never>;
1832
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid,[data-tbw-grid]", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnDefaults": { "alias": "columnDefaults"; "required": false; "isSignal": true; }; "fitMode": { "alias": "fitMode"; "required": false; "isSignal": true; }; "columnInference": { "alias": "columnInference"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; }, { "cellClick": "cellClick"; "rowClick": "rowClick"; "cellActivate": "cellActivate"; "cellChange": "cellChange"; "dataChange": "dataChange"; "sortChange": "sortChange"; "columnResize": "columnResize"; "columnResizeReset": "columnResizeReset"; "columnStateChange": "columnStateChange"; "tbwScroll": "tbwScroll"; "render": "render"; }, never, never, true, never>;
4169
1833
  }
4170
1834
 
4171
1835
  /**
@@ -4185,40 +1849,6 @@ interface StructuralCellContext<TValue = any, TRow = any> {
4185
1849
  /** The column configuration */
4186
1850
  column: any;
4187
1851
  }
4188
- /**
4189
- * Context type for structural editor directives with `any` defaults.
4190
- * This provides better ergonomics in templates without requiring explicit type annotations.
4191
- *
4192
- * @internal Use `GridEditorContext` in application code for stricter typing.
4193
- * @since 0.1.1
4194
- */
4195
- interface StructuralEditorContext<TValue = any, TRow = any> {
4196
- /** The cell value for this column */
4197
- $implicit: TValue;
4198
- /** The cell value (explicit binding) */
4199
- value: TValue;
4200
- /** The full row data object */
4201
- row: TRow;
4202
- /** The column configuration */
4203
- column: any;
4204
- /**
4205
- * Callback function to commit the edited value.
4206
- */
4207
- onCommit: (value: TValue) => void;
4208
- /**
4209
- * Callback function to cancel editing.
4210
- */
4211
- onCancel: () => void;
4212
- /**
4213
- * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
4214
- *
4215
- * Returns `undefined` if:
4216
- * - The grid is not bound to a FormArray
4217
- * - The FormArray doesn't contain FormGroups
4218
- * - The field doesn't exist in the FormGroup
4219
- */
4220
- control?: AbstractControl;
4221
- }
4222
1852
  /**
4223
1853
  * Structural directive for cell view rendering.
4224
1854
  *
@@ -4286,82 +1916,6 @@ declare class TbwRenderer implements OnDestroy {
4286
1916
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwRenderer, never>;
4287
1917
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwRenderer, "[tbwRenderer]", never, {}, {}, never, never, true, never>;
4288
1918
  }
4289
- /**
4290
- * Structural directive for cell editor rendering.
4291
- *
4292
- * This provides a cleaner syntax for defining custom cell editors without
4293
- * the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
4294
- *
4295
- * ## Usage
4296
- *
4297
- * ```html
4298
- * <!-- Instead of this verbose syntax: -->
4299
- * <tbw-grid-column field="status">
4300
- * <tbw-grid-column-editor>
4301
- * <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
4302
- * <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
4303
- * </ng-template>
4304
- * </tbw-grid-column-editor>
4305
- * </tbw-grid-column>
4306
- *
4307
- * <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
4308
- * <tbw-grid-column field="status">
4309
- * <app-status-editor *tbwEditor="let value" [value]="value" />
4310
- * </tbw-grid-column>
4311
- * ```
4312
- *
4313
- * ## Template Context
4314
- *
4315
- * The structural directive provides the same context as `GridColumnEditor`:
4316
- * - `$implicit` / `value`: The cell value
4317
- * - `row`: The full row data object
4318
- * - `column`: The column configuration
4319
- * - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
4320
- * - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
4321
- *
4322
- * ## Import
4323
- *
4324
- * ```typescript
4325
- * import { TbwEditor } from '@toolbox-web/grid-angular';
4326
- *
4327
- * @Component({
4328
- * imports: [TbwEditor],
4329
- * // ...
4330
- * })
4331
- * ```
4332
- *
4333
- * @example
4334
- * ```html
4335
- * <tbw-grid-column field="status" editable>
4336
- * <app-status-editor *tbwEditor="let value" [value]="value" />
4337
- * </tbw-grid-column>
4338
- * ```
4339
- *
4340
- * @category Directive
4341
- *
4342
- * MOVE-IN-V2: this directive (and its `StructuralEditorContext` type) will
4343
- * physically move into `@toolbox-web/grid-angular/features/editing` in v2.0.0;
4344
- * the deprecated re-export from the main `@toolbox-web/grid-angular` entry
4345
- * will be removed at the same time. Consumers should already be importing
4346
- * from the feature entry. (`TbwRenderer` stays in the main entry — it is
4347
- * editor-agnostic.)
4348
- * @since 0.1.1
4349
- */
4350
- declare class TbwEditor implements OnDestroy {
4351
- private template;
4352
- private elementRef;
4353
- private columnElement;
4354
- constructor();
4355
- private registerTemplate;
4356
- ngOnDestroy(): void;
4357
- /**
4358
- * Static type guard for template context.
4359
- * Uses `any` defaults for ergonomic template usage.
4360
- */
4361
- static ngTemplateContextGuard(dir: TbwEditor, ctx: unknown): ctx is StructuralEditorContext;
4362
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwEditor, never>;
4363
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwEditor, "[tbwEditor]", never, {}, {}, never, never, true, never>;
4364
- }
4365
1919
 
4366
1920
  /**
4367
1921
  * Combined provider helper for grid type defaults and icons.
@@ -4595,6 +2149,6 @@ declare function isEventClaimed(grid: HTMLElement, eventName: ClaimableEventName
4595
2149
  */
4596
2150
  declare function unclaimEvent(grid: HTMLElement, eventName: ClaimableEventName): void;
4597
2151
 
4598
- export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridHeaderContent, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridToolbarContent, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, applyColumnDefaults, claimEvent, getDetailTemplate, getFeatureClaim, getFeatureConfigPreprocessor, getFormArrayContext, getLazyFormContext, getResponsiveCardTemplate, hasColumnShorthands, injectGrid, isComponentClass, isEventClaimed, makeFlushFocusedInput, normalizeColumns, parseColumnShorthand, provideGrid, provideGridIcons, provideGridTypeDefaults, registerDetailRendererBridge, registerEditorMountHook, registerFeatureClaim, registerFeatureConfigPreprocessor, registerFilterPanelTypeDefaultBridge, registerResponsiveCardRendererBridge, registerTemplateBridge, runTemplateBridges, unclaimEvent, unregisterFeatureClaim };
4599
- export type { CellCommitEvent, CellEditor, CellRenderer, ColumnConfig, ColumnShorthand, EditorMountHook, FeatureConfigGetter, FeatureConfigPreprocessor, FeatureName, FilterPanel, FilterPanelTypeDefaultBridge, FormArrayContext, GridCellContext, GridConfig, GridDetailContext, GridEditorContext, GridHeaderContentContext, GridResponsiveCardContext, GridToolPanelContext, GridToolbarContentContext, InjectGridReturn, LazyFormFactory, OverlayPosition, ProvideGridOptions, RowCommitEvent, RowFormChangeEvent, RowRendererBridge, StructuralCellContext, StructuralEditorContext, TemplateBridge, TemplateBridgeContext, TypeDefault, TypeDefaultRegistration };
2152
+ export { GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnView, GridIconRegistry, GridTypeRegistry, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, applyColumnDefaults, claimEvent, getFeatureClaim, getFeatureConfigPreprocessor, hasColumnShorthands, injectGrid, isComponentClass, isEventClaimed, makeFlushFocusedInput, normalizeColumns, parseColumnShorthand, provideGrid, provideGridIcons, provideGridTypeDefaults, registerDetailRendererBridge, registerEditorMountHook, registerEditorSpecBridge, registerFeatureClaim, registerFeatureConfigPreprocessor, registerFilterPanelTypeDefaultBridge, registerResponsiveCardRendererBridge, registerTemplateBridge, registerToolPanelRendererBridge, runTemplateBridges, unclaimEvent, unregisterFeatureClaim };
2153
+ export type { CellCommitEvent, CellEditor, CellRenderer, ColumnConfig, ColumnShorthand, EditorMountHook, EditorSpecBridge, FeatureConfigGetter, FeatureConfigPreprocessor, FeatureName, FilterPanel, FilterPanelTypeDefaultBridge, GridCellContext, GridConfig, InjectGridReturn, ProvideGridOptions, RowCommitEvent, RowRendererBridge, StructuralCellContext, TemplateBridge, TemplateBridgeContext, ToolPanelRendererBridge, TypeDefault, TypeDefaultRegistration };
4600
2154
  //# sourceMappingURL=toolbox-web-grid-angular.d.ts.map