@skyux/list-builder-view-grids 7.0.0-beta.11 → 7.0.0-beta.13

package/fesm2015/skyux-list-builder-view-grids.mjs

@@ -19,906 +19,906 @@ import { AsyncList, StateDispatcher, StateOrchestrator, StateNode, isObservable,
 import { Subject, of } from 'rxjs';
 import * as i4$1 from '@skyux/core';
 
-/* istanbul ignore next */
-/* Code coverage having problems with no statements in classes */
-/**
- * @deprecated
- */
-class SkyColumnSelectorContext {
-}
-/* istanbul ignore next */
-/* Code coverage having problems with no statements in classes */
-/**
- * @deprecated
- */
-class SkyColumnSelectorModel {
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+/**
+ * @deprecated
+ */
+class SkyColumnSelectorContext {
+}
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+/**
+ * @deprecated
+ */
+class SkyColumnSelectorModel {
 }
 
-class SkyColumnSelectorComponent {
-    constructor(context, instance) {
-        this.context = context;
-        this.instance = instance;
-        this.newSelectedColumnIds = [];
-        this.newSelectedColumnIds = context.selectedColumnIds;
-    }
-    selectedColumnsChange(selectedMap) {
-        this.newSelectedColumnIds = [];
-        selectedMap.forEach((value, key) => {
-            if (value) {
-                this.newSelectedColumnIds.push(key);
-            }
-        });
-    }
-    cancelChanges() {
-        this.instance.cancel();
-    }
-    applyChanges() {
-        this.instance.save(this.newSelectedColumnIds);
-    }
-}
-SkyColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorComponent, deps: [{ token: SkyColumnSelectorContext }, { token: i2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
-SkyColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyColumnSelectorComponent, selector: "sky-column-selector", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_grid_column_picker_header' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-list\n      #list\n      [data]=\"context.columns\"\n      [selectedIds]=\"context.selectedColumnIds\"\n      (selectedIdsChange)=\"selectedColumnsChange($event)\"\n    >\n      <sky-list-toolbar\n        [placeholder]=\"\n          'skyux_grid_column_picker_search_placeholder' | skyLibResources\n        \"\n      >\n      </sky-list-toolbar>\n\n      <sky-list-view-checklist label=\"heading\" description=\"description\">\n      </sky-list-view-checklist>\n    </sky-list>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_submit' | skyLibResources }}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: i2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i1.SkyListComponent, selector: "sky-list", inputs: ["data", "dataProvider", "defaultView", "initialTotal", "selectedIds", "sortFields", "appliedFilters", "search"], outputs: ["selectedIdsChange", "appliedFiltersChange"] }, { kind: "component", type: i1.SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: ["inMemorySearchEnabled", "placeholder", "searchEnabled", "sortSelectorEnabled", "toolbarType", "searchText"] }, { kind: "component", type: i4.SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: ["name", "search", "label", "description", "selectMode", "showOnlySelected"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-column-selector', template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_grid_column_picker_header' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-list\n      #list\n      [data]=\"context.columns\"\n      [selectedIds]=\"context.selectedColumnIds\"\n      (selectedIdsChange)=\"selectedColumnsChange($event)\"\n    >\n      <sky-list-toolbar\n        [placeholder]=\"\n          'skyux_grid_column_picker_search_placeholder' | skyLibResources\n        \"\n      >\n      </sky-list-toolbar>\n\n      <sky-list-view-checklist label=\"heading\" description=\"description\">\n      </sky-list-view-checklist>\n    </sky-list>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_submit' | skyLibResources }}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
+class SkyColumnSelectorComponent {
+    constructor(context, instance) {
+        this.context = context;
+        this.instance = instance;
+        this.newSelectedColumnIds = [];
+        this.newSelectedColumnIds = context.selectedColumnIds;
+    }
+    selectedColumnsChange(selectedMap) {
+        this.newSelectedColumnIds = [];
+        selectedMap.forEach((value, key) => {
+            if (value) {
+                this.newSelectedColumnIds.push(key);
+            }
+        });
+    }
+    cancelChanges() {
+        this.instance.cancel();
+    }
+    applyChanges() {
+        this.instance.save(this.newSelectedColumnIds);
+    }
+}
+SkyColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorComponent, deps: [{ token: SkyColumnSelectorContext }, { token: i2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
+SkyColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyColumnSelectorComponent, selector: "sky-column-selector", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_grid_column_picker_header' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-list\n      #list\n      [data]=\"context.columns\"\n      [selectedIds]=\"context.selectedColumnIds\"\n      (selectedIdsChange)=\"selectedColumnsChange($event)\"\n    >\n      <sky-list-toolbar\n        [placeholder]=\"\n          'skyux_grid_column_picker_search_placeholder' | skyLibResources\n        \"\n      >\n      </sky-list-toolbar>\n\n      <sky-list-view-checklist label=\"heading\" description=\"description\">\n      </sky-list-view-checklist>\n    </sky-list>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_submit' | skyLibResources }}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: i2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2.λ4, selector: "sky-modal-header" }, { kind: "component", type: i1.SkyListComponent, selector: "sky-list", inputs: ["data", "dataProvider", "defaultView", "initialTotal", "selectedIds", "sortFields", "appliedFilters", "search"], outputs: ["selectedIdsChange", "appliedFiltersChange"] }, { kind: "component", type: i1.SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: ["inMemorySearchEnabled", "placeholder", "searchEnabled", "sortSelectorEnabled", "toolbarType", "searchText"] }, { kind: "component", type: i4.SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: ["name", "search", "label", "description", "selectMode", "showOnlySelected"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-column-selector', template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_grid_column_picker_header' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-list\n      #list\n      [data]=\"context.columns\"\n      [selectedIds]=\"context.selectedColumnIds\"\n      (selectedIdsChange)=\"selectedColumnsChange($event)\"\n    >\n      <sky-list-toolbar\n        [placeholder]=\"\n          'skyux_grid_column_picker_search_placeholder' | skyLibResources\n        \"\n      >\n      </sky-list-toolbar>\n\n      <sky-list-view-checklist label=\"heading\" description=\"description\">\n      </sky-list-view-checklist>\n    </sky-list>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_submit' | skyLibResources }}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{ 'skyux_grid_column_picker_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }], ctorParameters: function () { return [{ type: SkyColumnSelectorContext }, { type: i2.SkyModalInstance }]; } });
 
-/**
- * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
- */
-class SkyColumnSelectorModule {
-}
-SkyColumnSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyColumnSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, declarations: [SkyColumnSelectorComponent], imports: [CommonModule,
-        SkyI18nModule,
-        SkyModalModule,
-        SkyListModule,
-        SkyListToolbarModule,
-        SkyListViewChecklistModule] });
-SkyColumnSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, imports: [CommonModule,
-        SkyI18nModule,
-        SkyModalModule,
-        SkyListModule,
-        SkyListToolbarModule,
-        SkyListViewChecklistModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyColumnSelectorComponent],
-                    imports: [
-                        CommonModule,
-                        SkyI18nModule,
-                        SkyModalModule,
-                        SkyListModule,
-                        SkyListToolbarModule,
-                        SkyListViewChecklistModule,
-                    ],
-                }]
+/**
+ * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
+ */
+class SkyColumnSelectorModule {
+}
+SkyColumnSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyColumnSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, declarations: [SkyColumnSelectorComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyModalModule,
+        SkyListModule,
+        SkyListToolbarModule,
+        SkyListViewChecklistModule] });
+SkyColumnSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, imports: [CommonModule,
+        SkyI18nModule,
+        SkyModalModule,
+        SkyListModule,
+        SkyListToolbarModule,
+        SkyListViewChecklistModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyColumnSelectorComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyModalModule,
+                        SkyListModule,
+                        SkyListToolbarModule,
+                        SkyListViewChecklistModule,
+                    ],
+                }]
         }] });
 
-/**
- * @internal
- * @deprecated
- */
-class ListViewDisplayedGridColumnsLoadAction {
-    constructor(columns, refresh = false) {
-        this.columns = columns;
-        this.refresh = refresh;
-    }
+/**
+ * @internal
+ * @deprecated
+ */
+class ListViewDisplayedGridColumnsLoadAction {
+    constructor(columns, refresh = false) {
+        this.columns = columns;
+        this.refresh = refresh;
+    }
 }
 
-class SkyListColumnSelectorButtonComponent {
-}
-SkyListColumnSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyListColumnSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_grid_columns_button' | skyLibResources\"\n  [title]=\"'skyux_grid_columns_button' | skyLibResources\"\n>\n  <sky-icon icon=\"columns\"></sky-icon>\n  <span class=\"sky-column-selector-action-btn-text\">\n    {{ 'skyux_grid_columns_toolbar_button' | skyLibResources }}\n  </span>\n</button>\n", styles: [":host .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:inline}\n"], dependencies: [{ kind: "component", type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-list-column-selector-button', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_grid_columns_button' | skyLibResources\"\n  [title]=\"'skyux_grid_columns_button' | skyLibResources\"\n>\n  <sky-icon icon=\"columns\"></sky-icon>\n  <span class=\"sky-column-selector-action-btn-text\">\n    {{ 'skyux_grid_columns_toolbar_button' | skyLibResources }}\n  </span>\n</button>\n", styles: [":host .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:inline}\n"] }]
+class SkyListColumnSelectorButtonComponent {
+}
+SkyListColumnSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListColumnSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_grid_columns_button' | skyLibResources\"\n  [title]=\"'skyux_grid_columns_button' | skyLibResources\"\n>\n  <sky-icon icon=\"columns\"></sky-icon>\n  <span class=\"sky-column-selector-action-btn-text\">\n    {{ 'skyux_grid_columns_toolbar_button' | skyLibResources }}\n  </span>\n</button>\n", styles: [":host .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:inline}\n"], dependencies: [{ kind: "component", type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-column-selector-button', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [attr.aria-label]=\"'skyux_grid_columns_button' | skyLibResources\"\n  [title]=\"'skyux_grid_columns_button' | skyLibResources\"\n>\n  <sky-icon icon=\"columns\"></sky-icon>\n  <span class=\"sky-column-selector-action-btn-text\">\n    {{ 'skyux_grid_columns_toolbar_button' | skyLibResources }}\n  </span>\n</button>\n", styles: [":host .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-column-selector-action-btn-text{display:inline}\n"] }]
         }] });
 
-/**
- * Provides a column selector modal for a list grid view when placed in a
- * [list toolbar](https://developer.blackbaud.com/skyux/components/list/toolbar).
- */
-class SkyListColumnSelectorActionComponent {
-    constructor(listState, modalService, dispatcher, secondaryActions) {
-        this.listState = listState;
-        this.modalService = modalService;
-        this.dispatcher = dispatcher;
-        this.secondaryActions = secondaryActions;
-        /**
-         * Fires when users click the help button and broadcasts the `helpKey`.
-         */
-        this.helpOpened = new EventEmitter();
-        this.columnSelectorActionItemToolbarIndex = 7000;
-    }
-    ngAfterContentInit() {
-        if (!this.secondaryActions) {
-            const columnChooserItem = new ListToolbarItemModel({
-                id: 'column-chooser',
-                template: this.columnChooserTemplate,
-                location: 'left',
-            });
-            this.dispatcher.toolbarAddItems([columnChooserItem], this.columnSelectorActionItemToolbarIndex);
-        }
-    }
-    get isInGridView() {
-        return this.listState.pipe(map((s) => s.views.active), map((activeView) => {
-            return this.gridView && activeView === this.gridView.id;
-        }), distinctUntilChanged());
-    }
-    get isInGridViewAndSecondary() {
-        return this.listState.pipe(map((s) => s.views.active), map((activeView) => {
-            return (this.secondaryActions &&
-                this.gridView &&
-                activeView === this.gridView.id);
-        }), distinctUntilChanged());
-    }
-    openColumnSelector() {
-        /* istanbul ignore else */
-        /* sanity check */
-        if (this.gridView) {
-            let columns = [];
-            let selectedColumnIds = [];
-            this.gridView.gridState
-                .pipe(take(1))
-                .subscribe((state) => {
-                columns = state.columns.items
-                    .filter((item) => {
-                    return !item.locked;
-                })
-                    .map((item) => {
-                    return {
-                        id: item.id,
-                        heading: item.heading,
-                        description: item.description,
-                    };
-                });
-                selectedColumnIds = state.displayedColumns.items
-                    .filter((item) => {
-                    return !item.locked;
-                })
-                    .map((item) => {
-                    return item.id;
-                });
-            });
-            const modalInstance = this.modalService.open(SkyColumnSelectorComponent, {
-                providers: [
-                    {
-                        provide: SkyColumnSelectorContext,
-                        useValue: {
-                            columns,
-                            selectedColumnIds,
-                        },
-                    },
-                ],
-                helpKey: this.helpKey,
-            });
-            modalInstance.helpOpened.subscribe((helpKey) => {
-                this.helpOpened.emit(helpKey);
-                this.helpOpened.complete();
-            });
-            modalInstance.closed.subscribe((result) => {
-                if (result.reason === 'save' && result.data) {
-                    const newSelectedIds = result.data;
-                    let newDisplayedColumns = [];
-                    this.gridView.gridState
-                        .pipe(take(1))
-                        .subscribe((state) => {
-                        newDisplayedColumns = state.columns.items.filter((item) => {
-                            return newSelectedIds.indexOf(item.id) > -1 || item.locked;
-                        });
-                    });
-                    this.gridView.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(newDisplayedColumns, true));
-                }
-            });
-        }
-    }
-}
-SkyListColumnSelectorActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionComponent, deps: [{ token: i1.ListState }, { token: i2.SkyModalService }, { token: i1.ListStateDispatcher }, { token: i1.SkyListSecondaryActionsComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyListColumnSelectorActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListColumnSelectorActionComponent, selector: "sky-list-column-selector-action", inputs: { gridView: "gridView", helpKey: "helpKey" }, outputs: { helpOpened: "helpOpened" }, viewQueries: [{ propertyName: "columnChooserTemplate", first: true, predicate: ["columnChooser"], descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"isInGridViewAndSecondary | async\">\n  <sky-list-secondary-action>\n    <button type=\"button\" (click)=\"openColumnSelector()\">\n      {{ 'skyux_grid_columns_button' | skyLibResources }}\n    </button>\n  </sky-list-secondary-action>\n</ng-container>\n\n<ng-template #columnChooser>\n  <sky-list-column-selector-button\n    *ngIf=\"isInGridView | async\"\n    (click)=\"openColumnSelector()\"\n  >\n  </sky-list-column-selector-button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.λ6, selector: "sky-list-secondary-action" }, { kind: "component", type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-list-column-selector-action', template: "<ng-container *ngIf=\"isInGridViewAndSecondary | async\">\n  <sky-list-secondary-action>\n    <button type=\"button\" (click)=\"openColumnSelector()\">\n      {{ 'skyux_grid_columns_button' | skyLibResources }}\n    </button>\n  </sky-list-secondary-action>\n</ng-container>\n\n<ng-template #columnChooser>\n  <sky-list-column-selector-button\n    *ngIf=\"isInGridView | async\"\n    (click)=\"openColumnSelector()\"\n  >\n  </sky-list-column-selector-button>\n</ng-template>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1.ListState }, { type: i2.SkyModalService }, { type: i1.ListStateDispatcher }, { type: i1.SkyListSecondaryActionsComponent, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { gridView: [{
-                type: Input
-            }], helpKey: [{
-                type: Input
-            }], helpOpened: [{
-                type: Output
-            }], columnChooserTemplate: [{
-                type: ViewChild,
-                args: ['columnChooser', {
-                        static: true,
-                    }]
+/**
+ * Provides a column selector modal for a list grid view when placed in a
+ * [list toolbar](https://developer.blackbaud.com/skyux/components/list/toolbar).
+ */
+class SkyListColumnSelectorActionComponent {
+    constructor(listState, modalService, dispatcher, secondaryActions) {
+        this.listState = listState;
+        this.modalService = modalService;
+        this.dispatcher = dispatcher;
+        this.secondaryActions = secondaryActions;
+        /**
+         * Fires when users click the help button and broadcasts the `helpKey`.
+         */
+        this.helpOpened = new EventEmitter();
+        this.columnSelectorActionItemToolbarIndex = 7000;
+    }
+    ngAfterContentInit() {
+        if (!this.secondaryActions) {
+            const columnChooserItem = new ListToolbarItemModel({
+                id: 'column-chooser',
+                template: this.columnChooserTemplate,
+                location: 'left',
+            });
+            this.dispatcher.toolbarAddItems([columnChooserItem], this.columnSelectorActionItemToolbarIndex);
+        }
+    }
+    get isInGridView() {
+        return this.listState.pipe(map((s) => s.views.active), map((activeView) => {
+            return this.gridView && activeView === this.gridView.id;
+        }), distinctUntilChanged());
+    }
+    get isInGridViewAndSecondary() {
+        return this.listState.pipe(map((s) => s.views.active), map((activeView) => {
+            return (this.secondaryActions &&
+                this.gridView &&
+                activeView === this.gridView.id);
+        }), distinctUntilChanged());
+    }
+    openColumnSelector() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.gridView) {
+            let columns = [];
+            let selectedColumnIds = [];
+            this.gridView.gridState
+                .pipe(take(1))
+                .subscribe((state) => {
+                columns = state.columns.items
+                    .filter((item) => {
+                    return !item.locked;
+                })
+                    .map((item) => {
+                    return {
+                        id: item.id,
+                        heading: item.heading,
+                        description: item.description,
+                    };
+                });
+                selectedColumnIds = state.displayedColumns.items
+                    .filter((item) => {
+                    return !item.locked;
+                })
+                    .map((item) => {
+                    return item.id;
+                });
+            });
+            const modalInstance = this.modalService.open(SkyColumnSelectorComponent, {
+                providers: [
+                    {
+                        provide: SkyColumnSelectorContext,
+                        useValue: {
+                            columns,
+                            selectedColumnIds,
+                        },
+                    },
+                ],
+                helpKey: this.helpKey,
+            });
+            modalInstance.helpOpened.subscribe((helpKey) => {
+                this.helpOpened.emit(helpKey);
+                this.helpOpened.complete();
+            });
+            modalInstance.closed.subscribe((result) => {
+                if (result.reason === 'save' && result.data) {
+                    const newSelectedIds = result.data;
+                    let newDisplayedColumns = [];
+                    this.gridView.gridState
+                        .pipe(take(1))
+                        .subscribe((state) => {
+                        newDisplayedColumns = state.columns.items.filter((item) => {
+                            return newSelectedIds.indexOf(item.id) > -1 || item.locked;
+                        });
+                    });
+                    this.gridView.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(newDisplayedColumns, true));
+                }
+            });
+        }
+    }
+}
+SkyListColumnSelectorActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionComponent, deps: [{ token: i1.ListState }, { token: i2.SkyModalService }, { token: i1.ListStateDispatcher }, { token: i1.SkyListSecondaryActionsComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyListColumnSelectorActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListColumnSelectorActionComponent, selector: "sky-list-column-selector-action", inputs: { gridView: "gridView", helpKey: "helpKey" }, outputs: { helpOpened: "helpOpened" }, viewQueries: [{ propertyName: "columnChooserTemplate", first: true, predicate: ["columnChooser"], descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"isInGridViewAndSecondary | async\">\n  <sky-list-secondary-action>\n    <button type=\"button\" (click)=\"openColumnSelector()\">\n      {{ 'skyux_grid_columns_button' | skyLibResources }}\n    </button>\n  </sky-list-secondary-action>\n</ng-container>\n\n<ng-template #columnChooser>\n  <sky-list-column-selector-button\n    *ngIf=\"isInGridView | async\"\n    (click)=\"openColumnSelector()\"\n  >\n  </sky-list-column-selector-button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.λ6, selector: "sky-list-secondary-action" }, { kind: "component", type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-column-selector-action', template: "<ng-container *ngIf=\"isInGridViewAndSecondary | async\">\n  <sky-list-secondary-action>\n    <button type=\"button\" (click)=\"openColumnSelector()\">\n      {{ 'skyux_grid_columns_button' | skyLibResources }}\n    </button>\n  </sky-list-secondary-action>\n</ng-container>\n\n<ng-template #columnChooser>\n  <sky-list-column-selector-button\n    *ngIf=\"isInGridView | async\"\n    (click)=\"openColumnSelector()\"\n  >\n  </sky-list-column-selector-button>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1.ListState }, { type: i2.SkyModalService }, { type: i1.ListStateDispatcher }, { type: i1.SkyListSecondaryActionsComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { gridView: [{
+                type: Input
+            }], helpKey: [{
+                type: Input
+            }], helpOpened: [{
+                type: Output
+            }], columnChooserTemplate: [{
+                type: ViewChild,
+                args: ['columnChooser', {
+                        static: true,
+                    }]
             }] } });
 
-/**
- * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
- */
-class SkyListColumnSelectorActionModule {
-}
-SkyListColumnSelectorActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListColumnSelectorActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, declarations: [SkyListColumnSelectorActionComponent,
-        SkyListColumnSelectorButtonComponent], imports: [CommonModule,
-        SkyI18nModule,
-        SkyModalModule,
-        SkyListSecondaryActionsModule,
-        SkyListToolbarModule,
-        SkyIconModule], exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule] });
-SkyListColumnSelectorActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, imports: [CommonModule,
-        SkyI18nModule,
-        SkyModalModule,
-        SkyListSecondaryActionsModule,
-        SkyListToolbarModule,
-        SkyIconModule, SkyColumnSelectorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyListColumnSelectorActionComponent,
-                        SkyListColumnSelectorButtonComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyI18nModule,
-                        SkyModalModule,
-                        SkyListSecondaryActionsModule,
-                        SkyListToolbarModule,
-                        SkyIconModule,
-                    ],
-                    exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule],
-                }]
+/**
+ * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
+ */
+class SkyListColumnSelectorActionModule {
+}
+SkyListColumnSelectorActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListColumnSelectorActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, declarations: [SkyListColumnSelectorActionComponent,
+        SkyListColumnSelectorButtonComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyModalModule,
+        SkyListSecondaryActionsModule,
+        SkyListToolbarModule,
+        SkyIconModule], exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule] });
+SkyListColumnSelectorActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, imports: [CommonModule,
+        SkyI18nModule,
+        SkyModalModule,
+        SkyListSecondaryActionsModule,
+        SkyListToolbarModule,
+        SkyIconModule, SkyColumnSelectorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListColumnSelectorActionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListColumnSelectorActionComponent,
+                        SkyListColumnSelectorButtonComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyModalModule,
+                        SkyListSecondaryActionsModule,
+                        SkyListToolbarModule,
+                        SkyIconModule,
+                    ],
+                    exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule],
+                }]
         }] });
 
-/**
- * @internal
- * @deprecated
- */
-class ListViewGridColumnsLoadAction {
-    constructor(columns, refresh = false) {
-        this.columns = columns;
-        this.refresh = refresh;
-    }
+/**
+ * @internal
+ * @deprecated
+ */
+class ListViewGridColumnsLoadAction {
+    constructor(columns, refresh = false) {
+        this.columns = columns;
+        this.refresh = refresh;
+    }
 }
 
-/**
- * @internal
- * @deprecated
- */
-class GridStateModel {
-    constructor() {
-        this.columns = new AsyncList();
-        this.displayedColumns = new AsyncList();
-    }
+/**
+ * @internal
+ * @deprecated
+ */
+class GridStateModel {
+    constructor() {
+        this.columns = new AsyncList();
+        this.displayedColumns = new AsyncList();
+    }
 }
 
-/**
- * @internal
- * @deprecated
- */
-class GridStateDispatcher extends StateDispatcher {
-}
-GridStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-GridStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher, decorators: [{
-            type: Injectable
-        }] });
-/**
- * @internal
- */
-class GridStateOrchestrator extends StateOrchestrator {
+/**
+ * @internal
+ * @deprecated
+ */
+class GridStateDispatcher extends StateDispatcher {
+}
+GridStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+GridStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridStateDispatcher, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @internal
+ */
+class GridStateOrchestrator extends StateOrchestrator {
 }
 
-/**
- * @internal
- * @deprecated
- */
-class ListViewGridColumnsOrchestrator extends GridStateOrchestrator {
-    /* istanbul ignore next */
-    constructor() {
-        super();
-        this.register(ListViewGridColumnsLoadAction, this.load);
-    }
-    load(state, action) {
-        const newColumns = action.columns.map((g) => new SkyGridColumnModel(g.template, g));
-        if (action.refresh) {
-            return new AsyncList([...newColumns], new Date());
-        }
-        return new AsyncList([...state.items, ...newColumns], new Date());
-    }
+/**
+ * @internal
+ * @deprecated
+ */
+class ListViewGridColumnsOrchestrator extends GridStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListViewGridColumnsLoadAction, this.load);
+    }
+    load(state, action) {
+        const newColumns = action.columns.map((g) => new SkyGridColumnModel(g.template, g));
+        if (action.refresh) {
+            return new AsyncList([...newColumns], new Date());
+        }
+        return new AsyncList([...state.items, ...newColumns], new Date());
+    }
 }
 
-/**
- * @internal
- * @deprecated
- */
-class ListViewDisplayedGridColumnsOrchestrator extends GridStateOrchestrator {
-    /* istanbul ignore next */
-    constructor() {
-        super();
-        this.register(ListViewDisplayedGridColumnsLoadAction, this.load);
-    }
-    load(state, action) {
-        const newColumns = action.columns.map((g) => new SkyGridColumnModel(g.template, g));
-        if (action.refresh) {
-            return new AsyncList([...newColumns], new Date());
-        }
-        return new AsyncList([...state.items, ...newColumns], new Date());
-    }
+/**
+ * @internal
+ * @deprecated
+ */
+class ListViewDisplayedGridColumnsOrchestrator extends GridStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListViewDisplayedGridColumnsLoadAction, this.load);
+    }
+    load(state, action) {
+        const newColumns = action.columns.map((g) => new SkyGridColumnModel(g.template, g));
+        if (action.refresh) {
+            return new AsyncList([...newColumns], new Date());
+        }
+        return new AsyncList([...state.items, ...newColumns], new Date());
+    }
 }
 
-/**
- * @internal
- * @deprecated
- */
-class GridState extends StateNode {
-    /* istanbul ignore next */
-    constructor(initialState, dispatcher) {
-        super(initialState, dispatcher);
-        this.register('columns', ListViewGridColumnsOrchestrator)
-            .register('displayedColumns', ListViewDisplayedGridColumnsOrchestrator)
-            .begin();
-    }
-}
-GridState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState, deps: [{ token: GridStateModel }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
-GridState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState, decorators: [{
-            type: Injectable
+/**
+ * @internal
+ * @deprecated
+ */
+class GridState extends StateNode {
+    /* istanbul ignore next */
+    constructor(initialState, dispatcher) {
+        super(initialState, dispatcher);
+        this.register('columns', ListViewGridColumnsOrchestrator)
+            .register('displayedColumns', ListViewDisplayedGridColumnsOrchestrator)
+            .begin();
+    }
+}
+GridState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState, deps: [{ token: GridStateModel }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+GridState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GridState, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: GridStateModel }, { type: GridStateDispatcher }]; } });
 
-/**
- * The command for the list view grid to respond to.
- * @deprecated
- */
-var SkyListViewGridMessageType;
-(function (SkyListViewGridMessageType) {
-    /**
-     * Deletes of a row in the list view grid.
-     */
-    SkyListViewGridMessageType[SkyListViewGridMessageType["PromptDeleteRow"] = 0] = "PromptDeleteRow";
-    /**
-     * Cancels the deletion of a row in the list view grid.
-     */
-    SkyListViewGridMessageType[SkyListViewGridMessageType["AbortDeleteRow"] = 1] = "AbortDeleteRow";
+/**
+ * The command for the list view grid to respond to.
+ * @deprecated
+ */
+var SkyListViewGridMessageType;
+(function (SkyListViewGridMessageType) {
+    /**
+     * Deletes of a row in the list view grid.
+     */
+    SkyListViewGridMessageType[SkyListViewGridMessageType["PromptDeleteRow"] = 0] = "PromptDeleteRow";
+    /**
+     * Cancels the deletion of a row in the list view grid.
+     */
+    SkyListViewGridMessageType[SkyListViewGridMessageType["AbortDeleteRow"] = 1] = "AbortDeleteRow";
 })(SkyListViewGridMessageType || (SkyListViewGridMessageType = {}));
 
-/**
- * Displays a grid for a
- * [SKY UX-themed list of data](https://developer.blackbaud.com/skyux/components/list/overview)
- * using the [grid component](https://developer.blackbaud.com/skyux/components/grid).
- * You must install `SkyListModule` as a dependency.
- * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
- */
-class SkyListViewGridComponent extends ListViewComponent {
-    constructor(state, dispatcher, gridState, gridDispatcher, logger) {
-        super(state, 'Grid View');
-        this.dispatcher = dispatcher;
-        this.gridState = gridState;
-        this.gridDispatcher = gridDispatcher;
-        /**
-         * Specifies how the grid fits to its parent. `"width"` fits the grid to the parent's full
-         * width, and `"scroll"` allows the grid to 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.
-         * @default "width"
-         */
-        this.fit = 'width';
-        /**
-         * Indicates whether to highlight search text within the grid.
-         * @default true
-         */
-        this.highlightSearchText = true;
-        /**
-         * Indicates whether to enable the multiselect feature to display a column of checkboxes
-         * on the left side of the grid. Multiselect also displays an action bar with buttons to
-         * select and clear all checkboxes. Multiselect defaults to the `id` property on the list's
-         * `data` object.
-         * @default false
-         */
-        this.enableMultiselect = false;
-        /**
-         * Fires when users cancel the deletion of a row.
-         */
-        this.rowDeleteCancel = new EventEmitter();
-        /**
-         * Fires when users confirm the deletion of a row.
-         */
-        this.rowDeleteConfirm = new EventEmitter();
-        /**
-         * Fires when columns change. This includes changes to the displayed columns and changes
-         * to the order of columns. The event emits an array of IDs for the displayed columns that
-         * reflects the column order.
-         */
-        this.selectedColumnIdsChange = new EventEmitter();
-        /**
-         * Message stream for communicating with the internal grid instance
-         * @interal
-         */
-        this.gridMessageStream = new Subject();
-        this.multiselectSelectedIds = [];
-        this.ngUnsubscribe = new Subject();
-        this._messageStream = new Subject();
-        logger.deprecated('SkyListViewGridComponent', {
-            deprecationMajorVersion: 6,
-            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-entry-grid',
-            replacementRecommendation: 'Use data entry grid instead.',
-        });
-    }
-    /**
-     * Specifies the name of the view.
-     * @required
-     */
-    set name(value) {
-        this.viewName = value;
-    }
-    /**
-     * Provides an observable to send commands to the grid.
-     * The commands should respect the `SkyListViewGridMessage` type.
-     */
-    set messageStream(stream) {
-        /* istanbul ignore else */
-        if (this._messageStream) {
-            this._messageStream.unsubscribe();
-        }
-        this._messageStream = stream;
-        this.initInlineDeleteMessages();
-    }
-    get messageStream() {
-        return this._messageStream;
-    }
-    get gridHeight() {
-        /* istanbul ignore next */
-        return typeof this.height === 'number'
-            ? of(this.height)
-            : this.height;
-    }
-    get gridWidth() {
-        /* istanbul ignore next */
-        return typeof this.width === 'number'
-            ? of(this.width)
-            : this.width;
-    }
-    ngAfterContentInit() {
-        // Watch for selection changes and update multiselectSelectedIds for local comparison.
-        this.state
-            .pipe(map((s) => s.selected.item), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.selectedMapEqual))
-            .subscribe((items) => {
-            const selectedIds = [];
-            items.selectedIdMap.forEach((isSelected, id) => {
-                if (items.selectedIdMap.get(id) === true) {
-                    selectedIds.push(id);
-                }
-            });
-            this.multiselectSelectedIds = selectedIds;
-        });
-        /* istanbul ignore next */
-        if (this.columnComponents.length === 0) {
-            throw new Error('Grid view requires at least one sky-grid-column to render.');
-        }
-        const columnModels = this.columnComponents.map((columnComponent) => {
-            return new SkyGridColumnModel(columnComponent.template, columnComponent);
-        });
-        if (this.width && !isObservable(this.width)) {
-            this.width = of(this.width);
-        }
-        if (this.height && !isObservable(this.height)) {
-            this.height = of(this.height);
-        }
-        // Setup Observables for template
-        this.columns = this.gridState.pipe(map((s) => s.columns.items), distinctUntilChanged(this.arraysEqual), takeUntil(this.ngUnsubscribe));
-        this.selectedColumnIds = this.getSelectedIds();
-        this.items = this.getGridItems();
-        this.loading = this.state.pipe(map((s) => {
-            return s.items.loading;
-        }), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
-        this.sortField = this.state.pipe(map((s) => {
-            /* istanbul ignore else */
-            /* sanity check */
-            if (s.sort && s.sort.fieldSelectors) {
-                return s.sort.fieldSelectors[0];
-            }
-            /* istanbul ignore next */
-            /* sanity check */
-            return undefined;
-        }), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
-        this.gridState
-            .pipe(map((s) => s.columns.items), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.arraysEqual))
-            .subscribe((columns) => {
-            /* istanbul ignore else */
-            if (this.hiddenColumns) {
-                getValue(this.hiddenColumns, (hiddenColumns) => {
-                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => {
-                        /* istanbul ignore next */
-                        /* sanity check */
-                        const id = x.id || x.field;
-                        return hiddenColumns.indexOf(id) === -1;
-                    }), true));
-                });
-            }
-            else if (this.displayedColumns) {
-                /* istanbul ignore next */
-                getValue(this.displayedColumns, (displayedColumns) => {
-                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => displayedColumns.indexOf(x.id || x.field) !== -1), true));
-                });
-            }
-            else {
-                this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => !x.hidden), true));
-            }
-        });
-        this.currentSearchText = this.state.pipe(map((s) => s.search.searchText), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
-        this.gridDispatcher.next(new ListViewGridColumnsLoadAction(columnModels, true));
-        this.handleColumnChange();
-        if (this.enableMultiselect) {
-            this.dispatcher.toolbarShowMultiselectToolbar(true);
-        }
-        this.initInlineDeleteMessages();
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    /**
-     * If user makes selection, tell list-builder to update the list state.
-     * This logic should only run on user interaction - NOT programmatic updates.
-     */
-    onMultiselectSelectionChange(event) {
-        if (event.source === SkyGridSelectedRowsSource.CheckboxChange ||
-            event.source === SkyGridSelectedRowsSource.RowClick) {
-            this.state
-                .pipe(map((s) => s.items.items), take(1))
-                .subscribe((items) => {
-                const newItemIds = this.arrayIntersection(items.map((i) => i.id), this.multiselectSelectedIds);
-                const newIds = items.filter((i) => i.isSelected).map((i) => i.id);
-                // Check for deselected ids & send message to dispatcher.
-                const deselectedIds = this.arrayDiff(newItemIds, newIds);
-                if (deselectedIds.length > 0) {
-                    this.dispatcher.setSelected(deselectedIds, false);
-                }
-                // Check for selected ids & send message to dispatcher.
-                const selectedIds = this.arrayDiff(newIds, newItemIds);
-                if (selectedIds.length > 0) {
-                    this.dispatcher.setSelected(selectedIds, true);
-                }
-            });
-        }
-    }
-    columnIdsChanged(selectedColumnIds) {
-        this.selectedColumnIds.pipe(take(1)).subscribe((currentIds) => {
-            if (!this.arraysEqual(selectedColumnIds, currentIds)) {
-                this.gridState
-                    .pipe(map((s) => s.columns.items), take(1))
-                    .subscribe((columns) => {
-                    const displayedColumns = selectedColumnIds.map((columnId) => columns.filter((c) => c.id === columnId)[0]);
-                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(displayedColumns, true));
-                });
-            }
-        });
-    }
-    cancelRowDelete(args) {
-        this.rowDeleteCancel.emit(args);
-    }
-    confirmRowDelete(args) {
-        this.rowDeleteConfirm.emit(args);
-    }
-    sortFieldChanged(sortField) {
-        this.dispatcher.sortSetFieldSelectors([sortField]);
-    }
-    onViewActive() {
-        /*
-          Ran into problem where state updates were consumed out of order. For example, on search text
-          update, the searchText update was consumed after the resulting list item update. Scanning the
-          previous value of items lastUpdate ensures that we only receive the latest items.
-        */
-        this.gridState
-            .pipe(takeUntil(this.ngUnsubscribe), scan((previousValue, newValue) => {
-            if (previousValue.displayedColumns.lastUpdate >
-                newValue.displayedColumns.lastUpdate) {
-                return previousValue;
-            }
-            else {
-                return newValue;
-            }
-        }), map((s) => s.displayedColumns.items), distinctUntilChanged(this.arraysEqual))
-            .subscribe((displayedColumns) => {
-            const setFunctions = this.searchFunction !== undefined
-                ? [this.searchFunction]
-                : displayedColumns
-                    .map((column) => (data, searchText) => column.searchFunction(getData(data, column.field), searchText))
-                    .filter((c) => c !== undefined);
-            this.state.pipe(take(1)).subscribe((s) => {
-                this.dispatcher.searchSetOptions(new ListSearchModel({
-                    searchText: s.search.searchText,
-                    functions: setFunctions,
-                    fieldSelectors: displayedColumns.map((d) => d.field),
-                }));
-            });
-        });
-    }
-    initInlineDeleteMessages() {
-        /* istanbul ignore next */
-        if (this.messageStream) {
-            this.messageStream.subscribe((message) => {
-                if (message.type === SkyListViewGridMessageType.AbortDeleteRow) {
-                    this.gridMessageStream.next({
-                        type: SkyGridMessageType.AbortDeleteRow,
-                        data: {
-                            abortDeleteRow: message.data.abortDeleteRow,
-                        },
-                    });
-                }
-                else if (message.type === SkyListViewGridMessageType.PromptDeleteRow) {
-                    this.gridMessageStream.next({
-                        type: SkyGridMessageType.PromptDeleteRow,
-                        data: {
-                            promptDeleteRow: message.data.promptDeleteRow,
-                        },
-                    });
-                }
-            });
-        }
-    }
-    handleColumnChange() {
-        // watch for changes in column components
-        this.columnComponents.changes
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((columnComponents) => {
-            const columnModels = this.columnComponents.map((column) => {
-                return new SkyGridColumnModel(column.template, column);
-            });
-            this.gridDispatcher.next(new ListViewGridColumnsLoadAction(columnModels, true));
-        });
-        // Watch for column heading changes:
-        this.columnComponents.forEach((comp) => {
-            comp.headingModelChanges
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((change) => {
-                this.gridComponent.updateColumnHeading(change);
-            });
-            comp.descriptionModelChanges
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((change) => {
-                this.gridComponent.updateColumnDescription(change);
-            });
-        });
-    }
-    getGridItems() {
-        /*
-          Same problem as above. We should move from having a state object observable with a bunch of
-          static properties to a static state object with observable properties that you can subscribe
-          to.
-        */
-        return this.state.pipe(map((s) => {
-            return s.items;
-        }), scan((previousValue, newValue) => {
-            if (previousValue.lastUpdate > newValue.lastUpdate) {
-                return previousValue;
-            }
-            else {
-                return newValue;
-            }
-        }), map((result) => {
-            return result.items;
-        }), distinctUntilChanged());
-    }
-    getSelectedIds() {
-        /*
-          Same problem as above. We should move from having a state object observable with a bunch of
-          static properties to a static state object with observable properties that you can subscribe
-          to.
-        */
-        return this.gridState.pipe(map((s) => s.displayedColumns), scan((previousValue, newValue) => {
-            if (previousValue.lastUpdate > newValue.lastUpdate) {
-                return previousValue;
-            }
-            else {
-                return newValue;
-            }
-        }), map((result) => {
-            /* istanbul ignore next */
-            /* sanity check */
-            return result.items.map((column) => {
-                return column.id || column.field;
-            });
-        }), distinctUntilChanged((previousValue, newValue) => {
-            return this.haveColumnIdsChanged(previousValue, newValue);
-        }));
-    }
-    haveColumnIdsChanged(previousValue, newValue) {
-        if (previousValue.length !== newValue.length) {
-            this.selectedColumnIdsChange.emit(newValue);
-            return false;
-        }
-        for (let i = 0; i < previousValue.length; i++) {
-            /* istanbul ignore if */
-            if (previousValue[i] !== newValue[i]) {
-                this.selectedColumnIdsChange.emit(newValue);
-                return false;
-            }
-        }
-        return true;
-    }
-    selectedMapEqual(prev, next) {
-        if (prev.selectedIdMap.size !== next.selectedIdMap.size) {
-            return false;
-        }
-        const keys = [];
-        next.selectedIdMap.forEach((value, key) => {
-            keys.push(key);
-        });
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            const value = next.selectedIdMap.get(key);
-            if (value !== prev.selectedIdMap.get(key)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    arrayDiff(arrA, arrB) {
-        return arrA.filter((i) => arrB.indexOf(i) < 0);
-    }
-    arrayIntersection(arrA, arrB) {
-        return arrA.filter((value) => -1 !== arrB.indexOf(value));
-    }
-    arraysEqual(arrayA, arrayB) {
-        return (arrayA.length === arrayB.length &&
-            arrayA.every((value, index) => value === arrayB[index]));
-    }
-}
-SkyListViewGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridComponent, deps: [{ token: i1.ListState }, { token: i1.ListStateDispatcher }, { token: GridState }, { token: GridStateDispatcher }, { token: i4$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
-SkyListViewGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListViewGridComponent, selector: "sky-list-view-grid", inputs: { name: "name", displayedColumns: "displayedColumns", hiddenColumns: "hiddenColumns", fit: "fit", width: "width", height: "height", highlightSearchText: "highlightSearchText", messageStream: "messageStream", rowHighlightedId: "rowHighlightedId", enableMultiselect: "enableMultiselect", settingsKey: "settingsKey", searchFunction: ["search", "searchFunction"] }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange" }, providers: [
-        {
-            provide: ListViewComponent,
-            useExisting: forwardRef(() => SkyListViewGridComponent),
-        },
-        GridState,
-        GridStateDispatcher,
-        GridStateModel,
-    ], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: SkyGridComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"active | async\">\n  <sky-grid\n    [columns]=\"columns | async\"\n    [data]=\"items | async\"\n    [enableMultiselect]=\"enableMultiselect\"\n    [fit]=\"fit\"\n    [height]=\"gridHeight | async\"\n    [highlightText]=\"\n      highlightSearchText ? (currentSearchText | async) : undefined\n    \"\n    [rowHighlightedId]=\"rowHighlightedId\"\n    [messageStream]=\"gridMessageStream\"\n    [selectedColumnIds]=\"selectedColumnIds | async\"\n    [selectedRowIds]=\"multiselectSelectedIds\"\n    [settingsKey]=\"settingsKey\"\n    [sortField]=\"sortField | async\"\n    [width]=\"gridWidth | async\"\n    (multiselectSelectionChange)=\"onMultiselectSelectionChange($event)\"\n    (rowDeleteCancel)=\"cancelRowDelete($event)\"\n    (rowDeleteConfirm)=\"confirmRowDelete($event)\"\n    (selectedColumnIdsChange)=\"columnIdsChanged($event)\"\n    (sortFieldChange)=\"sortFieldChanged($event)\"\n    #skyGrid\n  >\n  </sky-grid>\n  <sky-wait [isWaiting]=\"loading | async\"> </sky-wait>\n</div>\n", styles: [":host ::ng-deep .sky-grid-heading{border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "component", type: i7.SkyGridComponent, selector: "sky-grid", inputs: ["columns", "data", "enableMultiselect", "fit", "hasToolbar", "height", "highlightText", "messageStream", "multiselectRowId", "rowHighlightedId", "selectedColumnIds", "selectedRowIds", "settingsKey", "sortField", "width"], outputs: ["columnWidthChange", "multiselectSelectionChange", "rowDeleteCancel", "rowDeleteConfirm", "selectedColumnIdsChange", "sortFieldChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-list-view-grid', providers: [
-                        {
-                            provide: ListViewComponent,
-                            useExisting: forwardRef(() => SkyListViewGridComponent),
-                        },
-                        GridState,
-                        GridStateDispatcher,
-                        GridStateModel,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"active | async\">\n  <sky-grid\n    [columns]=\"columns | async\"\n    [data]=\"items | async\"\n    [enableMultiselect]=\"enableMultiselect\"\n    [fit]=\"fit\"\n    [height]=\"gridHeight | async\"\n    [highlightText]=\"\n      highlightSearchText ? (currentSearchText | async) : undefined\n    \"\n    [rowHighlightedId]=\"rowHighlightedId\"\n    [messageStream]=\"gridMessageStream\"\n    [selectedColumnIds]=\"selectedColumnIds | async\"\n    [selectedRowIds]=\"multiselectSelectedIds\"\n    [settingsKey]=\"settingsKey\"\n    [sortField]=\"sortField | async\"\n    [width]=\"gridWidth | async\"\n    (multiselectSelectionChange)=\"onMultiselectSelectionChange($event)\"\n    (rowDeleteCancel)=\"cancelRowDelete($event)\"\n    (rowDeleteConfirm)=\"confirmRowDelete($event)\"\n    (selectedColumnIdsChange)=\"columnIdsChanged($event)\"\n    (sortFieldChange)=\"sortFieldChanged($event)\"\n    #skyGrid\n  >\n  </sky-grid>\n  <sky-wait [isWaiting]=\"loading | async\"> </sky-wait>\n</div>\n", styles: [":host ::ng-deep .sky-grid-heading{border-top:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ListState }, { type: i1.ListStateDispatcher }, { type: GridState }, { type: GridStateDispatcher }, { type: i4$1.SkyLogService }]; }, propDecorators: { name: [{
-                type: Input
-            }], displayedColumns: [{
-                type: Input
-            }], hiddenColumns: [{
-                type: Input
-            }], fit: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], highlightSearchText: [{
-                type: Input
-            }], messageStream: [{
-                type: Input
-            }], rowHighlightedId: [{
-                type: Input
-            }], enableMultiselect: [{
-                type: Input
-            }], settingsKey: [{
-                type: Input
-            }], rowDeleteCancel: [{
-                type: Output
-            }], rowDeleteConfirm: [{
-                type: Output
-            }], selectedColumnIdsChange: [{
-                type: Output
-            }], gridComponent: [{
-                type: ViewChild,
-                args: [SkyGridComponent]
-            }], searchFunction: [{
-                type: Input,
-                args: ['search']
-            }], columnComponents: [{
-                type: ContentChildren,
-                args: [SkyGridColumnComponent]
+/**
+ * Displays a grid for a
+ * [SKY UX-themed list of data](https://developer.blackbaud.com/skyux/components/list/overview)
+ * using the [grid component](https://developer.blackbaud.com/skyux/components/grid).
+ * You must install `SkyListModule` as a dependency.
+ * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
+ */
+class SkyListViewGridComponent extends ListViewComponent {
+    constructor(state, dispatcher, gridState, gridDispatcher, logger) {
+        super(state, 'Grid View');
+        this.dispatcher = dispatcher;
+        this.gridState = gridState;
+        this.gridDispatcher = gridDispatcher;
+        /**
+         * Specifies how the grid fits to its parent. `"width"` fits the grid to the parent's full
+         * width, and `"scroll"` allows the grid to 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.
+         * @default "width"
+         */
+        this.fit = 'width';
+        /**
+         * Indicates whether to highlight search text within the grid.
+         * @default true
+         */
+        this.highlightSearchText = true;
+        /**
+         * Indicates whether to enable the multiselect feature to display a column of checkboxes
+         * on the left side of the grid. Multiselect also displays an action bar with buttons to
+         * select and clear all checkboxes. Multiselect defaults to the `id` property on the list's
+         * `data` object.
+         * @default false
+         */
+        this.enableMultiselect = false;
+        /**
+         * Fires when users cancel the deletion of a row.
+         */
+        this.rowDeleteCancel = new EventEmitter();
+        /**
+         * Fires when users confirm the deletion of a row.
+         */
+        this.rowDeleteConfirm = new EventEmitter();
+        /**
+         * Fires when columns change. This includes changes to the displayed columns and changes
+         * to the order of columns. The event emits an array of IDs for the displayed columns that
+         * reflects the column order.
+         */
+        this.selectedColumnIdsChange = new EventEmitter();
+        /**
+         * Message stream for communicating with the internal grid instance
+         * @interal
+         */
+        this.gridMessageStream = new Subject();
+        this.multiselectSelectedIds = [];
+        this.ngUnsubscribe = new Subject();
+        this._messageStream = new Subject();
+        logger.deprecated('SkyListViewGridComponent', {
+            deprecationMajorVersion: 6,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-entry-grid',
+            replacementRecommendation: 'Use data entry grid instead.',
+        });
+    }
+    /**
+     * Specifies the name of the view.
+     * @required
+     */
+    set name(value) {
+        this.viewName = value;
+    }
+    /**
+     * Provides an observable to send commands to the grid.
+     * The commands should respect the `SkyListViewGridMessage` type.
+     */
+    set messageStream(stream) {
+        /* istanbul ignore else */
+        if (this._messageStream) {
+            this._messageStream.unsubscribe();
+        }
+        this._messageStream = stream;
+        this.initInlineDeleteMessages();
+    }
+    get messageStream() {
+        return this._messageStream;
+    }
+    get gridHeight() {
+        /* istanbul ignore next */
+        return typeof this.height === 'number'
+            ? of(this.height)
+            : this.height;
+    }
+    get gridWidth() {
+        /* istanbul ignore next */
+        return typeof this.width === 'number'
+            ? of(this.width)
+            : this.width;
+    }
+    ngAfterContentInit() {
+        // Watch for selection changes and update multiselectSelectedIds for local comparison.
+        this.state
+            .pipe(map((s) => s.selected.item), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.selectedMapEqual))
+            .subscribe((items) => {
+            const selectedIds = [];
+            items.selectedIdMap.forEach((isSelected, id) => {
+                if (items.selectedIdMap.get(id) === true) {
+                    selectedIds.push(id);
+                }
+            });
+            this.multiselectSelectedIds = selectedIds;
+        });
+        /* istanbul ignore next */
+        if (this.columnComponents.length === 0) {
+            throw new Error('Grid view requires at least one sky-grid-column to render.');
+        }
+        const columnModels = this.columnComponents.map((columnComponent) => {
+            return new SkyGridColumnModel(columnComponent.template, columnComponent);
+        });
+        if (this.width && !isObservable(this.width)) {
+            this.width = of(this.width);
+        }
+        if (this.height && !isObservable(this.height)) {
+            this.height = of(this.height);
+        }
+        // Setup Observables for template
+        this.columns = this.gridState.pipe(map((s) => s.columns.items), distinctUntilChanged(this.arraysEqual), takeUntil(this.ngUnsubscribe));
+        this.selectedColumnIds = this.getSelectedIds();
+        this.items = this.getGridItems();
+        this.loading = this.state.pipe(map((s) => {
+            return s.items.loading;
+        }), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
+        this.sortField = this.state.pipe(map((s) => {
+            /* istanbul ignore else */
+            /* sanity check */
+            if (s.sort && s.sort.fieldSelectors) {
+                return s.sort.fieldSelectors[0];
+            }
+            /* istanbul ignore next */
+            /* sanity check */
+            return undefined;
+        }), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
+        this.gridState
+            .pipe(map((s) => s.columns.items), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.arraysEqual))
+            .subscribe((columns) => {
+            /* istanbul ignore else */
+            if (this.hiddenColumns) {
+                getValue(this.hiddenColumns, (hiddenColumns) => {
+                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => {
+                        /* istanbul ignore next */
+                        /* sanity check */
+                        const id = x.id || x.field;
+                        return hiddenColumns.indexOf(id) === -1;
+                    }), true));
+                });
+            }
+            else if (this.displayedColumns) {
+                /* istanbul ignore next */
+                getValue(this.displayedColumns, (displayedColumns) => {
+                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => displayedColumns.indexOf(x.id || x.field) !== -1), true));
+                });
+            }
+            else {
+                this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(columns.filter((x) => !x.hidden), true));
+            }
+        });
+        this.currentSearchText = this.state.pipe(map((s) => s.search.searchText), distinctUntilChanged(), takeUntil(this.ngUnsubscribe));
+        this.gridDispatcher.next(new ListViewGridColumnsLoadAction(columnModels, true));
+        this.handleColumnChange();
+        if (this.enableMultiselect) {
+            this.dispatcher.toolbarShowMultiselectToolbar(true);
+        }
+        this.initInlineDeleteMessages();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    /**
+     * If user makes selection, tell list-builder to update the list state.
+     * This logic should only run on user interaction - NOT programmatic updates.
+     */
+    onMultiselectSelectionChange(event) {
+        if (event.source === SkyGridSelectedRowsSource.CheckboxChange ||
+            event.source === SkyGridSelectedRowsSource.RowClick) {
+            this.state
+                .pipe(map((s) => s.items.items), take(1))
+                .subscribe((items) => {
+                const newItemIds = this.arrayIntersection(items.map((i) => i.id), this.multiselectSelectedIds);
+                const newIds = items.filter((i) => i.isSelected).map((i) => i.id);
+                // Check for deselected ids & send message to dispatcher.
+                const deselectedIds = this.arrayDiff(newItemIds, newIds);
+                if (deselectedIds.length > 0) {
+                    this.dispatcher.setSelected(deselectedIds, false);
+                }
+                // Check for selected ids & send message to dispatcher.
+                const selectedIds = this.arrayDiff(newIds, newItemIds);
+                if (selectedIds.length > 0) {
+                    this.dispatcher.setSelected(selectedIds, true);
+                }
+            });
+        }
+    }
+    columnIdsChanged(selectedColumnIds) {
+        this.selectedColumnIds.pipe(take(1)).subscribe((currentIds) => {
+            if (!this.arraysEqual(selectedColumnIds, currentIds)) {
+                this.gridState
+                    .pipe(map((s) => s.columns.items), take(1))
+                    .subscribe((columns) => {
+                    const displayedColumns = selectedColumnIds.map((columnId) => columns.filter((c) => c.id === columnId)[0]);
+                    this.gridDispatcher.next(new ListViewDisplayedGridColumnsLoadAction(displayedColumns, true));
+                });
+            }
+        });
+    }
+    cancelRowDelete(args) {
+        this.rowDeleteCancel.emit(args);
+    }
+    confirmRowDelete(args) {
+        this.rowDeleteConfirm.emit(args);
+    }
+    sortFieldChanged(sortField) {
+        this.dispatcher.sortSetFieldSelectors([sortField]);
+    }
+    onViewActive() {
+        /*
+          Ran into problem where state updates were consumed out of order. For example, on search text
+          update, the searchText update was consumed after the resulting list item update. Scanning the
+          previous value of items lastUpdate ensures that we only receive the latest items.
+        */
+        this.gridState
+            .pipe(takeUntil(this.ngUnsubscribe), scan((previousValue, newValue) => {
+            if (previousValue.displayedColumns.lastUpdate >
+                newValue.displayedColumns.lastUpdate) {
+                return previousValue;
+            }
+            else {
+                return newValue;
+            }
+        }), map((s) => s.displayedColumns.items), distinctUntilChanged(this.arraysEqual))
+            .subscribe((displayedColumns) => {
+            const setFunctions = this.searchFunction !== undefined
+                ? [this.searchFunction]
+                : displayedColumns
+                    .map((column) => (data, searchText) => column.searchFunction(getData(data, column.field), searchText))
+                    .filter((c) => c !== undefined);
+            this.state.pipe(take(1)).subscribe((s) => {
+                this.dispatcher.searchSetOptions(new ListSearchModel({
+                    searchText: s.search.searchText,
+                    functions: setFunctions,
+                    fieldSelectors: displayedColumns.map((d) => d.field),
+                }));
+            });
+        });
+    }
+    initInlineDeleteMessages() {
+        /* istanbul ignore next */
+        if (this.messageStream) {
+            this.messageStream.subscribe((message) => {
+                if (message.type === SkyListViewGridMessageType.AbortDeleteRow) {
+                    this.gridMessageStream.next({
+                        type: SkyGridMessageType.AbortDeleteRow,
+                        data: {
+                            abortDeleteRow: message.data.abortDeleteRow,
+                        },
+                    });
+                }
+                else if (message.type === SkyListViewGridMessageType.PromptDeleteRow) {
+                    this.gridMessageStream.next({
+                        type: SkyGridMessageType.PromptDeleteRow,
+                        data: {
+                            promptDeleteRow: message.data.promptDeleteRow,
+                        },
+                    });
+                }
+            });
+        }
+    }
+    handleColumnChange() {
+        // watch for changes in column components
+        this.columnComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((columnComponents) => {
+            const columnModels = this.columnComponents.map((column) => {
+                return new SkyGridColumnModel(column.template, column);
+            });
+            this.gridDispatcher.next(new ListViewGridColumnsLoadAction(columnModels, true));
+        });
+        // Watch for column heading changes:
+        this.columnComponents.forEach((comp) => {
+            comp.headingModelChanges
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((change) => {
+                this.gridComponent.updateColumnHeading(change);
+            });
+            comp.descriptionModelChanges
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((change) => {
+                this.gridComponent.updateColumnDescription(change);
+            });
+        });
+    }
+    getGridItems() {
+        /*
+          Same problem as above. We should move from having a state object observable with a bunch of
+          static properties to a static state object with observable properties that you can subscribe
+          to.
+        */
+        return this.state.pipe(map((s) => {
+            return s.items;
+        }), scan((previousValue, newValue) => {
+            if (previousValue.lastUpdate > newValue.lastUpdate) {
+                return previousValue;
+            }
+            else {
+                return newValue;
+            }
+        }), map((result) => {
+            return result.items;
+        }), distinctUntilChanged());
+    }
+    getSelectedIds() {
+        /*
+          Same problem as above. We should move from having a state object observable with a bunch of
+          static properties to a static state object with observable properties that you can subscribe
+          to.
+        */
+        return this.gridState.pipe(map((s) => s.displayedColumns), scan((previousValue, newValue) => {
+            if (previousValue.lastUpdate > newValue.lastUpdate) {
+                return previousValue;
+            }
+            else {
+                return newValue;
+            }
+        }), map((result) => {
+            /* istanbul ignore next */
+            /* sanity check */
+            return result.items.map((column) => {
+                return column.id || column.field;
+            });
+        }), distinctUntilChanged((previousValue, newValue) => {
+            return this.haveColumnIdsChanged(previousValue, newValue);
+        }));
+    }
+    haveColumnIdsChanged(previousValue, newValue) {
+        if (previousValue.length !== newValue.length) {
+            this.selectedColumnIdsChange.emit(newValue);
+            return false;
+        }
+        for (let i = 0; i < previousValue.length; i++) {
+            /* istanbul ignore if */
+            if (previousValue[i] !== newValue[i]) {
+                this.selectedColumnIdsChange.emit(newValue);
+                return false;
+            }
+        }
+        return true;
+    }
+    selectedMapEqual(prev, next) {
+        if (prev.selectedIdMap.size !== next.selectedIdMap.size) {
+            return false;
+        }
+        const keys = [];
+        next.selectedIdMap.forEach((value, key) => {
+            keys.push(key);
+        });
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const value = next.selectedIdMap.get(key);
+            if (value !== prev.selectedIdMap.get(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    arrayDiff(arrA, arrB) {
+        return arrA.filter((i) => arrB.indexOf(i) < 0);
+    }
+    arrayIntersection(arrA, arrB) {
+        return arrA.filter((value) => -1 !== arrB.indexOf(value));
+    }
+    arraysEqual(arrayA, arrayB) {
+        return (arrayA.length === arrayB.length &&
+            arrayA.every((value, index) => value === arrayB[index]));
+    }
+}
+SkyListViewGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridComponent, deps: [{ token: i1.ListState }, { token: i1.ListStateDispatcher }, { token: GridState }, { token: GridStateDispatcher }, { token: i4$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListViewGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyListViewGridComponent, selector: "sky-list-view-grid", inputs: { name: "name", displayedColumns: "displayedColumns", hiddenColumns: "hiddenColumns", fit: "fit", width: "width", height: "height", highlightSearchText: "highlightSearchText", messageStream: "messageStream", rowHighlightedId: "rowHighlightedId", enableMultiselect: "enableMultiselect", settingsKey: "settingsKey", searchFunction: ["search", "searchFunction"] }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange" }, providers: [
+        {
+            provide: ListViewComponent,
+            useExisting: forwardRef(() => SkyListViewGridComponent),
+        },
+        GridState,
+        GridStateDispatcher,
+        GridStateModel,
+    ], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: SkyGridComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"active | async\">\n  <sky-grid\n    [columns]=\"columns | async\"\n    [data]=\"items | async\"\n    [enableMultiselect]=\"enableMultiselect\"\n    [fit]=\"fit\"\n    [height]=\"gridHeight | async\"\n    [highlightText]=\"\n      highlightSearchText ? (currentSearchText | async) : undefined\n    \"\n    [rowHighlightedId]=\"rowHighlightedId\"\n    [messageStream]=\"gridMessageStream\"\n    [selectedColumnIds]=\"selectedColumnIds | async\"\n    [selectedRowIds]=\"multiselectSelectedIds\"\n    [settingsKey]=\"settingsKey\"\n    [sortField]=\"sortField | async\"\n    [width]=\"gridWidth | async\"\n    (multiselectSelectionChange)=\"onMultiselectSelectionChange($event)\"\n    (rowDeleteCancel)=\"cancelRowDelete($event)\"\n    (rowDeleteConfirm)=\"confirmRowDelete($event)\"\n    (selectedColumnIdsChange)=\"columnIdsChanged($event)\"\n    (sortFieldChange)=\"sortFieldChanged($event)\"\n    #skyGrid\n  >\n  </sky-grid>\n  <sky-wait [isWaiting]=\"loading | async\"> </sky-wait>\n</div>\n", styles: [":host ::ng-deep .sky-grid-heading{border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "component", type: i7.SkyGridComponent, selector: "sky-grid", inputs: ["columns", "data", "enableMultiselect", "fit", "hasToolbar", "height", "highlightText", "messageStream", "multiselectRowId", "rowHighlightedId", "selectedColumnIds", "selectedRowIds", "settingsKey", "sortField", "width"], outputs: ["columnWidthChange", "multiselectSelectionChange", "rowDeleteCancel", "rowDeleteConfirm", "selectedColumnIdsChange", "sortFieldChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-view-grid', providers: [
+                        {
+                            provide: ListViewComponent,
+                            useExisting: forwardRef(() => SkyListViewGridComponent),
+                        },
+                        GridState,
+                        GridStateDispatcher,
+                        GridStateModel,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"active | async\">\n  <sky-grid\n    [columns]=\"columns | async\"\n    [data]=\"items | async\"\n    [enableMultiselect]=\"enableMultiselect\"\n    [fit]=\"fit\"\n    [height]=\"gridHeight | async\"\n    [highlightText]=\"\n      highlightSearchText ? (currentSearchText | async) : undefined\n    \"\n    [rowHighlightedId]=\"rowHighlightedId\"\n    [messageStream]=\"gridMessageStream\"\n    [selectedColumnIds]=\"selectedColumnIds | async\"\n    [selectedRowIds]=\"multiselectSelectedIds\"\n    [settingsKey]=\"settingsKey\"\n    [sortField]=\"sortField | async\"\n    [width]=\"gridWidth | async\"\n    (multiselectSelectionChange)=\"onMultiselectSelectionChange($event)\"\n    (rowDeleteCancel)=\"cancelRowDelete($event)\"\n    (rowDeleteConfirm)=\"confirmRowDelete($event)\"\n    (selectedColumnIdsChange)=\"columnIdsChanged($event)\"\n    (sortFieldChange)=\"sortFieldChanged($event)\"\n    #skyGrid\n  >\n  </sky-grid>\n  <sky-wait [isWaiting]=\"loading | async\"> </sky-wait>\n</div>\n", styles: [":host ::ng-deep .sky-grid-heading{border-top:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ListState }, { type: i1.ListStateDispatcher }, { type: GridState }, { type: GridStateDispatcher }, { type: i4$1.SkyLogService }]; }, propDecorators: { name: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], hiddenColumns: [{
+                type: Input
+            }], fit: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], highlightSearchText: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], rowHighlightedId: [{
+                type: Input
+            }], enableMultiselect: [{
+                type: Input
+            }], settingsKey: [{
+                type: Input
+            }], rowDeleteCancel: [{
+                type: Output
+            }], rowDeleteConfirm: [{
+                type: Output
+            }], selectedColumnIdsChange: [{
+                type: Output
+            }], gridComponent: [{
+                type: ViewChild,
+                args: [SkyGridComponent]
+            }], searchFunction: [{
+                type: Input,
+                args: ['search']
+            }], columnComponents: [{
+                type: ContentChildren,
+                args: [SkyGridColumnComponent]
             }] } });
 
-/**
- * NOTICE: DO NOT MODIFY THIS FILE!
- * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-list-builder-view-grids' schematic.
- * To update this file, simply rerun the command.
- */
-const RESOURCES = {
-    'EN-US': {
-        skyux_grid_column_picker_cancel: { message: 'Cancel' },
-        skyux_grid_column_picker_header: {
-            message: 'Choose columns to show in the list',
-        },
-        skyux_grid_column_picker_search_placeholder: {
-            message: 'Search for columns',
-        },
-        skyux_grid_column_picker_submit: { message: 'Apply changes' },
-        skyux_grid_columns_button: { message: 'Choose columns' },
-        skyux_grid_columns_toolbar_button: { message: 'Columns' },
-    },
-};
-class SkyListBuilderViewGridsResourcesProvider {
-    getString(localeInfo, name) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
-/**
- * Import into any component library module that needs to use resource strings.
- */
-class SkyListBuilderViewGridsResourcesModule {
-}
-SkyListBuilderViewGridsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListBuilderViewGridsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, exports: [SkyI18nModule] });
-SkyListBuilderViewGridsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyListBuilderViewGridsResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyListBuilderViewGridsResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-list-builder-view-grids' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_grid_column_picker_cancel: { message: 'Cancel' },
+        skyux_grid_column_picker_header: {
+            message: 'Choose columns to show in the list',
+        },
+        skyux_grid_column_picker_search_placeholder: {
+            message: 'Search for columns',
+        },
+        skyux_grid_column_picker_submit: { message: 'Apply changes' },
+        skyux_grid_columns_button: { message: 'Choose columns' },
+        skyux_grid_columns_toolbar_button: { message: 'Columns' },
+    },
+};
+class SkyListBuilderViewGridsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyListBuilderViewGridsResourcesModule {
+}
+SkyListBuilderViewGridsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListBuilderViewGridsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, exports: [SkyI18nModule] });
+SkyListBuilderViewGridsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyListBuilderViewGridsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyListBuilderViewGridsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
         }] });
 
-/**
- * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
- */
-class SkyListViewGridModule {
-}
-SkyListViewGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListViewGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, declarations: [SkyListViewGridComponent], imports: [CommonModule,
-        SkyWaitModule,
-        SkyGridModule,
-        SkyListBuilderViewGridsResourcesModule], exports: [SkyListViewGridComponent,
-        SkyListColumnSelectorActionModule,
-        SkyGridModule] });
-SkyListViewGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, imports: [CommonModule,
-        SkyWaitModule,
-        SkyGridModule,
-        SkyListBuilderViewGridsResourcesModule, SkyListColumnSelectorActionModule,
-        SkyGridModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyListViewGridComponent],
-                    imports: [
-                        CommonModule,
-                        SkyWaitModule,
-                        SkyGridModule,
-                        SkyListBuilderViewGridsResourcesModule,
-                    ],
-                    exports: [
-                        SkyListViewGridComponent,
-                        SkyListColumnSelectorActionModule,
-                        SkyGridModule,
-                    ],
-                }]
+/**
+ * @deprecated List builder view grid and its features are deprecated. Use data entry grid instead. For more information, see https://developer.blackbaud.com/skyux/components/data-entry-grid.
+ */
+class SkyListViewGridModule {
+}
+SkyListViewGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListViewGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, declarations: [SkyListViewGridComponent], imports: [CommonModule,
+        SkyWaitModule,
+        SkyGridModule,
+        SkyListBuilderViewGridsResourcesModule], exports: [SkyListViewGridComponent,
+        SkyListColumnSelectorActionModule,
+        SkyGridModule] });
+SkyListViewGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, imports: [CommonModule,
+        SkyWaitModule,
+        SkyGridModule,
+        SkyListBuilderViewGridsResourcesModule, SkyListColumnSelectorActionModule,
+        SkyGridModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyListViewGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyListViewGridComponent],
+                    imports: [
+                        CommonModule,
+                        SkyWaitModule,
+                        SkyGridModule,
+                        SkyListBuilderViewGridsResourcesModule,
+                    ],
+                    exports: [
+                        SkyListViewGridComponent,
+                        SkyListColumnSelectorActionModule,
+                        SkyGridModule,
+                    ],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { GridState, GridStateDispatcher, GridStateModel, GridStateOrchestrator, ListViewDisplayedGridColumnsLoadAction, ListViewDisplayedGridColumnsOrchestrator, ListViewGridColumnsLoadAction, ListViewGridColumnsOrchestrator, SkyColumnSelectorContext, SkyColumnSelectorModel, SkyColumnSelectorModule, SkyListColumnSelectorActionModule, SkyListViewGridComponent, SkyListViewGridMessageType, SkyListViewGridModule, SkyListColumnSelectorActionComponent as λ1 };