@toolbox-web/grid-angular 0.7.0 → 0.7.2
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.
- package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs +30 -0
- package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-editing.mjs +33 -0
- package/fesm2022/toolbox-web-grid-angular-features-editing.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-export.mjs +29 -0
- package/fesm2022/toolbox-web-grid-angular-features-export.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs +29 -0
- package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs +25 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs +25 -0
- package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs +40 -0
- package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs.map +1 -0
- package/{features/pinned-columns.d.ts → fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs} +11 -2
- package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs +25 -0
- package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-print.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-print.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-reorder.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-reorder.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-row-reorder.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-row-reorder.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-selection.mjs +30 -0
- package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs +25 -0
- package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-sorting.mjs +25 -0
- package/fesm2022/toolbox-web-grid-angular-features-sorting.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-tree.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-tree.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs +30 -0
- package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs +28 -0
- package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs.map +1 -0
- package/fesm2022/toolbox-web-grid-angular.mjs +3189 -0
- package/fesm2022/toolbox-web-grid-angular.mjs.map +1 -0
- package/package.json +109 -35
- package/types/toolbox-web-grid-angular-features-clipboard.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-clipboard.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-context-menu.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-context-menu.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-editing.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-editing.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-export.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-export.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-filtering.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-filtering.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-master-detail.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-master-detail.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-multi-sort.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-multi-sort.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-pivot.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-pivot.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-print.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-print.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-reorder.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-reorder.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-responsive.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-responsive.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-row-reorder.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-row-reorder.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-selection.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-selection.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-server-side.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-server-side.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-sorting.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-sorting.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-tree.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-tree.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-undo-redo.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-undo-redo.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular-features-visibility.d.ts +3 -0
- package/types/toolbox-web-grid-angular-features-visibility.d.ts.map +1 -0
- package/types/toolbox-web-grid-angular.d.ts +2325 -0
- package/types/toolbox-web-grid-angular.d.ts.map +1 -0
- package/feature-registry-C-cKloXB.js +0 -45
- package/features/clipboard.d.ts +0 -18
- package/features/clipboard.d.ts.map +0 -1
- package/features/clipboard.js +0 -3
- package/features/column-virtualization.d.ts +0 -16
- package/features/column-virtualization.d.ts.map +0 -1
- package/features/column-virtualization.js +0 -3
- package/features/context-menu.d.ts +0 -16
- package/features/context-menu.d.ts.map +0 -1
- package/features/context-menu.js +0 -3
- package/features/editing.d.ts +0 -16
- package/features/editing.d.ts.map +0 -1
- package/features/editing.js +0 -3
- package/features/export.d.ts +0 -17
- package/features/export.d.ts.map +0 -1
- package/features/export.js +0 -3
- package/features/filtering.d.ts +0 -17
- package/features/filtering.d.ts.map +0 -1
- package/features/filtering.js +0 -3
- package/features/grouping-columns.d.ts +0 -16
- package/features/grouping-columns.d.ts.map +0 -1
- package/features/grouping-columns.js +0 -3
- package/features/grouping-rows.d.ts +0 -16
- package/features/grouping-rows.d.ts.map +0 -1
- package/features/grouping-rows.js +0 -3
- package/features/index.d.ts +0 -1
- package/features/index.d.ts.map +0 -1
- package/features/index.js +0 -22
- package/features/master-detail.d.ts +0 -16
- package/features/master-detail.d.ts.map +0 -1
- package/features/master-detail.js +0 -3
- package/features/multi-sort.d.ts +0 -22
- package/features/multi-sort.d.ts.map +0 -1
- package/features/pinned-columns.d.ts.map +0 -1
- package/features/pinned-columns.js +0 -3
- package/features/pinned-rows.d.ts +0 -16
- package/features/pinned-rows.d.ts.map +0 -1
- package/features/pinned-rows.js +0 -3
- package/features/pivot.d.ts +0 -16
- package/features/pivot.d.ts.map +0 -1
- package/features/pivot.js +0 -3
- package/features/print.d.ts +0 -16
- package/features/print.d.ts.map +0 -1
- package/features/print.js +0 -3
- package/features/reorder.d.ts +0 -16
- package/features/reorder.d.ts.map +0 -1
- package/features/reorder.js +0 -3
- package/features/responsive.d.ts +0 -16
- package/features/responsive.d.ts.map +0 -1
- package/features/responsive.js +0 -3
- package/features/row-reorder.d.ts +0 -16
- package/features/row-reorder.d.ts.map +0 -1
- package/features/row-reorder.js +0 -3
- package/features/selection.d.ts +0 -16
- package/features/selection.d.ts.map +0 -1
- package/features/selection.js +0 -3
- package/features/server-side.d.ts +0 -16
- package/features/server-side.d.ts.map +0 -1
- package/features/server-side.js +0 -3
- package/features/sorting.d.ts +0 -1
- package/features/sorting.d.ts.map +0 -1
- package/features/sorting.js +0 -1
- package/features/tree.d.ts +0 -16
- package/features/tree.d.ts.map +0 -1
- package/features/tree.js +0 -3
- package/features/undo-redo.d.ts +0 -18
- package/features/undo-redo.d.ts.map +0 -1
- package/features/undo-redo.js +0 -3
- package/features/visibility.d.ts +0 -16
- package/features/visibility.d.ts.map +0 -1
- package/features/visibility.js +0 -3
- package/index.d.ts +0 -34
- package/index.d.ts.map +0 -1
- package/index.js +0 -1916
- package/lib/angular-column-config.d.ts +0 -140
- package/lib/angular-column-config.d.ts.map +0 -1
- package/lib/angular-grid-adapter.d.ts +0 -220
- package/lib/angular-grid-adapter.d.ts.map +0 -1
- package/lib/base-grid-editor.d.ts +0 -145
- package/lib/base-grid-editor.d.ts.map +0 -1
- package/lib/component-registry.d.ts +0 -63
- package/lib/component-registry.d.ts.map +0 -1
- package/lib/directives/grid-column-editor.directive.d.ts +0 -113
- package/lib/directives/grid-column-editor.directive.d.ts.map +0 -1
- package/lib/directives/grid-column-view.directive.d.ts +0 -69
- package/lib/directives/grid-column-view.directive.d.ts.map +0 -1
- package/lib/directives/grid-detail-view.directive.d.ts +0 -75
- package/lib/directives/grid-detail-view.directive.d.ts.map +0 -1
- package/lib/directives/grid-form-array.directive.d.ts +0 -141
- package/lib/directives/grid-form-array.directive.d.ts.map +0 -1
- package/lib/directives/grid-responsive-card.directive.d.ts +0 -92
- package/lib/directives/grid-responsive-card.directive.d.ts.map +0 -1
- package/lib/directives/grid-tool-panel.directive.d.ts +0 -91
- package/lib/directives/grid-tool-panel.directive.d.ts.map +0 -1
- package/lib/directives/grid.directive.d.ts +0 -808
- package/lib/directives/grid.directive.d.ts.map +0 -1
- package/lib/directives/index.d.ts +0 -9
- package/lib/directives/index.d.ts.map +0 -1
- package/lib/directives/structural-directives.d.ts +0 -174
- package/lib/directives/structural-directives.d.ts.map +0 -1
- package/lib/feature-registry.d.ts +0 -72
- package/lib/feature-registry.d.ts.map +0 -1
- package/lib/grid-type-registry.d.ts +0 -110
- package/lib/grid-type-registry.d.ts.map +0 -1
- package/lib/inject-grid.d.ts +0 -109
- package/lib/inject-grid.d.ts.map +0 -1
- package/lib/interfaces/grid-cell-editor.d.ts +0 -85
- package/lib/interfaces/grid-cell-editor.d.ts.map +0 -1
- package/lib/interfaces/grid-cell-renderer.d.ts +0 -63
- package/lib/interfaces/grid-cell-renderer.d.ts.map +0 -1
- package/lib/interfaces/index.d.ts +0 -5
- package/lib/interfaces/index.d.ts.map +0 -1
- package/multi-sort-DPbW58yz.js +0 -3
|
@@ -0,0 +1,2325 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { Type, EnvironmentInjector, ApplicationRef, ViewContainerRef, InjectionToken, EnvironmentProviders, Signal, TemplateRef, EventEmitter, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
|
|
3
|
+
import { GridConfig, ColumnConfig, FrameworkAdapter, ColumnViewRenderer, ColumnEditorSpec, TypeDefault, DataGridElement, ExpandCollapseAnimation, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, ChangedRowsResetDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
|
|
4
|
+
import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
|
|
5
|
+
import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, FilterConfig, ReorderConfig, VisibilityConfig, GroupingColumnsConfig, ColumnVirtualizationConfig, RowReorderConfig, GroupingRowsConfig, PinnedRowsConfig, TreeConfig, MasterDetailConfig, ResponsivePluginConfig, UndoRedoConfig, ExportConfig, PrintConfig, PivotConfig, ServerSideConfig, FilterChangeDetail, ColumnMoveDetail, ColumnVisibilityDetail, SelectionChangeDetail, RowMoveDetail, GroupToggleDetail, TreeExpandDetail, DetailExpandDetail, ResponsiveChangeDetail, CopyDetail, PasteDetail, UndoRedoDetail, ExportCompleteDetail, PrintStartDetail, PrintCompleteDetail } from '@toolbox-web/grid/all';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Angular-specific column configuration types.
|
|
9
|
+
*
|
|
10
|
+
* These types extend the base grid column config to allow Angular component
|
|
11
|
+
* classes to be used directly as renderers and editors.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Interface for Angular renderer components.
|
|
16
|
+
*
|
|
17
|
+
* Renderer components receive the cell value, row data, and column config as inputs.
|
|
18
|
+
* Use Angular signal inputs for reactive updates.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```typescript
|
|
22
|
+
* import { Component, input } from '@angular/core';
|
|
23
|
+
* import type { AngularCellRenderer } from '@toolbox-web/grid-angular';
|
|
24
|
+
*
|
|
25
|
+
* @Component({
|
|
26
|
+
* selector: 'app-status-badge',
|
|
27
|
+
* template: `<span [class]="'badge-' + value()">{{ value() }}</span>`
|
|
28
|
+
* })
|
|
29
|
+
* export class StatusBadgeComponent implements AngularCellRenderer<Employee, string> {
|
|
30
|
+
* value = input.required<string>();
|
|
31
|
+
* row = input.required<Employee>();
|
|
32
|
+
* column = input<unknown>();
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
|
|
37
|
+
/** The cell value - use `input<TValue>()` or `input.required<TValue>()` */
|
|
38
|
+
value: {
|
|
39
|
+
(): TValue | undefined;
|
|
40
|
+
};
|
|
41
|
+
/** The full row data - use `input<TRow>()` or `input.required<TRow>()` */
|
|
42
|
+
row: {
|
|
43
|
+
(): TRow | undefined;
|
|
44
|
+
};
|
|
45
|
+
/** The column configuration (optional) - use `input<unknown>()` */
|
|
46
|
+
column?: {
|
|
47
|
+
(): unknown;
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Interface for Angular editor components.
|
|
52
|
+
*
|
|
53
|
+
* Editor components receive the cell value, row data, and column config as inputs,
|
|
54
|
+
* plus must emit `commit` and `cancel` outputs.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```typescript
|
|
58
|
+
* import { Component, input, output } from '@angular/core';
|
|
59
|
+
* import type { AngularCellEditor } from '@toolbox-web/grid-angular';
|
|
60
|
+
*
|
|
61
|
+
* @Component({
|
|
62
|
+
* selector: 'app-status-editor',
|
|
63
|
+
* template: `
|
|
64
|
+
* <select [value]="value()" (change)="commit.emit($any($event.target).value)">
|
|
65
|
+
* <option value="active">Active</option>
|
|
66
|
+
* <option value="inactive">Inactive</option>
|
|
67
|
+
* </select>
|
|
68
|
+
* `
|
|
69
|
+
* })
|
|
70
|
+
* export class StatusEditorComponent implements AngularCellEditor<Employee, string> {
|
|
71
|
+
* value = input.required<string>();
|
|
72
|
+
* row = input.required<Employee>();
|
|
73
|
+
* column = input<unknown>();
|
|
74
|
+
* commit = output<string>();
|
|
75
|
+
* cancel = output<void>();
|
|
76
|
+
* }
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
interface AngularCellEditor<TRow = unknown, TValue = unknown> extends AngularCellRenderer<TRow, TValue> {
|
|
80
|
+
/** Emit to commit the new value - use `output<TValue>()` */
|
|
81
|
+
commit: {
|
|
82
|
+
emit(value: TValue): void;
|
|
83
|
+
subscribe?(fn: (value: TValue) => void): {
|
|
84
|
+
unsubscribe(): void;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
/** Emit to cancel editing - use `output<void>()` */
|
|
88
|
+
cancel: {
|
|
89
|
+
emit(): void;
|
|
90
|
+
subscribe?(fn: () => void): {
|
|
91
|
+
unsubscribe(): void;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Angular-specific column configuration.
|
|
97
|
+
*
|
|
98
|
+
* Extends the base ColumnConfig to allow Angular component classes
|
|
99
|
+
* to be used directly as renderers and editors.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* ```typescript
|
|
103
|
+
* import type { AngularColumnConfig } from '@toolbox-web/grid-angular';
|
|
104
|
+
* import { StatusBadgeComponent, StatusEditorComponent } from './components';
|
|
105
|
+
*
|
|
106
|
+
* const columns: AngularColumnConfig<Employee>[] = [
|
|
107
|
+
* { field: 'name', header: 'Name' },
|
|
108
|
+
* {
|
|
109
|
+
* field: 'status',
|
|
110
|
+
* header: 'Status',
|
|
111
|
+
* editable: true,
|
|
112
|
+
* renderer: StatusBadgeComponent,
|
|
113
|
+
* editor: StatusEditorComponent,
|
|
114
|
+
* },
|
|
115
|
+
* ];
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
interface AngularColumnConfig<TRow = unknown> extends Omit<ColumnConfig<TRow>, 'renderer' | 'editor'> {
|
|
119
|
+
/**
|
|
120
|
+
* Cell renderer - can be:
|
|
121
|
+
* - A function `(ctx) => HTMLElement | string`
|
|
122
|
+
* - An Angular component class implementing AngularCellRenderer
|
|
123
|
+
*/
|
|
124
|
+
renderer?: ColumnConfig<TRow>['renderer'] | Type<AngularCellRenderer<TRow, unknown>>;
|
|
125
|
+
/**
|
|
126
|
+
* Cell editor - can be:
|
|
127
|
+
* - A function `(ctx) => HTMLElement`
|
|
128
|
+
* - An Angular component class implementing AngularCellEditor
|
|
129
|
+
*/
|
|
130
|
+
editor?: ColumnConfig<TRow>['editor'] | Type<AngularCellEditor<TRow, unknown>>;
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Angular-specific grid configuration.
|
|
134
|
+
*
|
|
135
|
+
* Extends the base GridConfig to use AngularColumnConfig.
|
|
136
|
+
*/
|
|
137
|
+
interface AngularGridConfig<TRow = unknown> extends Omit<GridConfig<TRow>, 'columns'> {
|
|
138
|
+
columns?: AngularColumnConfig<TRow>[];
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Type guard to check if a value is an Angular component class.
|
|
142
|
+
*
|
|
143
|
+
* Detects Angular components by checking for internal Angular markers:
|
|
144
|
+
* - ɵcmp (component definition)
|
|
145
|
+
* - ɵfac (factory function)
|
|
146
|
+
*
|
|
147
|
+
* Also checks if it's an ES6 class (vs function) by inspecting the
|
|
148
|
+
* string representation.
|
|
149
|
+
*/
|
|
150
|
+
declare function isComponentClass(value: unknown): value is Type<unknown>;
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Framework adapter that enables zero-boilerplate integration of Angular components
|
|
154
|
+
* with the grid's light DOM configuration API.
|
|
155
|
+
*
|
|
156
|
+
* ## Usage
|
|
157
|
+
*
|
|
158
|
+
* **One-time setup in your app:**
|
|
159
|
+
* ```typescript
|
|
160
|
+
* import { Component, inject, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
|
|
161
|
+
* import { GridElement } from '@toolbox-web/grid';
|
|
162
|
+
* import { AngularGridAdapter } from '@toolbox-web/grid-angular';
|
|
163
|
+
*
|
|
164
|
+
* @Component({
|
|
165
|
+
* selector: 'app-root',
|
|
166
|
+
* // ...
|
|
167
|
+
* })
|
|
168
|
+
* export class AppComponent {
|
|
169
|
+
* constructor() {
|
|
170
|
+
* const injector = inject(EnvironmentInjector);
|
|
171
|
+
* const appRef = inject(ApplicationRef);
|
|
172
|
+
* const viewContainerRef = inject(ViewContainerRef);
|
|
173
|
+
* GridElement.registerAdapter(new AngularGridAdapter(injector, appRef, viewContainerRef));
|
|
174
|
+
* }
|
|
175
|
+
* }
|
|
176
|
+
* ```
|
|
177
|
+
*
|
|
178
|
+
* **Declarative configuration in templates (structural directive - recommended):**
|
|
179
|
+
* ```html
|
|
180
|
+
* <tbw-grid>
|
|
181
|
+
* <tbw-grid-column field="status">
|
|
182
|
+
* <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
|
|
183
|
+
* <app-status-editor *tbwEditor="let value" [value]="value" />
|
|
184
|
+
* </tbw-grid-column>
|
|
185
|
+
* </tbw-grid>
|
|
186
|
+
* ```
|
|
187
|
+
*
|
|
188
|
+
* **Declarative configuration in templates (nested directive - legacy):**
|
|
189
|
+
* ```html
|
|
190
|
+
* <tbw-grid>
|
|
191
|
+
* <tbw-grid-column field="status">
|
|
192
|
+
* <tbw-grid-column-view>
|
|
193
|
+
* <ng-template let-value let-row="row">
|
|
194
|
+
* <app-status-badge [value]="value" [row]="row" />
|
|
195
|
+
* </ng-template>
|
|
196
|
+
* </tbw-grid-column-view>
|
|
197
|
+
* <tbw-grid-column-editor>
|
|
198
|
+
* <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
|
|
199
|
+
* <app-status-select [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
|
|
200
|
+
* </ng-template>
|
|
201
|
+
* </tbw-grid-column-editor>
|
|
202
|
+
* </tbw-grid-column>
|
|
203
|
+
* </tbw-grid>
|
|
204
|
+
* ```
|
|
205
|
+
*
|
|
206
|
+
* The adapter automatically:
|
|
207
|
+
* - Detects Angular templates registered by directives (both structural and nested)
|
|
208
|
+
* - Creates embedded views with cell context (value, row, column)
|
|
209
|
+
* - Handles editor callbacks (onCommit/onCancel)
|
|
210
|
+
* - Manages view lifecycle and change detection
|
|
211
|
+
*/
|
|
212
|
+
declare class AngularGridAdapter implements FrameworkAdapter {
|
|
213
|
+
private injector;
|
|
214
|
+
private appRef;
|
|
215
|
+
private viewContainerRef;
|
|
216
|
+
private viewRefs;
|
|
217
|
+
private componentRefs;
|
|
218
|
+
private typeRegistry;
|
|
219
|
+
constructor(injector: EnvironmentInjector, appRef: ApplicationRef, viewContainerRef: ViewContainerRef);
|
|
220
|
+
/**
|
|
221
|
+
* Processes an Angular grid configuration, converting component class references
|
|
222
|
+
* to actual renderer/editor functions.
|
|
223
|
+
*
|
|
224
|
+
* Call this method on your gridConfig before passing it to the grid.
|
|
225
|
+
*
|
|
226
|
+
* @example
|
|
227
|
+
* ```typescript
|
|
228
|
+
* import { AngularGridAdapter, type AngularGridConfig } from '@toolbox-web/grid-angular';
|
|
229
|
+
*
|
|
230
|
+
* const config: AngularGridConfig<Employee> = {
|
|
231
|
+
* columns: [
|
|
232
|
+
* { field: 'status', renderer: StatusBadgeComponent, editor: StatusEditorComponent },
|
|
233
|
+
* ],
|
|
234
|
+
* };
|
|
235
|
+
*
|
|
236
|
+
* // In component
|
|
237
|
+
* constructor() {
|
|
238
|
+
* const adapter = inject(AngularGridAdapter); // or create new instance
|
|
239
|
+
* this.processedConfig = adapter.processGridConfig(config);
|
|
240
|
+
* }
|
|
241
|
+
* ```
|
|
242
|
+
*
|
|
243
|
+
* @param config - Angular grid configuration with possible component class references
|
|
244
|
+
* @returns Processed GridConfig with actual renderer/editor functions
|
|
245
|
+
*/
|
|
246
|
+
processGridConfig<TRow = unknown>(config: AngularGridConfig<TRow>): GridConfig<TRow>;
|
|
247
|
+
/**
|
|
248
|
+
* Processes a single column configuration, converting component class references
|
|
249
|
+
* to actual renderer/editor functions.
|
|
250
|
+
*
|
|
251
|
+
* @param column - Angular column configuration
|
|
252
|
+
* @returns Processed ColumnConfig
|
|
253
|
+
*/
|
|
254
|
+
processColumn<TRow = unknown>(column: AngularColumnConfig<TRow>): ColumnConfig<TRow>;
|
|
255
|
+
/**
|
|
256
|
+
* Determines if this adapter can handle the given element.
|
|
257
|
+
* Checks if a template is registered for this element (structural or nested).
|
|
258
|
+
*/
|
|
259
|
+
canHandle(element: HTMLElement): boolean;
|
|
260
|
+
/**
|
|
261
|
+
* Creates a view renderer function that creates an embedded view
|
|
262
|
+
* from the registered template and returns its DOM element.
|
|
263
|
+
*
|
|
264
|
+
* Returns undefined if no template is registered for this element,
|
|
265
|
+
* allowing the grid to use its default rendering.
|
|
266
|
+
*/
|
|
267
|
+
createRenderer<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnViewRenderer<TRow, TValue>;
|
|
268
|
+
/**
|
|
269
|
+
* Creates an editor spec that creates an embedded view.
|
|
270
|
+
*
|
|
271
|
+
* **Auto-wiring**: The adapter automatically listens for `commit` and `cancel`
|
|
272
|
+
* CustomEvents on the rendered component. If the component emits these events,
|
|
273
|
+
* the adapter will call the grid's commit/cancel functions automatically.
|
|
274
|
+
*
|
|
275
|
+
* This means templates can be simplified from:
|
|
276
|
+
* ```html
|
|
277
|
+
* <app-editor *tbwEditor="let value; onCommit as onCommit"
|
|
278
|
+
* [value]="value" (commit)="onCommit($event)" />
|
|
279
|
+
* ```
|
|
280
|
+
* To just:
|
|
281
|
+
* ```html
|
|
282
|
+
* <app-editor *tbwEditor="let value" [value]="value" />
|
|
283
|
+
* ```
|
|
284
|
+
* As long as the component emits `(commit)` with the new value.
|
|
285
|
+
*/
|
|
286
|
+
createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
|
|
287
|
+
/**
|
|
288
|
+
* Creates a detail renderer function for MasterDetailPlugin.
|
|
289
|
+
* Renders Angular templates for expandable detail rows.
|
|
290
|
+
*/
|
|
291
|
+
createDetailRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow) => HTMLElement) | undefined;
|
|
292
|
+
/**
|
|
293
|
+
* Framework adapter hook called by MasterDetailPlugin during attach().
|
|
294
|
+
* Parses the <tbw-grid-detail> element and returns an Angular template-based renderer.
|
|
295
|
+
*
|
|
296
|
+
* This enables MasterDetailPlugin to automatically use Angular templates
|
|
297
|
+
* without manual configuration in the Grid directive.
|
|
298
|
+
*/
|
|
299
|
+
parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
|
|
300
|
+
/**
|
|
301
|
+
* Creates a responsive card renderer function for ResponsivePlugin.
|
|
302
|
+
* Renders Angular templates for card layout in responsive mode.
|
|
303
|
+
*
|
|
304
|
+
* @param gridElement - The grid element to look up the template for
|
|
305
|
+
* @returns A card renderer function or undefined if no template is found
|
|
306
|
+
*/
|
|
307
|
+
createResponsiveCardRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
|
|
308
|
+
/**
|
|
309
|
+
* Creates a tool panel renderer from a light DOM element.
|
|
310
|
+
* The renderer creates an Angular template-based panel content.
|
|
311
|
+
*/
|
|
312
|
+
createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
|
|
313
|
+
/**
|
|
314
|
+
* Gets type-level defaults from the application's GridTypeRegistry.
|
|
315
|
+
*
|
|
316
|
+
* This enables application-wide type defaults configured via `provideGridTypeDefaults()`.
|
|
317
|
+
* The returned TypeDefault contains renderer/editor functions that instantiate
|
|
318
|
+
* Angular components dynamically.
|
|
319
|
+
*
|
|
320
|
+
* @example
|
|
321
|
+
* ```typescript
|
|
322
|
+
* // app.config.ts
|
|
323
|
+
* export const appConfig: ApplicationConfig = {
|
|
324
|
+
* providers: [
|
|
325
|
+
* provideGridTypeDefaults({
|
|
326
|
+
* country: {
|
|
327
|
+
* renderer: CountryCellComponent,
|
|
328
|
+
* editor: CountryEditorComponent
|
|
329
|
+
* }
|
|
330
|
+
* })
|
|
331
|
+
* ]
|
|
332
|
+
* };
|
|
333
|
+
*
|
|
334
|
+
* // Any grid with type: 'country' columns will use these components
|
|
335
|
+
* gridConfig = {
|
|
336
|
+
* columns: [{ field: 'country', type: 'country' }]
|
|
337
|
+
* };
|
|
338
|
+
* ```
|
|
339
|
+
*/
|
|
340
|
+
getTypeDefault<TRow = unknown>(type: string): TypeDefault<TRow> | undefined;
|
|
341
|
+
/**
|
|
342
|
+
* Creates a renderer function from an Angular component class.
|
|
343
|
+
* @internal
|
|
344
|
+
*/
|
|
345
|
+
private createComponentRenderer;
|
|
346
|
+
/**
|
|
347
|
+
* Creates an editor function from an Angular component class.
|
|
348
|
+
* @internal
|
|
349
|
+
*/
|
|
350
|
+
private createComponentEditor;
|
|
351
|
+
/**
|
|
352
|
+
* Subscribes to an Angular output on a component instance.
|
|
353
|
+
* Works with both EventEmitter and OutputEmitterRef (signal outputs).
|
|
354
|
+
* @internal
|
|
355
|
+
*/
|
|
356
|
+
private subscribeToOutput;
|
|
357
|
+
/**
|
|
358
|
+
* Sets component inputs using Angular's setInput API.
|
|
359
|
+
* @internal
|
|
360
|
+
*/
|
|
361
|
+
private setComponentInputs;
|
|
362
|
+
/**
|
|
363
|
+
* Clean up all view references and component references.
|
|
364
|
+
* Call this when your app/component is destroyed.
|
|
365
|
+
*/
|
|
366
|
+
destroy(): void;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/**
|
|
370
|
+
* Type-level default registry for Angular applications.
|
|
371
|
+
*
|
|
372
|
+
* Provides application-wide type defaults for renderers and editors
|
|
373
|
+
* that all grids inherit automatically.
|
|
374
|
+
*/
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* Angular-specific type default configuration.
|
|
378
|
+
* Uses Angular component types instead of function-based renderers/editors.
|
|
379
|
+
*/
|
|
380
|
+
interface AngularTypeDefault<TRow = unknown> {
|
|
381
|
+
/** Angular component class for rendering cells of this type */
|
|
382
|
+
renderer?: Type<any>;
|
|
383
|
+
/** Angular component class for editing cells of this type */
|
|
384
|
+
editor?: Type<any>;
|
|
385
|
+
/** Default editorParams for this type */
|
|
386
|
+
editorParams?: Record<string, unknown>;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* Injection token for providing type defaults at app level.
|
|
390
|
+
*/
|
|
391
|
+
declare const GRID_TYPE_DEFAULTS: InjectionToken<Record<string, AngularTypeDefault<unknown>>>;
|
|
392
|
+
/**
|
|
393
|
+
* Injectable service for managing type-level defaults.
|
|
394
|
+
*
|
|
395
|
+
* Use `provideGridTypeDefaults()` in your app config to set up defaults,
|
|
396
|
+
* or inject this service for dynamic registration.
|
|
397
|
+
*
|
|
398
|
+
* @example
|
|
399
|
+
* ```typescript
|
|
400
|
+
* // App-level setup (app.config.ts)
|
|
401
|
+
* export const appConfig: ApplicationConfig = {
|
|
402
|
+
* providers: [
|
|
403
|
+
* provideGridTypeDefaults({
|
|
404
|
+
* country: {
|
|
405
|
+
* renderer: CountryCellComponent,
|
|
406
|
+
* editor: CountryEditorComponent
|
|
407
|
+
* },
|
|
408
|
+
* status: {
|
|
409
|
+
* renderer: StatusBadgeComponent
|
|
410
|
+
* }
|
|
411
|
+
* })
|
|
412
|
+
* ]
|
|
413
|
+
* };
|
|
414
|
+
*
|
|
415
|
+
* // Dynamic registration
|
|
416
|
+
* @Component({ ... })
|
|
417
|
+
* export class AppComponent {
|
|
418
|
+
* private registry = inject(GridTypeRegistry);
|
|
419
|
+
*
|
|
420
|
+
* ngOnInit() {
|
|
421
|
+
* this.registry.register('currency', {
|
|
422
|
+
* renderer: CurrencyCellComponent
|
|
423
|
+
* });
|
|
424
|
+
* }
|
|
425
|
+
* }
|
|
426
|
+
* ```
|
|
427
|
+
*/
|
|
428
|
+
declare class GridTypeRegistry {
|
|
429
|
+
private readonly defaults;
|
|
430
|
+
constructor();
|
|
431
|
+
/**
|
|
432
|
+
* Register type-level defaults for a custom type.
|
|
433
|
+
*
|
|
434
|
+
* @param type - The type name (e.g., 'country', 'currency')
|
|
435
|
+
* @param defaults - Renderer/editor configuration
|
|
436
|
+
*/
|
|
437
|
+
register<T = unknown>(type: string, defaults: AngularTypeDefault<T>): void;
|
|
438
|
+
/**
|
|
439
|
+
* Get type defaults for a given type.
|
|
440
|
+
*/
|
|
441
|
+
get(type: string): AngularTypeDefault | undefined;
|
|
442
|
+
/**
|
|
443
|
+
* Remove type defaults for a type.
|
|
444
|
+
*/
|
|
445
|
+
unregister(type: string): void;
|
|
446
|
+
/**
|
|
447
|
+
* Check if a type has registered defaults.
|
|
448
|
+
*/
|
|
449
|
+
has(type: string): boolean;
|
|
450
|
+
/**
|
|
451
|
+
* Get all registered type names.
|
|
452
|
+
*/
|
|
453
|
+
getRegisteredTypes(): string[];
|
|
454
|
+
/**
|
|
455
|
+
* Convert to TypeDefault for use with grid's typeDefaults.
|
|
456
|
+
* This is used internally by the adapter.
|
|
457
|
+
*
|
|
458
|
+
* @internal
|
|
459
|
+
*/
|
|
460
|
+
getAsTypeDefault(type: string): TypeDefault | undefined;
|
|
461
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridTypeRegistry, never>;
|
|
462
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridTypeRegistry>;
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* Provides application-level type defaults for all grids.
|
|
466
|
+
*
|
|
467
|
+
* @example
|
|
468
|
+
* ```typescript
|
|
469
|
+
* // app.config.ts
|
|
470
|
+
* import { provideGridTypeDefaults } from '@toolbox-web/grid-angular';
|
|
471
|
+
* import { CountryCellComponent, StatusBadgeComponent } from './components';
|
|
472
|
+
*
|
|
473
|
+
* export const appConfig: ApplicationConfig = {
|
|
474
|
+
* providers: [
|
|
475
|
+
* provideGridTypeDefaults({
|
|
476
|
+
* country: { renderer: CountryCellComponent },
|
|
477
|
+
* status: { renderer: StatusBadgeComponent },
|
|
478
|
+
* date: { editor: DatePickerComponent }
|
|
479
|
+
* })
|
|
480
|
+
* ]
|
|
481
|
+
* };
|
|
482
|
+
* ```
|
|
483
|
+
*/
|
|
484
|
+
declare function provideGridTypeDefaults(defaults: Record<string, AngularTypeDefault>): EnvironmentProviders;
|
|
485
|
+
|
|
486
|
+
/**
|
|
487
|
+
* Selection convenience methods returned from injectGrid.
|
|
488
|
+
*/
|
|
489
|
+
interface SelectionMethods<TRow = unknown> {
|
|
490
|
+
/**
|
|
491
|
+
* Select all rows in the grid.
|
|
492
|
+
* Requires SelectionPlugin with mode: 'row'.
|
|
493
|
+
*/
|
|
494
|
+
selectAll: () => void;
|
|
495
|
+
/**
|
|
496
|
+
* Clear all selection.
|
|
497
|
+
* Works with any SelectionPlugin mode.
|
|
498
|
+
*/
|
|
499
|
+
clearSelection: () => void;
|
|
500
|
+
/**
|
|
501
|
+
* Get selected row indices.
|
|
502
|
+
* Returns Set of selected row indices.
|
|
503
|
+
*/
|
|
504
|
+
getSelectedIndices: () => Set<number>;
|
|
505
|
+
/**
|
|
506
|
+
* Get selected rows data.
|
|
507
|
+
* Returns array of selected row objects.
|
|
508
|
+
*/
|
|
509
|
+
getSelectedRows: () => TRow[];
|
|
510
|
+
}
|
|
511
|
+
/**
|
|
512
|
+
* Export convenience methods returned from injectGrid.
|
|
513
|
+
*/
|
|
514
|
+
interface ExportMethods {
|
|
515
|
+
/**
|
|
516
|
+
* Export grid data to CSV file.
|
|
517
|
+
* Requires ExportPlugin to be loaded.
|
|
518
|
+
*
|
|
519
|
+
* @param filename - Optional filename (defaults to 'export.csv')
|
|
520
|
+
*/
|
|
521
|
+
exportToCsv: (filename?: string) => void;
|
|
522
|
+
/**
|
|
523
|
+
* Export grid data to JSON file.
|
|
524
|
+
* Requires ExportPlugin to be loaded.
|
|
525
|
+
*
|
|
526
|
+
* @param filename - Optional filename (defaults to 'export.json')
|
|
527
|
+
*/
|
|
528
|
+
exportToJson: (filename?: string) => void;
|
|
529
|
+
}
|
|
530
|
+
/**
|
|
531
|
+
* Return type for injectGrid function.
|
|
532
|
+
*/
|
|
533
|
+
interface InjectGridReturn<TRow = unknown> extends SelectionMethods<TRow>, ExportMethods {
|
|
534
|
+
/** Direct access to the typed grid element */
|
|
535
|
+
element: Signal<DataGridElement<TRow> | null>;
|
|
536
|
+
/** Whether the grid is ready */
|
|
537
|
+
isReady: Signal<boolean>;
|
|
538
|
+
/** Current grid configuration */
|
|
539
|
+
config: Signal<GridConfig<TRow> | null>;
|
|
540
|
+
/** Get the effective configuration */
|
|
541
|
+
getConfig: () => Promise<GridConfig<TRow> | null>;
|
|
542
|
+
/** Force a layout recalculation */
|
|
543
|
+
forceLayout: () => Promise<void>;
|
|
544
|
+
/** Toggle a group row */
|
|
545
|
+
toggleGroup: (key: string) => Promise<void>;
|
|
546
|
+
/** Register custom styles */
|
|
547
|
+
registerStyles: (id: string, css: string) => void;
|
|
548
|
+
/** Unregister custom styles */
|
|
549
|
+
unregisterStyles: (id: string) => void;
|
|
550
|
+
/** Get current visible columns */
|
|
551
|
+
visibleColumns: Signal<ColumnConfig<TRow>[]>;
|
|
552
|
+
}
|
|
553
|
+
/**
|
|
554
|
+
* Angular inject function for programmatic access to a grid instance.
|
|
555
|
+
*
|
|
556
|
+
* This function should be called in the constructor or as a field initializer
|
|
557
|
+
* of an Angular component that contains a `<tbw-grid>` element.
|
|
558
|
+
*
|
|
559
|
+
* ## Usage
|
|
560
|
+
*
|
|
561
|
+
* ```typescript
|
|
562
|
+
* import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
563
|
+
* import { Grid, injectGrid } from '@toolbox-web/grid-angular';
|
|
564
|
+
*
|
|
565
|
+
* @Component({
|
|
566
|
+
* selector: 'app-my-grid',
|
|
567
|
+
* imports: [Grid],
|
|
568
|
+
* schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
569
|
+
* template: `
|
|
570
|
+
* <button (click)="handleResize()">Force Layout</button>
|
|
571
|
+
* <button (click)="handleExport()" [disabled]="!grid.isReady()">Export</button>
|
|
572
|
+
* <tbw-grid [rows]="rows" [gridConfig]="config"></tbw-grid>
|
|
573
|
+
* `
|
|
574
|
+
* })
|
|
575
|
+
* export class MyGridComponent {
|
|
576
|
+
* grid = injectGrid<Employee>();
|
|
577
|
+
*
|
|
578
|
+
* async handleResize() {
|
|
579
|
+
* await this.grid.forceLayout();
|
|
580
|
+
* }
|
|
581
|
+
*
|
|
582
|
+
* async handleExport() {
|
|
583
|
+
* const config = await this.grid.getConfig();
|
|
584
|
+
* console.log('Exporting with columns:', config?.columns);
|
|
585
|
+
* }
|
|
586
|
+
* }
|
|
587
|
+
* ```
|
|
588
|
+
*
|
|
589
|
+
* @returns Object with grid access methods and state signals
|
|
590
|
+
*/
|
|
591
|
+
declare function injectGrid<TRow = unknown>(): InjectGridReturn<TRow>;
|
|
592
|
+
|
|
593
|
+
/**
|
|
594
|
+
* Feature Registry for @toolbox-web/grid-angular
|
|
595
|
+
*
|
|
596
|
+
* This module provides a synchronous registry for plugin factories.
|
|
597
|
+
* Features are registered via side-effect imports, enabling tree-shaking
|
|
598
|
+
* while maintaining the clean input-based API.
|
|
599
|
+
*
|
|
600
|
+
* @example
|
|
601
|
+
* ```typescript
|
|
602
|
+
* // Import features you need (side-effect imports)
|
|
603
|
+
* import '@toolbox-web/grid-angular/features/selection';
|
|
604
|
+
* import '@toolbox-web/grid-angular/features/filtering';
|
|
605
|
+
*
|
|
606
|
+
* // Inputs work automatically - no async loading, no HTTP requests
|
|
607
|
+
* <tbw-grid [selection]="'range'" [filtering]="{ debounceMs: 200 }" />
|
|
608
|
+
* ```
|
|
609
|
+
*/
|
|
610
|
+
/**
|
|
611
|
+
* Feature names supported by the Grid directive.
|
|
612
|
+
*/
|
|
613
|
+
type FeatureName = 'selection' | 'editing' | 'clipboard' | 'contextMenu' | 'multiSort' | 'sorting' | 'filtering' | 'reorder' | 'visibility' | 'pinnedColumns' | 'groupingColumns' | 'columnVirtualization' | 'rowReorder' | 'groupingRows' | 'pinnedRows' | 'tree' | 'masterDetail' | 'responsive' | 'undoRedo' | 'export' | 'print' | 'pivot' | 'serverSide';
|
|
614
|
+
/**
|
|
615
|
+
* Plugin factory function type.
|
|
616
|
+
* Takes configuration and returns a plugin instance.
|
|
617
|
+
*/
|
|
618
|
+
type PluginFactory<TConfig = unknown> = (config: TConfig) => unknown;
|
|
619
|
+
/**
|
|
620
|
+
* Register a feature's plugin factory.
|
|
621
|
+
* Called by side-effect feature imports.
|
|
622
|
+
*
|
|
623
|
+
* @param name - The feature name (matches the input name on Grid directive)
|
|
624
|
+
* @param factory - Function that creates the plugin instance
|
|
625
|
+
*
|
|
626
|
+
* @example
|
|
627
|
+
* ```ts
|
|
628
|
+
* // features/selection.ts
|
|
629
|
+
* import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
|
|
630
|
+
* import { registerFeature } from '../lib/feature-registry';
|
|
631
|
+
*
|
|
632
|
+
* registerFeature('selection', (config) => new SelectionPlugin(config));
|
|
633
|
+
* ```
|
|
634
|
+
*/
|
|
635
|
+
declare function registerFeature<TConfig = unknown>(name: FeatureName, factory: PluginFactory<TConfig>): void;
|
|
636
|
+
/**
|
|
637
|
+
* Check if a feature is registered.
|
|
638
|
+
*/
|
|
639
|
+
declare function isFeatureRegistered(name: FeatureName): boolean;
|
|
640
|
+
/**
|
|
641
|
+
* Get a registered feature's factory.
|
|
642
|
+
* Returns undefined if not registered.
|
|
643
|
+
*/
|
|
644
|
+
declare function getFeatureFactory(name: FeatureName): PluginFactory | undefined;
|
|
645
|
+
/**
|
|
646
|
+
* Get all registered feature names.
|
|
647
|
+
* Useful for debugging.
|
|
648
|
+
*/
|
|
649
|
+
declare function getRegisteredFeatures(): FeatureName[];
|
|
650
|
+
/**
|
|
651
|
+
* Create a plugin instance for a feature.
|
|
652
|
+
* Shows a helpful warning if the feature is not registered.
|
|
653
|
+
*
|
|
654
|
+
* @param name - Feature name
|
|
655
|
+
* @param config - Plugin configuration
|
|
656
|
+
* @returns Plugin instance or undefined if not registered
|
|
657
|
+
*/
|
|
658
|
+
declare function createPluginFromFeature<TConfig = unknown>(name: FeatureName, config: TConfig): unknown | undefined;
|
|
659
|
+
/**
|
|
660
|
+
* Clear the registry. For testing only.
|
|
661
|
+
* @internal
|
|
662
|
+
*/
|
|
663
|
+
declare function clearFeatureRegistry(): void;
|
|
664
|
+
|
|
665
|
+
/**
|
|
666
|
+
* Base class for grid cell editors.
|
|
667
|
+
*
|
|
668
|
+
* Provides common functionality for Angular cell editors:
|
|
669
|
+
* - Automatic value resolution from FormControl or value input
|
|
670
|
+
* - Common inputs (value, row, column, control)
|
|
671
|
+
* - Common outputs (commit, cancel)
|
|
672
|
+
* - Validation state helpers
|
|
673
|
+
*
|
|
674
|
+
* ## Usage
|
|
675
|
+
*
|
|
676
|
+
* ```typescript
|
|
677
|
+
* import { Component } from '@angular/core';
|
|
678
|
+
* import { BaseGridEditor } from '@toolbox-web/grid-angular';
|
|
679
|
+
*
|
|
680
|
+
* @Component({
|
|
681
|
+
* selector: 'app-my-editor',
|
|
682
|
+
* template: \`
|
|
683
|
+
* <input
|
|
684
|
+
* [value]="currentValue()"
|
|
685
|
+
* [class.is-invalid]="isInvalid()"
|
|
686
|
+
* (input)="commitValue($event.target.value)"
|
|
687
|
+
* (keydown.escape)="cancelEdit()"
|
|
688
|
+
* />
|
|
689
|
+
* @if (hasErrors()) {
|
|
690
|
+
* <div class="error">{{ firstErrorMessage() }}</div>
|
|
691
|
+
* }
|
|
692
|
+
* \`
|
|
693
|
+
* })
|
|
694
|
+
* export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
|
|
695
|
+
* // Override to customize error messages
|
|
696
|
+
* protected override getErrorMessage(errorKey: string): string {
|
|
697
|
+
* if (errorKey === 'required') return 'This field is required';
|
|
698
|
+
* if (errorKey === 'minlength') return 'Too short';
|
|
699
|
+
* return super.getErrorMessage(errorKey);
|
|
700
|
+
* }
|
|
701
|
+
* }
|
|
702
|
+
* ```
|
|
703
|
+
*
|
|
704
|
+
* ## Template Syntax
|
|
705
|
+
*
|
|
706
|
+
* When using the base class, you only need to pass the control:
|
|
707
|
+
*
|
|
708
|
+
* ```html
|
|
709
|
+
* <tbw-grid-column field="name">
|
|
710
|
+
* <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
|
|
711
|
+
* </tbw-grid-column>
|
|
712
|
+
* ```
|
|
713
|
+
*
|
|
714
|
+
* Or without FormArray binding (fallback to value):
|
|
715
|
+
*
|
|
716
|
+
* ```html
|
|
717
|
+
* <tbw-grid-column field="name">
|
|
718
|
+
* <app-my-editor *tbwEditor="let value" [value]="value" />
|
|
719
|
+
* </tbw-grid-column>
|
|
720
|
+
* ```
|
|
721
|
+
*
|
|
722
|
+
* @typeParam TRow - The row data type
|
|
723
|
+
* @typeParam TValue - The cell value type
|
|
724
|
+
*/
|
|
725
|
+
declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
|
|
726
|
+
private readonly elementRef;
|
|
727
|
+
/**
|
|
728
|
+
* The cell value. Used when FormControl is not available.
|
|
729
|
+
* When a FormControl is provided, value is derived from control.value instead.
|
|
730
|
+
*/
|
|
731
|
+
readonly value: _angular_core.InputSignal<TValue | undefined>;
|
|
732
|
+
/**
|
|
733
|
+
* The full row data object.
|
|
734
|
+
*/
|
|
735
|
+
readonly row: _angular_core.InputSignal<TRow | undefined>;
|
|
736
|
+
/**
|
|
737
|
+
* The column configuration.
|
|
738
|
+
*/
|
|
739
|
+
readonly column: _angular_core.InputSignal<ColumnConfig<TRow> | undefined>;
|
|
740
|
+
/**
|
|
741
|
+
* The FormControl for this cell, if the grid is bound to a FormArray.
|
|
742
|
+
* When provided, the editor uses control.value instead of the value input.
|
|
743
|
+
*/
|
|
744
|
+
readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
|
|
745
|
+
/**
|
|
746
|
+
* Emits when the user commits a new value.
|
|
747
|
+
*/
|
|
748
|
+
readonly commit: _angular_core.OutputEmitterRef<TValue>;
|
|
749
|
+
/**
|
|
750
|
+
* Emits when the user cancels editing.
|
|
751
|
+
*/
|
|
752
|
+
readonly cancel: _angular_core.OutputEmitterRef<void>;
|
|
753
|
+
/**
|
|
754
|
+
* The current value, derived from FormControl if available, otherwise from value input.
|
|
755
|
+
* This is the recommended way to get the current value in your editor template.
|
|
756
|
+
*/
|
|
757
|
+
readonly currentValue: _angular_core.Signal<TValue | undefined>;
|
|
758
|
+
/**
|
|
759
|
+
* Whether the control is invalid (has validation errors).
|
|
760
|
+
* Returns false if no FormControl is available.
|
|
761
|
+
*/
|
|
762
|
+
readonly isInvalid: _angular_core.Signal<boolean>;
|
|
763
|
+
/**
|
|
764
|
+
* Whether the control is dirty (has been modified).
|
|
765
|
+
* Returns false if no FormControl is available.
|
|
766
|
+
*/
|
|
767
|
+
readonly isDirty: _angular_core.Signal<boolean>;
|
|
768
|
+
/**
|
|
769
|
+
* Whether the control has been touched.
|
|
770
|
+
* Returns false if no FormControl is available.
|
|
771
|
+
*/
|
|
772
|
+
readonly isTouched: _angular_core.Signal<boolean>;
|
|
773
|
+
/**
|
|
774
|
+
* Whether the control has any validation errors.
|
|
775
|
+
*/
|
|
776
|
+
readonly hasErrors: _angular_core.Signal<boolean>;
|
|
777
|
+
/**
|
|
778
|
+
* The first error message from the control's validation errors.
|
|
779
|
+
* Returns an empty string if no errors.
|
|
780
|
+
*/
|
|
781
|
+
readonly firstErrorMessage: _angular_core.Signal<string>;
|
|
782
|
+
/**
|
|
783
|
+
* All error messages from the control's validation errors.
|
|
784
|
+
*/
|
|
785
|
+
readonly allErrorMessages: _angular_core.Signal<string[]>;
|
|
786
|
+
/**
|
|
787
|
+
* Commit a new value. Emits the commit output AND dispatches a DOM event.
|
|
788
|
+
* The DOM event enables the grid's auto-wiring to catch the commit.
|
|
789
|
+
* Call this when the user confirms their edit.
|
|
790
|
+
*/
|
|
791
|
+
commitValue(newValue: TValue): void;
|
|
792
|
+
/**
|
|
793
|
+
* Cancel editing. Emits the cancel output AND dispatches a DOM event.
|
|
794
|
+
* Call this when the user cancels (e.g., presses Escape).
|
|
795
|
+
*/
|
|
796
|
+
cancelEdit(): void;
|
|
797
|
+
/**
|
|
798
|
+
* Get a human-readable error message for a validation error.
|
|
799
|
+
* Override this method to customize error messages for your editor.
|
|
800
|
+
*
|
|
801
|
+
* @param errorKey - The validation error key (e.g., 'required', 'minlength')
|
|
802
|
+
* @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
|
|
803
|
+
* @returns A human-readable error message
|
|
804
|
+
*/
|
|
805
|
+
protected getErrorMessage(errorKey: string, errorValue?: unknown): string;
|
|
806
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseGridEditor<any, any>, never>;
|
|
807
|
+
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>;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/**
|
|
811
|
+
* Context object passed to the cell editor template.
|
|
812
|
+
* Contains the cell value, row data, column configuration, and commit/cancel functions.
|
|
813
|
+
*/
|
|
814
|
+
interface GridEditorContext<TValue = unknown, TRow = unknown> {
|
|
815
|
+
/** The cell value for this column */
|
|
816
|
+
$implicit: TValue;
|
|
817
|
+
/** The cell value (explicit binding) */
|
|
818
|
+
value: TValue;
|
|
819
|
+
/** The full row data object */
|
|
820
|
+
row: TRow;
|
|
821
|
+
/** The column configuration */
|
|
822
|
+
column: unknown;
|
|
823
|
+
/**
|
|
824
|
+
* Callback function to commit the edited value.
|
|
825
|
+
* Use with Angular event binding: `(commit)="onCommit($event)"`
|
|
826
|
+
*/
|
|
827
|
+
onCommit: (value: TValue) => void;
|
|
828
|
+
/**
|
|
829
|
+
* Callback function to cancel editing.
|
|
830
|
+
* Use with Angular event binding: `(cancel)="onCancel()"`
|
|
831
|
+
*/
|
|
832
|
+
onCancel: () => void;
|
|
833
|
+
/**
|
|
834
|
+
* The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
|
|
835
|
+
*
|
|
836
|
+
* This allows custom editors to bind directly to the control for validation display:
|
|
837
|
+
* ```html
|
|
838
|
+
* <input *tbwEditor="let value; control as ctrl"
|
|
839
|
+
* [formControl]="ctrl"
|
|
840
|
+
* [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
|
|
841
|
+
* ```
|
|
842
|
+
*
|
|
843
|
+
* Returns `undefined` if:
|
|
844
|
+
* - The grid is not bound to a FormArray
|
|
845
|
+
* - The FormArray doesn't contain FormGroups
|
|
846
|
+
* - The field doesn't exist in the FormGroup
|
|
847
|
+
*/
|
|
848
|
+
control?: AbstractControl;
|
|
849
|
+
/**
|
|
850
|
+
* @deprecated Use `onCommit` callback function instead. Will be removed in v2.0.
|
|
851
|
+
* EventEmitter for commit - requires `.emit()` call.
|
|
852
|
+
*/
|
|
853
|
+
commit: EventEmitter<TValue>;
|
|
854
|
+
/**
|
|
855
|
+
* @deprecated Use `onCancel` callback function instead. Will be removed in v2.0.
|
|
856
|
+
* EventEmitter for cancel - requires `.emit()` call.
|
|
857
|
+
*/
|
|
858
|
+
cancel: EventEmitter<void>;
|
|
859
|
+
}
|
|
860
|
+
/**
|
|
861
|
+
* Directive that captures an `<ng-template>` for use as a cell editor.
|
|
862
|
+
*
|
|
863
|
+
* This enables declarative Angular component usage with proper input bindings
|
|
864
|
+
* that satisfy Angular's AOT compiler.
|
|
865
|
+
*
|
|
866
|
+
* ## Usage
|
|
867
|
+
*
|
|
868
|
+
* ```html
|
|
869
|
+
* <tbw-grid-column field="status" editable>
|
|
870
|
+
* <tbw-grid-column-editor>
|
|
871
|
+
* <ng-template let-value let-row="row" let-onCommit="onCommit" let-onCancel="onCancel">
|
|
872
|
+
* <app-status-select
|
|
873
|
+
* [value]="value"
|
|
874
|
+
* [row]="row"
|
|
875
|
+
* (commit)="onCommit($event)"
|
|
876
|
+
* (cancel)="onCancel()"
|
|
877
|
+
* />
|
|
878
|
+
* </ng-template>
|
|
879
|
+
* </tbw-grid-column-editor>
|
|
880
|
+
* </tbw-grid-column>
|
|
881
|
+
* ```
|
|
882
|
+
*
|
|
883
|
+
* The template context provides:
|
|
884
|
+
* - `$implicit` / `value`: The cell value
|
|
885
|
+
* - `row`: The full row data object
|
|
886
|
+
* - `column`: The column configuration
|
|
887
|
+
* - `onCommit`: Callback function to commit the new value
|
|
888
|
+
* - `onCancel`: Callback function to cancel editing
|
|
889
|
+
*
|
|
890
|
+
* Import the directive in your component:
|
|
891
|
+
*
|
|
892
|
+
* ```typescript
|
|
893
|
+
* import { GridColumnEditor } from '@toolbox-web/grid-angular';
|
|
894
|
+
*
|
|
895
|
+
* @Component({
|
|
896
|
+
* imports: [GridColumnEditor],
|
|
897
|
+
* // ...
|
|
898
|
+
* })
|
|
899
|
+
* ```
|
|
900
|
+
*/
|
|
901
|
+
declare class GridColumnEditor {
|
|
902
|
+
private elementRef;
|
|
903
|
+
/**
|
|
904
|
+
* Query for the ng-template content child.
|
|
905
|
+
*/
|
|
906
|
+
template: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
907
|
+
/** Effect that triggers when the template is available */
|
|
908
|
+
private onTemplateReceived;
|
|
909
|
+
/**
|
|
910
|
+
* Static type guard for template context.
|
|
911
|
+
* Enables type inference in templates.
|
|
912
|
+
*/
|
|
913
|
+
static ngTemplateContextGuard(dir: GridColumnEditor, ctx: unknown): ctx is GridEditorContext;
|
|
914
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnEditor, never>;
|
|
915
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnEditor, "tbw-grid-column-editor", never, {}, {}, ["template"], never, true, never>;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/**
|
|
919
|
+
* Context object passed to the cell renderer template.
|
|
920
|
+
* Contains the cell value, row data, and column configuration.
|
|
921
|
+
*/
|
|
922
|
+
interface GridCellContext<TValue = unknown, TRow = unknown> {
|
|
923
|
+
/** The cell value for this column */
|
|
924
|
+
$implicit: TValue;
|
|
925
|
+
/** The cell value (explicit binding) */
|
|
926
|
+
value: TValue;
|
|
927
|
+
/** The full row data object */
|
|
928
|
+
row: TRow;
|
|
929
|
+
/** The column configuration */
|
|
930
|
+
column: unknown;
|
|
931
|
+
}
|
|
932
|
+
/**
|
|
933
|
+
* Directive that captures an `<ng-template>` for use as a cell renderer.
|
|
934
|
+
*
|
|
935
|
+
* This enables declarative Angular component usage with proper input bindings
|
|
936
|
+
* that satisfy Angular's AOT compiler.
|
|
937
|
+
*
|
|
938
|
+
* ## Usage
|
|
939
|
+
*
|
|
940
|
+
* ```html
|
|
941
|
+
* <tbw-grid-column field="status">
|
|
942
|
+
* <tbw-grid-column-view>
|
|
943
|
+
* <ng-template let-value let-row="row">
|
|
944
|
+
* <app-status-badge [value]="value" [row]="row" />
|
|
945
|
+
* </ng-template>
|
|
946
|
+
* </tbw-grid-column-view>
|
|
947
|
+
* </tbw-grid-column>
|
|
948
|
+
* ```
|
|
949
|
+
*
|
|
950
|
+
* The template context provides:
|
|
951
|
+
* - `$implicit` / `value`: The cell value
|
|
952
|
+
* - `row`: The full row data object
|
|
953
|
+
* - `column`: The column configuration
|
|
954
|
+
*
|
|
955
|
+
* Import the directive in your component:
|
|
956
|
+
*
|
|
957
|
+
* ```typescript
|
|
958
|
+
* import { GridColumnView } from '@toolbox-web/grid-angular';
|
|
959
|
+
*
|
|
960
|
+
* @Component({
|
|
961
|
+
* imports: [GridColumnView],
|
|
962
|
+
* // ...
|
|
963
|
+
* })
|
|
964
|
+
* ```
|
|
965
|
+
*/
|
|
966
|
+
declare class GridColumnView {
|
|
967
|
+
private elementRef;
|
|
968
|
+
/**
|
|
969
|
+
* Query for the ng-template content child.
|
|
970
|
+
*/
|
|
971
|
+
template: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
972
|
+
/** Effect that triggers when the template is available */
|
|
973
|
+
private onTemplateReceived;
|
|
974
|
+
/**
|
|
975
|
+
* Static type guard for template context.
|
|
976
|
+
* Enables type inference in templates.
|
|
977
|
+
*/
|
|
978
|
+
static ngTemplateContextGuard(dir: GridColumnView, ctx: unknown): ctx is GridCellContext;
|
|
979
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnView, never>;
|
|
980
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnView, "tbw-grid-column-view", never, {}, {}, ["template"], never, true, never>;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
/**
|
|
984
|
+
* Context object passed to the detail renderer template.
|
|
985
|
+
* Contains the row data for the expanded detail view.
|
|
986
|
+
*/
|
|
987
|
+
interface GridDetailContext<TRow = unknown> {
|
|
988
|
+
/** The row data (implicit binding for let-row) */
|
|
989
|
+
$implicit: TRow;
|
|
990
|
+
/** The row data (explicit binding) */
|
|
991
|
+
row: TRow;
|
|
992
|
+
}
|
|
993
|
+
/**
|
|
994
|
+
* Directive that captures an `<ng-template>` for use as a master-detail row renderer.
|
|
995
|
+
*
|
|
996
|
+
* This enables declarative Angular component usage for expandable detail rows
|
|
997
|
+
* that appear below the main row when expanded.
|
|
998
|
+
*
|
|
999
|
+
* ## Usage
|
|
1000
|
+
*
|
|
1001
|
+
* ```html
|
|
1002
|
+
* <tbw-grid [rows]="rows" [gridConfig]="config">
|
|
1003
|
+
* <tbw-grid-detail [showExpandColumn]="true" animation="slide">
|
|
1004
|
+
* <ng-template let-row>
|
|
1005
|
+
* <app-detail-panel [employee]="row" />
|
|
1006
|
+
* </ng-template>
|
|
1007
|
+
* </tbw-grid-detail>
|
|
1008
|
+
* </tbw-grid>
|
|
1009
|
+
* ```
|
|
1010
|
+
*
|
|
1011
|
+
* The template context provides:
|
|
1012
|
+
* - `$implicit` / `row`: The full row data object
|
|
1013
|
+
*
|
|
1014
|
+
* Import the directive in your component:
|
|
1015
|
+
*
|
|
1016
|
+
* ```typescript
|
|
1017
|
+
* import { GridDetailView } from '@toolbox-web/grid-angular';
|
|
1018
|
+
*
|
|
1019
|
+
* @Component({
|
|
1020
|
+
* imports: [GridDetailView],
|
|
1021
|
+
* // ...
|
|
1022
|
+
* })
|
|
1023
|
+
* ```
|
|
1024
|
+
*/
|
|
1025
|
+
declare class GridDetailView {
|
|
1026
|
+
private elementRef;
|
|
1027
|
+
/** Whether to show the expand/collapse column. Default: true */
|
|
1028
|
+
showExpandColumn: _angular_core.InputSignal<boolean>;
|
|
1029
|
+
/** Animation style for expand/collapse. Default: 'slide' */
|
|
1030
|
+
animation: _angular_core.InputSignal<ExpandCollapseAnimation>;
|
|
1031
|
+
/**
|
|
1032
|
+
* Query for the ng-template content child.
|
|
1033
|
+
*/
|
|
1034
|
+
template: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
1035
|
+
/** Effect that triggers when the template is available */
|
|
1036
|
+
private onTemplateReceived;
|
|
1037
|
+
/**
|
|
1038
|
+
* Static type guard for template context.
|
|
1039
|
+
* Enables type inference in templates.
|
|
1040
|
+
*/
|
|
1041
|
+
static ngTemplateContextGuard(dir: GridDetailView, ctx: unknown): ctx is GridDetailContext;
|
|
1042
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridDetailView, never>;
|
|
1043
|
+
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>;
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
/**
|
|
1047
|
+
* Context provided to the grid containing form-related information.
|
|
1048
|
+
* This can be accessed by other directives to get form controls.
|
|
1049
|
+
*/
|
|
1050
|
+
interface FormArrayContext {
|
|
1051
|
+
/** Get the row data at a specific index */
|
|
1052
|
+
getRow<T = unknown>(rowIndex: number): T | null;
|
|
1053
|
+
/** Update a field value at a specific row */
|
|
1054
|
+
updateField(rowIndex: number, field: string, value: unknown): void;
|
|
1055
|
+
/** Get the current form value (all rows) */
|
|
1056
|
+
getValue<T = unknown>(): T[];
|
|
1057
|
+
/**
|
|
1058
|
+
* Get the FormControl for a specific cell.
|
|
1059
|
+
* Only available when using FormArray with FormGroup rows.
|
|
1060
|
+
*
|
|
1061
|
+
* @param rowIndex - The row index
|
|
1062
|
+
* @param field - The field name
|
|
1063
|
+
* @returns The AbstractControl for the cell, or undefined if not available
|
|
1064
|
+
*/
|
|
1065
|
+
getControl(rowIndex: number, field: string): AbstractControl | undefined;
|
|
1066
|
+
/**
|
|
1067
|
+
* Whether the grid is backed by a FormArray of FormGroups.
|
|
1068
|
+
* When true, `getControl()` will return cell-level controls.
|
|
1069
|
+
*/
|
|
1070
|
+
hasFormGroups: boolean;
|
|
1071
|
+
/**
|
|
1072
|
+
* Get the FormGroup for a specific row.
|
|
1073
|
+
* Only available when using FormArray with FormGroup rows.
|
|
1074
|
+
*
|
|
1075
|
+
* @param rowIndex - The row index
|
|
1076
|
+
* @returns The FormGroup for the row, or undefined if not available
|
|
1077
|
+
*/
|
|
1078
|
+
getRowFormGroup(rowIndex: number): FormGroup | undefined;
|
|
1079
|
+
/**
|
|
1080
|
+
* Check if a row is valid (all controls in the FormGroup are valid).
|
|
1081
|
+
* Returns true if not using FormArray or if the row doesn't exist.
|
|
1082
|
+
*
|
|
1083
|
+
* @param rowIndex - The row index
|
|
1084
|
+
* @returns true if the row is valid, false if any control is invalid
|
|
1085
|
+
*/
|
|
1086
|
+
isRowValid(rowIndex: number): boolean;
|
|
1087
|
+
/**
|
|
1088
|
+
* Check if a row has been touched (any control in the FormGroup is touched).
|
|
1089
|
+
* Returns false if not using FormArray or if the row doesn't exist.
|
|
1090
|
+
*
|
|
1091
|
+
* @param rowIndex - The row index
|
|
1092
|
+
* @returns true if any control in the row is touched
|
|
1093
|
+
*/
|
|
1094
|
+
isRowTouched(rowIndex: number): boolean;
|
|
1095
|
+
/**
|
|
1096
|
+
* Check if a row is dirty (any control in the FormGroup is dirty).
|
|
1097
|
+
* Returns false if not using FormArray or if the row doesn't exist.
|
|
1098
|
+
*
|
|
1099
|
+
* @param rowIndex - The row index
|
|
1100
|
+
* @returns true if any control in the row is dirty
|
|
1101
|
+
*/
|
|
1102
|
+
isRowDirty(rowIndex: number): boolean;
|
|
1103
|
+
/**
|
|
1104
|
+
* Get validation errors for a specific row.
|
|
1105
|
+
* Aggregates errors from all controls in the FormGroup.
|
|
1106
|
+
*
|
|
1107
|
+
* @param rowIndex - The row index
|
|
1108
|
+
* @returns Object with field names as keys and their errors, or null if no errors
|
|
1109
|
+
*/
|
|
1110
|
+
getRowErrors(rowIndex: number): Record<string, unknown> | null;
|
|
1111
|
+
}
|
|
1112
|
+
/**
|
|
1113
|
+
* Gets the FormArrayContext from a grid element, if present.
|
|
1114
|
+
* @internal
|
|
1115
|
+
*/
|
|
1116
|
+
declare function getFormArrayContext(gridElement: HTMLElement): FormArrayContext | undefined;
|
|
1117
|
+
/**
|
|
1118
|
+
* Directive that binds a FormArray directly to the grid.
|
|
1119
|
+
*
|
|
1120
|
+
* This is the recommended way to integrate tbw-grid with Angular Reactive Forms.
|
|
1121
|
+
* Use a FormArray of FormGroups for row-level validation and cell-level control access.
|
|
1122
|
+
*
|
|
1123
|
+
* ## Usage
|
|
1124
|
+
*
|
|
1125
|
+
* ```typescript
|
|
1126
|
+
* import { Component, inject } from '@angular/core';
|
|
1127
|
+
* import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
1128
|
+
* import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
|
|
1129
|
+
*
|
|
1130
|
+
* @Component({
|
|
1131
|
+
* imports: [Grid, GridFormArray, ReactiveFormsModule],
|
|
1132
|
+
* template: \`
|
|
1133
|
+
* <form [formGroup]="form">
|
|
1134
|
+
* <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
|
|
1135
|
+
* </form>
|
|
1136
|
+
* \`
|
|
1137
|
+
* })
|
|
1138
|
+
* export class MyComponent {
|
|
1139
|
+
* private fb = inject(FormBuilder);
|
|
1140
|
+
*
|
|
1141
|
+
* form = this.fb.group({
|
|
1142
|
+
* rows: this.fb.array([
|
|
1143
|
+
* this.fb.group({ name: 'Alice', age: 30 }),
|
|
1144
|
+
* this.fb.group({ name: 'Bob', age: 25 }),
|
|
1145
|
+
* ])
|
|
1146
|
+
* });
|
|
1147
|
+
*
|
|
1148
|
+
* columns = [
|
|
1149
|
+
* { field: 'name', header: 'Name', editable: true },
|
|
1150
|
+
* { field: 'age', header: 'Age', editable: true }
|
|
1151
|
+
* ];
|
|
1152
|
+
* }
|
|
1153
|
+
* ```
|
|
1154
|
+
*
|
|
1155
|
+
* ## How It Works
|
|
1156
|
+
*
|
|
1157
|
+
* - **FormArray → Grid**: The grid displays the FormArray's value as rows
|
|
1158
|
+
* - **Grid → FormArray**: When a cell is edited, the corresponding FormControl is updated
|
|
1159
|
+
* - FormArrayContext is available for accessing cell-level controls
|
|
1160
|
+
*
|
|
1161
|
+
* ## Features
|
|
1162
|
+
*
|
|
1163
|
+
* - Works naturally with FormArray inside a FormGroup
|
|
1164
|
+
* - Provides cell-level FormControl access for validation
|
|
1165
|
+
* - Supports row-level validation state aggregation
|
|
1166
|
+
* - Automatically syncs FormArray changes to the grid
|
|
1167
|
+
*/
|
|
1168
|
+
declare class GridFormArray implements OnInit, OnDestroy {
|
|
1169
|
+
#private;
|
|
1170
|
+
private elementRef;
|
|
1171
|
+
private cellCommitListener;
|
|
1172
|
+
private touchListener;
|
|
1173
|
+
/**
|
|
1174
|
+
* The FormArray to bind to the grid.
|
|
1175
|
+
*/
|
|
1176
|
+
readonly formArray: _angular_core.InputSignal<FormArray<any>>;
|
|
1177
|
+
/**
|
|
1178
|
+
* Effect that syncs the FormArray value to the grid rows.
|
|
1179
|
+
*/
|
|
1180
|
+
private syncFormArrayToGrid;
|
|
1181
|
+
ngOnInit(): void;
|
|
1182
|
+
ngOnDestroy(): void;
|
|
1183
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridFormArray, never>;
|
|
1184
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFormArray, "tbw-grid[formArray]", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
/**
|
|
1188
|
+
* Context object passed to the responsive card template.
|
|
1189
|
+
*
|
|
1190
|
+
* @template TRow - The type of row data
|
|
1191
|
+
*
|
|
1192
|
+
* @example
|
|
1193
|
+
* ```html
|
|
1194
|
+
* <tbw-grid-responsive-card>
|
|
1195
|
+
* <ng-template let-row let-index="index">
|
|
1196
|
+
* <div class="card-content">
|
|
1197
|
+
* <span>{{ row.name }}</span>
|
|
1198
|
+
* <span>Row #{{ index }}</span>
|
|
1199
|
+
* </div>
|
|
1200
|
+
* </ng-template>
|
|
1201
|
+
* </tbw-grid-responsive-card>
|
|
1202
|
+
* ```
|
|
1203
|
+
*/
|
|
1204
|
+
interface GridResponsiveCardContext<TRow = unknown> {
|
|
1205
|
+
/**
|
|
1206
|
+
* The row data (available as `let-row` or `let-myVar`).
|
|
1207
|
+
*/
|
|
1208
|
+
$implicit: TRow;
|
|
1209
|
+
/**
|
|
1210
|
+
* The row data (explicit access via `let-row="row"`).
|
|
1211
|
+
*/
|
|
1212
|
+
row: TRow;
|
|
1213
|
+
/**
|
|
1214
|
+
* The row index (zero-based).
|
|
1215
|
+
*/
|
|
1216
|
+
index: number;
|
|
1217
|
+
}
|
|
1218
|
+
/**
|
|
1219
|
+
* Directive for providing custom Angular templates for responsive card layout.
|
|
1220
|
+
*
|
|
1221
|
+
* Use this directive to define how each row should render when the grid
|
|
1222
|
+
* is in responsive/mobile mode. The template receives the row data and index.
|
|
1223
|
+
*
|
|
1224
|
+
* ## Usage
|
|
1225
|
+
*
|
|
1226
|
+
* ```html
|
|
1227
|
+
* <tbw-grid [rows]="employees">
|
|
1228
|
+
* <tbw-grid-responsive-card>
|
|
1229
|
+
* <ng-template let-employee let-idx="index">
|
|
1230
|
+
* <div class="employee-card">
|
|
1231
|
+
* <img [src]="employee.avatar" alt="">
|
|
1232
|
+
* <div class="info">
|
|
1233
|
+
* <strong>{{ employee.name }}</strong>
|
|
1234
|
+
* <span>{{ employee.department }}</span>
|
|
1235
|
+
* </div>
|
|
1236
|
+
* </div>
|
|
1237
|
+
* </ng-template>
|
|
1238
|
+
* </tbw-grid-responsive-card>
|
|
1239
|
+
* </tbw-grid>
|
|
1240
|
+
* ```
|
|
1241
|
+
*
|
|
1242
|
+
* ## Important Notes
|
|
1243
|
+
*
|
|
1244
|
+
* - The ResponsivePlugin must be added to your grid config
|
|
1245
|
+
* - The Grid directive will automatically configure the plugin's cardRenderer
|
|
1246
|
+
* - Template context provides `$implicit` (row), `row`, and `index`
|
|
1247
|
+
*
|
|
1248
|
+
* @see ResponsivePlugin
|
|
1249
|
+
*/
|
|
1250
|
+
declare class GridResponsiveCard<TRow = unknown> {
|
|
1251
|
+
private elementRef;
|
|
1252
|
+
/**
|
|
1253
|
+
* The ng-template containing the card content.
|
|
1254
|
+
*/
|
|
1255
|
+
template: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
1256
|
+
/**
|
|
1257
|
+
* Effect that registers the template when it becomes available.
|
|
1258
|
+
*/
|
|
1259
|
+
private onTemplateReceived;
|
|
1260
|
+
/**
|
|
1261
|
+
* Type guard for template context inference.
|
|
1262
|
+
*/
|
|
1263
|
+
static ngTemplateContextGuard<T>(_directive: GridResponsiveCard<T>, context: unknown): context is GridResponsiveCardContext<T>;
|
|
1264
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridResponsiveCard<any>, never>;
|
|
1265
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridResponsiveCard<any>, "tbw-grid-responsive-card", never, {}, {}, ["template"], never, true, never>;
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
/**
|
|
1269
|
+
* Context object passed to the tool panel template.
|
|
1270
|
+
* Provides access to grid-related information for the panel content.
|
|
1271
|
+
*/
|
|
1272
|
+
interface GridToolPanelContext {
|
|
1273
|
+
/** The grid element (implicit binding) */
|
|
1274
|
+
$implicit: HTMLElement;
|
|
1275
|
+
/** The grid element */
|
|
1276
|
+
grid: HTMLElement;
|
|
1277
|
+
}
|
|
1278
|
+
/**
|
|
1279
|
+
* Directive that captures an `<ng-template>` for use as a custom tool panel.
|
|
1280
|
+
*
|
|
1281
|
+
* This enables declarative Angular component usage for tool panels
|
|
1282
|
+
* that appear in the grid's side panel.
|
|
1283
|
+
*
|
|
1284
|
+
* ## Usage
|
|
1285
|
+
*
|
|
1286
|
+
* ```html
|
|
1287
|
+
* <tbw-grid [rows]="rows" [gridConfig]="config">
|
|
1288
|
+
* <tbw-grid-tool-panel
|
|
1289
|
+
* id="quick-filters"
|
|
1290
|
+
* title="Quick Filters"
|
|
1291
|
+
* icon="🔍"
|
|
1292
|
+
* tooltip="Apply quick filters"
|
|
1293
|
+
* [order]="10"
|
|
1294
|
+
* >
|
|
1295
|
+
* <ng-template let-grid>
|
|
1296
|
+
* <app-quick-filters [grid]="grid" />
|
|
1297
|
+
* </ng-template>
|
|
1298
|
+
* </tbw-grid-tool-panel>
|
|
1299
|
+
* </tbw-grid>
|
|
1300
|
+
* ```
|
|
1301
|
+
*
|
|
1302
|
+
* The template context provides:
|
|
1303
|
+
* - `$implicit` / `grid`: The grid element reference
|
|
1304
|
+
*
|
|
1305
|
+
* ### Attributes
|
|
1306
|
+
*
|
|
1307
|
+
* - `id` (required): Unique identifier for the panel
|
|
1308
|
+
* - `title` (required): Panel title shown in accordion header
|
|
1309
|
+
* - `icon`: Icon for accordion section header (emoji or text)
|
|
1310
|
+
* - `tooltip`: Tooltip for accordion section header
|
|
1311
|
+
* - `order`: Panel order priority (lower = first, default: 100)
|
|
1312
|
+
*
|
|
1313
|
+
* Import the directive in your component:
|
|
1314
|
+
*
|
|
1315
|
+
* ```typescript
|
|
1316
|
+
* import { GridToolPanel } from '@toolbox-web/grid-angular';
|
|
1317
|
+
*
|
|
1318
|
+
* @Component({
|
|
1319
|
+
* imports: [GridToolPanel],
|
|
1320
|
+
* // ...
|
|
1321
|
+
* })
|
|
1322
|
+
* ```
|
|
1323
|
+
*/
|
|
1324
|
+
declare class GridToolPanel {
|
|
1325
|
+
private elementRef;
|
|
1326
|
+
/** Unique panel identifier (required) */
|
|
1327
|
+
id: _angular_core.InputSignal<string>;
|
|
1328
|
+
/** Panel title shown in accordion header (required) */
|
|
1329
|
+
title: _angular_core.InputSignal<string>;
|
|
1330
|
+
/** Icon for accordion section header (emoji or text) */
|
|
1331
|
+
icon: _angular_core.InputSignal<string | undefined>;
|
|
1332
|
+
/** Tooltip for accordion section header */
|
|
1333
|
+
tooltip: _angular_core.InputSignal<string | undefined>;
|
|
1334
|
+
/** Panel order priority (lower = first, default: 100) */
|
|
1335
|
+
order: _angular_core.InputSignal<number>;
|
|
1336
|
+
/**
|
|
1337
|
+
* Query for the ng-template content child.
|
|
1338
|
+
*/
|
|
1339
|
+
template: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
1340
|
+
/** Effect that triggers when the template is available */
|
|
1341
|
+
private onTemplateReceived;
|
|
1342
|
+
/**
|
|
1343
|
+
* Static type guard for template context.
|
|
1344
|
+
* Enables type inference in templates.
|
|
1345
|
+
*/
|
|
1346
|
+
static ngTemplateContextGuard(dir: GridToolPanel, ctx: unknown): ctx is GridToolPanelContext;
|
|
1347
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridToolPanel, never>;
|
|
1348
|
+
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>;
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
/**
|
|
1352
|
+
* Event detail for cell commit events.
|
|
1353
|
+
*/
|
|
1354
|
+
interface CellCommitEvent<TRow = unknown, TValue = unknown> {
|
|
1355
|
+
/** The row data object */
|
|
1356
|
+
row: TRow;
|
|
1357
|
+
/** The field name of the edited column */
|
|
1358
|
+
field: string;
|
|
1359
|
+
/** The new value after edit */
|
|
1360
|
+
value: TValue;
|
|
1361
|
+
/** The row index in the data array */
|
|
1362
|
+
rowIndex: number;
|
|
1363
|
+
/** Array of all rows that have been modified */
|
|
1364
|
+
changedRows: TRow[];
|
|
1365
|
+
/** Set of row indices that have been modified */
|
|
1366
|
+
changedRowIndices: Set<number>;
|
|
1367
|
+
/** Whether this is the first modification to this row */
|
|
1368
|
+
firstTimeForRow: boolean;
|
|
1369
|
+
}
|
|
1370
|
+
/**
|
|
1371
|
+
* Event detail for row commit events (bulk editing).
|
|
1372
|
+
*/
|
|
1373
|
+
interface RowCommitEvent<TRow = unknown> {
|
|
1374
|
+
/** The row data object */
|
|
1375
|
+
row: TRow;
|
|
1376
|
+
/** The row index in the data array */
|
|
1377
|
+
rowIndex: number;
|
|
1378
|
+
/** Array of all rows that have been modified */
|
|
1379
|
+
changedRows: TRow[];
|
|
1380
|
+
/** Set of row indices that have been modified */
|
|
1381
|
+
changedRowIndices: Set<number>;
|
|
1382
|
+
/** Whether this is the first modification to this row */
|
|
1383
|
+
firstTimeForRow: boolean;
|
|
1384
|
+
}
|
|
1385
|
+
/**
|
|
1386
|
+
* Directive that automatically registers the Angular adapter with tbw-grid elements.
|
|
1387
|
+
*
|
|
1388
|
+
* This directive eliminates the need to manually register the adapter in your component
|
|
1389
|
+
* constructor. Simply import this directive and it will handle adapter registration.
|
|
1390
|
+
*
|
|
1391
|
+
* ## Usage
|
|
1392
|
+
*
|
|
1393
|
+
* ```typescript
|
|
1394
|
+
* import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
1395
|
+
* import { Grid } from '@toolbox-web/grid-angular';
|
|
1396
|
+
*
|
|
1397
|
+
* @Component({
|
|
1398
|
+
* selector: 'app-root',
|
|
1399
|
+
* imports: [Grid],
|
|
1400
|
+
* schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
1401
|
+
* template: `
|
|
1402
|
+
* <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
|
|
1403
|
+
* <!-- column templates -->
|
|
1404
|
+
* </tbw-grid>
|
|
1405
|
+
* `
|
|
1406
|
+
* })
|
|
1407
|
+
* export class AppComponent {
|
|
1408
|
+
* rows = [...];
|
|
1409
|
+
* config = {...};
|
|
1410
|
+
* myStyles = `.my-class { color: red; }`;
|
|
1411
|
+
* }
|
|
1412
|
+
* ```
|
|
1413
|
+
*
|
|
1414
|
+
* The directive automatically:
|
|
1415
|
+
* - Creates an AngularGridAdapter instance
|
|
1416
|
+
* - Registers it with the GridElement
|
|
1417
|
+
* - Injects custom styles into the grid
|
|
1418
|
+
* - Handles cleanup on destruction
|
|
1419
|
+
*/
|
|
1420
|
+
declare class Grid implements OnInit, AfterContentInit, OnDestroy {
|
|
1421
|
+
private elementRef;
|
|
1422
|
+
private injector;
|
|
1423
|
+
private appRef;
|
|
1424
|
+
private viewContainerRef;
|
|
1425
|
+
private adapter;
|
|
1426
|
+
constructor();
|
|
1427
|
+
/**
|
|
1428
|
+
* Custom CSS styles to inject into the grid.
|
|
1429
|
+
* Use this to style custom cell renderers, editors, or detail panels.
|
|
1430
|
+
*
|
|
1431
|
+
* @example
|
|
1432
|
+
* ```typescript
|
|
1433
|
+
* // In your component
|
|
1434
|
+
* customStyles = `
|
|
1435
|
+
* .my-detail-panel { padding: 16px; }
|
|
1436
|
+
* .my-status-badge { border-radius: 4px; }
|
|
1437
|
+
* `;
|
|
1438
|
+
* ```
|
|
1439
|
+
*
|
|
1440
|
+
* ```html
|
|
1441
|
+
* <tbw-grid [customStyles]="customStyles">...</tbw-grid>
|
|
1442
|
+
* ```
|
|
1443
|
+
*/
|
|
1444
|
+
customStyles: _angular_core.InputSignal<string | undefined>;
|
|
1445
|
+
/**
|
|
1446
|
+
* Grid-wide sorting toggle.
|
|
1447
|
+
* When false, disables sorting for all columns regardless of their individual `sortable` setting.
|
|
1448
|
+
* When true (default), columns with `sortable: true` can be sorted.
|
|
1449
|
+
*
|
|
1450
|
+
* This is a core grid config property, not a plugin feature.
|
|
1451
|
+
* For multi-column sorting, also add the `[multiSort]` feature.
|
|
1452
|
+
*
|
|
1453
|
+
* @default true
|
|
1454
|
+
*
|
|
1455
|
+
* @example
|
|
1456
|
+
* ```html
|
|
1457
|
+
* <!-- Disable all sorting -->
|
|
1458
|
+
* <tbw-grid [sortable]="false" />
|
|
1459
|
+
*
|
|
1460
|
+
* <!-- Enable sorting (default) - columns still need sortable: true -->
|
|
1461
|
+
* <tbw-grid [sortable]="true" />
|
|
1462
|
+
*
|
|
1463
|
+
* <!-- Enable multi-column sorting -->
|
|
1464
|
+
* <tbw-grid [sortable]="true" [multiSort]="true" />
|
|
1465
|
+
* ```
|
|
1466
|
+
*/
|
|
1467
|
+
sortable: _angular_core.InputSignal<boolean | undefined>;
|
|
1468
|
+
/**
|
|
1469
|
+
* Grid-wide filtering toggle.
|
|
1470
|
+
* When false, disables filtering for all columns regardless of their individual `filterable` setting.
|
|
1471
|
+
* When true (default), columns with `filterable: true` can be filtered.
|
|
1472
|
+
*
|
|
1473
|
+
* Requires the FilteringPlugin to be loaded.
|
|
1474
|
+
*
|
|
1475
|
+
* @default true
|
|
1476
|
+
*
|
|
1477
|
+
* @example
|
|
1478
|
+
* ```html
|
|
1479
|
+
* <!-- Disable all filtering -->
|
|
1480
|
+
* <tbw-grid [filterable]="false" [filtering]="true" />
|
|
1481
|
+
*
|
|
1482
|
+
* <!-- Enable filtering (default) -->
|
|
1483
|
+
* <tbw-grid [filterable]="true" [filtering]="true" />
|
|
1484
|
+
* ```
|
|
1485
|
+
*/
|
|
1486
|
+
filterable: _angular_core.InputSignal<boolean | undefined>;
|
|
1487
|
+
/**
|
|
1488
|
+
* Grid-wide selection toggle.
|
|
1489
|
+
* When false, disables selection for all rows/cells.
|
|
1490
|
+
* When true (default), selection is enabled based on plugin mode.
|
|
1491
|
+
*
|
|
1492
|
+
* Requires the SelectionPlugin to be loaded.
|
|
1493
|
+
*
|
|
1494
|
+
* @default true
|
|
1495
|
+
*
|
|
1496
|
+
* @example
|
|
1497
|
+
* ```html
|
|
1498
|
+
* <!-- Disable all selection -->
|
|
1499
|
+
* <tbw-grid [selectable]="false" [selection]="'range'" />
|
|
1500
|
+
*
|
|
1501
|
+
* <!-- Enable selection (default) -->
|
|
1502
|
+
* <tbw-grid [selectable]="true" [selection]="'range'" />
|
|
1503
|
+
* ```
|
|
1504
|
+
*/
|
|
1505
|
+
selectable: _angular_core.InputSignal<boolean | undefined>;
|
|
1506
|
+
/**
|
|
1507
|
+
* Angular-specific grid configuration that supports component classes for renderers/editors.
|
|
1508
|
+
*
|
|
1509
|
+
* Use this input when you want to specify Angular component classes directly in column configs.
|
|
1510
|
+
* Components must implement the appropriate interfaces:
|
|
1511
|
+
* - Renderers: `AngularCellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
|
|
1512
|
+
* - Editors: `AngularCellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
|
|
1513
|
+
*
|
|
1514
|
+
* The directive automatically processes component classes and converts them to grid-compatible
|
|
1515
|
+
* renderer/editor functions before applying to the grid.
|
|
1516
|
+
*
|
|
1517
|
+
* @example
|
|
1518
|
+
* ```typescript
|
|
1519
|
+
* // Component that implements AngularCellEditor
|
|
1520
|
+
* @Component({...})
|
|
1521
|
+
* export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
|
|
1522
|
+
* value = input.required<number>();
|
|
1523
|
+
* row = input.required<Employee>();
|
|
1524
|
+
* commit = output<number>();
|
|
1525
|
+
* cancel = output<void>();
|
|
1526
|
+
* }
|
|
1527
|
+
*
|
|
1528
|
+
* // In your grid config
|
|
1529
|
+
* config: AngularGridConfig<Employee> = {
|
|
1530
|
+
* columns: [
|
|
1531
|
+
* { field: 'name', header: 'Name' },
|
|
1532
|
+
* { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
|
|
1533
|
+
* ]
|
|
1534
|
+
* };
|
|
1535
|
+
* ```
|
|
1536
|
+
*
|
|
1537
|
+
* ```html
|
|
1538
|
+
* <tbw-grid [angularConfig]="config" [rows]="employees"></tbw-grid>
|
|
1539
|
+
* ```
|
|
1540
|
+
*/
|
|
1541
|
+
angularConfig: _angular_core.InputSignal<AngularGridConfig<any> | undefined>;
|
|
1542
|
+
/**
|
|
1543
|
+
* Enable cell/row/range selection.
|
|
1544
|
+
*
|
|
1545
|
+
* **Requires feature import:**
|
|
1546
|
+
* ```typescript
|
|
1547
|
+
* import '@toolbox-web/grid-angular/features/selection';
|
|
1548
|
+
* ```
|
|
1549
|
+
*
|
|
1550
|
+
* @example
|
|
1551
|
+
* ```html
|
|
1552
|
+
* <!-- Shorthand - just the mode -->
|
|
1553
|
+
* <tbw-grid [selection]="'range'" />
|
|
1554
|
+
*
|
|
1555
|
+
* <!-- Full config object -->
|
|
1556
|
+
* <tbw-grid [selection]="{ mode: 'range', checkbox: true }" />
|
|
1557
|
+
* ```
|
|
1558
|
+
*/
|
|
1559
|
+
selection: _angular_core.InputSignal<"row" | "range" | "cell" | SelectionConfig<any> | undefined>;
|
|
1560
|
+
/**
|
|
1561
|
+
* Enable inline cell editing.
|
|
1562
|
+
*
|
|
1563
|
+
* **Requires feature import:**
|
|
1564
|
+
* ```typescript
|
|
1565
|
+
* import '@toolbox-web/grid-angular/features/editing';
|
|
1566
|
+
* ```
|
|
1567
|
+
*
|
|
1568
|
+
* @example
|
|
1569
|
+
* ```html
|
|
1570
|
+
* <!-- Enable with default trigger (dblclick) -->
|
|
1571
|
+
* <tbw-grid [editing]="true" />
|
|
1572
|
+
*
|
|
1573
|
+
* <!-- Specify trigger -->
|
|
1574
|
+
* <tbw-grid [editing]="'click'" />
|
|
1575
|
+
* <tbw-grid [editing]="'dblclick'" />
|
|
1576
|
+
* <tbw-grid [editing]="'manual'" />
|
|
1577
|
+
* ```
|
|
1578
|
+
*/
|
|
1579
|
+
editing: _angular_core.InputSignal<boolean | "click" | "dblclick" | "manual" | undefined>;
|
|
1580
|
+
/**
|
|
1581
|
+
* Enable clipboard copy/paste. Requires selection to be enabled.
|
|
1582
|
+
*
|
|
1583
|
+
* **Requires feature import:**
|
|
1584
|
+
* ```typescript
|
|
1585
|
+
* import '@toolbox-web/grid-angular/features/clipboard';
|
|
1586
|
+
* ```
|
|
1587
|
+
*
|
|
1588
|
+
* @example
|
|
1589
|
+
* ```html
|
|
1590
|
+
* <tbw-grid [selection]="'range'" [clipboard]="true" />
|
|
1591
|
+
* ```
|
|
1592
|
+
*/
|
|
1593
|
+
clipboard: _angular_core.InputSignal<boolean | ClipboardConfig | undefined>;
|
|
1594
|
+
/**
|
|
1595
|
+
* Enable right-click context menu.
|
|
1596
|
+
*
|
|
1597
|
+
* **Requires feature import:**
|
|
1598
|
+
* ```typescript
|
|
1599
|
+
* import '@toolbox-web/grid-angular/features/context-menu';
|
|
1600
|
+
* ```
|
|
1601
|
+
*
|
|
1602
|
+
* @example
|
|
1603
|
+
* ```html
|
|
1604
|
+
* <tbw-grid [contextMenu]="true" />
|
|
1605
|
+
* ```
|
|
1606
|
+
*/
|
|
1607
|
+
contextMenu: _angular_core.InputSignal<boolean | ContextMenuConfig | undefined>;
|
|
1608
|
+
/**
|
|
1609
|
+
* Enable multi-column sorting.
|
|
1610
|
+
*
|
|
1611
|
+
* Multi-sort allows users to sort by multiple columns simultaneously.
|
|
1612
|
+
* For basic single-column sorting, columns with `sortable: true` work without this plugin.
|
|
1613
|
+
*
|
|
1614
|
+
* **Requires feature import:**
|
|
1615
|
+
* ```typescript
|
|
1616
|
+
* import '@toolbox-web/grid-angular/features/multi-sort';
|
|
1617
|
+
* ```
|
|
1618
|
+
*
|
|
1619
|
+
* @example
|
|
1620
|
+
* ```html
|
|
1621
|
+
* <!-- Enable multi-column sorting -->
|
|
1622
|
+
* <tbw-grid [multiSort]="true" />
|
|
1623
|
+
*
|
|
1624
|
+
* <!-- Limit to single column (uses plugin but restricts to 1 column) -->
|
|
1625
|
+
* <tbw-grid [multiSort]="'single'" />
|
|
1626
|
+
*
|
|
1627
|
+
* <!-- Full config -->
|
|
1628
|
+
* <tbw-grid [multiSort]="{ maxSortColumns: 3 }" />
|
|
1629
|
+
* ```
|
|
1630
|
+
*/
|
|
1631
|
+
multiSort: _angular_core.InputSignal<boolean | "multi" | MultiSortConfig | "single" | undefined>;
|
|
1632
|
+
/**
|
|
1633
|
+
* @deprecated Use `[multiSort]` instead. Will be removed in a future version.
|
|
1634
|
+
*
|
|
1635
|
+
* Enable column sorting. This is an alias for `[multiSort]`.
|
|
1636
|
+
*
|
|
1637
|
+
* **Requires feature import:**
|
|
1638
|
+
* ```typescript
|
|
1639
|
+
* import '@toolbox-web/grid-angular/features/multi-sort';
|
|
1640
|
+
* ```
|
|
1641
|
+
*/
|
|
1642
|
+
sorting: _angular_core.InputSignal<boolean | "multi" | MultiSortConfig | "single" | undefined>;
|
|
1643
|
+
/**
|
|
1644
|
+
* Enable column filtering.
|
|
1645
|
+
*
|
|
1646
|
+
* **Requires feature import:**
|
|
1647
|
+
* ```typescript
|
|
1648
|
+
* import '@toolbox-web/grid-angular/features/filtering';
|
|
1649
|
+
* ```
|
|
1650
|
+
*
|
|
1651
|
+
* @example
|
|
1652
|
+
* ```html
|
|
1653
|
+
* <tbw-grid [filtering]="true" />
|
|
1654
|
+
* <tbw-grid [filtering]="{ debounceMs: 200 }" />
|
|
1655
|
+
* ```
|
|
1656
|
+
*/
|
|
1657
|
+
filtering: _angular_core.InputSignal<boolean | FilterConfig<any> | undefined>;
|
|
1658
|
+
/**
|
|
1659
|
+
* Enable column drag-to-reorder.
|
|
1660
|
+
*
|
|
1661
|
+
* **Requires feature import:**
|
|
1662
|
+
* ```typescript
|
|
1663
|
+
* import '@toolbox-web/grid-angular/features/reorder';
|
|
1664
|
+
* ```
|
|
1665
|
+
*
|
|
1666
|
+
* @example
|
|
1667
|
+
* ```html
|
|
1668
|
+
* <tbw-grid [reorder]="true" />
|
|
1669
|
+
* ```
|
|
1670
|
+
*/
|
|
1671
|
+
reorder: _angular_core.InputSignal<boolean | ReorderConfig | undefined>;
|
|
1672
|
+
/**
|
|
1673
|
+
* Enable column visibility toggle panel.
|
|
1674
|
+
*
|
|
1675
|
+
* **Requires feature import:**
|
|
1676
|
+
* ```typescript
|
|
1677
|
+
* import '@toolbox-web/grid-angular/features/visibility';
|
|
1678
|
+
* ```
|
|
1679
|
+
*
|
|
1680
|
+
* @example
|
|
1681
|
+
* ```html
|
|
1682
|
+
* <tbw-grid [visibility]="true" />
|
|
1683
|
+
* ```
|
|
1684
|
+
*/
|
|
1685
|
+
visibility: _angular_core.InputSignal<boolean | VisibilityConfig | undefined>;
|
|
1686
|
+
/**
|
|
1687
|
+
* Enable pinned/sticky columns.
|
|
1688
|
+
* Columns are pinned via the `sticky` column property.
|
|
1689
|
+
*
|
|
1690
|
+
* **Requires feature import:**
|
|
1691
|
+
* ```typescript
|
|
1692
|
+
* import '@toolbox-web/grid-angular/features/pinned-columns';
|
|
1693
|
+
* ```
|
|
1694
|
+
*
|
|
1695
|
+
* @example
|
|
1696
|
+
* ```html
|
|
1697
|
+
* <tbw-grid [pinnedColumns]="true" [columns]="[
|
|
1698
|
+
* { field: 'id', sticky: 'left' },
|
|
1699
|
+
* { field: 'name' },
|
|
1700
|
+
* { field: 'actions', sticky: 'right' }
|
|
1701
|
+
* ]" />
|
|
1702
|
+
* ```
|
|
1703
|
+
*/
|
|
1704
|
+
pinnedColumns: _angular_core.InputSignal<boolean | undefined>;
|
|
1705
|
+
/**
|
|
1706
|
+
* Enable multi-level column headers (column groups).
|
|
1707
|
+
*
|
|
1708
|
+
* **Requires feature import:**
|
|
1709
|
+
* ```typescript
|
|
1710
|
+
* import '@toolbox-web/grid-angular/features/grouping-columns';
|
|
1711
|
+
* ```
|
|
1712
|
+
*
|
|
1713
|
+
* @example
|
|
1714
|
+
* ```html
|
|
1715
|
+
* <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
|
|
1716
|
+
* ```
|
|
1717
|
+
*/
|
|
1718
|
+
groupingColumns: _angular_core.InputSignal<boolean | GroupingColumnsConfig | undefined>;
|
|
1719
|
+
/**
|
|
1720
|
+
* Enable horizontal column virtualization for wide grids.
|
|
1721
|
+
*
|
|
1722
|
+
* **Requires feature import:**
|
|
1723
|
+
* ```typescript
|
|
1724
|
+
* import '@toolbox-web/grid-angular/features/column-virtualization';
|
|
1725
|
+
* ```
|
|
1726
|
+
*
|
|
1727
|
+
* @example
|
|
1728
|
+
* ```html
|
|
1729
|
+
* <tbw-grid [columnVirtualization]="true" />
|
|
1730
|
+
* ```
|
|
1731
|
+
*/
|
|
1732
|
+
columnVirtualization: _angular_core.InputSignal<boolean | ColumnVirtualizationConfig | undefined>;
|
|
1733
|
+
/**
|
|
1734
|
+
* Enable row drag-to-reorder.
|
|
1735
|
+
*
|
|
1736
|
+
* **Requires feature import:**
|
|
1737
|
+
* ```typescript
|
|
1738
|
+
* import '@toolbox-web/grid-angular/features/row-reorder';
|
|
1739
|
+
* ```
|
|
1740
|
+
*
|
|
1741
|
+
* @example
|
|
1742
|
+
* ```html
|
|
1743
|
+
* <tbw-grid [rowReorder]="true" />
|
|
1744
|
+
* ```
|
|
1745
|
+
*/
|
|
1746
|
+
rowReorder: _angular_core.InputSignal<boolean | RowReorderConfig | undefined>;
|
|
1747
|
+
/**
|
|
1748
|
+
* Enable row grouping by field values.
|
|
1749
|
+
*
|
|
1750
|
+
* **Requires feature import:**
|
|
1751
|
+
* ```typescript
|
|
1752
|
+
* import '@toolbox-web/grid-angular/features/grouping-rows';
|
|
1753
|
+
* ```
|
|
1754
|
+
*
|
|
1755
|
+
* @example
|
|
1756
|
+
* ```html
|
|
1757
|
+
* <tbw-grid [groupingRows]="{ groupBy: ['department'] }" />
|
|
1758
|
+
* ```
|
|
1759
|
+
*/
|
|
1760
|
+
groupingRows: _angular_core.InputSignal<GroupingRowsConfig | undefined>;
|
|
1761
|
+
/**
|
|
1762
|
+
* Enable pinned rows (aggregation/status bar).
|
|
1763
|
+
*
|
|
1764
|
+
* **Requires feature import:**
|
|
1765
|
+
* ```typescript
|
|
1766
|
+
* import '@toolbox-web/grid-angular/features/pinned-rows';
|
|
1767
|
+
* ```
|
|
1768
|
+
*
|
|
1769
|
+
* @example
|
|
1770
|
+
* ```html
|
|
1771
|
+
* <tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />
|
|
1772
|
+
* ```
|
|
1773
|
+
*/
|
|
1774
|
+
pinnedRows: _angular_core.InputSignal<boolean | PinnedRowsConfig | undefined>;
|
|
1775
|
+
/**
|
|
1776
|
+
* Enable hierarchical tree view.
|
|
1777
|
+
*
|
|
1778
|
+
* **Requires feature import:**
|
|
1779
|
+
* ```typescript
|
|
1780
|
+
* import '@toolbox-web/grid-angular/features/tree';
|
|
1781
|
+
* ```
|
|
1782
|
+
*
|
|
1783
|
+
* @example
|
|
1784
|
+
* ```html
|
|
1785
|
+
* <tbw-grid [tree]="{ childrenField: 'children' }" />
|
|
1786
|
+
* ```
|
|
1787
|
+
*/
|
|
1788
|
+
tree: _angular_core.InputSignal<boolean | TreeConfig | undefined>;
|
|
1789
|
+
/**
|
|
1790
|
+
* Enable master-detail expandable rows.
|
|
1791
|
+
*
|
|
1792
|
+
* **Requires feature import:**
|
|
1793
|
+
* ```typescript
|
|
1794
|
+
* import '@toolbox-web/grid-angular/features/master-detail';
|
|
1795
|
+
* ```
|
|
1796
|
+
*
|
|
1797
|
+
* @example
|
|
1798
|
+
* ```html
|
|
1799
|
+
* <tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />
|
|
1800
|
+
* ```
|
|
1801
|
+
*/
|
|
1802
|
+
masterDetail: _angular_core.InputSignal<MasterDetailConfig | undefined>;
|
|
1803
|
+
/**
|
|
1804
|
+
* Enable responsive card layout for narrow viewports.
|
|
1805
|
+
*
|
|
1806
|
+
* **Requires feature import:**
|
|
1807
|
+
* ```typescript
|
|
1808
|
+
* import '@toolbox-web/grid-angular/features/responsive';
|
|
1809
|
+
* ```
|
|
1810
|
+
*
|
|
1811
|
+
* @example
|
|
1812
|
+
* ```html
|
|
1813
|
+
* <tbw-grid [responsive]="{ breakpoint: 768 }" />
|
|
1814
|
+
* ```
|
|
1815
|
+
*/
|
|
1816
|
+
responsive: _angular_core.InputSignal<boolean | ResponsivePluginConfig<unknown> | undefined>;
|
|
1817
|
+
/**
|
|
1818
|
+
* Enable undo/redo for cell edits. Requires editing to be enabled.
|
|
1819
|
+
*
|
|
1820
|
+
* **Requires feature import:**
|
|
1821
|
+
* ```typescript
|
|
1822
|
+
* import '@toolbox-web/grid-angular/features/undo-redo';
|
|
1823
|
+
* ```
|
|
1824
|
+
*
|
|
1825
|
+
* @example
|
|
1826
|
+
* ```html
|
|
1827
|
+
* <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />
|
|
1828
|
+
* ```
|
|
1829
|
+
*/
|
|
1830
|
+
undoRedo: _angular_core.InputSignal<boolean | UndoRedoConfig | undefined>;
|
|
1831
|
+
/**
|
|
1832
|
+
* Enable CSV/JSON export functionality.
|
|
1833
|
+
*
|
|
1834
|
+
* **Requires feature import:**
|
|
1835
|
+
* ```typescript
|
|
1836
|
+
* import '@toolbox-web/grid-angular/features/export';
|
|
1837
|
+
* ```
|
|
1838
|
+
*
|
|
1839
|
+
* @example
|
|
1840
|
+
* ```html
|
|
1841
|
+
* <tbw-grid [export]="true" />
|
|
1842
|
+
* <tbw-grid [export]="{ filename: 'data.csv' }" />
|
|
1843
|
+
* ```
|
|
1844
|
+
*/
|
|
1845
|
+
exportFeature: _angular_core.InputSignal<boolean | ExportConfig | undefined>;
|
|
1846
|
+
/**
|
|
1847
|
+
* Enable print functionality.
|
|
1848
|
+
*
|
|
1849
|
+
* **Requires feature import:**
|
|
1850
|
+
* ```typescript
|
|
1851
|
+
* import '@toolbox-web/grid-angular/features/print';
|
|
1852
|
+
* ```
|
|
1853
|
+
*
|
|
1854
|
+
* @example
|
|
1855
|
+
* ```html
|
|
1856
|
+
* <tbw-grid [print]="true" />
|
|
1857
|
+
* ```
|
|
1858
|
+
*/
|
|
1859
|
+
print: _angular_core.InputSignal<boolean | PrintConfig | undefined>;
|
|
1860
|
+
/**
|
|
1861
|
+
* Enable pivot table functionality.
|
|
1862
|
+
*
|
|
1863
|
+
* **Requires feature import:**
|
|
1864
|
+
* ```typescript
|
|
1865
|
+
* import '@toolbox-web/grid-angular/features/pivot';
|
|
1866
|
+
* ```
|
|
1867
|
+
*
|
|
1868
|
+
* @example
|
|
1869
|
+
* ```html
|
|
1870
|
+
* <tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />
|
|
1871
|
+
* ```
|
|
1872
|
+
*/
|
|
1873
|
+
pivot: _angular_core.InputSignal<PivotConfig | undefined>;
|
|
1874
|
+
/**
|
|
1875
|
+
* Enable server-side data operations.
|
|
1876
|
+
*
|
|
1877
|
+
* **Requires feature import:**
|
|
1878
|
+
* ```typescript
|
|
1879
|
+
* import '@toolbox-web/grid-angular/features/server-side';
|
|
1880
|
+
* ```
|
|
1881
|
+
*
|
|
1882
|
+
* @example
|
|
1883
|
+
* ```html
|
|
1884
|
+
* <tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />
|
|
1885
|
+
* ```
|
|
1886
|
+
*/
|
|
1887
|
+
serverSide: _angular_core.InputSignal<ServerSideConfig | undefined>;
|
|
1888
|
+
/**
|
|
1889
|
+
* Emitted when a cell is clicked.
|
|
1890
|
+
*
|
|
1891
|
+
* @example
|
|
1892
|
+
* ```html
|
|
1893
|
+
* <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
|
|
1894
|
+
* ```
|
|
1895
|
+
*/
|
|
1896
|
+
cellClick: _angular_core.OutputEmitterRef<CellClickDetail<any>>;
|
|
1897
|
+
/**
|
|
1898
|
+
* Emitted when a row is clicked.
|
|
1899
|
+
*
|
|
1900
|
+
* @example
|
|
1901
|
+
* ```html
|
|
1902
|
+
* <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
|
|
1903
|
+
* ```
|
|
1904
|
+
*/
|
|
1905
|
+
rowClick: _angular_core.OutputEmitterRef<RowClickDetail<any>>;
|
|
1906
|
+
/**
|
|
1907
|
+
* Emitted when a cell is activated (Enter key or double-click).
|
|
1908
|
+
*
|
|
1909
|
+
* @example
|
|
1910
|
+
* ```html
|
|
1911
|
+
* <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
|
|
1912
|
+
* ```
|
|
1913
|
+
*/
|
|
1914
|
+
cellActivate: _angular_core.OutputEmitterRef<CellActivateDetail<any>>;
|
|
1915
|
+
/**
|
|
1916
|
+
* Emitted when a cell value changes (before commit).
|
|
1917
|
+
*
|
|
1918
|
+
* @example
|
|
1919
|
+
* ```html
|
|
1920
|
+
* <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
|
|
1921
|
+
* ```
|
|
1922
|
+
*/
|
|
1923
|
+
cellChange: _angular_core.OutputEmitterRef<CellChangeDetail<any>>;
|
|
1924
|
+
/**
|
|
1925
|
+
* Emitted when a cell value is committed (inline editing).
|
|
1926
|
+
* Provides the row, field, new value, and change tracking information.
|
|
1927
|
+
*
|
|
1928
|
+
* @example
|
|
1929
|
+
* ```html
|
|
1930
|
+
* <tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>
|
|
1931
|
+
* ```
|
|
1932
|
+
*
|
|
1933
|
+
* ```typescript
|
|
1934
|
+
* onCellCommit(event: CellCommitEvent) {
|
|
1935
|
+
* console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
|
|
1936
|
+
* }
|
|
1937
|
+
* ```
|
|
1938
|
+
*/
|
|
1939
|
+
cellCommit: _angular_core.OutputEmitterRef<CellCommitEvent<unknown, unknown>>;
|
|
1940
|
+
/**
|
|
1941
|
+
* Emitted when a row's values are committed (bulk/row editing).
|
|
1942
|
+
* Provides the row data and change tracking information.
|
|
1943
|
+
*
|
|
1944
|
+
* @example
|
|
1945
|
+
* ```html
|
|
1946
|
+
* <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
|
|
1947
|
+
* ```
|
|
1948
|
+
*/
|
|
1949
|
+
rowCommit: _angular_core.OutputEmitterRef<RowCommitEvent<unknown>>;
|
|
1950
|
+
/**
|
|
1951
|
+
* Emitted when the changed rows are reset.
|
|
1952
|
+
*
|
|
1953
|
+
* @example
|
|
1954
|
+
* ```html
|
|
1955
|
+
* <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
|
|
1956
|
+
* ```
|
|
1957
|
+
*/
|
|
1958
|
+
changedRowsReset: _angular_core.OutputEmitterRef<ChangedRowsResetDetail<unknown>>;
|
|
1959
|
+
/**
|
|
1960
|
+
* Emitted when sort state changes.
|
|
1961
|
+
*
|
|
1962
|
+
* @example
|
|
1963
|
+
* ```html
|
|
1964
|
+
* <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
|
|
1965
|
+
* ```
|
|
1966
|
+
*/
|
|
1967
|
+
sortChange: _angular_core.OutputEmitterRef<SortChangeDetail>;
|
|
1968
|
+
/**
|
|
1969
|
+
* Emitted when filter values change.
|
|
1970
|
+
*
|
|
1971
|
+
* @example
|
|
1972
|
+
* ```html
|
|
1973
|
+
* <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
|
|
1974
|
+
* ```
|
|
1975
|
+
*/
|
|
1976
|
+
filterChange: _angular_core.OutputEmitterRef<FilterChangeDetail>;
|
|
1977
|
+
/**
|
|
1978
|
+
* Emitted when a column is resized.
|
|
1979
|
+
*
|
|
1980
|
+
* @example
|
|
1981
|
+
* ```html
|
|
1982
|
+
* <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
|
|
1983
|
+
* ```
|
|
1984
|
+
*/
|
|
1985
|
+
columnResize: _angular_core.OutputEmitterRef<ColumnResizeDetail>;
|
|
1986
|
+
/**
|
|
1987
|
+
* Emitted when a column is moved via drag-and-drop.
|
|
1988
|
+
*
|
|
1989
|
+
* @example
|
|
1990
|
+
* ```html
|
|
1991
|
+
* <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
|
|
1992
|
+
* ```
|
|
1993
|
+
*/
|
|
1994
|
+
columnMove: _angular_core.OutputEmitterRef<ColumnMoveDetail>;
|
|
1995
|
+
/**
|
|
1996
|
+
* Emitted when column visibility changes.
|
|
1997
|
+
*
|
|
1998
|
+
* @example
|
|
1999
|
+
* ```html
|
|
2000
|
+
* <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
|
|
2001
|
+
* ```
|
|
2002
|
+
*/
|
|
2003
|
+
columnVisibility: _angular_core.OutputEmitterRef<ColumnVisibilityDetail>;
|
|
2004
|
+
/**
|
|
2005
|
+
* Emitted when column state changes (resize, reorder, visibility).
|
|
2006
|
+
*
|
|
2007
|
+
* @example
|
|
2008
|
+
* ```html
|
|
2009
|
+
* <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
|
|
2010
|
+
* ```
|
|
2011
|
+
*/
|
|
2012
|
+
columnStateChange: _angular_core.OutputEmitterRef<GridColumnState>;
|
|
2013
|
+
/**
|
|
2014
|
+
* Emitted when selection changes.
|
|
2015
|
+
*
|
|
2016
|
+
* @example
|
|
2017
|
+
* ```html
|
|
2018
|
+
* <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
|
|
2019
|
+
* ```
|
|
2020
|
+
*/
|
|
2021
|
+
selectionChange: _angular_core.OutputEmitterRef<SelectionChangeDetail>;
|
|
2022
|
+
/**
|
|
2023
|
+
* Emitted when a row is moved via drag-and-drop.
|
|
2024
|
+
*
|
|
2025
|
+
* @example
|
|
2026
|
+
* ```html
|
|
2027
|
+
* <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
|
|
2028
|
+
* ```
|
|
2029
|
+
*/
|
|
2030
|
+
rowMove: _angular_core.OutputEmitterRef<RowMoveDetail<any>>;
|
|
2031
|
+
/**
|
|
2032
|
+
* Emitted when a group is expanded or collapsed.
|
|
2033
|
+
*
|
|
2034
|
+
* @example
|
|
2035
|
+
* ```html
|
|
2036
|
+
* <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
|
|
2037
|
+
* ```
|
|
2038
|
+
*/
|
|
2039
|
+
groupToggle: _angular_core.OutputEmitterRef<GroupToggleDetail>;
|
|
2040
|
+
/**
|
|
2041
|
+
* Emitted when a tree node is expanded.
|
|
2042
|
+
*
|
|
2043
|
+
* @example
|
|
2044
|
+
* ```html
|
|
2045
|
+
* <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
|
|
2046
|
+
* ```
|
|
2047
|
+
*/
|
|
2048
|
+
treeExpand: _angular_core.OutputEmitterRef<TreeExpandDetail<any>>;
|
|
2049
|
+
/**
|
|
2050
|
+
* Emitted when a detail panel is expanded or collapsed.
|
|
2051
|
+
*
|
|
2052
|
+
* @example
|
|
2053
|
+
* ```html
|
|
2054
|
+
* <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
|
|
2055
|
+
* ```
|
|
2056
|
+
*/
|
|
2057
|
+
detailExpand: _angular_core.OutputEmitterRef<DetailExpandDetail>;
|
|
2058
|
+
/**
|
|
2059
|
+
* Emitted when responsive mode changes (table ↔ card).
|
|
2060
|
+
*
|
|
2061
|
+
* @example
|
|
2062
|
+
* ```html
|
|
2063
|
+
* <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
|
|
2064
|
+
* ```
|
|
2065
|
+
*/
|
|
2066
|
+
responsiveChange: _angular_core.OutputEmitterRef<ResponsiveChangeDetail>;
|
|
2067
|
+
/**
|
|
2068
|
+
* Emitted when cells are copied to clipboard.
|
|
2069
|
+
*
|
|
2070
|
+
* @example
|
|
2071
|
+
* ```html
|
|
2072
|
+
* <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
|
|
2073
|
+
* ```
|
|
2074
|
+
*/
|
|
2075
|
+
copy: _angular_core.OutputEmitterRef<CopyDetail>;
|
|
2076
|
+
/**
|
|
2077
|
+
* Emitted when cells are pasted from clipboard.
|
|
2078
|
+
*
|
|
2079
|
+
* @example
|
|
2080
|
+
* ```html
|
|
2081
|
+
* <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
|
|
2082
|
+
* ```
|
|
2083
|
+
*/
|
|
2084
|
+
paste: _angular_core.OutputEmitterRef<PasteDetail>;
|
|
2085
|
+
/**
|
|
2086
|
+
* Emitted when undo/redo is performed.
|
|
2087
|
+
*
|
|
2088
|
+
* @example
|
|
2089
|
+
* ```html
|
|
2090
|
+
* <tbw-grid (undoRedoAction)="onUndoRedo($event)">...</tbw-grid>
|
|
2091
|
+
* ```
|
|
2092
|
+
*/
|
|
2093
|
+
undoRedoAction: _angular_core.OutputEmitterRef<UndoRedoDetail>;
|
|
2094
|
+
/**
|
|
2095
|
+
* Emitted when export completes.
|
|
2096
|
+
*
|
|
2097
|
+
* @example
|
|
2098
|
+
* ```html
|
|
2099
|
+
* <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
|
|
2100
|
+
* ```
|
|
2101
|
+
*/
|
|
2102
|
+
exportComplete: _angular_core.OutputEmitterRef<ExportCompleteDetail>;
|
|
2103
|
+
/**
|
|
2104
|
+
* Emitted when print starts.
|
|
2105
|
+
*
|
|
2106
|
+
* @example
|
|
2107
|
+
* ```html
|
|
2108
|
+
* <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
|
|
2109
|
+
* ```
|
|
2110
|
+
*/
|
|
2111
|
+
printStart: _angular_core.OutputEmitterRef<PrintStartDetail>;
|
|
2112
|
+
/**
|
|
2113
|
+
* Emitted when print completes.
|
|
2114
|
+
*
|
|
2115
|
+
* @example
|
|
2116
|
+
* ```html
|
|
2117
|
+
* <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
|
|
2118
|
+
* ```
|
|
2119
|
+
*/
|
|
2120
|
+
printComplete: _angular_core.OutputEmitterRef<PrintCompleteDetail>;
|
|
2121
|
+
private readonly eventOutputMap;
|
|
2122
|
+
private eventListeners;
|
|
2123
|
+
ngOnInit(): void;
|
|
2124
|
+
/**
|
|
2125
|
+
* Sets up event listeners for all outputs using the eventOutputMap.
|
|
2126
|
+
*/
|
|
2127
|
+
private setupEventListeners;
|
|
2128
|
+
/**
|
|
2129
|
+
* Creates plugins from feature inputs.
|
|
2130
|
+
* Uses the feature registry to allow tree-shaking - only imported features are bundled.
|
|
2131
|
+
* Returns the array of created plugins (doesn't modify grid).
|
|
2132
|
+
*/
|
|
2133
|
+
private createFeaturePlugins;
|
|
2134
|
+
ngAfterContentInit(): void;
|
|
2135
|
+
/**
|
|
2136
|
+
* Registers custom styles into the grid.
|
|
2137
|
+
* Uses the grid's registerStyles() API for clean encapsulation.
|
|
2138
|
+
*/
|
|
2139
|
+
private registerCustomStyles;
|
|
2140
|
+
/**
|
|
2141
|
+
* Configures the MasterDetailPlugin after Angular templates are registered.
|
|
2142
|
+
* - If plugin exists: refresh its detail renderer
|
|
2143
|
+
* - If plugin doesn't exist but <tbw-grid-detail> is present: dynamically import and add the plugin
|
|
2144
|
+
*/
|
|
2145
|
+
private configureMasterDetail;
|
|
2146
|
+
/**
|
|
2147
|
+
* Configures the ResponsivePlugin with Angular template-based card renderer.
|
|
2148
|
+
* - If plugin exists: updates its cardRenderer configuration
|
|
2149
|
+
* - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
|
|
2150
|
+
*/
|
|
2151
|
+
private configureResponsiveCard;
|
|
2152
|
+
ngOnDestroy(): void;
|
|
2153
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
|
|
2154
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "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; }; "angularConfig": { "alias": "angularConfig"; "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; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorder": { "alias": "reorder"; "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; }; "rowReorder": { "alias": "rowReorder"; "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": "exportFeature"; "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; }; }, { "cellClick": "cellClick"; "rowClick": "rowClick"; "cellActivate": "cellActivate"; "cellChange": "cellChange"; "cellCommit": "cellCommit"; "rowCommit": "rowCommit"; "changedRowsReset": "changedRowsReset"; "sortChange": "sortChange"; "filterChange": "filterChange"; "columnResize": "columnResize"; "columnMove": "columnMove"; "columnVisibility": "columnVisibility"; "columnStateChange": "columnStateChange"; "selectionChange": "selectionChange"; "rowMove": "rowMove"; "groupToggle": "groupToggle"; "treeExpand": "treeExpand"; "detailExpand": "detailExpand"; "responsiveChange": "responsiveChange"; "copy": "copy"; "paste": "paste"; "undoRedoAction": "undoRedoAction"; "exportComplete": "exportComplete"; "printStart": "printStart"; "printComplete": "printComplete"; }, never, never, true, never>;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
/**
|
|
2158
|
+
* Context type for structural directives with `any` defaults.
|
|
2159
|
+
* This provides better ergonomics in templates without requiring explicit type annotations.
|
|
2160
|
+
*
|
|
2161
|
+
* @internal Use `GridCellContext` in application code for stricter typing.
|
|
2162
|
+
*/
|
|
2163
|
+
interface StructuralCellContext<TValue = any, TRow = any> {
|
|
2164
|
+
/** The cell value for this column */
|
|
2165
|
+
$implicit: TValue;
|
|
2166
|
+
/** The cell value (explicit binding) */
|
|
2167
|
+
value: TValue;
|
|
2168
|
+
/** The full row data object */
|
|
2169
|
+
row: TRow;
|
|
2170
|
+
/** The column configuration */
|
|
2171
|
+
column: any;
|
|
2172
|
+
}
|
|
2173
|
+
/**
|
|
2174
|
+
* Context type for structural editor directives with `any` defaults.
|
|
2175
|
+
* This provides better ergonomics in templates without requiring explicit type annotations.
|
|
2176
|
+
*
|
|
2177
|
+
* @internal Use `GridEditorContext` in application code for stricter typing.
|
|
2178
|
+
*/
|
|
2179
|
+
interface StructuralEditorContext<TValue = any, TRow = any> {
|
|
2180
|
+
/** The cell value for this column */
|
|
2181
|
+
$implicit: TValue;
|
|
2182
|
+
/** The cell value (explicit binding) */
|
|
2183
|
+
value: TValue;
|
|
2184
|
+
/** The full row data object */
|
|
2185
|
+
row: TRow;
|
|
2186
|
+
/** The column configuration */
|
|
2187
|
+
column: any;
|
|
2188
|
+
/**
|
|
2189
|
+
* Callback function to commit the edited value.
|
|
2190
|
+
*/
|
|
2191
|
+
onCommit: (value: TValue) => void;
|
|
2192
|
+
/**
|
|
2193
|
+
* Callback function to cancel editing.
|
|
2194
|
+
*/
|
|
2195
|
+
onCancel: () => void;
|
|
2196
|
+
/**
|
|
2197
|
+
* The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
|
|
2198
|
+
*
|
|
2199
|
+
* Returns `undefined` if:
|
|
2200
|
+
* - The grid is not bound to a FormArray
|
|
2201
|
+
* - The FormArray doesn't contain FormGroups
|
|
2202
|
+
* - The field doesn't exist in the FormGroup
|
|
2203
|
+
*/
|
|
2204
|
+
control?: AbstractControl;
|
|
2205
|
+
}
|
|
2206
|
+
/**
|
|
2207
|
+
* Structural directive for cell view rendering.
|
|
2208
|
+
*
|
|
2209
|
+
* This provides a cleaner syntax for defining custom cell renderers without
|
|
2210
|
+
* the nested `<tbw-grid-column-view>` and `<ng-template>` boilerplate.
|
|
2211
|
+
*
|
|
2212
|
+
* ## Usage
|
|
2213
|
+
*
|
|
2214
|
+
* ```html
|
|
2215
|
+
* <!-- Instead of this verbose syntax: -->
|
|
2216
|
+
* <tbw-grid-column field="status">
|
|
2217
|
+
* <tbw-grid-column-view>
|
|
2218
|
+
* <ng-template let-value let-row="row">
|
|
2219
|
+
* <app-status-badge [value]="value" />
|
|
2220
|
+
* </ng-template>
|
|
2221
|
+
* </tbw-grid-column-view>
|
|
2222
|
+
* </tbw-grid-column>
|
|
2223
|
+
*
|
|
2224
|
+
* <!-- Use this cleaner syntax: -->
|
|
2225
|
+
* <tbw-grid-column field="status">
|
|
2226
|
+
* <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
|
|
2227
|
+
* </tbw-grid-column>
|
|
2228
|
+
* ```
|
|
2229
|
+
*
|
|
2230
|
+
* ## Template Context
|
|
2231
|
+
*
|
|
2232
|
+
* The structural directive provides the same context as `GridColumnView`:
|
|
2233
|
+
* - `$implicit` / `value`: The cell value (use `let value` or `let-value`)
|
|
2234
|
+
* - `row`: The full row data object (use `row as row` or `let-row="row"`)
|
|
2235
|
+
* - `column`: The column configuration
|
|
2236
|
+
*
|
|
2237
|
+
* ## Import
|
|
2238
|
+
*
|
|
2239
|
+
* ```typescript
|
|
2240
|
+
* import { TbwRenderer } from '@toolbox-web/grid-angular';
|
|
2241
|
+
*
|
|
2242
|
+
* @Component({
|
|
2243
|
+
* imports: [TbwRenderer],
|
|
2244
|
+
* // ...
|
|
2245
|
+
* })
|
|
2246
|
+
* ```
|
|
2247
|
+
*/
|
|
2248
|
+
declare class TbwRenderer implements OnDestroy {
|
|
2249
|
+
private template;
|
|
2250
|
+
private elementRef;
|
|
2251
|
+
private columnElement;
|
|
2252
|
+
constructor();
|
|
2253
|
+
private registerTemplate;
|
|
2254
|
+
ngOnDestroy(): void;
|
|
2255
|
+
/**
|
|
2256
|
+
* Static type guard for template context.
|
|
2257
|
+
* Uses `any` defaults for ergonomic template usage.
|
|
2258
|
+
*/
|
|
2259
|
+
static ngTemplateContextGuard(dir: TbwRenderer, ctx: unknown): ctx is StructuralCellContext;
|
|
2260
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwRenderer, never>;
|
|
2261
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwRenderer, "[tbwRenderer]", never, {}, {}, never, never, true, never>;
|
|
2262
|
+
}
|
|
2263
|
+
/**
|
|
2264
|
+
* Structural directive for cell editor rendering.
|
|
2265
|
+
*
|
|
2266
|
+
* This provides a cleaner syntax for defining custom cell editors without
|
|
2267
|
+
* the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
|
|
2268
|
+
*
|
|
2269
|
+
* ## Usage
|
|
2270
|
+
*
|
|
2271
|
+
* ```html
|
|
2272
|
+
* <!-- Instead of this verbose syntax: -->
|
|
2273
|
+
* <tbw-grid-column field="status">
|
|
2274
|
+
* <tbw-grid-column-editor>
|
|
2275
|
+
* <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
|
|
2276
|
+
* <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
|
|
2277
|
+
* </ng-template>
|
|
2278
|
+
* </tbw-grid-column-editor>
|
|
2279
|
+
* </tbw-grid-column>
|
|
2280
|
+
*
|
|
2281
|
+
* <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
|
|
2282
|
+
* <tbw-grid-column field="status">
|
|
2283
|
+
* <app-status-editor *tbwEditor="let value" [value]="value" />
|
|
2284
|
+
* </tbw-grid-column>
|
|
2285
|
+
* ```
|
|
2286
|
+
*
|
|
2287
|
+
* ## Template Context
|
|
2288
|
+
*
|
|
2289
|
+
* The structural directive provides the same context as `GridColumnEditor`:
|
|
2290
|
+
* - `$implicit` / `value`: The cell value
|
|
2291
|
+
* - `row`: The full row data object
|
|
2292
|
+
* - `column`: The column configuration
|
|
2293
|
+
* - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
|
|
2294
|
+
* - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
|
|
2295
|
+
*
|
|
2296
|
+
* ## Import
|
|
2297
|
+
*
|
|
2298
|
+
* ```typescript
|
|
2299
|
+
* import { TbwEditor } from '@toolbox-web/grid-angular';
|
|
2300
|
+
*
|
|
2301
|
+
* @Component({
|
|
2302
|
+
* imports: [TbwEditor],
|
|
2303
|
+
* // ...
|
|
2304
|
+
* })
|
|
2305
|
+
* ```
|
|
2306
|
+
*/
|
|
2307
|
+
declare class TbwEditor implements OnDestroy {
|
|
2308
|
+
private template;
|
|
2309
|
+
private elementRef;
|
|
2310
|
+
private columnElement;
|
|
2311
|
+
constructor();
|
|
2312
|
+
private registerTemplate;
|
|
2313
|
+
ngOnDestroy(): void;
|
|
2314
|
+
/**
|
|
2315
|
+
* Static type guard for template context.
|
|
2316
|
+
* Uses `any` defaults for ergonomic template usage.
|
|
2317
|
+
*/
|
|
2318
|
+
static ngTemplateContextGuard(dir: TbwEditor, ctx: unknown): ctx is StructuralEditorContext;
|
|
2319
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwEditor, never>;
|
|
2320
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwEditor, "[tbwEditor]", never, {}, {}, never, never, true, never>;
|
|
2321
|
+
}
|
|
2322
|
+
|
|
2323
|
+
export { AngularGridAdapter, BaseGridEditor, GRID_TYPE_DEFAULTS, Grid, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridTypeDefaults, registerFeature };
|
|
2324
|
+
export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, ExportMethods, FeatureName, FormArrayContext, GridCellContext, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, PluginFactory, RowCommitEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext };
|
|
2325
|
+
//# sourceMappingURL=toolbox-web-grid-angular.d.ts.map
|