@skyux/data-grid 15.2.0 → 15.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,6 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { OnInit, TemplateRef, Signal } from '@angular/core';
3
+ import { SkyDataColumnSource, SkyDataSelectionSource, SkyDataSortSource, SkyDataColumnOption } from '@skyux/lists';
3
4
  import { GridApi, GridOptions } from 'ag-grid-community';
4
5
 
5
6
  /**
@@ -14,6 +15,18 @@ interface SkyDataGridRowData {
14
15
  id: string;
15
16
  }
16
17
 
18
+ /**
19
+ * Information regarding a row whose deletion has been cancelled or confirmed.
20
+ * @preview
21
+ */
22
+ interface SkyDataGridRowDeleteArgs {
23
+ /**
24
+ * The ID of the row whose deletion has been cancelled or confirmed.
25
+ * @required
26
+ */
27
+ id: string;
28
+ }
29
+
17
30
  /**
18
31
  * Applies a sort to a `SkyDataGrid` and reflects updates when the grid's sort changes.
19
32
  * @preview
@@ -39,7 +52,9 @@ interface SkyDataGridSort {
39
52
  declare class SkyDataGridColumn implements OnInit {
40
53
  #private;
41
54
  /**
42
- * Whether the column is hidden.
55
+ * Whether the column is hidden. When the grid's `selectedColumnIds` is set,
56
+ * it determines which columns display instead. In a data manager's column
57
+ * picker, the column starts hidden and users can choose to display it.
43
58
  * @default false
44
59
  */
45
60
  readonly columnHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -54,6 +69,11 @@ declare class SkyDataGridColumn implements OnInit {
54
69
  * @default 'text'
55
70
  */
56
71
  readonly dataType: _angular_core.InputSignal<"number" | "boolean" | "text" | "date">;
72
+ /**
73
+ * The text to display beneath the column's `headingText` in a data
74
+ * manager's column picker.
75
+ */
76
+ readonly description: _angular_core.InputSignal<string | undefined>;
57
77
  /**
58
78
  * The property to retrieve cell information from an entry on the grid `data` array.
59
79
  * You must provide either the `columnId` or `field` property for every column,
@@ -100,7 +120,9 @@ declare class SkyDataGridColumn implements OnInit {
100
120
  /**
101
121
  * Whether the column is locked. The intent is to display locked columns first
102
122
  * on the left side of the grid. If set to `true`, then users cannot drag the column
103
- * to another position or drag other columns before it.
123
+ * to another position or drag other columns before it. In a data manager's
124
+ * column picker, a locked column always displays and is not offered as an
125
+ * option.
104
126
  * @default false
105
127
  */
106
128
  readonly locked: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -143,7 +165,7 @@ declare class SkyDataGridColumn implements OnInit {
143
165
  */
144
166
  protected readonly cellTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
145
167
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkyDataGridColumn, never>;
146
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkyDataGridColumn, "sky-data-grid-column", never, { "columnHidden": { "alias": "columnHidden"; "required": false; "isSignal": true; }; "columnId": { "alias": "columnId"; "required": false; "isSignal": true; }; "dataType": { "alias": "dataType"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "flexWidth": { "alias": "flexWidth"; "required": false; "isSignal": true; }; "headingText": { "alias": "headingText"; "required": true; "isSignal": true; }; "headingHidden": { "alias": "headingHidden"; "required": false; "isSignal": true; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; "isSignal": true; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; "isSignal": true; }; "helpKey": { "alias": "helpKey"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "wrapText": { "alias": "wrapText"; "required": false; "isSignal": true; }; }, {}, ["templateChild"], never, true, never>;
168
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkyDataGridColumn, "sky-data-grid-column", never, { "columnHidden": { "alias": "columnHidden"; "required": false; "isSignal": true; }; "columnId": { "alias": "columnId"; "required": false; "isSignal": true; }; "dataType": { "alias": "dataType"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "flexWidth": { "alias": "flexWidth"; "required": false; "isSignal": true; }; "headingText": { "alias": "headingText"; "required": true; "isSignal": true; }; "headingHidden": { "alias": "headingHidden"; "required": false; "isSignal": true; }; "helpPopoverTitle": { "alias": "helpPopoverTitle"; "required": false; "isSignal": true; }; "helpPopoverContent": { "alias": "helpPopoverContent"; "required": false; "isSignal": true; }; "helpKey": { "alias": "helpKey"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "wrapText": { "alias": "wrapText"; "required": false; "isSignal": true; }; }, {}, ["templateChild"], never, true, never>;
147
169
  }
148
170
 
149
171
  /**
@@ -151,7 +173,7 @@ declare class SkyDataGridColumn implements OnInit {
151
173
  * Provide the `data` array and one `sky-data-grid-column` for each column to render.
152
174
  * @preview
153
175
  */
154
- declare class SkyDataGrid {
176
+ declare class SkyDataGrid implements SkyDataColumnSource, SkyDataSelectionSource, SkyDataSortSource {
155
177
  #private;
156
178
  /**
157
179
  * Whether the grid sorts the data order when a column header is clicked.
@@ -255,6 +277,22 @@ declare class SkyDataGrid {
255
277
  * @default 1
256
278
  */
257
279
  readonly page: _angular_core.ModelSignal<number>;
280
+ /**
281
+ * The IDs of the rows that display an inline delete confirmation. This is
282
+ * two-way bindable: an ID is removed when the user cancels the deletion of
283
+ * its row, or when its row is no longer in the grid.
284
+ * @default []
285
+ */
286
+ readonly rowDeleteIds: _angular_core.ModelSignal<string[]>;
287
+ /**
288
+ * Fires when the user cancels the deletion of a row.
289
+ */
290
+ readonly rowDeleteCancel: _angular_core.OutputEmitterRef<SkyDataGridRowDeleteArgs>;
291
+ /**
292
+ * Fires when the user confirms the deletion of a row. To complete the
293
+ * deletion, remove the row from `data`.
294
+ */
295
+ readonly rowDeleteConfirm: _angular_core.OutputEmitterRef<SkyDataGridRowDeleteArgs>;
258
296
  /**
259
297
  * The set of IDs for the rows to select in a multiselect grid.
260
298
  * Rows with IDs that are not included are de-selected in the grid. This is two-way bindable:
@@ -262,6 +300,15 @@ declare class SkyDataGrid {
262
300
  * @default []
263
301
  */
264
302
  readonly selectedRowIds: _angular_core.ModelSignal<string[]>;
303
+ /**
304
+ * The IDs of the columns to display, in display order. Columns that are not
305
+ * included are hidden. An ID that does not match a column is ignored until a
306
+ * column with that ID is declared. This is two-way bindable: once set, it
307
+ * emits a new value when the user reorders columns. When `undefined`, every
308
+ * column displays in declaration order except those marked `columnHidden`.
309
+ * Displayed locked columns come first.
310
+ */
311
+ readonly selectedColumnIds: _angular_core.ModelSignal<string[] | undefined>;
265
312
  /**
266
313
  * The current sort applied to the grid. This is two-way bindable: it emits a new value
267
314
  * whenever the user sorts a column, and you can set it to sort the grid programmatically.
@@ -270,6 +317,34 @@ declare class SkyDataGrid {
270
317
  */
271
318
  readonly sort: _angular_core.ModelSignal<SkyDataGridSort | undefined>;
272
319
  protected readonly columns: Signal<readonly SkyDataGridColumn[]>;
320
+ /**
321
+ * The columns the grid can display, in declaration order. Read by column
322
+ * picker integrations through `SkyDataColumnSource`.
323
+ * @internal
324
+ */
325
+ readonly columnOptions: Signal<readonly SkyDataColumnOption[]>;
326
+ /**
327
+ * The widths in pixels of the columns users resized, keyed by column ID.
328
+ * Read by data manager integrations through `SkyDataColumnSource`.
329
+ * @internal
330
+ */
331
+ readonly columnWidths: Signal<Readonly<Record<string, number>>>;
332
+ /**
333
+ * The IDs of the columns that display, in display order: the
334
+ * `selectedColumnIds` that match a declared column or, when
335
+ * `selectedColumnIds` is `undefined`, every column not marked `columnHidden`.
336
+ * Locked columns come first, as the grid displays them. Read by column
337
+ * picker integrations through `SkyDataColumnSource`.
338
+ * @internal
339
+ */
340
+ readonly displayedColumnIds: Signal<string[]>;
341
+ /**
342
+ * The selectors of the elements the grid keeps visible at the top of the
343
+ * viewport while the page scrolls. Read by column picker integrations
344
+ * through `SkyDataColumnSource`.
345
+ * @internal
346
+ */
347
+ readonly viewkeeperClasses: Signal<string[]>;
273
348
  protected readonly gridApi: _angular_core.WritableSignal<GridApi<SkyDataGridRowData> | undefined>;
274
349
  protected readonly gridOptions: Signal<GridOptions<SkyDataGridRowData> | undefined>;
275
350
  protected readonly gridReady: _angular_core.WritableSignal<boolean>;
@@ -278,10 +353,52 @@ declare class SkyDataGrid {
278
353
  protected readonly pageItemsCount: _angular_core.WritableSignal<number>;
279
354
  protected readonly skyViewkeeper: Signal<string[]>;
280
355
  constructor();
356
+ /**
357
+ * Stops the grid from removing the IDs of rows that are not in `data` from
358
+ * `selectedRowIds`. Called by data manager integrations through
359
+ * `SkyDataSelectionSource` when they keep rows that a search or filter hides
360
+ * selected.
361
+ * @internal
362
+ */
363
+ disableSelectionPruning(): void;
364
+ /**
365
+ * Stops the grid from keeping the `viewkeeperClasses` elements visible
366
+ * itself. Called by column picker integrations through `SkyDataColumnSource`
367
+ * when a container keeps them visible instead.
368
+ * @internal
369
+ */
370
+ disableViewkeeper(): void;
371
+ /**
372
+ * Sets the columns that display and their order. Called by column picker
373
+ * integrations through `SkyDataColumnSource`.
374
+ * @internal
375
+ */
376
+ setDisplayedColumnIds(columnIds: readonly string[]): void;
377
+ /**
378
+ * Sets the widths in pixels of columns, keyed by column ID, and starts
379
+ * tracking the widths users give columns. Columns that are not included
380
+ * return to the widths they are declared with or, when declared without
381
+ * one, the widths the grid gave them. Called by data manager
382
+ * integrations through `SkyDataColumnSource`.
383
+ * @internal
384
+ */
385
+ setColumnWidths(columnWidths: Readonly<Record<string, number>>): void;
386
+ /**
387
+ * Sets the selected rows. Called by data manager integrations through
388
+ * `SkyDataSelectionSource`.
389
+ * @internal
390
+ */
391
+ setSelectedRowIds(selectedRowIds: readonly string[]): void;
392
+ /**
393
+ * Sets the sort the grid applies. Called by data manager integrations
394
+ * through `SkyDataSortSource`.
395
+ * @internal
396
+ */
397
+ setSort(sort: SkyDataGridSort | undefined): void;
281
398
  protected currentPageChange(page: number): void;
282
399
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkyDataGrid, never>;
283
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkyDataGrid, "sky-data-grid", never, { "autoSort": { "alias": "autoSort"; "required": false; "isSignal": true; }; "autoPage": { "alias": "autoPage"; "required": false; "isSignal": true; }; "columnFit": { "alias": "columnFit"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "multiselect": { "alias": "multiselect"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageQueryParam": { "alias": "pageQueryParam"; "required": false; "isSignal": true; }; "rowCount": { "alias": "rowCount"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "topScrollEnabled": { "alias": "topScrollEnabled"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; "selectedRowIds": "selectedRowIdsChange"; "sort": "sortChange"; }, ["columns"], never, true, never>;
400
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkyDataGrid, "sky-data-grid", never, { "autoSort": { "alias": "autoSort"; "required": false; "isSignal": true; }; "autoPage": { "alias": "autoPage"; "required": false; "isSignal": true; }; "columnFit": { "alias": "columnFit"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "multiselect": { "alias": "multiselect"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageQueryParam": { "alias": "pageQueryParam"; "required": false; "isSignal": true; }; "rowCount": { "alias": "rowCount"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "topScrollEnabled": { "alias": "topScrollEnabled"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "rowDeleteIds": { "alias": "rowDeleteIds"; "required": false; "isSignal": true; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; "isSignal": true; }; "selectedColumnIds": { "alias": "selectedColumnIds"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; "rowDeleteIds": "rowDeleteIdsChange"; "rowDeleteCancel": "rowDeleteCancel"; "rowDeleteConfirm": "rowDeleteConfirm"; "selectedRowIds": "selectedRowIdsChange"; "selectedColumnIds": "selectedColumnIdsChange"; "sort": "sortChange"; }, ["columns"], never, true, never>;
284
401
  }
285
402
 
286
403
  export { SkyDataGrid, SkyDataGridColumn };
287
- export type { SkyDataGridRowData, SkyDataGridSort };
404
+ export type { SkyDataGridRowData, SkyDataGridRowDeleteArgs, SkyDataGridSort };