@skyux/data-grid 14.23.0 → 14.25.0

package/types/skyux-data-grid.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, TemplateRef, Signal } from '@angular/core';
+import { SkyDataColumnSource, SkyDataSelectionSource, SkyDataSortSource, SkyDataColumnOption } from '@skyux/lists';
 import { GridApi, GridOptions } from 'ag-grid-community';
 
 /**
@@ -31,6 +32,12 @@ interface SkyDataGridSort {
     field: string;
 }
 
+/**
+ * How a `SkyDataGrid` docks to its container.
+ * @preview
+ */
+type SkyDataGridDockType = 'none' | 'fill';
+
 /**
  * Defines a single column in a `SkyDataGrid`. Add one `sky-data-grid-column` for each
  * column to render.
@@ -39,7 +46,9 @@ interface SkyDataGridSort {
 declare class SkyDataGridColumn implements OnInit {
     #private;
     /**
-     * Whether the column is hidden.
+     * Whether the column is hidden. When the grid's `selectedColumnIds` is set,
+     * it determines which columns display instead. In a data manager's column
+     * picker, the column starts hidden and users can choose to display it.
      * @default false
      */
     readonly columnHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -54,6 +63,11 @@ declare class SkyDataGridColumn implements OnInit {
      * @default 'text'
      */
     readonly dataType: _angular_core.InputSignal<"number" | "boolean" | "text" | "date">;
+    /**
+     * The text to display beneath the column's `headingText` in a data
+     * manager's column picker.
+     */
+    readonly description: _angular_core.InputSignal<string | undefined>;
     /**
      * The property to retrieve cell information from an entry on the grid `data` array.
      * You must provide either the `columnId` or `field` property for every column,
@@ -94,7 +108,9 @@ declare class SkyDataGridColumn implements OnInit {
     /**
      * Whether the column is locked. The intent is to display locked columns first
      * on the left side of the grid. If set to `true`, then users cannot drag the column
-     * to another position or drag other columns before it.
+     * to another position or drag other columns before it. In a data manager's
+     * column picker, a locked column always displays and is not offered as an
+     * option.
      * @default false
      */
     readonly locked: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -137,7 +153,7 @@ declare class SkyDataGridColumn implements OnInit {
      */
     protected readonly cellTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkyDataGridColumn, never>;
-    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; }; "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>;
+    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; }; "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>;
 }
 
 /**
@@ -145,7 +161,7 @@ declare class SkyDataGridColumn implements OnInit {
  * Provide the `data` array and one `sky-data-grid-column` for each column to render.
  * @preview
  */
-declare class SkyDataGrid {
+declare class SkyDataGrid implements SkyDataColumnSource, SkyDataSelectionSource, SkyDataSortSource {
     #private;
     /**
      * Whether the grid sorts the data order when a column header is clicked.
@@ -189,6 +205,14 @@ declare class SkyDataGrid {
      * the grid will show a "no rows" message.
      */
     readonly data: _angular_core.InputSignal<SkyDataGridRowData[] | null | undefined>;
+    /**
+     * How the data grid docks to the page. Use `fill` to dock the data grid to the container's size where the container
+     * is a `sky-page` component with its `layout` set to `fit`, or where the container is another element with a
+     * relative or absolute position and a fixed size. This property is applied when the grid initializes; changes
+     * after initialization are not reflected.
+     * @default "none"
+     */
+    readonly dock: _angular_core.InputSignal<SkyDataGridDockType>;
     /**
      * The text to read to screen readers to describe the grid. This sets the `aria-label` attribute on the grid container.
      */
@@ -200,7 +224,7 @@ declare class SkyDataGrid {
      */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * The minimum height of the grid in pixels.
+     * The minimum height of the grid in pixels. This property does not apply when `dock` is set to `fill`.
      * @default 50
      */
     readonly minHeight: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -231,7 +255,7 @@ declare class SkyDataGrid {
     readonly rowCount: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /**
      * Whether the data grid is stacked with another element below it. When specified, the appropriate
-     * vertical spacing is automatically added to the data grid.
+     * vertical spacing is automatically added to the data grid. This property does not apply when `dock` is set to `fill`.
      * @default false
      */
     readonly stacked: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -256,6 +280,15 @@ declare class SkyDataGrid {
      * @default []
      */
     readonly selectedRowIds: _angular_core.ModelSignal<string[]>;
+    /**
+     * The IDs of the columns to display, in display order. Columns that are not
+     * included are hidden. An ID that does not match a column is ignored until a
+     * column with that ID is declared. This is two-way bindable: once set, it
+     * emits a new value when the user reorders columns. When `undefined`, every
+     * column displays in declaration order except those marked `columnHidden`.
+     * Displayed locked columns come first.
+     */
+    readonly selectedColumnIds: _angular_core.ModelSignal<string[] | undefined>;
     /**
      * The current sort applied to the grid. This is two-way bindable: it emits a new value
      * whenever the user sorts a column, and you can set it to sort the grid programmatically.
@@ -264,6 +297,34 @@ declare class SkyDataGrid {
      */
     readonly sort: _angular_core.ModelSignal<SkyDataGridSort | undefined>;
     protected readonly columns: Signal<readonly SkyDataGridColumn[]>;
+    /**
+     * The columns the grid can display, in declaration order. Read by column
+     * picker integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    readonly columnOptions: Signal<readonly SkyDataColumnOption[]>;
+    /**
+     * The widths in pixels of the columns users resized, keyed by column ID.
+     * Read by data manager integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    readonly columnWidths: Signal<Readonly<Record<string, number>>>;
+    /**
+     * The IDs of the columns that display, in display order: the
+     * `selectedColumnIds` that match a declared column or, when
+     * `selectedColumnIds` is `undefined`, every column not marked `columnHidden`.
+     * Locked columns come first, as the grid displays them. Read by column
+     * picker integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    readonly displayedColumnIds: Signal<string[]>;
+    /**
+     * The selectors of the elements the grid keeps visible at the top of the
+     * viewport while the page scrolls. Read by column picker integrations
+     * through `SkyDataColumnSource`.
+     * @internal
+     */
+    readonly viewkeeperClasses: Signal<string[]>;
     protected readonly gridApi: _angular_core.WritableSignal<GridApi<SkyDataGridRowData> | undefined>;
     protected readonly gridOptions: Signal<GridOptions<SkyDataGridRowData> | undefined>;
     protected readonly gridReady: _angular_core.WritableSignal<boolean>;
@@ -271,11 +332,55 @@ declare class SkyDataGrid {
     protected readonly pageCount: Signal<number>;
     protected readonly pageItemsCount: _angular_core.WritableSignal<number>;
     protected readonly skyViewkeeper: Signal<string[]>;
+    protected readonly useFillDock: Signal<boolean>;
+    protected readonly useStacked: Signal<boolean>;
     constructor();
+    /**
+     * Stops the grid from removing the IDs of rows that are not in `data` from
+     * `selectedRowIds`. Called by data manager integrations through
+     * `SkyDataSelectionSource` when they keep rows that a search or filter hides
+     * selected.
+     * @internal
+     */
+    disableSelectionPruning(): void;
+    /**
+     * Stops the grid from keeping the `viewkeeperClasses` elements visible
+     * itself. Called by column picker integrations through `SkyDataColumnSource`
+     * when a container keeps them visible instead.
+     * @internal
+     */
+    disableViewkeeper(): void;
+    /**
+     * Sets the columns that display and their order. Called by column picker
+     * integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    setDisplayedColumnIds(columnIds: readonly string[]): void;
+    /**
+     * Sets the widths in pixels of columns, keyed by column ID, and starts
+     * tracking the widths users give columns. Columns that are not included
+     * return to the widths they are declared with or, when declared without
+     * one, the widths the grid gave them. Called by data manager
+     * integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    setColumnWidths(columnWidths: Readonly<Record<string, number>>): void;
+    /**
+     * Sets the selected rows. Called by data manager integrations through
+     * `SkyDataSelectionSource`.
+     * @internal
+     */
+    setSelectedRowIds(selectedRowIds: readonly string[]): void;
+    /**
+     * Sets the sort the grid applies. Called by data manager integrations
+     * through `SkyDataSortSource`.
+     * @internal
+     */
+    setSort(sort: SkyDataGridSort | undefined): void;
     protected currentPageChange(page: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkyDataGrid, never>;
-    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>;
+    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; }; "dock": { "alias": "dock"; "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; }; "selectedColumnIds": { "alias": "selectedColumnIds"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; "selectedRowIds": "selectedRowIdsChange"; "selectedColumnIds": "selectedColumnIdsChange"; "sort": "sortChange"; }, ["columns"], never, true, never>;
 }
 
 export { SkyDataGrid, SkyDataGridColumn };
-export type { SkyDataGridRowData, SkyDataGridSort };
+export type { SkyDataGridDockType, SkyDataGridRowData, SkyDataGridSort };