@toolbox-web/grid-angular 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/README.md +146 -54
  2. package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs +58 -0
  3. package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs.map +1 -1
  4. package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs +37 -0
  5. package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs.map +1 -1
  6. package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs +51 -0
  7. package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs.map +1 -1
  8. package/fesm2022/toolbox-web-grid-angular-features-editing.mjs +115 -1
  9. package/fesm2022/toolbox-web-grid-angular-features-editing.mjs.map +1 -1
  10. package/fesm2022/toolbox-web-grid-angular-features-export.mjs +55 -2
  11. package/fesm2022/toolbox-web-grid-angular-features-export.mjs.map +1 -1
  12. package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs +159 -5
  13. package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs.map +1 -1
  14. package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs +83 -0
  15. package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs.map +1 -1
  16. package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs +82 -0
  17. package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs.map +1 -1
  18. package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs +109 -2
  19. package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs.map +1 -1
  20. package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs +38 -0
  21. package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs.map +1 -1
  22. package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs +37 -0
  23. package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs.map +1 -1
  24. package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs +103 -0
  25. package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs.map +1 -1
  26. package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs +36 -0
  27. package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs.map +1 -1
  28. package/fesm2022/toolbox-web-grid-angular-features-print.mjs +58 -2
  29. package/fesm2022/toolbox-web-grid-angular-features-print.mjs.map +1 -1
  30. package/fesm2022/toolbox-web-grid-angular-features-reorder-columns.mjs +52 -0
  31. package/fesm2022/toolbox-web-grid-angular-features-reorder-columns.mjs.map +1 -1
  32. package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs +41 -0
  33. package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs.map +1 -1
  34. package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs +105 -2
  35. package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs.map +1 -1
  36. package/fesm2022/toolbox-web-grid-angular-features-row-drag-drop.mjs +77 -0
  37. package/fesm2022/toolbox-web-grid-angular-features-row-drag-drop.mjs.map +1 -1
  38. package/fesm2022/toolbox-web-grid-angular-features-selection.mjs +52 -2
  39. package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map +1 -1
  40. package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs +36 -0
  41. package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs.map +1 -1
  42. package/fesm2022/toolbox-web-grid-angular-features-tooltip.mjs +36 -0
  43. package/fesm2022/toolbox-web-grid-angular-features-tooltip.mjs.map +1 -1
  44. package/fesm2022/toolbox-web-grid-angular-features-tree.mjs +53 -0
  45. package/fesm2022/toolbox-web-grid-angular-features-tree.mjs.map +1 -1
  46. package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs +57 -2
  47. package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs.map +1 -1
  48. package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs +53 -0
  49. package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs.map +1 -1
  50. package/fesm2022/toolbox-web-grid-angular.mjs +1225 -728
  51. package/fesm2022/toolbox-web-grid-angular.mjs.map +1 -1
  52. package/package.json +1 -1
  53. package/types/toolbox-web-grid-angular-features-clipboard.d.ts +23 -0
  54. package/types/toolbox-web-grid-angular-features-clipboard.d.ts.map +1 -1
  55. package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts +19 -0
  56. package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts.map +1 -1
  57. package/types/toolbox-web-grid-angular-features-context-menu.d.ts +22 -0
  58. package/types/toolbox-web-grid-angular-features-context-menu.d.ts.map +1 -1
  59. package/types/toolbox-web-grid-angular-features-editing.d.ts +32 -0
  60. package/types/toolbox-web-grid-angular-features-editing.d.ts.map +1 -1
  61. package/types/toolbox-web-grid-angular-features-export.d.ts +21 -3
  62. package/types/toolbox-web-grid-angular-features-export.d.ts.map +1 -1
  63. package/types/toolbox-web-grid-angular-features-filtering.d.ts +67 -6
  64. package/types/toolbox-web-grid-angular-features-filtering.d.ts.map +1 -1
  65. package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts +19 -0
  66. package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts.map +1 -1
  67. package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts +25 -0
  68. package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts.map +1 -1
  69. package/types/toolbox-web-grid-angular-features-master-detail.d.ts +23 -0
  70. package/types/toolbox-web-grid-angular-features-master-detail.d.ts.map +1 -1
  71. package/types/toolbox-web-grid-angular-features-multi-sort.d.ts +19 -0
  72. package/types/toolbox-web-grid-angular-features-multi-sort.d.ts.map +1 -1
  73. package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts +18 -0
  74. package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts.map +1 -1
  75. package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts +19 -0
  76. package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts.map +1 -1
  77. package/types/toolbox-web-grid-angular-features-pivot.d.ts +19 -0
  78. package/types/toolbox-web-grid-angular-features-pivot.d.ts.map +1 -1
  79. package/types/toolbox-web-grid-angular-features-print.d.ts +22 -3
  80. package/types/toolbox-web-grid-angular-features-print.d.ts.map +1 -1
  81. package/types/toolbox-web-grid-angular-features-reorder-columns.d.ts +22 -0
  82. package/types/toolbox-web-grid-angular-features-reorder-columns.d.ts.map +1 -1
  83. package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts +19 -0
  84. package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts.map +1 -1
  85. package/types/toolbox-web-grid-angular-features-responsive.d.ts +22 -0
  86. package/types/toolbox-web-grid-angular-features-responsive.d.ts.map +1 -1
  87. package/types/toolbox-web-grid-angular-features-row-drag-drop.d.ts +27 -0
  88. package/types/toolbox-web-grid-angular-features-row-drag-drop.d.ts.map +1 -1
  89. package/types/toolbox-web-grid-angular-features-selection.d.ts +21 -3
  90. package/types/toolbox-web-grid-angular-features-selection.d.ts.map +1 -1
  91. package/types/toolbox-web-grid-angular-features-server-side.d.ts +19 -0
  92. package/types/toolbox-web-grid-angular-features-server-side.d.ts.map +1 -1
  93. package/types/toolbox-web-grid-angular-features-tooltip.d.ts +19 -0
  94. package/types/toolbox-web-grid-angular-features-tooltip.d.ts.map +1 -1
  95. package/types/toolbox-web-grid-angular-features-tree.d.ts +22 -0
  96. package/types/toolbox-web-grid-angular-features-tree.d.ts.map +1 -1
  97. package/types/toolbox-web-grid-angular-features-undo-redo.d.ts +22 -3
  98. package/types/toolbox-web-grid-angular-features-undo-redo.d.ts.map +1 -1
  99. package/types/toolbox-web-grid-angular-features-visibility.d.ts +22 -0
  100. package/types/toolbox-web-grid-angular-features-visibility.d.ts.map +1 -1
  101. package/types/toolbox-web-grid-angular.d.ts +858 -128
  102. package/types/toolbox-web-grid-angular.d.ts.map +1 -1
package/README.md CHANGED
@@ -77,28 +77,108 @@ export class MyGridComponent {
77
77
 
78
78
  ## Enabling Features
79
79
 
80
- Features are enabled using **declarative inputs** with **side-effect imports**. This gives you the best of both worlds: clean Angular templates and tree-shakeable bundles.
80
+ `<tbw-grid>` supports three patterns for turning on plugins. Pick whichever fits the
81
+ component — they can be mixed.
81
82
 
82
- ### How It Works
83
+ | Pattern | Best for | v2 status |
84
+ | --------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
85
+ | `gridConfig.features` (object literal) | Configuration-driven apps that prefer a single setup object | ✅ Unchanged — fully supported |
86
+ | **Per-feature directive** (e.g. `GridFilteringDirective`) | Template-driven apps that want signal inputs/outputs **and** the smallest bundle | ✅ **Recommended** — the future-proof path |
87
+ | Inputs/outputs on `Grid` (e.g. `[filtering]`) | v1.x apps already on this style | ⚠️ **Deprecated** — bindings remain for v1.x compatibility but will be removed in v2.0 |
88
+
89
+ > Apps that only use `gridConfig` are **not affected** by the v2 cleanup — only consumers
90
+ > binding feature inputs directly on `<tbw-grid>` need to add the matching per-feature
91
+ > directive to their component's `imports` before v2.
92
+
93
+ ### Recommended: Per-Feature Directives
94
+
95
+ Each feature ships its own attribute-selector directive (`GridFilteringDirective`,
96
+ `GridSelectionDirective`, …) from its secondary entry. Add the directive to the
97
+ component's `imports` and bind exactly the same `[input]` / `(output)` you used before:
98
+
99
+ ```typescript
100
+ import { Component } from '@angular/core';
101
+ import { Grid } from '@toolbox-web/grid-angular';
102
+ import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filtering';
103
+ import { GridSelectionDirective } from '@toolbox-web/grid-angular/features/selection';
104
+ import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi-sort';
105
+
106
+ @Component({
107
+ imports: [Grid, GridFilteringDirective, GridSelectionDirective, GridMultiSortDirective],
108
+ template: `
109
+ <tbw-grid
110
+ [rows]="rows"
111
+ [columns]="columns"
112
+ [selection]="'range'"
113
+ [multiSort]="true"
114
+ [filtering]="true"
115
+ style="height: 400px; display: block;">
116
+ </tbw-grid>
117
+ `,
118
+ })
119
+ ```
120
+
121
+ **Why this is the preferred path:**
122
+
123
+ - **Tree-shakeable typed surface** — the feature's `input()` / `output()` definitions ship
124
+ inside the feature's own bundle. Apps that don't import the directive don't pay for its
125
+ compiled metadata in the core grid-angular bundle.
126
+ - **Compile-time safety** — Angular errors with `Can't bind to 'filtering' since it isn't
127
+ a known property of 'tbw-grid'` if you forget the directive (stronger than React/Vue,
128
+ which silently drop unknown props, and stronger than the runtime guard on the WC core).
129
+ - **Same bindings, same demos** — the directive's selector matches the existing
130
+ attributes (`tbw-grid[filtering], tbw-grid[filterChange]`), so migrating from the
131
+ legacy style is a one-line `imports` addition per feature with **zero template
132
+ changes**.
133
+
134
+ ### Legacy: Inputs/Outputs on `Grid` (deprecated)
83
135
 
84
- 1. **Import the feature** A side-effect import registers the feature factory
85
- 2. **Use the input** The `Grid` directive detects the input and creates the plugin instance
136
+ The v1.x style declaring `[filtering]`, `(filterChange)`, etc. directly on the
137
+ `Grid` directive without importing a per-feature directive still works for the entire
138
+ v1.x line and is mediated by a per-element claims registry so the two styles can coexist
139
+ on the same grid without duplicate plugins or double-emitted events. The bindings are
140
+ marked `@deprecated` in JSDoc; v2.0 will remove them, at which point a one-line directive
141
+ import per feature is the migration.
142
+
143
+ ### How the side-effect import works
144
+
145
+ 1. **Import the feature** — A side-effect import registers the feature factory with the
146
+ core grid (`@toolbox-web/grid/features/<name>`).
147
+ 2. **Bind the input** — The per-feature directive (or, in legacy code, the input on
148
+ `Grid`) instantiates the plugin with the input value.
86
149
 
87
150
  ```typescript
88
- // 1. Import features you need (once, typically in the component file)
151
+ // 1. Side-effect import required for either pattern
89
152
  import '@toolbox-web/grid-angular/features/selection';
90
153
  import '@toolbox-web/grid-angular/features/multi-sort';
91
154
  import '@toolbox-web/grid-angular/features/filtering';
92
155
 
93
- // 2. Use declarative inputs no manual plugin instantiation!
156
+ // 2a. Recommendedper-feature directives in `imports`
157
+ import { GridSelectionDirective } from '@toolbox-web/grid-angular/features/selection';
158
+ import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi-sort';
159
+ import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filtering';
160
+
161
+ @Component({
162
+ imports: [Grid, GridSelectionDirective, GridMultiSortDirective, GridFilteringDirective],
163
+ template: `
164
+ <tbw-grid
165
+ [rows]="rows"
166
+ [selection]="'range'"
167
+ [multiSort]="true"
168
+ [filtering]="true"
169
+ style="height: 400px; display: block;">
170
+ </tbw-grid>
171
+ `,
172
+ })
173
+
174
+ // 2b. Legacy / deprecated — same bindings on Grid alone (works in v1.x)
94
175
  @Component({
95
176
  imports: [Grid],
96
177
  template: `
97
178
  <tbw-grid
98
179
  [rows]="rows"
99
- [columns]="columns"
100
180
  [selection]="'range'"
101
- [sorting]="'multi'"
181
+ [multiSort]="true"
102
182
  [filtering]="true"
103
183
  style="height: 400px; display: block;">
104
184
  </tbw-grid>
@@ -115,32 +195,36 @@ import '@toolbox-web/grid-angular/features/filtering';
115
195
 
116
196
  ### Available Features
117
197
 
118
- Import from `@toolbox-web/grid-angular/features/<name>`:
119
-
120
- | Feature | Input | Example |
121
- | ----------------------- | ------------------------ | -------------------------------------------------------------------------- |
122
- | `selection` | `[selection]` | `[selection]="'range'"` or `[selection]="{ mode: 'row', checkbox: true }"` |
123
- | `multi-sort` | `[sorting]` | `[sorting]="'multi'"` or `[sorting]="{ maxSortLevels: 3 }"` |
124
- | `filtering` | `[filtering]` | `[filtering]="true"` or `[filtering]="{ debounceMs: 200 }"` |
125
- | `editing` | `[editing]` | `[editing]="true"` or `[editing]="'dblclick'"` |
126
- | `clipboard` | `[clipboard]` | `[clipboard]="true"` (requires selection) |
127
- | `undo-redo` | `[undoRedo]` | `[undoRedo]="true"` (requires editing) |
128
- | `context-menu` | `[contextMenu]` | `[contextMenu]="true"` |
129
- | `reorder-columns` | `[reorder]` | `[reorder]="true"` (column drag-to-reorder) |
130
- | `reorder-rows` | `[rowReorder]` | `[rowReorder]="true"` (row drag-to-reorder) |
131
- | `visibility` | `[visibility]` | `[visibility]="true"` (column visibility panel) |
132
- | `pinned-columns` | `[pinnedColumns]` | `[pinnedColumns]="true"` |
133
- | `pinned-rows` | `[pinnedRows]` | `[pinnedRows]="true"` |
134
- | `grouping-columns` | `[groupingColumns]` | `[groupingColumns]="true"` |
135
- | `grouping-rows` | `[groupingRows]` | `[groupingRows]="{ groupBy: 'department' }"` |
136
- | `tree` | `[tree]` | `[tree]="{ childrenField: 'children' }"` |
137
- | `column-virtualization` | `[columnVirtualization]` | `[columnVirtualization]="true"` |
138
- | `export` | `[export]` | `[export]="true"` |
139
- | `print` | `[print]` | `[print]="true"` |
140
- | `responsive` | `[responsive]` | `[responsive]="true"` (card layout on mobile) |
141
- | `master-detail` | `[masterDetail]` | `[masterDetail]="true"` (use with `<tbw-grid-detail>`) |
142
- | `pivot` | `[pivot]` | `[pivot]="{ rowFields: [...], columnFields: [...] }"` |
143
- | `server-side` | `[serverSide]` | `[serverSide]="{ ... }"` |
198
+ Import the **directive** from `@toolbox-web/grid-angular/features/<name>` and add it
199
+ alongside `Grid` in your component's `imports` (recommended). The same `[input]` /
200
+ `(output)` bindings on the `Grid` directive itself are still accepted in v1.x but are
201
+ `@deprecated`.
202
+
203
+ | Per-Feature Directive (recommended) | Input | Example |
204
+ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
205
+ | [`GridSelectionDirective`](https://toolboxjs.com/grid/angular/api/directives/GridSelectionDirective/) | `[selection]` | `[selection]="'range'"` or `[selection]="{ mode: 'row', checkbox: true }"` |
206
+ | [`GridMultiSortDirective`](https://toolboxjs.com/grid/angular/api/directives/GridMultiSortDirective/) | `[multiSort]` | `[multiSort]="true"` or `[multiSort]="{ maxSortLevels: 3 }"` |
207
+ | [`GridFilteringDirective`](https://toolboxjs.com/grid/angular/api/directives/GridFilteringDirective/) | `[filtering]` | `[filtering]="true"` or `[filtering]="{ debounceMs: 200 }"` |
208
+ | [`GridEditingDirective`](https://toolboxjs.com/grid/angular/api/directives/GridEditingDirective/) | `[editing]` | `[editing]="true"` or `[editing]="'dblclick'"` |
209
+ | [`GridClipboardDirective`](https://toolboxjs.com/grid/angular/api/directives/GridClipboardDirective/) | `[clipboard]` | `[clipboard]="true"` (requires selection) |
210
+ | [`GridUndoRedoDirective`](https://toolboxjs.com/grid/angular/api/directives/GridUndoRedoDirective/) | `[undoRedo]` | `[undoRedo]="true"` (requires editing) |
211
+ | [`GridContextMenuDirective`](https://toolboxjs.com/grid/angular/api/directives/GridContextMenuDirective/) | `[contextMenu]` | `[contextMenu]="true"` |
212
+ | [`GridReorderColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridReorderColumnsDirective/) | `[reorderColumns]` | `[reorderColumns]="true"` |
213
+ | [`GridRowDragDropDirective`](https://toolboxjs.com/grid/angular/api/directives/GridRowDragDropDirective/) | `[rowDragDrop]` / `[reorderRows]` | `[rowDragDrop]="true"` (within and across grids) |
214
+ | [`GridVisibilityDirective`](https://toolboxjs.com/grid/angular/api/directives/GridVisibilityDirective/) | `[visibility]` | `[visibility]="true"` (column visibility panel) |
215
+ | [`GridPinnedColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPinnedColumnsDirective/) | `[pinnedColumns]` | `[pinnedColumns]="true"` |
216
+ | [`GridPinnedRowsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPinnedRowsDirective/) | `[pinnedRows]` | `[pinnedRows]="true"` |
217
+ | [`GridGroupingColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridGroupingColumnsDirective/) | `[groupingColumns]` | `[groupingColumns]="true"` |
218
+ | [`GridGroupingRowsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridGroupingRowsDirective/) | `[groupingRows]` | `[groupingRows]="{ groupBy: 'department' }"` |
219
+ | [`GridTreeDirective`](https://toolboxjs.com/grid/angular/api/directives/GridTreeDirective/) | `[tree]` | `[tree]="{ childrenField: 'children' }"` |
220
+ | [`GridColumnVirtualizationDirective`](https://toolboxjs.com/grid/angular/api/directives/GridColumnVirtualizationDirective/) | `[columnVirtualization]` | `[columnVirtualization]="true"` |
221
+ | [`GridExportDirective`](https://toolboxjs.com/grid/angular/api/directives/GridExportDirective/) | `[export]` | `[export]="true"` |
222
+ | [`GridPrintDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPrintDirective/) | `[print]` | `[print]="true"` |
223
+ | [`GridResponsiveDirective`](https://toolboxjs.com/grid/angular/api/directives/GridResponsiveDirective/) | `[responsive]` | `[responsive]="true"` (card layout on mobile) |
224
+ | [`GridMasterDetailDirective`](https://toolboxjs.com/grid/angular/api/directives/GridMasterDetailDirective/) | `[masterDetail]` | `[masterDetail]="true"` (use with `<tbw-grid-detail>`) |
225
+ | [`GridTooltipDirective`](https://toolboxjs.com/grid/angular/api/directives/GridTooltipDirective/) | `[tooltip]` | `[tooltip]="true"` |
226
+ | [`GridPivotDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPivotDirective/) | `[pivot]` | `[pivot]="{ rowFields: [...], columnFields: [...] }"` |
227
+ | [`GridServerSideDirective`](https://toolboxjs.com/grid/angular/api/directives/GridServerSideDirective/) | `[serverSide]` | `[serverSide]="{ ... }"` |
144
228
 
145
229
  ### Import All Features
146
230
 
@@ -241,7 +325,8 @@ Use `*tbwEditor` for custom cell editors. The adapter automatically listens for
241
325
 
242
326
  ```typescript
243
327
  import { Component, output } from '@angular/core';
244
- import { Grid, TbwRenderer, TbwEditor } from '@toolbox-web/grid-angular';
328
+ import { Grid, TbwRenderer } from '@toolbox-web/grid-angular';
329
+ import { TbwEditor } from '@toolbox-web/grid-angular/features/editing';
245
330
 
246
331
  // Your editor component just needs to emit 'commit' and 'cancel' events
247
332
  @Component({
@@ -314,7 +399,8 @@ import { Grid, GridColumnView } from '@toolbox-web/grid-angular';
314
399
  ### GridColumnEditor
315
400
 
316
401
  ```typescript
317
- import { Grid, GridColumnView, GridColumnEditor } from '@toolbox-web/grid-angular';
402
+ import { Grid, GridColumnView } from '@toolbox-web/grid-angular';
403
+ import { GridColumnEditor } from '@toolbox-web/grid-angular/features/editing';
318
404
 
319
405
  @Component({
320
406
  imports: [Grid, GridColumnView, GridColumnEditor],
@@ -374,7 +460,8 @@ export class MyGridComponent {
374
460
  Use `GridDetailView` for expandable row details:
375
461
 
376
462
  ```typescript
377
- import { Grid, GridDetailView } from '@toolbox-web/grid-angular';
463
+ import { Grid } from '@toolbox-web/grid-angular';
464
+ import { GridDetailView } from '@toolbox-web/grid-angular/features/master-detail';
378
465
  import { MasterDetailPlugin } from '@toolbox-web/grid/all';
379
466
 
380
467
  @Component({
@@ -680,9 +767,10 @@ The grid can be used as an Angular form control with `formControlName` or `formC
680
767
  ```typescript
681
768
  import { Component } from '@angular/core';
682
769
  import { FormControl, ReactiveFormsModule } from '@angular/forms';
683
- import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
770
+ import { Grid } from '@toolbox-web/grid-angular';
684
771
  import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
685
772
  import type { GridConfig } from '@toolbox-web/grid';
773
+ import { GridFormArray } from '@toolbox-web/grid-angular/features/editing';
686
774
 
687
775
  interface Employee {
688
776
  name: string;
@@ -722,8 +810,9 @@ export class MyComponent {
722
810
  ```typescript
723
811
  import { Component } from '@angular/core';
724
812
  import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
725
- import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
813
+ import { Grid } from '@toolbox-web/grid-angular';
726
814
  import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
815
+ import { GridFormArray } from '@toolbox-web/grid-angular/features/editing';
727
816
 
728
817
  @Component({
729
818
  imports: [Grid, GridFormArray, ReactiveFormsModule],
@@ -811,8 +900,9 @@ For fine-grained control over validation and form state at the cell level, use a
811
900
  ```typescript
812
901
  import { Component, input, output } from '@angular/core';
813
902
  import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
814
- import { Grid, GridFormArray, TbwEditor, TbwRenderer } from '@toolbox-web/grid-angular';
903
+ import { Grid, TbwRenderer } from '@toolbox-web/grid-angular';
815
904
  import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
905
+ import { GridFormArray, TbwEditor } from '@toolbox-web/grid-angular/features/editing';
816
906
 
817
907
  // Custom editor that uses the FormControl directly
818
908
  @Component({
@@ -905,7 +995,7 @@ export class MyComponent {
905
995
  When using `FormArray` with `FormGroup`s, you can also access row-level validation state through the `FormArrayContext`. This is useful for styling entire rows based on their validation state or displaying row-level error summaries.
906
996
 
907
997
  ```typescript
908
- import { getFormArrayContext, type FormArrayContext } from '@toolbox-web/grid-angular';
998
+ import { type FormArrayContext, getFormArrayContext } from '@toolbox-web/grid-angular/features/editing';
909
999
 
910
1000
  // Get the context from a grid element
911
1001
  const context = getFormArrayContext(gridElement);
@@ -955,7 +1045,7 @@ The adapter provides base classes that eliminate boilerplate when building custo
955
1045
 
956
1046
  ```typescript
957
1047
  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
958
- import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
1048
+ import { BaseOverlayEditor } from '@toolbox-web/grid-angular/features/editing';
959
1049
 
960
1050
  @Component({
961
1051
  selector: 'app-date-editor',
@@ -1002,7 +1092,7 @@ export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> implem
1002
1092
 
1003
1093
  ```typescript
1004
1094
  import { Component, ViewChild, ElementRef } from '@angular/core';
1005
- import { BaseFilterPanel } from '@toolbox-web/grid-angular';
1095
+ import { BaseFilterPanel } from '@toolbox-web/grid-angular/features/filtering';
1006
1096
 
1007
1097
  @Component({
1008
1098
  selector: 'app-text-filter',
@@ -1120,11 +1210,8 @@ export class TextFilterComponent extends BaseFilterPanel {
1120
1210
  import type {
1121
1211
  // Template contexts
1122
1212
  GridCellContext,
1123
- GridEditorContext,
1124
- GridDetailContext,
1125
1213
  GridToolPanelContext,
1126
1214
  StructuralCellContext,
1127
- StructuralEditorContext,
1128
1215
  // Events
1129
1216
  CellCommitEvent,
1130
1217
  RowCommitEvent,
@@ -1140,20 +1227,25 @@ import type {
1140
1227
  AngularCellRenderer,
1141
1228
  AngularCellEditor,
1142
1229
  AngularTypeDefault,
1143
- // Reactive Forms
1144
- FormArrayContext,
1145
- // Overlay position type
1146
- OverlayPosition,
1147
1230
  } from '@toolbox-web/grid-angular';
1148
1231
 
1149
- // Base classes for custom editors and filter panels
1150
- import { BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, BaseFilterPanel } from '@toolbox-web/grid-angular';
1232
+ // Reactive Forms types live with the editing feature
1233
+ import type { FormArrayContext, OverlayPosition } from '@toolbox-web/grid-angular/features/editing';
1151
1234
 
1152
1235
  // Type guard for component class detection
1153
1236
  import { isComponentClass } from '@toolbox-web/grid-angular';
1154
1237
 
1155
- // Helper to access form context from grid element
1156
- import { getFormArrayContext } from '@toolbox-web/grid-angular';
1238
+ // Base classes for custom editors and filter panels
1239
+ import {
1240
+ BaseGridEditor,
1241
+ BaseGridEditorCVA,
1242
+ BaseOverlayEditor,
1243
+ getFormArrayContext,
1244
+ type GridEditorContext,
1245
+ type StructuralEditorContext,
1246
+ } from '@toolbox-web/grid-angular/features/editing';
1247
+ import { type GridDetailContext } from '@toolbox-web/grid-angular/features/master-detail';
1248
+ import { BaseFilterPanel } from '@toolbox-web/grid-angular/features/filtering';
1157
1249
  ```
1158
1250
 
1159
1251
  ### AngularGridAdapter
@@ -1,4 +1,60 @@
1
1
  import '@toolbox-web/grid/features/clipboard';
2
+ import * as i0 from '@angular/core';
3
+ import { inject, ElementRef, input, output, Directive } from '@angular/core';
4
+ import { registerFeatureClaim, claimEvent, unregisterFeatureClaim, unclaimEvent } from '@toolbox-web/grid-angular';
5
+
6
+ /**
7
+ * `GridClipboardDirective` — owns `[clipboard]`, `(copy)`, `(paste)` on
8
+ * `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.
9
+ *
10
+ * @category Directive
11
+ */
12
+ /**
13
+ * Owns the binding(s) `[clipboard], [copy], [paste]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
14
+ *
15
+ * @category Directive
16
+ */
17
+ class GridClipboardDirective {
18
+ elementRef = inject((ElementRef));
19
+ clipboard = input(...(ngDevMode ? [undefined, { debugName: "clipboard" }] : /* istanbul ignore next */ []));
20
+ copy = output();
21
+ paste = output();
22
+ listeners = new Map();
23
+ constructor() {
24
+ const grid = this.elementRef.nativeElement;
25
+ registerFeatureClaim(grid, 'clipboard', () => this.clipboard());
26
+ claimEvent(grid, 'copy');
27
+ claimEvent(grid, 'paste');
28
+ }
29
+ ngOnInit() {
30
+ const grid = this.elementRef.nativeElement;
31
+ const wire = (name, out) => {
32
+ const l = (e) => out.emit(e.detail);
33
+ grid.addEventListener(name, l);
34
+ this.listeners.set(name, l);
35
+ };
36
+ wire('copy', this.copy);
37
+ wire('paste', this.paste);
38
+ }
39
+ ngOnDestroy() {
40
+ const grid = this.elementRef.nativeElement;
41
+ for (const [name, l] of this.listeners)
42
+ grid.removeEventListener(name, l);
43
+ this.listeners.clear();
44
+ unregisterFeatureClaim(grid, 'clipboard');
45
+ unclaimEvent(grid, 'copy');
46
+ unclaimEvent(grid, 'paste');
47
+ }
48
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
49
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridClipboardDirective, isStandalone: true, selector: "tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]", inputs: { clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy", paste: "paste" }, ngImport: i0 });
50
+ }
51
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridClipboardDirective, decorators: [{
52
+ type: Directive,
53
+ args: [{
54
+ selector: 'tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]',
55
+ standalone: true,
56
+ }]
57
+ }], ctorParameters: () => [], propDecorators: { clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }] } });
2
58
 
3
59
  /**
4
60
  * Clipboard feature for @toolbox-web/grid-angular
@@ -20,4 +76,6 @@ import '@toolbox-web/grid/features/clipboard';
20
76
  /**
21
77
  * Generated bundle index. Do not edit.
22
78
  */
79
+
80
+ export { GridClipboardDirective };
23
81
  //# sourceMappingURL=toolbox-web-grid-angular-features-clipboard.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/clipboard';\nexport type { _Augmentation as _ClipboardAugmentation } from '@toolbox-web/grid/features/clipboard';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;AAeG;;ACfH;;AAEG"}
1
+ {"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/grid-clipboard.directive.ts","../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * `GridClipboardDirective` — owns `[clipboard]`, `(copy)`, `(paste)` on\n * `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy, OnInit, output } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { claimEvent, registerFeatureClaim, unclaimEvent, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ClipboardConfig, CopyDetail, PasteDetail } from '@toolbox-web/grid/plugins/clipboard';\n\n/**\n * Owns the binding(s) `[clipboard], [copy], [paste]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]',\n standalone: true,\n})\nexport class GridClipboardDirective implements OnInit, OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly clipboard = input<boolean | ClipboardConfig>();\n readonly copy = output<CopyDetail>();\n readonly paste = output<PasteDetail>();\n\n private readonly listeners = new Map<string, (e: Event) => void>();\n\n constructor() {\n const grid = this.elementRef.nativeElement;\n registerFeatureClaim(grid, 'clipboard', () => this.clipboard());\n claimEvent(grid, 'copy');\n claimEvent(grid, 'paste');\n }\n\n ngOnInit(): void {\n const grid = this.elementRef.nativeElement;\n const wire = <T>(name: string, out: { emit: (v: T) => void }): void => {\n const l = (e: Event): void => out.emit((e as CustomEvent<T>).detail);\n grid.addEventListener(name, l);\n this.listeners.set(name, l);\n };\n wire<CopyDetail>('copy', this.copy);\n wire<PasteDetail>('paste', this.paste);\n }\n\n ngOnDestroy(): void {\n const grid = this.elementRef.nativeElement;\n for (const [name, l] of this.listeners) grid.removeEventListener(name, l);\n this.listeners.clear();\n unregisterFeatureClaim(grid, 'clipboard');\n unclaimEvent(grid, 'copy');\n unclaimEvent(grid, 'paste');\n }\n}\n","/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/clipboard';\nexport { GridClipboardDirective } from './grid-clipboard.directive';\nexport type { _Augmentation as _ClipboardAugmentation } from '@toolbox-web/grid/features/clipboard';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAMH;;;;AAIG;MAKU,sBAAsB,CAAA;AAChB,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6B;IAC9C,IAAI,GAAG,MAAM,EAAc;IAC3B,KAAK,GAAG,MAAM,EAAe;AAErB,IAAA,SAAS,GAAG,IAAI,GAAG,EAA8B;AAElE,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;AAC/D,QAAA,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC;AACxB,QAAA,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC;IAC3B;IAEA,QAAQ,GAAA;AACN,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,MAAM,IAAI,GAAG,CAAI,IAAY,EAAE,GAA6B,KAAU;AACpE,YAAA,MAAM,CAAC,GAAG,CAAC,CAAQ,KAAW,GAAG,CAAC,IAAI,CAAE,CAAoB,CAAC,MAAM,CAAC;AACpE,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;AAC7B,QAAA,CAAC;AACD,QAAA,IAAI,CAAa,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAc,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;IACxC;IAEA,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;QAC1C,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;AACzE,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;AACtB,QAAA,sBAAsB,CAAC,IAAI,EAAE,WAAW,CAAC;AACzC,QAAA,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;AAC1B,QAAA,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC;IAC7B;uGAlCW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sDAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sDAAsD;AAChE,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACnBD;;;;;;;;;;;;;;;AAeG;;ACfH;;AAEG;;;;"}
@@ -1,4 +1,39 @@
1
1
  import '@toolbox-web/grid/features/column-virtualization';
2
+ import * as i0 from '@angular/core';
3
+ import { inject, ElementRef, input, Directive } from '@angular/core';
4
+ import { registerFeatureClaim, unregisterFeatureClaim } from '@toolbox-web/grid-angular';
5
+
6
+ /**
7
+ * `GridColumnVirtualizationDirective` — owns `[columnVirtualization]` on
8
+ * `<tbw-grid>`. No event outputs. See `GridFilteringDirective` for the
9
+ * full rationale.
10
+ *
11
+ * @category Directive
12
+ */
13
+ /**
14
+ * Owns the binding(s) `[columnVirtualization]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
15
+ *
16
+ * @category Directive
17
+ */
18
+ class GridColumnVirtualizationDirective {
19
+ elementRef = inject((ElementRef));
20
+ columnVirtualization = input(...(ngDevMode ? [undefined, { debugName: "columnVirtualization" }] : /* istanbul ignore next */ []));
21
+ constructor() {
22
+ registerFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization', () => this.columnVirtualization());
23
+ }
24
+ ngOnDestroy() {
25
+ unregisterFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization');
26
+ }
27
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnVirtualizationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
28
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridColumnVirtualizationDirective, isStandalone: true, selector: "tbw-grid[columnVirtualization]", inputs: { columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
29
+ }
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnVirtualizationDirective, decorators: [{
31
+ type: Directive,
32
+ args: [{
33
+ selector: 'tbw-grid[columnVirtualization]',
34
+ standalone: true,
35
+ }]
36
+ }], ctorParameters: () => [], propDecorators: { columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }] } });
2
37
 
3
38
  /**
4
39
  * Column virtualization feature for @toolbox-web/grid-angular
@@ -18,4 +53,6 @@ import '@toolbox-web/grid/features/column-virtualization';
18
53
  /**
19
54
  * Generated bundle index. Do not edit.
20
55
  */
56
+
57
+ export { GridColumnVirtualizationDirective };
21
58
  //# sourceMappingURL=toolbox-web-grid-angular-features-column-virtualization.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"toolbox-web-grid-angular-features-column-virtualization.mjs","sources":["../../../../libs/grid-angular/features/column-virtualization/src/index.ts","../../../../libs/grid-angular/features/column-virtualization/src/toolbox-web-grid-angular-features-column-virtualization.ts"],"sourcesContent":["/**\n * Column virtualization feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `columnVirtualization` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/column-virtualization';\n *\n * <tbw-grid [columnVirtualization]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/column-virtualization';\nexport type { _Augmentation as _ColumnVirtualizationAugmentation } from '@toolbox-web/grid/features/column-virtualization';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;AAaG;;ACbH;;AAEG"}
1
+ {"version":3,"file":"toolbox-web-grid-angular-features-column-virtualization.mjs","sources":["../../../../libs/grid-angular/features/column-virtualization/src/grid-column-virtualization.directive.ts","../../../../libs/grid-angular/features/column-virtualization/src/index.ts","../../../../libs/grid-angular/features/column-virtualization/src/toolbox-web-grid-angular-features-column-virtualization.ts"],"sourcesContent":["/**\n * `GridColumnVirtualizationDirective` — owns `[columnVirtualization]` on\n * `<tbw-grid>`. No event outputs. See `GridFilteringDirective` for the\n * full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeatureClaim, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ColumnVirtualizationConfig } from '@toolbox-web/grid/plugins/column-virtualization';\n\n/**\n * Owns the binding(s) `[columnVirtualization]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[columnVirtualization]',\n standalone: true,\n})\nexport class GridColumnVirtualizationDirective implements OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly columnVirtualization = input<boolean | ColumnVirtualizationConfig>();\n\n constructor() {\n registerFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization', () => this.columnVirtualization());\n }\n\n ngOnDestroy(): void {\n unregisterFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization');\n }\n}\n","/**\n * Column virtualization feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `columnVirtualization` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/column-virtualization';\n *\n * <tbw-grid [columnVirtualization]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/column-virtualization';\nexport { GridColumnVirtualizationDirective } from './grid-column-virtualization.directive';\nexport type { _Augmentation as _ColumnVirtualizationAugmentation } from '@toolbox-web/grid/features/column-virtualization';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;;AAMG;AAMH;;;;AAIG;MAKU,iCAAiC,CAAA;AAC3B,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,oBAAoB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,sBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAwC;AAE7E,IAAA,WAAA,GAAA;AACE,QAAA,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChH;IAEA,WAAW,GAAA;QACT,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,sBAAsB,CAAC;IAC/E;uGAXW,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAJ7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gCAAgC;AAC1C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACpBD;;;;;;;;;;;;;AAaG;;ACbH;;AAEG;;;;"}
@@ -1,4 +1,53 @@
1
1
  import '@toolbox-web/grid/features/context-menu';
2
+ import * as i0 from '@angular/core';
3
+ import { inject, ElementRef, input, output, Directive } from '@angular/core';
4
+ import { registerFeatureClaim, claimEvent, unregisterFeatureClaim, unclaimEvent } from '@toolbox-web/grid-angular';
5
+
6
+ /**
7
+ * `GridContextMenuDirective` — owns `[contextMenu]` and `(contextMenuOpen)`
8
+ * on `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.
9
+ *
10
+ * @category Directive
11
+ */
12
+ /**
13
+ * Owns the binding(s) `[contextMenu], [contextMenuOpen]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
14
+ *
15
+ * @category Directive
16
+ */
17
+ class GridContextMenuDirective {
18
+ elementRef = inject((ElementRef));
19
+ contextMenu = input(...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : /* istanbul ignore next */ []));
20
+ contextMenuOpen = output();
21
+ listener;
22
+ constructor() {
23
+ const grid = this.elementRef.nativeElement;
24
+ registerFeatureClaim(grid, 'contextMenu', () => this.contextMenu());
25
+ claimEvent(grid, 'context-menu-open');
26
+ }
27
+ ngOnInit() {
28
+ const grid = this.elementRef.nativeElement;
29
+ this.listener = (e) => this.contextMenuOpen.emit(e.detail);
30
+ grid.addEventListener('context-menu-open', this.listener);
31
+ }
32
+ ngOnDestroy() {
33
+ const grid = this.elementRef.nativeElement;
34
+ if (this.listener) {
35
+ grid.removeEventListener('context-menu-open', this.listener);
36
+ this.listener = undefined;
37
+ }
38
+ unregisterFeatureClaim(grid, 'contextMenu');
39
+ unclaimEvent(grid, 'context-menu-open');
40
+ }
41
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
42
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridContextMenuDirective, isStandalone: true, selector: "tbw-grid[contextMenu], tbw-grid[contextMenuOpen]", inputs: { contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextMenuOpen: "contextMenuOpen" }, ngImport: i0 });
43
+ }
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridContextMenuDirective, decorators: [{
45
+ type: Directive,
46
+ args: [{
47
+ selector: 'tbw-grid[contextMenu], tbw-grid[contextMenuOpen]',
48
+ standalone: true,
49
+ }]
50
+ }], ctorParameters: () => [], propDecorators: { contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], contextMenuOpen: [{ type: i0.Output, args: ["contextMenuOpen"] }] } });
2
51
 
3
52
  /**
4
53
  * Context menu feature for @toolbox-web/grid-angular
@@ -18,4 +67,6 @@ import '@toolbox-web/grid/features/context-menu';
18
67
  /**
19
68
  * Generated bundle index. Do not edit.
20
69
  */
70
+
71
+ export { GridContextMenuDirective };
21
72
  //# sourceMappingURL=toolbox-web-grid-angular-features-context-menu.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"toolbox-web-grid-angular-features-context-menu.mjs","sources":["../../../../libs/grid-angular/features/context-menu/src/index.ts","../../../../libs/grid-angular/features/context-menu/src/toolbox-web-grid-angular-features-context-menu.ts"],"sourcesContent":["/**\n * Context menu feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `contextMenu` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/context-menu';\n *\n * <tbw-grid [contextMenu]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/context-menu';\nexport type { _Augmentation as _ContextMenuAugmentation } from '@toolbox-web/grid/features/context-menu';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;AAaG;;ACbH;;AAEG"}
1
+ {"version":3,"file":"toolbox-web-grid-angular-features-context-menu.mjs","sources":["../../../../libs/grid-angular/features/context-menu/src/grid-context-menu.directive.ts","../../../../libs/grid-angular/features/context-menu/src/index.ts","../../../../libs/grid-angular/features/context-menu/src/toolbox-web-grid-angular-features-context-menu.ts"],"sourcesContent":["/**\n * `GridContextMenuDirective` — owns `[contextMenu]` and `(contextMenuOpen)`\n * on `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy, OnInit, output } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { claimEvent, registerFeatureClaim, unclaimEvent, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ContextMenuConfig, ContextMenuOpenDetail } from '@toolbox-web/grid/plugins/context-menu';\n\n/**\n * Owns the binding(s) `[contextMenu], [contextMenuOpen]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[contextMenu], tbw-grid[contextMenuOpen]',\n standalone: true,\n})\nexport class GridContextMenuDirective implements OnInit, OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly contextMenu = input<boolean | ContextMenuConfig>();\n readonly contextMenuOpen = output<ContextMenuOpenDetail>();\n\n private listener?: (e: Event) => void;\n\n constructor() {\n const grid = this.elementRef.nativeElement;\n registerFeatureClaim(grid, 'contextMenu', () => this.contextMenu());\n claimEvent(grid, 'context-menu-open');\n }\n\n ngOnInit(): void {\n const grid = this.elementRef.nativeElement;\n this.listener = (e: Event): void => this.contextMenuOpen.emit((e as CustomEvent<ContextMenuOpenDetail>).detail);\n grid.addEventListener('context-menu-open', this.listener);\n }\n\n ngOnDestroy(): void {\n const grid = this.elementRef.nativeElement;\n if (this.listener) {\n grid.removeEventListener('context-menu-open', this.listener);\n this.listener = undefined;\n }\n unregisterFeatureClaim(grid, 'contextMenu');\n unclaimEvent(grid, 'context-menu-open');\n }\n}\n","/**\n * Context menu feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `contextMenu` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/context-menu';\n *\n * <tbw-grid [contextMenu]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/context-menu';\nexport { GridContextMenuDirective } from './grid-context-menu.directive';\nexport type { _Augmentation as _ContextMenuAugmentation } from '@toolbox-web/grid/features/context-menu';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAMH;;;;AAIG;MAKU,wBAAwB,CAAA;AAClB,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA+B;IAClD,eAAe,GAAG,MAAM,EAAyB;AAElD,IAAA,QAAQ;AAEhB,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,oBAAoB,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;AACnE,QAAA,UAAU,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACvC;IAEA,QAAQ,GAAA;AACN,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAQ,KAAW,IAAI,CAAC,eAAe,CAAC,IAAI,CAAE,CAAwC,CAAC,MAAM,CAAC;QAC/G,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,QAAQ,CAAC;IAC3D;IAEA,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC5D,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;QAC3B;AACA,QAAA,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AAC3C,QAAA,YAAY,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACzC;uGA5BW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kDAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAJpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kDAAkD;AAC5D,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACnBD;;;;;;;;;;;;;AAaG;;ACbH;;AAEG;;;;"}