@skyux/data-grid 0.0.1-alpha.0 → 14.5.0

package/fesm2022/skyux-data-grid.mjs

@@ -0,0 +1,833 @@
+import { coerceBooleanProperty, coerceNumberProperty, coerceStringArray, coerceArray } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, numberAttribute, contentChild, TemplateRef, computed, inject, afterRenderEffect, ChangeDetectionStrategy, Component, model, contentChildren, signal, untracked, linkedSignal, effect } from '@angular/core';
+import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as i1$1 from '@skyux/ag-grid';
+import { SkyAgGridHeaderInfo, SkyAgGridService, SkyCellType, SkyAgGridModule } from '@skyux/ag-grid';
+import * as i3 from '@skyux/core';
+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 { AgGridAngular } from 'ag-grid-angular';
+import { ModuleRegistry, CellStyleModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, EventApiModule, GridStateModule, PaginationModule, RenderApiModule, RowApiModule, RowAutoHeightModule, RowSelectionModule, RowStyleModule, ValidationModule } 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';
+
+/**
+ * Defines a single column in a `SkyDataGrid`. Add one `sky-data-grid-column` for each
+ * column to render.
+ * @preview
+ */
+class SkyDataGridColumn {
+    constructor() {
+        /**
+         * Whether the column is hidden.
+         * @default false
+         */
+        this.columnHidden = input(false, { ...(ngDevMode ? { debugName: "columnHidden" } : {}), transform: booleanAttribute });
+        /**
+         * The unique ID for the column. You must provide either the `columnId` or `field` property
+         * for every column, but do not provide both. Use `columnId` when the column does not map directly to a field
+         * in the data set.
+         */
+        this.columnId = input(...(ngDevMode ? [undefined, { debugName: "columnId" }] : []));
+        /**
+         * The data type of the column used for sorting and rendering when a template is not provided.
+         * @default 'text'
+         */
+        this.dataType = input('text', ...(ngDevMode ? [{ debugName: "dataType" }] : []));
+        /**
+         * 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,
+         * but do not provide both. When a column maps directly to a property on the data,
+         * use `field`; the column's ID defaults to the `field` value.
+         */
+        this.field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
+        /**
+         * When set, `flexWidth` takes precedence over `width` for sizing and works like
+         * [CSS flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow), where a column
+         * with `flexWidth="2"` is twice the width of a column with `flexWidth="1"`, and `flexWidth="0"` does not auto-expand.
+         * If `width` is also set, it acts as the column's minimum width.
+         */
+        this.flexWidth = input(undefined, { ...(ngDevMode ? { debugName: "flexWidth" } : {}), transform: (value) => numberAttribute(value, undefined) });
+        /**
+         * Text to display in the column header.
+         * @required
+         */
+        this.headingText = input.required(...(ngDevMode ? [{ debugName: "headingText" }] : []));
+        /**
+         * Whether to visually hide `headingText` while keeping it available to
+         * assistive technologies. The header cell still renders, so its sorting and
+         * resizing controls remain available.
+         * @default false
+         */
+        this.headingHidden = input(false, { ...(ngDevMode ? { debugName: "headingHidden" } : {}), transform: booleanAttribute });
+        /**
+         * The title of the help popover. This property only applies when `helpPopoverContent` is
+         * also specified.
+         */
+        this.helpPopoverTitle = input(...(ngDevMode ? [undefined, { debugName: "helpPopoverTitle" }] : []));
+        /**
+         * The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)
+         * button is added to the column header. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)
+         * when clicked using the specified content and optional title.
+         */
+        this.helpPopoverContent = input(...(ngDevMode ? [undefined, { debugName: "helpPopoverContent" }] : []));
+        /**
+         * 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.
+         * @default false
+         */
+        this.locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : {}), transform: booleanAttribute });
+        /**
+         * Whether the column can be resized by dragging the column header border.
+         * @default true
+         */
+        this.resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+        /**
+         * Whether the column sorts the grid when users click the column header.
+         * @default true
+         */
+        this.sortable = input(true, { ...(ngDevMode ? { debugName: "sortable" } : {}), transform: booleanAttribute });
+        /**
+         * The template for a column. This can be assigned as a reference
+         * to the `template` input, or it can be assigned as an `<ng-template>` child
+         * of the `sky-data-grid-column` component. The template has access to the `value` variable,
+         * which contains the value passed to the column, and the `row` variable, which contains
+         * the entire row data.
+         */
+        this.template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : []));
+        /**
+         * The width of the column in pixels. Used as the column's initial width; the
+         * column can still be resized and is included when columns are sized to fit
+         * the grid's width. When `flexWidth` is also set, `width` instead acts as the
+         * column's minimum width. When no width is set, the column width is evenly distributed.
+         */
+        this.width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : {}), transform: (value) => numberAttribute(value, undefined) });
+        /**
+         * Whether text in this column should wrap to multiple lines.
+         * @default false
+         */
+        this.wrapText = input(false, { ...(ngDevMode ? { debugName: "wrapText" } : {}), transform: booleanAttribute });
+        this.templateChild = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "templateChild" }] : []));
+        /**
+         * @internal
+         */
+        this.cellTemplate = computed(() => {
+            const template = this.template();
+            const templateChild = this.templateChild();
+            return template || templateChild;
+        }, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : []));
+        const logger = inject(SkyLogService);
+        afterRenderEffect(() => {
+            const columnId = this.columnId();
+            const field = this.field();
+            if (columnId && field) {
+                logger.warn(`A <sky-data-grid-column> should have either a columnId or a field, but not both.`);
+            }
+            if (!columnId && !field) {
+                logger.warn(`A <sky-data-grid-column> must have a columnId or a field.`);
+            }
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGridColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-data-grid-column',
+                    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 }] }] } });
+
+/**
+ * @internal
+ */
+class SkyDataGridColumnInlineHelp {
+    constructor() {
+        this.info = inject(SkyAgGridHeaderInfo);
+        this.showHelpInline = computed(() => !!this.helpPopoverContent(), ...(ngDevMode ? [{ debugName: "showHelpInline" }] : []));
+        this.helpPopoverTitle = computed(() => this.#headerComponentParams()?.helpPopoverTitle, ...(ngDevMode ? [{ debugName: "helpPopoverTitle" }] : []));
+        this.helpPopoverContent = computed(() => this.#headerComponentParams()?.helpPopoverContent, ...(ngDevMode ? [{ debugName: "helpPopoverContent" }] : []));
+        this.#headerComponentParams = computed(() => this.info.column?.getColDef().headerComponentParams, ...(ngDevMode ? [{ debugName: "#headerComponentParams" }] : []));
+    }
+    #headerComponentParams;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGridColumnInlineHelp, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDataGridColumnInlineHelp, isStandalone: true, selector: "sky-data-grid-column-inline-help", ngImport: i0, template: `@if (showHelpInline()) {
+    <sky-help-inline
+      [popoverTitle]="helpPopoverTitle()"
+      [popoverContent]="helpPopoverContent()"
+    />
+  }`, isInline: true, dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGridColumnInlineHelp, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-data-grid-column-inline-help',
+                    imports: [SkyHelpInlineModule],
+                    template: `@if (showHelpInline()) {
+    <sky-help-inline
+      [popoverTitle]="helpPopoverTitle()"
+      [popoverContent]="helpPopoverContent()"
+    />
+  }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+function fromGridEvent(target, eventType) {
+    return new Observable((subscriber) => {
+        const handler = (event) => subscriber.next(event);
+        target.addEventListener(eventType, handler);
+        return () => {
+            if (!target.isDestroyed || !target.isDestroyed()) {
+                target.removeEventListener(eventType, handler);
+            }
+        };
+    });
+}
+
+// Register only the AG Grid community modules this component actually uses,
+// rather than `AllCommunityModule`, to keep the consumer's bundle lean. This
+// covers the client-side row model, sorting, pagination, row selection, cell
+// and row styling, column auto-sizing, auto-height (text wrap), the grid/column
+// state and event APIs the component and its harness rely on, and dev-time
+// validation messaging.
+ModuleRegistry.registerModules([
+    CellStyleModule,
+    ClientSideRowModelApiModule,
+    ClientSideRowModelModule,
+    ColumnApiModule,
+    ColumnAutoSizeModule,
+    EventApiModule,
+    GridStateModule,
+    PaginationModule,
+    RenderApiModule,
+    RowApiModule,
+    RowAutoHeightModule,
+    RowSelectionModule,
+    RowStyleModule,
+    ValidationModule,
+]);
+function arraySorted(arr) {
+    return arr.slice().sort((a, b) => a.localeCompare(b));
+}
+/**
+ * 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.
+ * @preview
+ */
+class SkyDataGrid {
+    #activatedRoute;
+    #gridService;
+    #logger;
+    #router;
+    #columnDefs;
+    #hasColumnDefs;
+    #gridDestroyed;
+    #gridSelectedRowIds;
+    #gridSortChange;
+    /**
+     * The pagination options passed to AG Grid; not used when `autoPage` is false.
+     */
+    #paginationOptions;
+    #queryParamPage;
+    constructor() {
+        /**
+         * Whether the grid sorts the data order when a column header is clicked.
+         * When `autoSort` is set to `false`, the data grid will not modify the sort
+         * order, `sort` will emit a new value, and `data` will need to be updated.
+         * Use this option when the data is returned from the server already sorted,
+         * such as sorting a "name" column using last name.
+         * @default true
+         */
+        this.autoSort = input(true, { ...(ngDevMode ? { debugName: "autoSort" } : {}), transform: coerceBooleanProperty });
+        /**
+         * Whether the items in `data` represent the full result set used for paging.
+         * This applies only when `pageSize` is greater than zero. When `true` (the
+         * default), the grid pages through `data` on the client. When `false`, the
+         * `rowCount` input is required to size the paging controls, and `data` should
+         * be updated to the rows for the current page whenever `page` emits a new
+         * value (server-side paging).
+         * @default true
+         */
+        this.autoPage = input(true, { ...(ngDevMode ? { debugName: "autoPage" } : {}), transform: coerceBooleanProperty });
+        /**
+         * How the grid columns are sized. The valid options are `container`, which
+         * attempts to fit the grid to the parent's full width, and `content`, which
+         * attempts to optimize columns to display their contents and may exceed the
+         * parent's width. If the grid does not have enough columns to fill
+         * the parent's width, it always stretches to the parent's full width.
+         * This property is applied when the grid initializes; changes after
+         * initialization are not reflected.
+         * @default 'container'
+         */
+        this.columnFit = input('container', ...(ngDevMode ? [{ debugName: "columnFit" }] : []));
+        /**
+         * Whether to enable a compact layout for the grid when using modern theme. Compact layout
+         * uses a smaller font size and row height to display more data in a smaller space.
+         * @default false
+         */
+        this.compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : {}), transform: coerceBooleanProperty });
+        /**
+         * The data for the grid. Each item must implement `SkyDataGridRowData`, and other properties should map to a `field` of the grid columns.
+         * When `data` is `null` or `undefined`, the grid will show a loading indicator, and when `data` is an empty array,
+         * the grid will show a "no rows" message.
+         */
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        /**
+         * The text to read to screen readers to describe the grid. This sets the `aria-label` attribute on the grid container.
+         */
+        this.labelText = input(...(ngDevMode ? [undefined, { debugName: "labelText" }] : []));
+        /**
+         * Whether data is being loaded. When `loading` is true or when `data` is nullish,
+         * the grid shows a waiting overlay and is not interactive.
+         * @default false
+         */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: coerceBooleanProperty });
+        /**
+         * The minimum height of the grid in pixels.
+         * @default 50
+         */
+        this.minHeight = input(50, { ...(ngDevMode ? { debugName: "minHeight" } : {}), transform: (value) => coerceNumberProperty(value, 50) });
+        /**
+         * Whether to enable the multiselect feature to display a column of
+         * checkboxes on the left side of the grid.
+         * @default false
+         */
+        this.multiselect = input(false, { ...(ngDevMode ? { debugName: "multiselect" } : {}), transform: coerceBooleanProperty });
+        /**
+         * The number of items to display per page. Setting a value greater than zero
+         * enables paging. When `autoPage` is `true` (the default), the grid pages
+         * through `data` on the client; when `autoPage` is `false`, set `rowCount` to
+         * the total number of rows and update `data` as `page` changes.
+         */
+        this.pageSize = input(undefined, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: (value) => coerceNumberProperty(value, undefined) });
+        /**
+         * The query parameter name that stores the current page number.
+         * When set, the grid syncs page changes to the URL for deep linking, and there should only be one grid on the page.
+         */
+        this.pageQueryParam = input(...(ngDevMode ? [undefined, { debugName: "pageQueryParam" }] : []));
+        /**
+         * The total number of rows to page through, used to calculate how many pages
+         * the paging controls display. Required when `pageSize` is greater than zero
+         * and `autoPage` is `false`; ignored when `autoPage` is `true` because the
+         * length of `data` is used instead.
+         */
+        this.rowCount = input(undefined, { ...(ngDevMode ? { debugName: "rowCount" } : {}), transform: (value) => {
+                if (typeof value === 'undefined') {
+                    return undefined;
+                }
+                return coerceNumberProperty(value, undefined);
+            } });
+        /**
+         * Whether the data grid is stacked with another element below it. When specified, the appropriate
+         * vertical spacing is automatically added to the data grid.
+         * @default false
+         */
+        this.stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : {}), transform: coerceBooleanProperty });
+        /**
+         * Whether to move the horizontal scrollbar to just below the header row.
+         * This property is applied when the grid initializes; changes after
+         * initialization are not reflected.
+         * @default false
+         */
+        this.topScrollEnabled = input(false, { ...(ngDevMode ? { debugName: "topScrollEnabled" } : {}), transform: coerceBooleanProperty });
+        /**
+         * The current page number of the grid when `pageSize` has been set. This is two-way bindable:
+         * it updates as the user navigates pages, and you can set it to change the current page.
+         * When `autoPage` is `false`, update `data` to the rows for the new page whenever this changes.
+         * @default 1
+         */
+        this.page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        /**
+         * The set of IDs for the rows to select in a multiselect grid.
+         * Rows with IDs that are not included are de-selected in the grid. This is two-way bindable:
+         * it emits the updated set of IDs when the user changes the selection.
+         * @default []
+         */
+        this.selectedRowIds = model([], ...(ngDevMode ? [{ debugName: "selectedRowIds" }] : []));
+        /**
+         * 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.
+         * When `autoSort` is `false`, the grid emits the new value here but does not reorder the
+         * data itself, leaving it to you to update `data`.
+         */
+        this.sort = model(undefined, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+        this.columns = contentChildren(SkyDataGridColumn, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.gridApi = signal(undefined, ...(ngDevMode ? [{ debugName: "gridApi" }] : []));
+        this.gridOptions = computed(() => {
+            const hasColumnDefs = this.#hasColumnDefs();
+            if (!hasColumnDefs) {
+                return undefined;
+            }
+            const columnDefs = untracked(() => this.#columnDefs());
+            const { pagination, paginationPageSize } = untracked(() => this.#paginationOptions());
+            const rowData = untracked(() => this.rowData());
+            // Seed the initial sort through AG Grid's own state so it is applied as the
+            // grid initializes (and re-applied when the grid is recreated). Subsequent
+            // sort changes are applied at runtime by the dedicated `sort` effect.
+            const sort = untracked(() => this.sort());
+            return this.#gridService.getGridOptions({
+                gridOptions: {
+                    columnDefs,
+                    context: {
+                        enableTopScroll: untracked(() => this.topScrollEnabled()),
+                    },
+                    domLayout: 'autoHeight',
+                    initialState: sort
+                        ? {
+                            sort: {
+                                sortModel: [
+                                    { colId: sort.field, sort: sort.direction },
+                                ],
+                            },
+                        }
+                        : undefined,
+                    loading: untracked(() => this.loading() || !Array.isArray(this.data())),
+                    onGridReady: (args) => {
+                        this.gridApi.set(args.api);
+                        this.gridReady.set(true);
+                    },
+                    pagination,
+                    paginationPageSize,
+                    suppressMultiSort: true,
+                    suppressPaginationPanel: true,
+                    rowData: rowData.length ? rowData : null,
+                    rowSelection: untracked(() => this.#getRowSelection()),
+                    autoSizeStrategy: untracked(() => this.#getAutoSizeStrategy()),
+                },
+            });
+        }, ...(ngDevMode ? [{ debugName: "gridOptions" }] : []));
+        this.gridReady = signal(false, ...(ngDevMode ? [{ debugName: "gridReady" }] : []));
+        this.rowData = computed(() => {
+            const rowData = this.data() ?? [];
+            const pageSize = this.pageSize();
+            if (!this.autoPage() && pageSize && rowData.length > pageSize) {
+                this.#logger.warn('When using paging and `autoPage` is not enabled, the `data` input will be limited to the number of rows specified by `pageSize`. To display more rows, update the `data` input when the `page` changes.');
+                return rowData.slice(0, pageSize);
+            }
+            return rowData;
+        }, ...(ngDevMode ? [{ debugName: "rowData" }] : []));
+        this.pageCount = computed(() => {
+            const dataLength = this.pageItemsCount();
+            const pageSize = this.pageSize();
+            const gridReady = this.gridReady();
+            if (!gridReady || !pageSize) {
+                return 0;
+            }
+            return Math.ceil(dataLength / pageSize);
+        }, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+        this.pageItemsCount = linkedSignal({ ...(ngDevMode ? { debugName: "pageItemsCount" } : {}), source: () => {
+                const pageSize = this.pageSize();
+                const gridReady = this.gridReady();
+                const rowCount = this.rowCount() ?? 0;
+                if (!gridReady || !pageSize) {
+                    return 0;
+                }
+                const dataLength = this.rowData().length;
+                const autoPage = this.autoPage();
+                return autoPage ? dataLength : rowCount;
+            },
+            computation: (source, previous) => {
+                // Avoid flickering the pagination controls while data is updating.
+                if (this.loading()) {
+                    return previous?.value || 0;
+                }
+                return source;
+            } });
+        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');
+            }
+            return classes;
+        }, ...(ngDevMode ? [{ debugName: "skyViewkeeper" }] : []));
+        this.#activatedRoute = inject(ActivatedRoute, { optional: true });
+        this.#gridService = inject(SkyAgGridService);
+        this.#logger = inject(SkyLogService);
+        this.#router = inject(Router, { optional: true });
+        this.#columnDefs = computed(() => {
+            const columns = this.columns();
+            return columns.map((col) => this.#createColDef(col));
+        }, ...(ngDevMode ? [{ debugName: "#columnDefs" }] : []));
+        this.#hasColumnDefs = computed(() => this.#columnDefs().length > 0, ...(ngDevMode ? [{ debugName: "#hasColumnDefs" }] : []));
+        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) => {
+            const sortColumn = sortEvent?.columns?.find((col) => !!col.getSort());
+            if (sortColumn) {
+                return {
+                    direction: sortColumn.getSort(),
+                    field: sortColumn.getColId(),
+                };
+            }
+            return undefined;
+        }))));
+        /**
+         * The pagination options passed to AG Grid; not used when `autoPage` is false.
+         */
+        this.#paginationOptions = computed(() => {
+            const pageSize = this.pageSize();
+            const pagination = this.autoPage() && !!pageSize;
+            const paginationPageSize = (pagination && pageSize) || undefined;
+            return {
+                pagination,
+                paginationPageSize,
+            };
+        }, ...(ngDevMode ? [{ debugName: "#paginationOptions" }] : []));
+        this.#queryParamPage = toSignal(toObservable(this.pageQueryParam).pipe(switchMap((pageQueryParam) => pageQueryParam && this.#activatedRoute
+            ? this.#activatedRoute.queryParamMap.pipe(startWith(this.#activatedRoute.snapshot.queryParamMap), map((params) => coerceNumberProperty(params.get(pageQueryParam), NaN)))
+            : [])), { initialValue: NaN });
+        // Update specific grid options after the grid has been loaded. These read
+        // `gridApi` untracked because a recreated grid rebuilds its options from the
+        // `gridOptions` computed; the selection and page effects below instead track
+        // `gridApi` so they re-apply their state to a freshly created grid.
+        effect(() => {
+            const api = untracked(() => this.gridApi());
+            const columnDefs = this.#columnDefs();
+            api?.setGridOption('columnDefs', columnDefs);
+        });
+        effect(() => {
+            const api = untracked(() => this.gridApi());
+            const isLoading = this.loading() || !Array.isArray(this.data());
+            api?.setGridOption('loading', isLoading);
+        });
+        effect(() => {
+            const api = untracked(() => this.gridApi());
+            const { pagination, paginationPageSize } = this.#paginationOptions();
+            api?.setGridOption('pagination', pagination);
+            api?.setGridOption('paginationPageSize', paginationPageSize);
+        });
+        effect(() => {
+            const api = untracked(() => this.gridApi());
+            const rowData = this.rowData();
+            api?.setGridOption('rowData', rowData);
+        });
+        effect(() => {
+            const api = untracked(() => this.gridApi());
+            const rowSelection = this.#getRowSelection();
+            api?.setGridOption('rowSelection', rowSelection);
+        });
+        // Apply inputs once the grid is loaded and on subsequent changes.
+        effect(() => {
+            const api = this.gridApi();
+            const isLoading = this.loading() || !Array.isArray(this.data());
+            // Don't reconcile selection while data is still loading; pruning here
+            // would wipe a selection a consumer set before the rows arrived.
+            // An empty array is "loaded but no rows", so only `null`/`undefined` skip.
+            if (isLoading) {
+                return;
+            }
+            const validRowIds = new Set(this.rowData().map((row) => row.id));
+            const selectedRowIds = coerceStringArray(this.selectedRowIds());
+            const validSelectedRowIds = selectedRowIds.filter((id) => validRowIds.has(id));
+            if (this.autoPage() &&
+                validSelectedRowIds.length !== selectedRowIds.length) {
+                this.selectedRowIds.set(validSelectedRowIds);
+            }
+            if (!api) {
+                return;
+            }
+            // Diff against the grid's current selection; only touch nodes that
+            // change, so a no-op reconcile fires no selectionChanged event.
+            const desired = new Set(validSelectedRowIds);
+            const selectedNodes = api.getSelectedNodes();
+            const alreadySelected = new Set(this.#getRowIds(selectedNodes));
+            const toDeselect = selectedNodes.filter((node) => !desired.has(node.id));
+            const toSelect = validSelectedRowIds
+                .filter((id) => !alreadySelected.has(id))
+                .map((id) => api.getRowNode(id))
+                .filter((node) => !!node);
+            if (toDeselect.length) {
+                api.setNodesSelected({ nodes: toDeselect, newValue: false });
+            }
+            if (toSelect.length) {
+                api.setNodesSelected({ nodes: toSelect, newValue: true });
+            }
+        });
+        // Apply the sort as runtime column state rather than through `columnDefs`,
+        // so sorting never re-applies the declared column order and wipes a
+        // user's drag-reordered (or resized) columns. Tracks `gridApi` so the
+        // sort re-applies to a freshly created grid.
+        effect(() => {
+            const api = this.gridApi();
+            const sort = this.sort();
+            if (!api) {
+                return;
+            }
+            api.applyColumnState({
+                state: sort
+                    ? [
+                        {
+                            colId: sort.field,
+                            sort: sort.direction,
+                        },
+                    ]
+                    : [],
+                defaultState: { sort: null },
+            });
+        });
+        effect(() => {
+            const api = this.gridApi();
+            const page = this.page();
+            const pageCount = this.pageCount();
+            if (!pageCount || !api) {
+                return;
+            }
+            if (page < 1) {
+                this.currentPageChange(1);
+            }
+            else if (page > pageCount) {
+                this.currentPageChange(pageCount);
+            }
+            else {
+                if (untracked(this.autoPage)) {
+                    api.paginationGoToPage(page - 1);
+                }
+                // When the page is set programmatically (rather than through the
+                // paging controls), sync the change to the URL query parameter.
+                this.#syncPageQueryParam(page);
+            }
+        });
+        effect(() => {
+            const api = this.gridApi();
+            const label = this.labelText();
+            api?.setGridAriaProperty('label', label ?? null);
+        });
+        // Sync page from URL query parameter.
+        effect(() => {
+            const queryParamPage = this.#queryParamPage();
+            const pageSize = this.pageSize();
+            if (pageSize && Number.isInteger(queryParamPage)) {
+                this.page.set(queryParamPage);
+            }
+        });
+        // Warn when server-side paging is configured without the required
+        // `rowCount`. Without it, `pageItemsCount` resolves to zero and the paging
+        // controls silently disappear. Only warn once data has loaded so a grid
+        // that is still fetching its first page does not trigger a false positive.
+        effect(() => {
+            if (!this.autoPage() &&
+                this.pageSize() &&
+                this.rowCount() === undefined &&
+                !this.loading() &&
+                Array.isArray(this.data())) {
+                this.#logger.warn('When using paging and `autoPage` is not enabled, the `rowCount` input is required so the paging controls know how many pages to display. Set `rowCount` to the total number of rows available on the server.');
+            }
+        });
+        this.#gridDestroyed.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.gridApi.set(undefined);
+            this.gridReady.set(false);
+        });
+        // Emit updates from the grid.
+        this.#gridSelectedRowIds
+            .pipe(takeUntilDestroyed(), map((ids) => coerceStringArray(ids)))
+            .subscribe((selectedRowIds) => {
+            // Maintain IDs not in the current dataset.
+            const validRowIds = new Set(this.rowData().map(({ id }) => id));
+            const selectedSet = new Set(selectedRowIds);
+            this.selectedRowIds.update((val) => {
+                const valSet = new Set(val);
+                const hasAddition = selectedRowIds.some((id) => !valSet.has(id));
+                const hasRemoval = val.some((id) => validRowIds.has(id) && !selectedSet.has(id));
+                if (hasAddition || hasRemoval) {
+                    return [
+                        ...new Set([
+                            ...val.filter((id) => !validRowIds.has(id)),
+                            ...selectedRowIds,
+                        ]),
+                    ].sort((a, b) => a.localeCompare(b));
+                }
+                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);
+            }
+        });
+    }
+    currentPageChange(page) {
+        if (page && page !== this.page()) {
+            const pageQueryParam = this.pageQueryParam();
+            if (pageQueryParam) {
+                // When using a query parameter, send the change through the router.
+                this.#navigateToPageQueryParam(pageQueryParam, page);
+            }
+            else {
+                this.page.set(page);
+            }
+        }
+    }
+    /**
+     * Updates the URL to reflect a programmatic page change so deep linking stays
+     * in sync when a consumer drives `page` directly instead of using the paging
+     * controls. Reads untracked so it does not add reactive dependencies to the
+     * effect that calls it.
+     */
+    #syncPageQueryParam(page) {
+        const pageQueryParam = untracked(this.pageQueryParam);
+        if (pageQueryParam && untracked(this.#queryParamPage) !== page) {
+            this.#navigateToPageQueryParam(pageQueryParam, page);
+        }
+    }
+    #navigateToPageQueryParam(pageQueryParam, page) {
+        void this.#router?.navigate([], {
+            relativeTo: this.#activatedRoute,
+            queryParams: {
+                [pageQueryParam]: page === 1 ? null : page,
+            },
+            queryParamsHandling: 'merge',
+        });
+    }
+    #createColDef(col) {
+        const field = col.field();
+        const colDef = {
+            colId: col.columnId(),
+            field,
+            headerName: col.headingText(),
+            headerComponentParams: this.#getHeaderComponentParams(col),
+            hide: col.columnHidden(),
+            initialHide: col.columnHidden(),
+            resizable: col.resizable(),
+            sortable: col.sortable(),
+            lockPosition: col.locked(),
+            suppressMovable: col.locked(),
+            type: [],
+            autoHeight: col.wrapText(),
+            wrapText: col.wrapText(),
+        };
+        if (col.dataType() === 'date') {
+            colDef.type.push(SkyCellType.Date);
+            colDef.cellDataType = 'dateString';
+        }
+        else if (field && col.dataType() === 'number') {
+            colDef.type.push(SkyCellType.Number);
+            colDef.cellDataType = 'number';
+            colDef.valueGetter = (params) => {
+                const n = Number(params.data?.[field]);
+                return Number.isFinite(n) ? n : null;
+            };
+        }
+        else if (col.dataType() === 'boolean') {
+            colDef.cellDataType = 'boolean';
+        }
+        else {
+            colDef.type.push(SkyCellType.Text);
+            colDef.cellDataType = 'text';
+        }
+        const colWithTemplate = col;
+        if (colWithTemplate.cellTemplate()) {
+            colDef.type.push(SkyCellType.Template);
+            colDef.cellRendererParams = { template: colWithTemplate.cellTemplate };
+        }
+        if (!this.autoSort()) {
+            colDef.comparator = () => 0;
+        }
+        this.#applyColumnWidthSettings(col, colDef);
+        return colDef;
+    }
+    #applyColumnWidthSettings(col, colDef) {
+        if (Number.isFinite(col.flexWidth())) {
+            colDef.flex = col.flexWidth();
+            colDef.initialFlex = col.flexWidth();
+            if (Number.isFinite(col.width())) {
+                colDef.minWidth = col.width();
+            }
+        }
+        else if (Number.isFinite(col.width())) {
+            colDef.initialWidth = col.width();
+            colDef.suppressAutoSize = true;
+        }
+        if (!col.resizable() || col.flexWidth() === 0) {
+            colDef.suppressSizeToFit = true;
+            colDef.suppressAutoSize = true;
+            if (!col.resizable() && Number.isFinite(col.width())) {
+                colDef.minWidth = col.width();
+                colDef.maxWidth = col.width();
+            }
+        }
+    }
+    #getHeaderComponentParams(col) {
+        return {
+            headerHidden: col.headingHidden(),
+            helpPopoverTitle: col.helpPopoverTitle(),
+            helpPopoverContent: col.helpPopoverContent(),
+            inlineHelpComponent: SkyDataGridColumnInlineHelp,
+        };
+    }
+    #getRowIds(rows) {
+        return coerceArray(rows)
+            .map((node) => node?.id)
+            .filter(Boolean);
+    }
+    #hasFlexColumns() {
+        return this.#columnDefs().some((col) => !!col.initialFlex);
+    }
+    #getAutoSizeStrategy() {
+        if (this.#hasFlexColumns()) {
+            // Avoid the console warning if `autoSizeColumns` is called on a grid with flex columns, so skip it.
+            return undefined;
+        }
+        return {
+            type: 'fitCellContents',
+            skipHeader: true,
+            scaleUpToFitGridWidth: this.columnFit() === 'container',
+        };
+    }
+    #getRowSelection() {
+        return this.multiselect()
+            ? {
+                checkboxes: true,
+                checkboxLocation: 'selectionColumn',
+                headerCheckbox: true,
+                mode: 'multiRow',
+            }
+            : { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDataGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-grid', imports: [
+                        AgGridAngular,
+                        SkyAgGridModule,
+                        SkyPagingModule,
+                        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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDataGrid, SkyDataGridColumn };
+//# sourceMappingURL=skyux-data-grid.mjs.map