@toolbox-web/grid-angular 0.0.1 → 0.1.1
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/README.md +394 -0
- package/index.d.ts +10 -0
- package/index.d.ts.map +1 -1
- package/index.js +275 -127
- package/lib/angular-grid-adapter.d.ts +35 -8
- package/lib/angular-grid-adapter.d.ts.map +1 -1
- package/lib/directives/grid-column-editor.directive.d.ts +23 -7
- package/lib/directives/grid-column-editor.directive.d.ts.map +1 -1
- package/lib/directives/grid.directive.d.ts +62 -0
- package/lib/directives/grid.directive.d.ts.map +1 -1
- package/lib/directives/structural-directives.d.ts +164 -0
- package/lib/directives/structural-directives.d.ts.map +1 -0
- package/package.json +53 -53
- package/lib/grid-angular.d.ts +0 -2
- package/lib/grid-angular.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,mBAAmB,EAGnB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAGV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,mBAAmB,EAGnB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAGV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAgC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAIvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAL1B,OAAO,CAAC,QAAQ,CAAkC;gBAGxC,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAM5C;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA+BxG;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA4DpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;OAGG;IACH,OAAO,IAAI,IAAI;CAIhB"}
|
|
@@ -12,9 +12,25 @@ export interface GridEditorContext<TValue = unknown, TRow = unknown> {
|
|
|
12
12
|
row: TRow;
|
|
13
13
|
/** The column configuration */
|
|
14
14
|
column: unknown;
|
|
15
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Callback function to commit the edited value.
|
|
17
|
+
* Use with Angular event binding: `(commit)="onCommit($event)"`
|
|
18
|
+
*/
|
|
19
|
+
onCommit: (value: TValue) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Callback function to cancel editing.
|
|
22
|
+
* Use with Angular event binding: `(cancel)="onCancel()"`
|
|
23
|
+
*/
|
|
24
|
+
onCancel: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated Use `onCommit` callback function instead. Will be removed in v2.0.
|
|
27
|
+
* EventEmitter for commit - requires `.emit()` call.
|
|
28
|
+
*/
|
|
16
29
|
commit: EventEmitter<TValue>;
|
|
17
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated Use `onCancel` callback function instead. Will be removed in v2.0.
|
|
32
|
+
* EventEmitter for cancel - requires `.emit()` call.
|
|
33
|
+
*/
|
|
18
34
|
cancel: EventEmitter<void>;
|
|
19
35
|
}
|
|
20
36
|
/**
|
|
@@ -33,12 +49,12 @@ export declare function getEditorTemplate(element: HTMLElement): TemplateRef<Gri
|
|
|
33
49
|
* ```html
|
|
34
50
|
* <tbw-grid-column field="status" editable>
|
|
35
51
|
* <tbw-grid-column-editor>
|
|
36
|
-
* <ng-template let-value let-row="row" let-
|
|
52
|
+
* <ng-template let-value let-row="row" let-onCommit="onCommit" let-onCancel="onCancel">
|
|
37
53
|
* <app-status-select
|
|
38
54
|
* [value]="value"
|
|
39
55
|
* [row]="row"
|
|
40
|
-
* (commit)="
|
|
41
|
-
* (cancel)="
|
|
56
|
+
* (commit)="onCommit($event)"
|
|
57
|
+
* (cancel)="onCancel()"
|
|
42
58
|
* />
|
|
43
59
|
* </ng-template>
|
|
44
60
|
* </tbw-grid-column-editor>
|
|
@@ -49,8 +65,8 @@ export declare function getEditorTemplate(element: HTMLElement): TemplateRef<Gri
|
|
|
49
65
|
* - `$implicit` / `value`: The cell value
|
|
50
66
|
* - `row`: The full row data object
|
|
51
67
|
* - `column`: The column configuration
|
|
52
|
-
* - `
|
|
53
|
-
* - `
|
|
68
|
+
* - `onCommit`: Callback function to commit the new value
|
|
69
|
+
* - `onCancel`: Callback function to cancel editing
|
|
54
70
|
*
|
|
55
71
|
* Import the directive in your component:
|
|
56
72
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-column-editor.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-column-editor.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,YAAY,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAE/G;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IACjE,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB
|
|
1
|
+
{"version":3,"file":"grid-column-editor.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-column-editor.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,YAAY,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAE/G;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,IAAI,GAAG,OAAO;IACjE,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CAC5B;AAKD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAElG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,gBAAgB;IAC3B,OAAO,CAAC,UAAU,CAAmC;IAErD;;OAEG;IACH,QAAQ,+DAAgD;IAExD,0DAA0D;IAC1D,OAAO,CAAC,kBAAkB,CAMvB;IAEH;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,gBAAgB,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,iBAAiB;CAG7F"}
|
|
@@ -1,4 +1,38 @@
|
|
|
1
1
|
import { AfterContentInit, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
+
/**
|
|
3
|
+
* Event detail for cell commit events.
|
|
4
|
+
*/
|
|
5
|
+
export interface CellCommitEvent<TRow = unknown, TValue = unknown> {
|
|
6
|
+
/** The row data object */
|
|
7
|
+
row: TRow;
|
|
8
|
+
/** The field name of the edited column */
|
|
9
|
+
field: string;
|
|
10
|
+
/** The new value after edit */
|
|
11
|
+
value: TValue;
|
|
12
|
+
/** The row index in the data array */
|
|
13
|
+
rowIndex: number;
|
|
14
|
+
/** Array of all rows that have been modified */
|
|
15
|
+
changedRows: TRow[];
|
|
16
|
+
/** Set of row indices that have been modified */
|
|
17
|
+
changedRowIndices: Set<number>;
|
|
18
|
+
/** Whether this is the first modification to this row */
|
|
19
|
+
firstTimeForRow: boolean;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Event detail for row commit events (bulk editing).
|
|
23
|
+
*/
|
|
24
|
+
export interface RowCommitEvent<TRow = unknown> {
|
|
25
|
+
/** The row data object */
|
|
26
|
+
row: TRow;
|
|
27
|
+
/** The row index in the data array */
|
|
28
|
+
rowIndex: number;
|
|
29
|
+
/** Array of all rows that have been modified */
|
|
30
|
+
changedRows: TRow[];
|
|
31
|
+
/** Set of row indices that have been modified */
|
|
32
|
+
changedRowIndices: Set<number>;
|
|
33
|
+
/** Whether this is the first modification to this row */
|
|
34
|
+
firstTimeForRow: boolean;
|
|
35
|
+
}
|
|
2
36
|
/**
|
|
3
37
|
* Directive that automatically registers the Angular adapter with tbw-grid elements.
|
|
4
38
|
*
|
|
@@ -40,6 +74,8 @@ export declare class Grid implements OnInit, AfterContentInit, OnDestroy {
|
|
|
40
74
|
private appRef;
|
|
41
75
|
private viewContainerRef;
|
|
42
76
|
private adapter;
|
|
77
|
+
private cellCommitListener;
|
|
78
|
+
private rowCommitListener;
|
|
43
79
|
/**
|
|
44
80
|
* Custom CSS styles to inject into the grid's shadow DOM.
|
|
45
81
|
* Use this to style custom cell renderers, editors, or detail panels.
|
|
@@ -58,6 +94,32 @@ export declare class Grid implements OnInit, AfterContentInit, OnDestroy {
|
|
|
58
94
|
* ```
|
|
59
95
|
*/
|
|
60
96
|
customStyles: import('@angular/core').InputSignal<string | undefined>;
|
|
97
|
+
/**
|
|
98
|
+
* Emitted when a cell value is committed (inline editing).
|
|
99
|
+
* Provides the row, field, new value, and change tracking information.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* ```html
|
|
103
|
+
* <tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>
|
|
104
|
+
* ```
|
|
105
|
+
*
|
|
106
|
+
* ```typescript
|
|
107
|
+
* onCellCommit(event: CellCommitEvent) {
|
|
108
|
+
* console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
|
|
109
|
+
* }
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
cellCommit: import('@angular/core').OutputEmitterRef<CellCommitEvent<unknown, unknown>>;
|
|
113
|
+
/**
|
|
114
|
+
* Emitted when a row's values are committed (bulk/row editing).
|
|
115
|
+
* Provides the row data and change tracking information.
|
|
116
|
+
*
|
|
117
|
+
* @example
|
|
118
|
+
* ```html
|
|
119
|
+
* <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
rowCommit: import('@angular/core').OutputEmitterRef<RowCommitEvent<unknown>>;
|
|
61
123
|
ngOnInit(): void;
|
|
62
124
|
ngAfterContentInit(): void;
|
|
63
125
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAOhB,SAAS,EACT,MAAM,
|
|
1
|
+
{"version":3,"file":"grid.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAOhB,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAKvB;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IAC/D,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,OAAO;IAC5C,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,YAAW,MAAM,EAAE,gBAAgB,EAAE,SAAS;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAAmC;IAClD,OAAO,CAAC,kBAAkB,CAAqC;IAC/D,OAAO,CAAC,iBAAiB,CAAqC;IAE9D;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,0DAAmB;IAE/B;;;;;;;;;;;;;;OAcG;IACH,UAAU,8EAA6B;IAEvC;;;;;;;;OAQG;IACH,SAAS,oEAA4B;IAErC,QAAQ,IAAI,IAAI;IAyBhB,kBAAkB,IAAI,IAAI;IAwB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IA4C7B,WAAW,IAAI,IAAI;CAyBpB"}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { OnDestroy, TemplateRef } from '@angular/core';
|
|
2
|
+
/**
|
|
3
|
+
* Context type for structural directives with `any` defaults.
|
|
4
|
+
* This provides better ergonomics in templates without requiring explicit type annotations.
|
|
5
|
+
*
|
|
6
|
+
* @internal Use `GridCellContext` in application code for stricter typing.
|
|
7
|
+
*/
|
|
8
|
+
export interface StructuralCellContext<TValue = any, TRow = any> {
|
|
9
|
+
/** The cell value for this column */
|
|
10
|
+
$implicit: TValue;
|
|
11
|
+
/** The cell value (explicit binding) */
|
|
12
|
+
value: TValue;
|
|
13
|
+
/** The full row data object */
|
|
14
|
+
row: TRow;
|
|
15
|
+
/** The column configuration */
|
|
16
|
+
column: any;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Context type for structural editor directives with `any` defaults.
|
|
20
|
+
* This provides better ergonomics in templates without requiring explicit type annotations.
|
|
21
|
+
*
|
|
22
|
+
* @internal Use `GridEditorContext` in application code for stricter typing.
|
|
23
|
+
*/
|
|
24
|
+
export interface StructuralEditorContext<TValue = any, TRow = any> {
|
|
25
|
+
/** The cell value for this column */
|
|
26
|
+
$implicit: TValue;
|
|
27
|
+
/** The cell value (explicit binding) */
|
|
28
|
+
value: TValue;
|
|
29
|
+
/** The full row data object */
|
|
30
|
+
row: TRow;
|
|
31
|
+
/** The column configuration */
|
|
32
|
+
column: any;
|
|
33
|
+
/**
|
|
34
|
+
* Callback function to commit the edited value.
|
|
35
|
+
*/
|
|
36
|
+
onCommit: (value: TValue) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Callback function to cancel editing.
|
|
39
|
+
*/
|
|
40
|
+
onCancel: () => void;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Gets the view template registered by the structural directive for a given column element.
|
|
44
|
+
* Falls back to the non-structural directive registry.
|
|
45
|
+
*/
|
|
46
|
+
export declare function getStructuralViewTemplate(columnElement: HTMLElement): TemplateRef<StructuralCellContext> | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Gets the editor template registered by the structural directive for a given column element.
|
|
49
|
+
* Falls back to the non-structural directive registry.
|
|
50
|
+
*/
|
|
51
|
+
export declare function getStructuralEditorTemplate(columnElement: HTMLElement): TemplateRef<StructuralEditorContext> | undefined;
|
|
52
|
+
/**
|
|
53
|
+
* Structural directive for cell view rendering.
|
|
54
|
+
*
|
|
55
|
+
* This provides a cleaner syntax for defining custom cell renderers without
|
|
56
|
+
* the nested `<tbw-grid-column-view>` and `<ng-template>` boilerplate.
|
|
57
|
+
*
|
|
58
|
+
* ## Usage
|
|
59
|
+
*
|
|
60
|
+
* ```html
|
|
61
|
+
* <!-- Instead of this verbose syntax: -->
|
|
62
|
+
* <tbw-grid-column field="status">
|
|
63
|
+
* <tbw-grid-column-view>
|
|
64
|
+
* <ng-template let-value let-row="row">
|
|
65
|
+
* <app-status-badge [value]="value" />
|
|
66
|
+
* </ng-template>
|
|
67
|
+
* </tbw-grid-column-view>
|
|
68
|
+
* </tbw-grid-column>
|
|
69
|
+
*
|
|
70
|
+
* <!-- Use this cleaner syntax: -->
|
|
71
|
+
* <tbw-grid-column field="status">
|
|
72
|
+
* <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
|
|
73
|
+
* </tbw-grid-column>
|
|
74
|
+
* ```
|
|
75
|
+
*
|
|
76
|
+
* ## Template Context
|
|
77
|
+
*
|
|
78
|
+
* The structural directive provides the same context as `GridColumnView`:
|
|
79
|
+
* - `$implicit` / `value`: The cell value (use `let value` or `let-value`)
|
|
80
|
+
* - `row`: The full row data object (use `row as row` or `let-row="row"`)
|
|
81
|
+
* - `column`: The column configuration
|
|
82
|
+
*
|
|
83
|
+
* ## Import
|
|
84
|
+
*
|
|
85
|
+
* ```typescript
|
|
86
|
+
* import { TbwRenderer } from '@toolbox-web/grid-angular';
|
|
87
|
+
*
|
|
88
|
+
* @Component({
|
|
89
|
+
* imports: [TbwRenderer],
|
|
90
|
+
* // ...
|
|
91
|
+
* })
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export declare class TbwRenderer implements OnDestroy {
|
|
95
|
+
private template;
|
|
96
|
+
private elementRef;
|
|
97
|
+
private columnElement;
|
|
98
|
+
constructor();
|
|
99
|
+
private registerTemplate;
|
|
100
|
+
ngOnDestroy(): void;
|
|
101
|
+
/**
|
|
102
|
+
* Static type guard for template context.
|
|
103
|
+
* Uses `any` defaults for ergonomic template usage.
|
|
104
|
+
*/
|
|
105
|
+
static ngTemplateContextGuard(dir: TbwRenderer, ctx: unknown): ctx is StructuralCellContext;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Structural directive for cell editor rendering.
|
|
109
|
+
*
|
|
110
|
+
* This provides a cleaner syntax for defining custom cell editors without
|
|
111
|
+
* the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
|
|
112
|
+
*
|
|
113
|
+
* ## Usage
|
|
114
|
+
*
|
|
115
|
+
* ```html
|
|
116
|
+
* <!-- Instead of this verbose syntax: -->
|
|
117
|
+
* <tbw-grid-column field="status">
|
|
118
|
+
* <tbw-grid-column-editor>
|
|
119
|
+
* <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
|
|
120
|
+
* <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
|
|
121
|
+
* </ng-template>
|
|
122
|
+
* </tbw-grid-column-editor>
|
|
123
|
+
* </tbw-grid-column>
|
|
124
|
+
*
|
|
125
|
+
* <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
|
|
126
|
+
* <tbw-grid-column field="status">
|
|
127
|
+
* <app-status-editor *tbwEditor="let value" [value]="value" />
|
|
128
|
+
* </tbw-grid-column>
|
|
129
|
+
* ```
|
|
130
|
+
*
|
|
131
|
+
* ## Template Context
|
|
132
|
+
*
|
|
133
|
+
* The structural directive provides the same context as `GridColumnEditor`:
|
|
134
|
+
* - `$implicit` / `value`: The cell value
|
|
135
|
+
* - `row`: The full row data object
|
|
136
|
+
* - `column`: The column configuration
|
|
137
|
+
* - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
|
|
138
|
+
* - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
|
|
139
|
+
*
|
|
140
|
+
* ## Import
|
|
141
|
+
*
|
|
142
|
+
* ```typescript
|
|
143
|
+
* import { TbwEditor } from '@toolbox-web/grid-angular';
|
|
144
|
+
*
|
|
145
|
+
* @Component({
|
|
146
|
+
* imports: [TbwEditor],
|
|
147
|
+
* // ...
|
|
148
|
+
* })
|
|
149
|
+
* ```
|
|
150
|
+
*/
|
|
151
|
+
export declare class TbwEditor implements OnDestroy {
|
|
152
|
+
private template;
|
|
153
|
+
private elementRef;
|
|
154
|
+
private columnElement;
|
|
155
|
+
constructor();
|
|
156
|
+
private registerTemplate;
|
|
157
|
+
ngOnDestroy(): void;
|
|
158
|
+
/**
|
|
159
|
+
* Static type guard for template context.
|
|
160
|
+
* Uses `any` defaults for ergonomic template usage.
|
|
161
|
+
*/
|
|
162
|
+
static ngTemplateContextGuard(dir: TbwEditor, ctx: unknown): ctx is StructuralEditorContext;
|
|
163
|
+
}
|
|
164
|
+
//# sourceMappingURL=structural-directives.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"structural-directives.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/structural-directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI9F;;;;;GAKG;AAEH,MAAM,WAAW,qBAAqB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC7D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;CACb;AAED;;;;;GAKG;AAEH,MAAM,WAAW,uBAAuB,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG;IAC/D,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,GAAG,EAAE,IAAI,CAAC;IACV,+BAA+B;IAE/B,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,aAAa,EAAE,WAAW,GAAG,WAAW,CAAC,qBAAqB,CAAC,GAAG,SAAS,CAWpH;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,WAAW,GACzB,WAAW,CAAC,uBAAuB,CAAC,GAAG,SAAS,CAWlD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,WAAY,YAAW,SAAS;IAC3C,OAAO,CAAC,QAAQ,CAA8C;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAWjD,OAAO,CAAC,gBAAgB;IAcxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,qBAAqB;CAG5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,SAAU,YAAW,SAAS;IACzC,OAAO,CAAC,QAAQ,CAAgD;IAChE,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,aAAa,CAA4B;;IAQjD,OAAO,CAAC,gBAAgB;IAaxB,WAAW,IAAI,IAAI;IAMnB;;;OAGG;IACH,MAAM,CAAC,sBAAsB,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,uBAAuB;CAG5F"}
|
package/package.json
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@toolbox-web/grid-angular",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Angular adapter for @toolbox-web/grid data grid component",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"module": "./dist/index.js",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
"./package.json": "./package.json",
|
|
11
|
-
".": {
|
|
12
|
-
"types": "./dist/index.d.ts",
|
|
13
|
-
"import": "./dist/index.js",
|
|
14
|
-
"default": "./dist/index.js"
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
"keywords": [
|
|
18
|
-
"angular",
|
|
19
|
-
"data-grid",
|
|
20
|
-
"web-component",
|
|
21
|
-
"toolbox-web"
|
|
22
|
-
],
|
|
23
|
-
"license": "MIT",
|
|
24
|
-
"author": "Oystein Amundsen",
|
|
25
|
-
"repository": {
|
|
26
|
-
"type": "git",
|
|
27
|
-
"url": "https://github.com/OysteinAmundsen/toolbox.git",
|
|
28
|
-
"directory": "libs/grid-angular"
|
|
29
|
-
},
|
|
30
|
-
"homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid-angular#readme",
|
|
31
|
-
"bugs": {
|
|
32
|
-
"url": "https://github.com/OysteinAmundsen/toolbox/issues"
|
|
33
|
-
},
|
|
34
|
-
"publishConfig": {
|
|
35
|
-
"access": "public"
|
|
36
|
-
},
|
|
37
|
-
"dependencies": {},
|
|
38
|
-
"devDependencies": {
|
|
39
|
-
"@angular/common": "^21.0.0",
|
|
40
|
-
"@angular/compiler": "^21.0.0",
|
|
41
|
-
"@angular/core": "^21.0.0",
|
|
42
|
-
"@angular/forms": "^21.0.0",
|
|
43
|
-
"@angular/platform-browser": "^21.0.0",
|
|
44
|
-
"@angular/build": "^21.0.4",
|
|
45
|
-
"@angular/cli": "^21.0.4",
|
|
46
|
-
"@angular/compiler-cli": "^21.0.0",
|
|
47
|
-
"@toolbox-web/grid": ">=0.2.0"
|
|
48
|
-
},
|
|
49
|
-
"peerDependencies": {
|
|
50
|
-
"@angular/core": ">=17.0.0",
|
|
51
|
-
"@toolbox-web/grid": ">=0.2.0"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@toolbox-web/grid-angular",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Angular adapter for @toolbox-web/grid data grid component",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
"./package.json": "./package.json",
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"default": "./dist/index.js"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"keywords": [
|
|
18
|
+
"angular",
|
|
19
|
+
"data-grid",
|
|
20
|
+
"web-component",
|
|
21
|
+
"toolbox-web"
|
|
22
|
+
],
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"author": "Oystein Amundsen",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "https://github.com/OysteinAmundsen/toolbox.git",
|
|
28
|
+
"directory": "libs/grid-angular"
|
|
29
|
+
},
|
|
30
|
+
"homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid-angular#readme",
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/OysteinAmundsen/toolbox/issues"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@angular/common": "^21.0.0",
|
|
40
|
+
"@angular/compiler": "^21.0.0",
|
|
41
|
+
"@angular/core": "^21.0.0",
|
|
42
|
+
"@angular/forms": "^21.0.0",
|
|
43
|
+
"@angular/platform-browser": "^21.0.0",
|
|
44
|
+
"@angular/build": "^21.0.4",
|
|
45
|
+
"@angular/cli": "^21.0.4",
|
|
46
|
+
"@angular/compiler-cli": "^21.0.0",
|
|
47
|
+
"@toolbox-web/grid": ">=0.2.0"
|
|
48
|
+
},
|
|
49
|
+
"peerDependencies": {
|
|
50
|
+
"@angular/core": ">=17.0.0",
|
|
51
|
+
"@toolbox-web/grid": ">=0.2.0"
|
|
52
|
+
}
|
|
53
|
+
}
|
package/lib/grid-angular.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid-angular.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/grid-angular.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,IAAI,MAAM,CAEpC"}
|