@skyux/ag-grid 5.5.0 → 5.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-ag-grid.umd.js +1683 -1674
- package/documentation.json +48 -67
- package/esm2015/lib/modules/ag-grid/ag-grid-adapter.service.js +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid-adapter.service.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.js +4 -4
- package/esm2015/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid-row-delete.directive.js +5 -5
- package/esm2015/lib/modules/ag-grid/ag-grid-row-delete.directive.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid-wrapper.component.js +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid-wrapper.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid.module.js +8 -8
- package/esm2015/lib/modules/ag-grid/ag-grid.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/ag-grid.service.js +7 -7
- package/esm2015/lib/modules/ag-grid/ag-grid.service.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.module.js +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.module.js +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.module.js +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.module.js +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.component.js +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator.module.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/types/cell-editor-lookup-params.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/types/cell-renderer-lookup-params.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/types/cell-renderer-validator-params.js.map +1 -1
- package/esm2015/lib/modules/ag-grid/types/cell-type.js +13 -4
- package/esm2015/lib/modules/ag-grid/types/cell-type.js.map +1 -1
- package/esm2015/lib/modules/shared/ag-grid-resources.module.js +1 -1
- package/esm2015/lib/modules/shared/ag-grid-resources.module.js.map +1 -1
- package/fesm2015/skyux-ag-grid.js +1158 -1149
- package/fesm2015/skyux-ag-grid.js.map +1 -1
- package/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.d.ts +1 -1
- package/lib/modules/ag-grid/ag-grid.service.d.ts +2 -2
- package/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.d.ts +1 -1
- package/lib/modules/ag-grid/types/cell-type.d.ts +13 -4
- package/package.json +22 -19
package/documentation.json
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"kindString": "Enumeration",
|
|
21
21
|
"flags": {},
|
|
22
22
|
"comment": {
|
|
23
|
-
"shortText": "These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/
|
|
23
|
+
"shortText": "These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) to one of the following values.\n<br/>\nAny [SKY UX component](https://developer.blackbaud.com/skyux/components) can be made into a [cell editor](https://www.ag-grid.com/javascript-grid-cell-editor/) or [cell renderer](https://www.ag-grid.com/javascript-grid-cell-rendering-components/) component. If you would like to use a component that does not have a column definition yet, please consider [contributing it](https://developer.blackbaud.com/skyux/contribute/contribution-process) to the SKY UX data entry grid module, or [file an issue](https://developer.blackbaud.com/skyux/contribute/contribution-process/file-issue) in the [`@skyux/ag-grid` repo](https://github.com/blackbaud/skyux-ag-grid)."
|
|
24
24
|
},
|
|
25
25
|
"children": [
|
|
26
26
|
{
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"kindString": "Enumeration member",
|
|
31
31
|
"flags": {},
|
|
32
32
|
"comment": {
|
|
33
|
-
"shortText": "**Edit mode**\n<br/>\nSpecifies that cells in the column will be edited as [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing
|
|
33
|
+
"shortText": "**Edit mode**\n<br/>\nSpecifies that cells in the column will be edited as [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing `SkyCellEditorAutocompleteParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.\n<br/><br/>\n**Read-only mode**\n<br/>\nSpecifies that cells the column will display the currently selected value's name property by default. If the autocomplete needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition."
|
|
34
34
|
},
|
|
35
35
|
"sources": [
|
|
36
36
|
{
|
|
37
|
-
"fileName": "
|
|
37
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
38
38
|
"line": 16,
|
|
39
39
|
"character": 2
|
|
40
40
|
}
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"sources": [
|
|
54
54
|
{
|
|
55
|
-
"fileName": "
|
|
55
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
56
56
|
"line": 26,
|
|
57
57
|
"character": 2
|
|
58
58
|
}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
},
|
|
71
71
|
"sources": [
|
|
72
72
|
{
|
|
73
|
-
"fileName": "
|
|
73
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
74
74
|
"line": 32,
|
|
75
75
|
"character": 2
|
|
76
76
|
}
|
|
@@ -84,11 +84,11 @@
|
|
|
84
84
|
"kindString": "Enumeration member",
|
|
85
85
|
"flags": {},
|
|
86
86
|
"comment": {
|
|
87
|
-
"shortText": "**Edit mode**\n<br/>\nSpecifies that cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing
|
|
87
|
+
"shortText": "**Edit mode**\n<br/>\nSpecifies that cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing `SkyCellEditorDatepickerParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.\n<br/><br/>\n**Read-only mode**\n<br/>\nSpecifies that cells in the column will display the currently selected date formatted as `MM-DD-YYYY`, or the date format of the locale passed to `getGridOptions()`. If you would like to overwrite this format, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition. See the demo for an example."
|
|
88
88
|
},
|
|
89
89
|
"sources": [
|
|
90
90
|
{
|
|
91
|
-
"fileName": "
|
|
91
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
92
92
|
"line": 42,
|
|
93
93
|
"character": 2
|
|
94
94
|
}
|
|
@@ -101,10 +101,13 @@
|
|
|
101
101
|
"kind": 16,
|
|
102
102
|
"kindString": "Enumeration member",
|
|
103
103
|
"flags": {},
|
|
104
|
+
"comment": {
|
|
105
|
+
"shortText": "**Edit mode**\n<br/>\nSpecifies that cells in the column will be edited as [SKY UX lookup components](https://developer.blackbaud.com/skyux-v5/components/lookup). You can set any of the lookup component's properties by passing `SkyCellEditorLookupParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.\n<br/><br/>\n**Read-only mode**\n<br/>\nSpecifies that cells the column will display, by default, either: the name(s) of the selected value(s) if there are less than 6, or a summary count of the values if there are more than 5. If the lookup needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition."
|
|
106
|
+
},
|
|
104
107
|
"sources": [
|
|
105
108
|
{
|
|
106
|
-
"fileName": "
|
|
107
|
-
"line":
|
|
109
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
110
|
+
"line": 52,
|
|
108
111
|
"character": 2
|
|
109
112
|
}
|
|
110
113
|
],
|
|
@@ -121,8 +124,8 @@
|
|
|
121
124
|
},
|
|
122
125
|
"sources": [
|
|
123
126
|
{
|
|
124
|
-
"fileName": "
|
|
125
|
-
"line":
|
|
127
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
128
|
+
"line": 62,
|
|
126
129
|
"character": 2
|
|
127
130
|
}
|
|
128
131
|
],
|
|
@@ -139,8 +142,8 @@
|
|
|
139
142
|
},
|
|
140
143
|
"sources": [
|
|
141
144
|
{
|
|
142
|
-
"fileName": "
|
|
143
|
-
"line":
|
|
145
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
146
|
+
"line": 68,
|
|
144
147
|
"character": 2
|
|
145
148
|
}
|
|
146
149
|
],
|
|
@@ -157,8 +160,8 @@
|
|
|
157
160
|
},
|
|
158
161
|
"sources": [
|
|
159
162
|
{
|
|
160
|
-
"fileName": "
|
|
161
|
-
"line":
|
|
163
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
164
|
+
"line": 74,
|
|
162
165
|
"character": 2
|
|
163
166
|
}
|
|
164
167
|
],
|
|
@@ -175,8 +178,8 @@
|
|
|
175
178
|
},
|
|
176
179
|
"sources": [
|
|
177
180
|
{
|
|
178
|
-
"fileName": "
|
|
179
|
-
"line":
|
|
181
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
182
|
+
"line": 84,
|
|
180
183
|
"character": 2
|
|
181
184
|
}
|
|
182
185
|
],
|
|
@@ -189,12 +192,12 @@
|
|
|
189
192
|
"kindString": "Enumeration member",
|
|
190
193
|
"flags": {},
|
|
191
194
|
"comment": {
|
|
192
|
-
"shortText": "**Edit and read-only modes**\n<br/>\nSpecifies cell in the column will be passed to a validator function which flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/
|
|
195
|
+
"shortText": "**Edit and read-only modes**\n<br/>\nSpecifies cell in the column will be passed to a validator function which flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing)."
|
|
193
196
|
},
|
|
194
197
|
"sources": [
|
|
195
198
|
{
|
|
196
|
-
"fileName": "
|
|
197
|
-
"line":
|
|
199
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
200
|
+
"line": 90,
|
|
198
201
|
"character": 2
|
|
199
202
|
}
|
|
200
203
|
],
|
|
@@ -221,7 +224,7 @@
|
|
|
221
224
|
],
|
|
222
225
|
"sources": [
|
|
223
226
|
{
|
|
224
|
-
"fileName": "
|
|
227
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/cell-type.ts",
|
|
225
228
|
"line": 6,
|
|
226
229
|
"character": 12
|
|
227
230
|
}
|
|
@@ -247,29 +250,7 @@
|
|
|
247
250
|
}
|
|
248
251
|
}
|
|
249
252
|
],
|
|
250
|
-
"children": [
|
|
251
|
-
{
|
|
252
|
-
"id": 470,
|
|
253
|
-
"name": "constructor",
|
|
254
|
-
"kind": 512,
|
|
255
|
-
"kindString": "Constructor",
|
|
256
|
-
"flags": {},
|
|
257
|
-
"signatures": [
|
|
258
|
-
{
|
|
259
|
-
"id": 471,
|
|
260
|
-
"name": "new SkyAgGridModule",
|
|
261
|
-
"kind": 16384,
|
|
262
|
-
"kindString": "Constructor signature",
|
|
263
|
-
"flags": {},
|
|
264
|
-
"type": {
|
|
265
|
-
"type": "reference",
|
|
266
|
-
"id": 469,
|
|
267
|
-
"name": "SkyAgGridModule"
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
]
|
|
271
|
-
}
|
|
272
|
-
],
|
|
253
|
+
"children": [],
|
|
273
254
|
"groups": [
|
|
274
255
|
{
|
|
275
256
|
"title": "Constructors",
|
|
@@ -281,8 +262,8 @@
|
|
|
281
262
|
],
|
|
282
263
|
"sources": [
|
|
283
264
|
{
|
|
284
|
-
"fileName": "
|
|
285
|
-
"line":
|
|
265
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.module.ts",
|
|
266
|
+
"line": 78,
|
|
286
267
|
"character": 13
|
|
287
268
|
}
|
|
288
269
|
]
|
|
@@ -319,8 +300,8 @@
|
|
|
319
300
|
"flags": {},
|
|
320
301
|
"sources": [
|
|
321
302
|
{
|
|
322
|
-
"fileName": "
|
|
323
|
-
"line":
|
|
303
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
304
|
+
"line": 128,
|
|
324
305
|
"character": 2
|
|
325
306
|
}
|
|
326
307
|
],
|
|
@@ -412,8 +393,8 @@
|
|
|
412
393
|
},
|
|
413
394
|
"sources": [
|
|
414
395
|
{
|
|
415
|
-
"fileName": "
|
|
416
|
-
"line":
|
|
396
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
397
|
+
"line": 169,
|
|
417
398
|
"character": 9
|
|
418
399
|
}
|
|
419
400
|
],
|
|
@@ -462,8 +443,8 @@
|
|
|
462
443
|
},
|
|
463
444
|
"sources": [
|
|
464
445
|
{
|
|
465
|
-
"fileName": "
|
|
466
|
-
"line":
|
|
446
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
447
|
+
"line": 154,
|
|
467
448
|
"character": 9
|
|
468
449
|
}
|
|
469
450
|
],
|
|
@@ -512,8 +493,8 @@
|
|
|
512
493
|
},
|
|
513
494
|
"sources": [
|
|
514
495
|
{
|
|
515
|
-
"fileName": "
|
|
516
|
-
"line":
|
|
496
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
497
|
+
"line": 144,
|
|
517
498
|
"character": 9
|
|
518
499
|
}
|
|
519
500
|
],
|
|
@@ -560,8 +541,8 @@
|
|
|
560
541
|
],
|
|
561
542
|
"sources": [
|
|
562
543
|
{
|
|
563
|
-
"fileName": "
|
|
564
|
-
"line":
|
|
544
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
545
|
+
"line": 121,
|
|
565
546
|
"character": 13
|
|
566
547
|
}
|
|
567
548
|
],
|
|
@@ -592,7 +573,7 @@
|
|
|
592
573
|
},
|
|
593
574
|
"sources": [
|
|
594
575
|
{
|
|
595
|
-
"fileName": "
|
|
576
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
|
|
596
577
|
"line": 7,
|
|
597
578
|
"character": 2
|
|
598
579
|
}
|
|
@@ -617,7 +598,7 @@
|
|
|
617
598
|
},
|
|
618
599
|
"sources": [
|
|
619
600
|
{
|
|
620
|
-
"fileName": "
|
|
601
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
|
|
621
602
|
"line": 11,
|
|
622
603
|
"character": 2
|
|
623
604
|
}
|
|
@@ -640,7 +621,7 @@
|
|
|
640
621
|
],
|
|
641
622
|
"sources": [
|
|
642
623
|
{
|
|
643
|
-
"fileName": "
|
|
624
|
+
"fileName": "projects/ag-grid/src/modules/ag-grid/types/sky-grid-options.ts",
|
|
644
625
|
"line": 3,
|
|
645
626
|
"character": 17
|
|
646
627
|
}
|
|
@@ -708,7 +689,7 @@
|
|
|
708
689
|
{
|
|
709
690
|
"fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
710
691
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
711
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ICellEditorParams,\n NewValueParams,\n RowNode,\n} from 'ag-grid-community';\n\nimport {\n
|
|
692
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ICellEditorParams,\n NewValueParams,\n RowNode,\n} from 'ag-grid-community';\n\nimport {\n SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo-edit-modal',\n templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n public columnDefs: ColDef[];\n private gridApi: GridApi | undefined;\n public gridData: SkyAgGridDemoRow[];\n public gridOptions: GridOptions;\n\n constructor(\n private agGridService: SkyAgGridService,\n public context: SkyDataEntryGridEditModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n this.columnDefs = [\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 100,\n editable: true,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyDatepickerProperties } => {\n return { skyComponentProperties: { minDate: params.data.startDate } };\n },\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n return {\n skyComponentProperties: {\n data: SKY_DEPARTMENTS,\n selectionChange: (\n change: SkyAutocompleteSelectionChange\n ): void => {\n this.departmentSelectionChange(change, params.node);\n },\n },\n };\n },\n onCellValueChanged: (event: NewValueParams): void => {\n if (event.newValue !== event.oldValue) {\n this.clearJobTitle(event.node);\n }\n },\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getEditableGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n private departmentSelectionChange(\n change: SkyAutocompleteSelectionChange,\n node: RowNode\n ): void {\n if (change.selectedItem && change.selectedItem !== node.data.department) {\n this.clearJobTitle(node);\n }\n }\n\n private clearJobTitle(node: RowNode | null): void {\n if (node) {\n node.data.jobTitle = undefined;\n this.changeDetector.markForCheck();\n if (this.gridApi) {\n this.gridApi.refreshCells({ rowNodes: [node] });\n }\n }\n }\n}\n"
|
|
712
693
|
},
|
|
713
694
|
{
|
|
714
695
|
"fileName": "data-entry-grid-docs-demo.component.html",
|
|
@@ -718,7 +699,7 @@
|
|
|
718
699
|
{
|
|
719
700
|
"fileName": "data-entry-grid-docs-demo.component.ts",
|
|
720
701
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
|
|
721
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {
|
|
702
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo',\n templateUrl: './data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private modalService: SkyModalService,\n private changeDetection: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetection.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetection.markForCheck();\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n });\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(searchText);\n const displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
722
703
|
},
|
|
723
704
|
{
|
|
724
705
|
"fileName": "data-entry-grid-docs-demo.module.ts",
|
|
@@ -753,7 +734,7 @@
|
|
|
753
734
|
{
|
|
754
735
|
"fileName": "data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
755
736
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
756
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n CellValueChangedEvent,\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ICellEditorParams,\n NewValueParams,\n RowNode,\n} from 'ag-grid-community';\n\nimport {\n
|
|
737
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n CellValueChangedEvent,\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ICellEditorParams,\n NewValueParams,\n RowNode,\n} from 'ag-grid-community';\n\nimport {\n SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\n public columnDefs: ColDef[];\n private gridApi: GridApi | undefined;\n public gridData: SkyAgGridDemoRow[];\n public gridOptions: GridOptions;\n\n constructor(\n private agGridService: SkyAgGridService,\n public context: SkyDataEntryGridEditModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n this.columnDefs = [\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 100,\n editable: true,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyDatepickerProperties } => {\n return { skyComponentProperties: { minDate: params.data.startDate } };\n },\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n return {\n skyComponentProperties: {\n data: SKY_DEPARTMENTS,\n selectionChange: (\n change: SkyAutocompleteSelectionChange\n ): void => {\n this.departmentSelectionChange(change, params.node);\n },\n },\n };\n },\n onCellValueChanged: (event: NewValueParams): void => {\n if (event.newValue !== event.oldValue) {\n this.clearJobTitle(event.node);\n }\n },\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getEditableGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n private departmentSelectionChange(\n change: SkyAutocompleteSelectionChange,\n node: RowNode\n ): void {\n if (change.selectedItem && change.selectedItem !== node.data.department) {\n this.clearJobTitle(node);\n }\n }\n\n private clearJobTitle(node: RowNode | null): void {\n if (node) {\n node.data.jobTitle = undefined;\n if (this.gridApi) {\n this.gridApi.refreshCells({ rowNodes: [node] });\n }\n }\n this.changeDetector.markForCheck();\n }\n}\n"
|
|
757
738
|
},
|
|
758
739
|
{
|
|
759
740
|
"fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.html",
|
|
@@ -773,7 +754,7 @@
|
|
|
773
754
|
{
|
|
774
755
|
"fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
|
|
775
756
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
|
|
776
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n
|
|
757
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n implements OnInit\n{\n @Input()\n public set items(value: any[]) {\n this._items = value;\n this.changeDetector.markForCheck();\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n }\n\n public viewId = 'dataEntryGridWithDataManagerView';\n\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public dataState = new SkyDataManagerState({});\n\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate: string;\n public isActive = false;\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Data Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'selected',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n {\n id: 'validationCurrency',\n label: 'Validation currency',\n description: 'An example column for currency validation.',\n },\n {\n id: 'validationDate',\n label: 'Validation date',\n description: 'An example column for date validation.',\n },\n ],\n };\n\n private _items: any[] = [];\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n }\n\n public ngOnInit(): void {\n this.displayedItems = this._items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n if (this.displayedItems.length > 0) {\n this.gridApi?.hideOverlay();\n } else {\n this.gridApi?.showNoRowsOverlay();\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n const viewState = this.dataState.getViewStateById(this.viewId);\n const visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n const col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n const col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateData();\n }\n }\n\n public sortItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n this.columnApi.applyColumnState({\n state: [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ],\n });\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n\n return false;\n });\n }\n\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideSales && item.department.name !== 'Sales') ||\n !filters.hideSales) &&\n ((filters.jobTitle !== 'any' &&\n item.jobTitle?.name === filters.jobTitle) ||\n !filters.jobTitle ||\n filters.jobTitle === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
777
758
|
},
|
|
778
759
|
{
|
|
779
760
|
"fileName": "data-manager-data-entry-grid-docs-demo.component.html",
|
|
@@ -783,12 +764,12 @@
|
|
|
783
764
|
{
|
|
784
765
|
"fileName": "data-manager-data-entry-grid-docs-demo.component.ts",
|
|
785
766
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.ts",
|
|
786
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\
|
|
767
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataEntryGridDocsDemoViewGridComponent } from './data-manager-data-entry-grid-docs-demo-view-grid.component';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo',\n templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n public items = SKY_AG_GRID_DEMO_DATA;\n\n public activeViewId = 'dataEntryGridWithDataManagerView';\n\n public dataState = new SkyDataManagerState({});\n\n public dataManagerConfig = {\n filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A - Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z - A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: false,\n filters: {\n hideSales: false,\n },\n },\n views: [\n {\n viewId: 'dataEntryGridWithDataManagerView',\n displayedColumnIds: [\n 'selected',\n 'name',\n 'age',\n 'startDate',\n 'endDate',\n 'department',\n 'jobTitle',\n 'validationCurrency',\n 'validationDate',\n ],\n },\n ],\n });\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService,\n private modalService: SkyModalService\n ) {\n this.dataManagerService\n .getDataStateUpdates('dataEntryGridDataManager')\n .subscribe((state) => {\n this.dataState = state;\n this.changeDetector.detectChanges();\n });\n this.dataManagerService\n .getActiveViewIdUpdates()\n .subscribe((activeViewId) => {\n this.activeViewId = activeViewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public ngOnInit(): void {\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.items.slice();\n this.changeDetector.markForCheck();\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataManagerDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.items = result.data;\n alert('Saving data!');\n }\n this.changeDetector.markForCheck();\n });\n }\n}\n"
|
|
787
768
|
},
|
|
788
769
|
{
|
|
789
770
|
"fileName": "data-manager-data-entry-grid-docs-demo.module.ts",
|
|
790
771
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.module.ts",
|
|
791
|
-
"rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\nimport {
|
|
772
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataEntryGridDocsDemoViewGridComponent } from './data-manager-data-entry-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerDataEntryGridDemoComponent } from './data-manager-data-entry-grid-docs-demo.component';\n\n@NgModule({\n declarations: [\n SkyDataManagerDataEntryGridContextMenuComponent,\n SkyDataManagerDataEntryGridDemoComponent,\n SkyDataManagerDataEntryGridEditModalComponent,\n DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n DataManagerDataEntryGridDocsDemoViewGridComponent,\n ],\n imports: [\n AgGridModule.withComponents([\n SkyDataManagerDataEntryGridContextMenuComponent,\n ]),\n CommonModule,\n FormsModule,\n SkyToolbarModule,\n SkySearchModule,\n AgGridModule,\n SkyAgGridModule,\n SkyModalModule,\n SkyDropdownModule,\n SkyDataManagerModule,\n SkyCheckboxModule,\n ],\n exports: [SkyDataManagerDataEntryGridDemoComponent],\n entryComponents: [\n SkyDataManagerDataEntryGridEditModalComponent,\n DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n ],\n})\nexport class SkyDataManagerDataEntryGridDocsDemoModule {}\n"
|
|
792
773
|
},
|
|
793
774
|
{
|
|
794
775
|
"fileName": "basic-data-grid-docs-demo-data.ts",
|
|
@@ -803,7 +784,7 @@
|
|
|
803
784
|
{
|
|
804
785
|
"fileName": "basic-data-grid-docs-demo.component.ts",
|
|
805
786
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
|
|
806
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {
|
|
787
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-data-grid-docs-demo',\n templateUrl: './basic-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(searchText);\n const displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
807
788
|
},
|
|
808
789
|
{
|
|
809
790
|
"fileName": "basic-data-grid-docs-demo.module.ts",
|
|
@@ -833,7 +814,7 @@
|
|
|
833
814
|
{
|
|
834
815
|
"fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
|
|
835
816
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-view-grid.component.ts",
|
|
836
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n
|
|
817
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n @Input()\n public items: any[] = [];\n\n public viewId = 'dataGridWithDataManagerView';\n\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public dataState = new SkyDataManagerState({});\n\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate: string;\n public isActive = false;\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Data Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'selected',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n ],\n };\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n if (this.displayedItems.length > 0) {\n this.gridApi?.hideOverlay();\n } else {\n this.gridApi?.showNoRowsOverlay();\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n const viewState = this.dataState.getViewStateById(this.viewId);\n const visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n const col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n const col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateData();\n }\n }\n\n public sortItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n this.columnApi.applyColumnState({\n state: [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ],\n });\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideSales && item.department.name !== 'Sales') ||\n !filters.hideSales) &&\n ((filters.jobTitle !== 'any' &&\n item.jobTitle?.name === filters.jobTitle) ||\n !filters.jobTitle ||\n filters.jobTitle === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
837
818
|
},
|
|
838
819
|
{
|
|
839
820
|
"fileName": "data-manager-data-grid-docs-demo.component.html",
|
|
@@ -38,7 +38,7 @@ export class SkyAgGridAdapterService {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
focusOnFocusableChildren(element) {
|
|
41
|
-
|
|
41
|
+
const focusableChildren = this.skyAdapterService.getFocusableChildren(element);
|
|
42
42
|
if (focusableChildren.length) {
|
|
43
43
|
focusableChildren[0].focus();
|
|
44
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ag-grid-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ag-grid-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;;;AAKpD,MAAM,OAAO,uBAAuB;IAClC,YAAoB,iBAAwC;QAAxC,sBAAiB,GAAjB,iBAAiB,CAAuB;IAAG,CAAC;IAEzD,2BAA2B,CAChC,OAAoB,EACpB,SAAiB;QAEjB,IAAI,OAAO,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;YACpD,OAAO,OAAO,CAAC;SAChB;aAAM,IAAI,OAAO,CAAC,aAAa,EAAE;YAChC,OAAO,IAAI,CAAC,2BAA2B,CAAC,OAAO,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC3E;IACH,CAAC;IAEM,qBAAqB,CAAC,QAAqB,EAAE,QAAgB;QAClE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,EAAE,CAAgB,CAAC;QAEtE,0BAA0B;QAC1B,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE,CAAC;SACjB;IACH,CAAC;IAEM,iBAAiB;QACtB,OAAO,QAAQ,CAAC,aAA4B,CAAC;IAC/C,CAAC;IAEM,uBAAuB,CAC5B,SAAsB,EACtB,QAAqB,EACrB,aAAuB;QAEvB,IAAI,QAAQ,EAAE;YACZ,MAAM,iBAAiB,GACrB,IAAI,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YACxD,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACjE,MAAM,SAAS,GAAG,aAAa;gBAC7B,CAAC,CAAC,mBAAmB,GAAG,CAAC;gBACzB,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC;YAE5B,IACE,CAAC,CAAC,aAAa,IAAI,iBAAiB,CAAC,MAAM,IAAI,SAAS,CAAC;gBACzD,CAAC,aAAa,IAAI,SAAS,IAAI,CAAC,CAAC,EACjC;gBACA,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC;aACrC;SACF;IACH,CAAC;IAEM,wBAAwB,CAAC,OAAoB;QAClD,MAAM,iBAAiB,GACrB,IAAI,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAEvD,IAAI,iBAAiB,CAAC,MAAM,EAAE;YAC5B,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC9B;IACH,CAAC;;qHAxDU,uBAAuB;yHAAvB,uBAAuB,cAFtB,MAAM;4FAEP,uBAAuB;kBAHnC,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB","sourcesContent":["import { Injectable } from '@angular/core';\nimport { SkyCoreAdapterService } from '@skyux/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class SkyAgGridAdapterService {\n constructor(private skyAdapterService: SkyCoreAdapterService) {}\n\n public getElementOrParentWithClass(\n element: HTMLElement,\n className: string\n ): HTMLElement | undefined {\n if (element && element.classList.contains(className)) {\n return element;\n } else if (element.parentElement) {\n return this.getElementOrParentWithClass(element.parentElement, className);\n }\n }\n\n public setFocusedElementById(parentEl: HTMLElement, selector: string): void {\n const element = parentEl.querySelector(`#${selector}`) as HTMLElement;\n\n /* istanbul ignore else */\n if (element) {\n element.focus();\n }\n }\n\n public getFocusedElement(): HTMLElement {\n return document.activeElement as HTMLElement;\n }\n\n public getNextFocusableElement(\n currentEl: HTMLElement,\n parentEl: HTMLElement,\n moveFocusLeft?: boolean\n ): HTMLElement | undefined {\n if (parentEl) {\n const focusableChildren =\n this.skyAdapterService.getFocusableChildren(parentEl);\n const currentElementIndex = focusableChildren.indexOf(currentEl);\n const nextIndex = moveFocusLeft\n ? currentElementIndex - 1\n : currentElementIndex + 1;\n\n if (\n (!moveFocusLeft && focusableChildren.length >= nextIndex) ||\n (moveFocusLeft && nextIndex >= 0)\n ) {\n return focusableChildren[nextIndex];\n }\n }\n }\n\n public focusOnFocusableChildren(element: HTMLElement): void {\n const focusableChildren =\n this.skyAdapterService.getFocusableChildren(element);\n\n if (focusableChildren.length) {\n focusableChildren[0].focus();\n }\n }\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ChangeDetectorRef, ContentChildren, Directive, Input, QueryList, } from '@angular/core';
|
|
2
|
-
import { Subject } from 'rxjs';
|
|
3
|
-
import { takeUntil, filter } from 'rxjs/operators';
|
|
4
|
-
import { AgGridAngular } from 'ag-grid-angular';
|
|
5
2
|
import { SkyDataManagerService, } from '@skyux/data-manager';
|
|
3
|
+
import { AgGridAngular } from 'ag-grid-angular';
|
|
4
|
+
import { Subject } from 'rxjs';
|
|
5
|
+
import { filter, takeUntil } from 'rxjs/operators';
|
|
6
6
|
import { SkyAgGridWrapperComponent } from './ag-grid-wrapper.component';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
import * as i1 from "@skyux/data-manager";
|
|
@@ -122,7 +122,7 @@ export class SkyAgGridDataManagerAdapterDirective {
|
|
|
122
122
|
.pipe(takeUntil(this.ngUnsubscribe))
|
|
123
123
|
.subscribe((event) => {
|
|
124
124
|
const row = event.node;
|
|
125
|
-
|
|
125
|
+
const selectedIds = this.currentDataState.selectedIds || [];
|
|
126
126
|
const rowIndex = selectedIds.indexOf(row.data.id);
|
|
127
127
|
if (row.isSelected() && rowIndex === -1) {
|
|
128
128
|
selectedIds.push(row.data.id);
|