@skyux/data-grid 14.23.0 → 14.25.0

package/fesm2022/skyux-data-grid.mjs

@@ -10,9 +10,9 @@ import { SkyLogService, SkyViewkeeperModule } from '@skyux/core';
 import * as i4 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
 import * as i2 from '@skyux/lists';
-import { SkyPagingModule } from '@skyux/lists';
+import { SkyPagingModule, SkyDataColumnSource, SkyDataSelectionSource, SkyDataSortSource } from '@skyux/lists';
 import { AgGridAngular } from 'ag-grid-angular';
-import { ModuleRegistry, CellStyleModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, CustomEditorModule, EventApiModule, GridStateModule, LocaleModule, PaginationModule, RenderApiModule, RowApiModule, RowAutoHeightModule, RowSelectionModule, RowStyleModule } from 'ag-grid-community';
+import { ModuleRegistry, CellStyleModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, CustomEditorModule, EventApiModule, GridStateModule, LocaleModule, PaginationModule, RenderApiModule, RowApiModule, RowAutoHeightModule, RowSelectionModule, RowStyleModule, SELECTION_COLUMN_ID } from 'ag-grid-community';
 import { Observable, filter, switchMap, takeUntil, map, startWith } from 'rxjs';
 import * as i1 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
@@ -26,7 +26,9 @@ class SkyDataGridColumn {
     #initialized;
     constructor() {
         /**
-         * 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
          */
         this.columnHidden = input(false, { ...(ngDevMode ? { debugName: "columnHidden" } : {}), transform: booleanAttribute });
@@ -41,6 +43,11 @@ class SkyDataGridColumn {
          * @default 'text'
          */
         this.dataType = input('text', ...(ngDevMode ? [{ debugName: "dataType" }] : []));
+        /**
+         * The text to display beneath the column's `headingText` in a data
+         * manager's column picker.
+         */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
         /**
          * 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,
@@ -81,7 +88,9 @@ class SkyDataGridColumn {
         /**
          * 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
          */
         this.locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : {}), transform: booleanAttribute });
@@ -142,7 +151,7 @@ class SkyDataGridColumn {
         this.#initialized.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGridColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SkyDataGridColumn, isStandalone: true, selector: "sky-data-grid-column", inputs: { columnHidden: { classPropertyName: "columnHidden", publicName: "columnHidden", isSignal: true, isRequired: false, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, flexWidth: { classPropertyName: "flexWidth", publicName: "flexWidth", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, headingHidden: { classPropertyName: "headingHidden", publicName: "headingHidden", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, wrapText: { classPropertyName: "wrapText", publicName: "wrapText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templateChild", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SkyDataGridColumn, isStandalone: true, selector: "sky-data-grid-column", inputs: { columnHidden: { classPropertyName: "columnHidden", publicName: "columnHidden", isSignal: true, isRequired: false, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, flexWidth: { classPropertyName: "flexWidth", publicName: "flexWidth", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, headingHidden: { classPropertyName: "headingHidden", publicName: "headingHidden", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, wrapText: { classPropertyName: "wrapText", publicName: "wrapText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templateChild", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGridColumn, decorators: [{
             type: Component,
@@ -151,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { columnHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHidden", required: false }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], flexWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexWidth", required: false }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }], headingHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingHidden", required: false }] }], helpPopoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverTitle", required: false }] }], helpPopoverContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverContent", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], wrapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapText", required: false }] }], templateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { columnHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHidden", required: false }] }], columnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnId", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], flexWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexWidth", required: false }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }], headingHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingHidden", required: false }] }], helpPopoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverTitle", required: false }] }], helpPopoverContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverContent", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], wrapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapText", required: false }] }], templateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /**
  * @internal
@@ -227,6 +236,17 @@ ModuleRegistry.registerModules([
 function arraySorted(arr) {
     return arr.slice().sort((a, b) => a.localeCompare(b));
 }
+const DEFAULT_DOCK_TYPE = 'none';
+function arraysEqual(a, b) {
+    return a.length === b.length && a.every((value, i) => value === b[i]);
+}
+// The data manager has its own copy of this function, because the two
+// libraries cannot share an internal function without exporting it.
+function columnWidthsEqual(a, b) {
+    const keys = Object.keys(a);
+    return (keys.length === Object.keys(b).length &&
+        keys.every((key) => a[key] === b[key]));
+}
 /**
  * Displays tabular data in a grid using a declarative set of columns and inputs.
  * Provide the `data` array and one `sky-data-grid-column` for each column to render.
@@ -234,11 +254,37 @@ function arraySorted(arr) {
  */
 class SkyDataGrid {
     #activatedRoute;
+    /**
+     * The widths in pixels of the columns users resized, keyed by column ID.
+     * This is `undefined` until a data manager integration sets the widths, so a
+     * grid outside a data manager neither tracks nor restores them.
+     */
+    #columnWidths;
+    /**
+     * The widths the grid gave the columns that have neither a flex nor a
+     * width, from before a column width replaced them.
+     */
+    #gridSizedWidths;
+    #selectionPruningDisabled;
+    #viewkeeperDisabled;
+    #awaitingInitialAutoSize;
     #gridService;
     #logger;
     #router;
     #columnDefs;
     #hasColumnDefs;
+    /**
+     * The IDs of the columns that display, in a fixed order, so that moving a
+     * column does not change it.
+     */
+    #displayedColumnIdSet;
+    /**
+     * The declared columns that have a usable ID, in declaration order. Columns
+     * missing both `columnId` and `field` are omitted; `SkyDataGridColumn`
+     * already warns about them. A repeated ID is suffixed the way AG Grid
+     * suffixes it (`name_1`), so that every column can be addressed.
+     */
+    #columnCatalog;
     #gridDestroyed;
     #gridSelectedRowIds;
     #gridSortChange;
@@ -290,6 +336,14 @@ class SkyDataGrid {
          * the grid will show a "no rows" message.
          */
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        /**
+         * 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"
+         */
+        this.dock = input(DEFAULT_DOCK_TYPE, ...(ngDevMode ? [{ debugName: "dock" }] : []));
         /**
          * The text to read to screen readers to describe the grid. This sets the `aria-label` attribute on the grid container.
          */
@@ -301,7 +355,7 @@ class SkyDataGrid {
          */
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: coerceBooleanProperty });
         /**
-         * 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
          */
         this.minHeight = input(50, { ...(ngDevMode ? { debugName: "minHeight" } : {}), transform: (value) => coerceNumberProperty(value, 50) });
@@ -337,7 +391,7 @@ class SkyDataGrid {
             } });
         /**
          * 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
          */
         this.stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : {}), transform: coerceBooleanProperty });
@@ -362,6 +416,15 @@ class SkyDataGrid {
          * @default []
          */
         this.selectedRowIds = model([], ...(ngDevMode ? [{ debugName: "selectedRowIds" }] : []));
+        /**
+         * 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.
+         */
+        this.selectedColumnIds = model(...(ngDevMode ? [undefined, { debugName: "selectedColumnIds" }] : []));
         /**
          * 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.
@@ -370,6 +433,62 @@ class SkyDataGrid {
          */
         this.sort = model(undefined, ...(ngDevMode ? [{ debugName: "sort" }] : []));
         this.columns = contentChildren(SkyDataGridColumn, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        /**
+         * The columns the grid can display, in declaration order. Read by column
+         * picker integrations through `SkyDataColumnSource`.
+         * @internal
+         */
+        this.columnOptions = computed(() => this.#columnCatalog().map(({ id, column }) => ({
+            alwaysDisplayed: column.locked(),
+            description: column.description(),
+            id,
+            initialHide: column.columnHidden(),
+            labelText: column.headingText(),
+        })), ...(ngDevMode ? [{ debugName: "columnOptions" }] : []));
+        /**
+         * The widths in pixels of the columns users resized, keyed by column ID.
+         * Read by data manager integrations through `SkyDataColumnSource`.
+         * @internal
+         */
+        this.columnWidths = computed(() => this.#columnWidths() ?? {}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : []));
+        /**
+         * 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
+         */
+        this.displayedColumnIds = computed(() => {
+            const catalog = this.#columnCatalog();
+            const selectedColumnIds = this.selectedColumnIds();
+            const declaredIds = catalog.map(({ id }) => id);
+            const lockedIds = catalog
+                .filter(({ column }) => column.locked())
+                .map(({ id }) => id);
+            const columnIds = selectedColumnIds
+                ? selectedColumnIds.filter((id) => declaredIds.includes(id))
+                : catalog
+                    .filter(({ column }) => !column.columnHidden())
+                    .map(({ id }) => id);
+            return [
+                ...columnIds.filter((id) => lockedIds.includes(id)),
+                ...columnIds.filter((id) => !lockedIds.includes(id)),
+            ];
+        }, { ...(ngDevMode ? { debugName: "displayedColumnIds" } : {}), equal: arraysEqual });
+        /**
+         * 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
+         */
+        this.viewkeeperClasses = computed(() => {
+            const classes = ['.ag-header'];
+            if (this.topScrollEnabled()) {
+                classes.push('.ag-body-horizontal-scroll');
+            }
+            return classes;
+        }, ...(ngDevMode ? [{ debugName: "viewkeeperClasses" }] : []));
         this.gridApi = signal(undefined, ...(ngDevMode ? [{ debugName: "gridApi" }] : []));
         this.gridOptions = computed(() => {
             const hasColumnDefs = this.#hasColumnDefs();
@@ -391,7 +510,7 @@ class SkyDataGrid {
                     context: {
                         enableTopScroll: untracked(() => this.topScrollEnabled()),
                     },
-                    domLayout: 'autoHeight',
+                    domLayout: untracked(() => this.useFillDock() ? 'normal' : 'autoHeight'),
                     initialState: sort
                         ? {
                             partialColumnState: true,
@@ -403,7 +522,45 @@ class SkyDataGrid {
                         }
                         : undefined,
                     loading: untracked(() => this.loading() || !Array.isArray(this.data())),
+                    // A user moves columns with the keyboard or by dragging a column
+                    // header. A drag moves columns as it goes, and a drag released outside
+                    // the grid or cancelled with Escape reports no finished move, so sync
+                    // when any drag ends too.
+                    onColumnMoved: (event) => {
+                        if (event.finished) {
+                            this.#syncColumnOrderFromGrid(event.api);
+                        }
+                    },
+                    // The grid's initial content sizing runs after the grid is ready and
+                    // would replace the widths applied then, so apply them again. Content
+                    // sizing after that is a user double-clicking a column's edge.
+                    onColumnResized: (event) => {
+                        if (event.source === 'autosizeColumns' &&
+                            this.#awaitingInitialAutoSize) {
+                            this.#awaitingInitialAutoSize = false;
+                            this.#gridSizedWidths.clear();
+                            this.#rememberGridSizedWidths(event.api);
+                            this.#reapplyColumnWidths(event.api);
+                        }
+                        else if ((event.source === 'uiColumnResized' && event.finished) ||
+                            event.source === 'autosizeColumns') {
+                            // AG Grid reports the resized columns with every resize it
+                            // dispatches from these sources.
+                            /* istanbul ignore next */
+                            this.#syncColumnWidthsFromGrid(event.columns ?? []);
+                        }
+                    },
+                    onDragCancelled: (event) => this.#syncColumnOrderFromGrid(event.api),
+                    onDragStopped: (event) => this.#syncColumnOrderFromGrid(event.api),
                     onGridReady: (args) => {
+                        // The displayed columns may have changed since the column
+                        // definitions were created.
+                        this.#applyDisplayedColumns(args.api, this.displayedColumnIds());
+                        this.#awaitingInitialAutoSize =
+                            !!args.api.getGridOption('autoSizeStrategy');
+                        this.#gridSizedWidths.clear();
+                        this.#rememberGridSizedWidths(args.api);
+                        this.#reapplyColumnWidths(args.api);
                         this.gridApi.set(args.api);
                         this.gridReady.set(true);
                     },
@@ -456,23 +613,78 @@ class SkyDataGrid {
             } });
         this.skyViewkeeper = computed(() => {
             // Only used when not using SkyDataManagerService because data manager handles SkyViewkeeper.
-            const classes = ['.ag-header'];
-            if (this.topScrollEnabled()) {
-                classes.push('.ag-body-horizontal-scroll');
+            // Not used in fill mode either: AG Grid keeps its own header in place in that layout.
+            if (this.useFillDock()) {
+                return [];
             }
-            return classes;
+            return this.#viewkeeperDisabled() ? [] : this.viewkeeperClasses();
         }, ...(ngDevMode ? [{ debugName: "skyViewkeeper" }] : []));
+        this.useFillDock = computed(() => this.dock() === 'fill', ...(ngDevMode ? [{ debugName: "useFillDock" }] : []));
+        this.useStacked = computed(() => this.stacked() && this.dock() !== 'fill', ...(ngDevMode ? [{ debugName: "useStacked" }] : []));
         this.#activatedRoute = inject(ActivatedRoute, { optional: true });
+        /**
+         * The widths in pixels of the columns users resized, keyed by column ID.
+         * This is `undefined` until a data manager integration sets the widths, so a
+         * grid outside a data manager neither tracks nor restores them.
+         */
+        this.#columnWidths = signal(undefined, ...(ngDevMode ? [{ debugName: "#columnWidths" }] : []));
+        /**
+         * The widths the grid gave the columns that have neither a flex nor a
+         * width, from before a column width replaced them.
+         */
+        this.#gridSizedWidths = new Map();
+        this.#selectionPruningDisabled = signal(false, ...(ngDevMode ? [{ debugName: "#selectionPruningDisabled" }] : []));
+        this.#viewkeeperDisabled = signal(false, ...(ngDevMode ? [{ debugName: "#viewkeeperDisabled" }] : []));
+        this.#awaitingInitialAutoSize = false;
         this.#gridService = inject(SkyAgGridService);
         this.#logger = inject(SkyLogService);
         this.#router = inject(Router, { optional: true });
         this.#columnDefs = computed(() => {
-            const columns = this.columns();
-            return columns
-                .filter((col) => col.initialized())
-                .map((col) => this.#createColDef(col));
+            const catalog = this.#columnCatalog();
+            // Read untracked so that showing, hiding, or reordering columns does not
+            // rebuild the column definitions, which would reset flex columns the user
+            // resized. An effect applies those changes as runtime column state instead.
+            const displayedIds = untracked(this.displayedColumnIds);
+            const entriesById = new Map(catalog.map((entry) => [entry.id, entry]));
+            // Displayed columns first, in display order, followed by the hidden
+            // columns. Hidden columns keep their column definitions so AG Grid retains
+            // their state and they can be shown again without being recreated.
+            const displayedColDefs = displayedIds
+                .map((id) => entriesById.get(id))
+                .filter((entry) => !!entry)
+                .map(({ column, id }) => this.#createColDef(column, id, false));
+            const hiddenColDefs = catalog
+                .filter(({ id }) => !displayedIds.includes(id))
+                .map(({ column, id }) => this.#createColDef(column, id, true));
+            return [...displayedColDefs, ...hiddenColDefs];
         }, ...(ngDevMode ? [{ debugName: "#columnDefs" }] : []));
         this.#hasColumnDefs = computed(() => this.#columnDefs().length > 0, ...(ngDevMode ? [{ debugName: "#hasColumnDefs" }] : []));
+        /**
+         * The IDs of the columns that display, in a fixed order, so that moving a
+         * column does not change it.
+         */
+        this.#displayedColumnIdSet = computed(() => arraySorted(this.displayedColumnIds()), { ...(ngDevMode ? { debugName: "#displayedColumnIdSet" } : {}), equal: arraysEqual });
+        /**
+         * The declared columns that have a usable ID, in declaration order. Columns
+         * missing both `columnId` and `field` are omitted; `SkyDataGridColumn`
+         * already warns about them. A repeated ID is suffixed the way AG Grid
+         * suffixes it (`name_1`), so that every column can be addressed.
+         */
+        this.#columnCatalog = computed(() => {
+            const catalog = [];
+            for (const column of this.columns()) {
+                const declaredId = column.columnId() ?? column.field();
+                if (declaredId &&
+                    column.initialized()) {
+                    let id = declaredId;
+                    for (let i = 1; catalog.some((entry) => entry.id === id); i++) {
+                        id = `${declaredId}_${i}`;
+                    }
+                    catalog.push({ column, id });
+                }
+            }
+            return catalog;
+        }, ...(ngDevMode ? [{ debugName: "#columnCatalog" }] : []));
         this.#gridDestroyed = toObservable(this.gridApi).pipe(filter(Boolean), switchMap((api) => fromGridEvent(api, 'gridPreDestroyed')));
         this.#gridSelectedRowIds = toObservable(this.gridApi).pipe(filter(Boolean), switchMap((api) => fromGridEvent(api, 'selectionChanged').pipe(takeUntil(this.#gridDestroyed), map(() => arraySorted(this.#getRowIds(api.getSelectedNodes()))))));
         this.#gridSortChange = toObservable(this.gridApi).pipe(filter(Boolean), switchMap((api) => fromGridEvent(api, 'sortChanged').pipe(takeUntil(this.#gridDestroyed), map((sortEvent) => {
@@ -507,7 +719,14 @@ class SkyDataGrid {
         effect(() => {
             const api = untracked(() => this.gridApi());
             const columnDefs = this.#columnDefs();
-            api?.setGridOption('columnDefs', columnDefs);
+            if (api) {
+                api.setGridOption('columnDefs', columnDefs);
+                untracked(() => {
+                    this.#rememberGridSizedWidths(api);
+                    // New column definitions make columns users resized flex again.
+                    this.#reapplyColumnWidths(api);
+                });
+            }
         });
         effect(() => {
             const api = untracked(() => this.gridApi());
@@ -543,7 +762,10 @@ class SkyDataGrid {
             const validRowIds = new Set(this.rowData().map((row) => row.id));
             const selectedRowIds = coerceStringArray(this.selectedRowIds());
             const validSelectedRowIds = selectedRowIds.filter((id) => validRowIds.has(id));
+            // A data manager integration keeps the IDs of rows its search or
+            // filters hide, so they are selected again when the rows return.
             if (this.autoPage() &&
+                !this.#selectionPruningDisabled() &&
                 validSelectedRowIds.length !== selectedRowIds.length) {
                 this.selectedRowIds.set(validSelectedRowIds);
             }
@@ -589,6 +811,32 @@ class SkyDataGrid {
                 defaultState: { sort: null },
             });
         });
+        // Apply changes to the displayed columns as runtime column state rather
+        // than through `columnDefs`, so showing, hiding, or reordering columns does
+        // not reset flex columns the user resized. Only a change to the displayed
+        // columns re-runs this, so a column order the user set by dragging a header
+        // is otherwise left alone.
+        effect(() => {
+            const displayedIds = this.displayedColumnIds();
+            const api = untracked(() => this.gridApi());
+            if (api) {
+                this.#applyDisplayedColumns(api, displayedIds);
+            }
+        });
+        // A grid that fits its columns to the container, and has no flex columns
+        // to take up the space, does not otherwise resize them when a column is
+        // hidden or shown. Moving a column leaves the displayed set alone, so it
+        // does not discard the widths a user set in a grid that is not tracking
+        // them.
+        effect(() => {
+            this.#displayedColumnIdSet();
+            const api = untracked(() => this.gridApi());
+            if (api &&
+                untracked(this.columnFit) === 'container' &&
+                !untracked(() => this.#hasFlexColumns())) {
+                this.#fitColumnsToContainer(api);
+            }
+        });
         effect(() => {
             const api = this.gridApi();
             const page = this.page();
@@ -679,23 +927,82 @@ class SkyDataGrid {
                 return val;
             });
         });
-        this.#gridSortChange.pipe(takeUntilDestroyed()).subscribe((sortChange) => {
-            if (sortChange) {
-                this.sort.update((sort) => {
-                    if (!!sort !== !!sortChange ||
-                        sort?.direction !== sortChange?.direction ||
-                        sort?.field !== sortChange?.field) {
-                        return sortChange;
-                    }
-                    return sort;
-                });
-            }
-            else {
-                // Clear the sort when the grid no longer has a sorted column so the
-                // two-way bound model does not retain a stale value.
-                this.sort.update(() => undefined);
-            }
-        });
+        // Emit the grid's sort, including no sort once no column is sorted, so
+        // the two-way bound model does not retain a stale value.
+        this.#gridSortChange
+            .pipe(takeUntilDestroyed())
+            .subscribe((sortChange) => this.setSort(sortChange));
+    }
+    /**
+     * 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() {
+        this.#selectionPruningDisabled.set(true);
+    }
+    /**
+     * 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() {
+        this.#viewkeeperDisabled.set(true);
+    }
+    /**
+     * Sets the columns that display and their order. Called by column picker
+     * integrations through `SkyDataColumnSource`.
+     * @internal
+     */
+    setDisplayedColumnIds(columnIds) {
+        const selectedColumnIds = this.selectedColumnIds();
+        if (!selectedColumnIds || !arraysEqual(selectedColumnIds, columnIds)) {
+            this.selectedColumnIds.set([...columnIds]);
+        }
+    }
+    /**
+     * 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) {
+        const currentWidths = this.#columnWidths();
+        if (currentWidths && columnWidthsEqual(currentWidths, columnWidths)) {
+            return;
+        }
+        this.#columnWidths.set({ ...columnWidths });
+        const api = untracked(this.gridApi);
+        if (api) {
+            this.#applyColumnWidths(api, columnWidths);
+        }
+    }
+    /**
+     * Sets the selected rows. Called by data manager integrations through
+     * `SkyDataSelectionSource`.
+     * @internal
+     */
+    setSelectedRowIds(selectedRowIds) {
+        if (!arraysEqual(coerceStringArray(this.selectedRowIds()), selectedRowIds)) {
+            this.selectedRowIds.set([...selectedRowIds]);
+        }
+    }
+    /**
+     * Sets the sort the grid applies. Called by data manager integrations
+     * through `SkyDataSortSource`.
+     * @internal
+     */
+    setSort(sort) {
+        const currentSort = this.sort();
+        if (currentSort?.field !== sort?.field ||
+            currentSort?.direction !== sort?.direction) {
+            this.sort.set(sort);
+        }
     }
     currentPageChange(page) {
         if (page && page !== this.page()) {
@@ -730,15 +1037,15 @@ class SkyDataGrid {
             queryParamsHandling: 'merge',
         });
     }
-    #createColDef(col) {
+    #createColDef(col, colId, hide) {
         const field = col.field();
         const colDef = {
-            colId: col.columnId(),
+            colId,
             field,
             headerName: col.headingText(),
             headerComponentParams: this.#getHeaderComponentParams(col),
-            hide: col.columnHidden(),
-            initialHide: col.columnHidden(),
+            hide,
+            initialHide: hide,
             resizable: col.resizable(),
             sortable: col.sortable(),
             lockPosition: col.locked(),
@@ -806,6 +1113,121 @@ class SkyDataGrid {
             inlineHelpComponent: SkyDataGridColumnInlineHelp,
         };
     }
+    #applyDisplayedColumns(api, displayedIds) {
+        const hiddenIds = untracked(this.#columnCatalog)
+            .map(({ id }) => id)
+            .filter((id) => !displayedIds.includes(id));
+        api.applyColumnState({
+            state: [
+                // AG Grid moves columns missing from the state to the end, which
+                // would put the multiselect column after any locked columns.
+                { colId: SELECTION_COLUMN_ID },
+                ...displayedIds.map((colId) => ({ colId, hide: false })),
+                ...hiddenIds.map((colId) => ({ colId, hide: true })),
+            ],
+            applyOrder: true,
+        });
+    }
+    #syncColumnOrderFromGrid(api) {
+        // Column moves are tracked only once `selectedColumnIds` is set, so a grid
+        // without it keeps following each column's `columnHidden` setting. Applying
+        // a column layout moves columns too, so compare against what the grid
+        // should display; only a move the user made differs.
+        const selectedColumnIds = this.selectedColumnIds();
+        if (!selectedColumnIds) {
+            return;
+        }
+        const displayedColumnIds = api
+            .getColumnState()
+            .filter((state) => !state.hide && state.colId !== SELECTION_COLUMN_ID)
+            .map((state) => state.colId);
+        if (!arraysEqual(this.displayedColumnIds(), displayedColumnIds)) {
+            // Keep the IDs of columns that are not declared, such as a column
+            // rendered conditionally, so they display once the column is declared.
+            const declaredIds = this.#columnCatalog().map(({ id }) => id);
+            this.selectedColumnIds.set([
+                ...displayedColumnIds,
+                ...selectedColumnIds.filter((id) => !declaredIds.includes(id)),
+            ]);
+        }
+    }
+    /**
+     * Applies the column widths, and returns columns without one to the widths
+     * they are declared with.
+     */
+    #applyColumnWidths(api, columnWidths) {
+        api.applyColumnState({
+            state: untracked(this.#columnDefs).map(({ colId, flex, initialWidth }) => {
+                const width = columnWidths[colId];
+                // A width stops a column flexing, as a user resizing it does.
+                return width === undefined
+                    ? {
+                        colId: colId,
+                        flex: flex || null,
+                        width: initialWidth ?? this.#gridSizedWidths.get(colId),
+                    }
+                    : { colId: colId, flex: null, width };
+            }),
+        });
+    }
+    /**
+     * Remembers the widths of columns that have neither a flex nor a width, so
+     * they can return to them. AG Grid ignores a column state without a width,
+     * so it leaves a column at the width a user gave it.
+     */
+    #rememberGridSizedWidths(api) {
+        const gridSizedColumnIds = untracked(this.#columnDefs)
+            .filter(({ flex, initialWidth }) => !flex && initialWidth === undefined)
+            .map(({ colId }) => colId);
+        for (const column of api.getAllGridColumns()) {
+            const colId = column.getColId();
+            if (gridSizedColumnIds.includes(colId) &&
+                !this.#gridSizedWidths.has(colId)) {
+                this.#gridSizedWidths.set(colId, column.getActualWidth());
+            }
+        }
+    }
+    /**
+     * Fits the columns to the container, the way the grid does when it
+     * initializes: the columns the grid does not size to their content, such as
+     * those with a declared width and the multiselect column, and the columns
+     * with a width a data manager integration tracks, keep their widths.
+     */
+    #fitColumnsToContainer(api) {
+        const columnWidths = untracked(this.columnWidths);
+        api.sizeColumnsToFit({
+            columnLimits: api
+                .getAllDisplayedColumns()
+                .filter((column) => column.getColDef().suppressAutoSize ||
+                columnWidths[column.getColId()] !== undefined)
+                .map((column) => ({
+                key: column.getColId(),
+                minWidth: column.getActualWidth(),
+                maxWidth: column.getActualWidth(),
+            })),
+        });
+    }
+    #reapplyColumnWidths(api) {
+        const columnWidths = this.#columnWidths();
+        if (columnWidths && Object.keys(columnWidths).length > 0) {
+            this.#applyColumnWidths(api, columnWidths);
+        }
+    }
+    #syncColumnWidthsFromGrid(columns) {
+        const columnWidths = this.#columnWidths();
+        if (!columnWidths) {
+            return;
+        }
+        // A column a user resizes stops flexing. The flex columns that only filled
+        // the space it left keep flexing, so their widths are not the user's.
+        const updatedWidths = { ...columnWidths };
+        for (const column of columns.filter((col) => !col.getFlex())) {
+            updatedWidths[column.getColId()] = column.getActualWidth();
+        }
+        if (!columnWidthsEqual(columnWidths, updatedWidths)) {
+            this.#columnWidths.set(updatedWidths);
+        }
+    }
     #getRowIds(rows) {
         return coerceArray(rows)
             .map((node) => node?.id)
@@ -836,7 +1258,11 @@ class SkyDataGrid {
             : { checkboxes: false, mode: 'singleRow' };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDataGrid, isStandalone: true, selector: "sky-data-grid", inputs: { autoSort: { classPropertyName: "autoSort", publicName: "autoSort", isSignal: true, isRequired: false, transformFunction: null }, autoPage: { classPropertyName: "autoPage", publicName: "autoPage", isSignal: true, isRequired: false, transformFunction: null }, columnFit: { classPropertyName: "columnFit", publicName: "columnFit", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageQueryParam: { classPropertyName: "pageQueryParam", publicName: "pageQueryParam", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, topScrollEnabled: { classPropertyName: "topScrollEnabled", publicName: "topScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRowIds: { classPropertyName: "selectedRowIds", publicName: "selectedRowIds", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", selectedRowIds: "selectedRowIdsChange", sort: "sortChange" }, host: { properties: { "class.sky-margin-stacked-lg": "stacked()" } }, queries: [{ propertyName: "columns", predicate: SkyDataGridColumn, isSignal: true }], ngImport: i0, template: "<sky-wait [isWaiting]=\"!gridReady()\" />\n@if (gridOptions(); as gridOptions) {\n  <sky-ag-grid-wrapper [compact]=\"compact()\" [minHeight]=\"minHeight()\">\n    <ag-grid-angular\n      skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n      [skyViewkeeper]=\"skyViewkeeper()\"\n      [gridOptions]=\"gridOptions\"\n    />\n  </sky-ag-grid-wrapper>\n\n  @if (pageCount() && pageSize(); as pageSize) {\n    <sky-paging\n      [currentPage]=\"page()\"\n      [itemCount]=\"pageItemsCount()\"\n      [pageSize]=\"pageSize\"\n      (currentPageChange)=\"currentPageChange($event)\"\n    />\n  }\n}\n", styles: [":host{display:block;max-width:100%}\n"], dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "component", type: i1$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDataGrid, isStandalone: true, selector: "sky-data-grid", inputs: { autoSort: { classPropertyName: "autoSort", publicName: "autoSort", isSignal: true, isRequired: false, transformFunction: null }, autoPage: { classPropertyName: "autoPage", publicName: "autoPage", isSignal: true, isRequired: false, transformFunction: null }, columnFit: { classPropertyName: "columnFit", publicName: "columnFit", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dock: { classPropertyName: "dock", publicName: "dock", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageQueryParam: { classPropertyName: "pageQueryParam", publicName: "pageQueryParam", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, topScrollEnabled: { classPropertyName: "topScrollEnabled", publicName: "topScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRowIds: { classPropertyName: "selectedRowIds", publicName: "selectedRowIds", isSignal: true, isRequired: false, transformFunction: null }, selectedColumnIds: { classPropertyName: "selectedColumnIds", publicName: "selectedColumnIds", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", selectedRowIds: "selectedRowIdsChange", selectedColumnIds: "selectedColumnIdsChange", sort: "sortChange" }, host: { properties: { "class.sky-data-grid-dock-fill": "useFillDock()", "class.sky-margin-stacked-lg": "useStacked()" } }, providers: [
+            { provide: SkyDataColumnSource, useExisting: SkyDataGrid },
+            { provide: SkyDataSelectionSource, useExisting: SkyDataGrid },
+            { provide: SkyDataSortSource, useExisting: SkyDataGrid },
+        ], queries: [{ propertyName: "columns", predicate: SkyDataGridColumn, isSignal: true }], ngImport: i0, template: "<sky-wait [isWaiting]=\"!gridReady()\" />\n@if (gridOptions(); as gridOptions) {\n  <!-- The grid keeps its column headers visible itself, below. -->\n  <sky-ag-grid-wrapper\n    viewkeeperDisabled\n    [compact]=\"compact()\"\n    [minHeight]=\"minHeight()\"\n  >\n    <ag-grid-angular\n      skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n      [skyViewkeeper]=\"skyViewkeeper()\"\n      [gridOptions]=\"gridOptions\"\n    />\n  </sky-ag-grid-wrapper>\n\n  @if (pageCount() && pageSize(); as pageSize) {\n    <sky-paging\n      [currentPage]=\"page()\"\n      [itemCount]=\"pageItemsCount()\"\n      [pageSize]=\"pageSize\"\n      (currentPageChange)=\"currentPageChange($event)\"\n    />\n  }\n}\n", styles: [":host{display:block;max-width:100%}:host.sky-data-grid-dock-fill{position:absolute;inset:0;display:flex;flex-direction:column}:host.sky-data-grid-dock-fill sky-ag-grid-wrapper{flex:1 1 auto;min-height:0}\n"], dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "component", type: i1$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight", "viewkeeperDisabled"] }, { kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i3.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGrid, decorators: [{
             type: Component,
@@ -847,9 +1273,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyViewkeeperModule,
                         SkyWaitModule,
                     ], host: {
-                        '[class.sky-margin-stacked-lg]': 'stacked()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-wait [isWaiting]=\"!gridReady()\" />\n@if (gridOptions(); as gridOptions) {\n  <sky-ag-grid-wrapper [compact]=\"compact()\" [minHeight]=\"minHeight()\">\n    <ag-grid-angular\n      skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n      [skyViewkeeper]=\"skyViewkeeper()\"\n      [gridOptions]=\"gridOptions\"\n    />\n  </sky-ag-grid-wrapper>\n\n  @if (pageCount() && pageSize(); as pageSize) {\n    <sky-paging\n      [currentPage]=\"page()\"\n      [itemCount]=\"pageItemsCount()\"\n      [pageSize]=\"pageSize\"\n      (currentPageChange)=\"currentPageChange($event)\"\n    />\n  }\n}\n", styles: [":host{display:block;max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { autoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSort", required: false }] }], autoPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPage", required: false }] }], columnFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFit", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageQueryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageQueryParam", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], topScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "topScrollEnabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], selectedRowIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowIds", required: false }] }, { type: i0.Output, args: ["selectedRowIdsChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyDataGridColumn), { isSignal: true }] }] } });
+                        '[class.sky-data-grid-dock-fill]': 'useFillDock()',
+                        '[class.sky-margin-stacked-lg]': 'useStacked()',
+                    }, providers: [
+                        { provide: SkyDataColumnSource, useExisting: SkyDataGrid },
+                        { provide: SkyDataSelectionSource, useExisting: SkyDataGrid },
+                        { provide: SkyDataSortSource, useExisting: SkyDataGrid },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-wait [isWaiting]=\"!gridReady()\" />\n@if (gridOptions(); as gridOptions) {\n  <!-- The grid keeps its column headers visible itself, below. -->\n  <sky-ag-grid-wrapper\n    viewkeeperDisabled\n    [compact]=\"compact()\"\n    [minHeight]=\"minHeight()\"\n  >\n    <ag-grid-angular\n      skyViewkeeperOmitShadow=\".ag-body-horizontal-scroll\"\n      [skyViewkeeper]=\"skyViewkeeper()\"\n      [gridOptions]=\"gridOptions\"\n    />\n  </sky-ag-grid-wrapper>\n\n  @if (pageCount() && pageSize(); as pageSize) {\n    <sky-paging\n      [currentPage]=\"page()\"\n      [itemCount]=\"pageItemsCount()\"\n      [pageSize]=\"pageSize\"\n      (currentPageChange)=\"currentPageChange($event)\"\n    />\n  }\n}\n", styles: [":host{display:block;max-width:100%}:host.sky-data-grid-dock-fill{position:absolute;inset:0;display:flex;flex-direction:column}:host.sky-data-grid-dock-fill sky-ag-grid-wrapper{flex:1 1 auto;min-height:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSort", required: false }] }], autoPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPage", required: false }] }], columnFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFit", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dock: [{ type: i0.Input, args: [{ isSignal: true, alias: "dock", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageQueryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageQueryParam", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], topScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "topScrollEnabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], selectedRowIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowIds", required: false }] }, { type: i0.Output, args: ["selectedRowIdsChange"] }], selectedColumnIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColumnIds", required: false }] }, { type: i0.Output, args: ["selectedColumnIdsChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyDataGridColumn), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.