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