@skyux/list-builder-view-grids 5.0.1 → 5.5.0

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

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, EventEmitter, Optional, Input, Output, ViewChild, Injectable, forwardRef, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
-import * as i4$1 from '@angular/common';
+import { Component, NgModule, Injectable, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChildren, Optional } from '@angular/core';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 import * as i1 from '@skyux/list-builder';
-import { SkyListModule, SkyListToolbarModule, ListToolbarItemModel, SkyListSecondaryActionsModule, ListViewComponent, ListSearchModel } from '@skyux/list-builder';
+import { SkyListModule, SkyListToolbarModule, ListViewComponent, ListSearchModel, ListToolbarItemModel, SkyListSecondaryActionsModule } from '@skyux/list-builder';
 import * as i4 from '@skyux/list-builder-view-checklist';
 import { SkyListViewChecklistModule } from '@skyux/list-builder-view-checklist';
 import * as i5 from '@skyux/i18n';
 import { SkyI18nModule, getLibStringForLocale, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i1$1 from '@skyux/indicators';
+import * as i5$1 from '@skyux/indicators';
 import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
-import { map, distinctUntilChanged, take, takeUntil, scan } from 'rxjs/operators';
+import { map, takeUntil, distinctUntilChanged, take, scan } from 'rxjs/operators';
 import { Subject, of } from 'rxjs';
-import { StateDispatcher, StateOrchestrator, AsyncList, StateNode, isObservable, getValue, getData } from '@skyux/list-builder-common';
-import * as i4$2 from '@skyux/grids';
+import { AsyncList, StateDispatcher, StateOrchestrator, StateNode, isObservable, getValue, getData } from '@skyux/list-builder-common';
+import * as i4$1 from '@skyux/grids';
 import { SkyGridColumnModel, SkyGridSelectedRowsSource, SkyGridMessageType, SkyGridColumnComponent, SkyGridComponent, SkyGridModule } from '@skyux/grids';
 
 /* istanbul ignore next */
@@ -49,9 +49,9 @@ class SkyColumnSelectorComponent {
         this.instance.save(this.newSelectedColumnIds);
     }
 }
-SkyColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorComponent, deps: [{ token: SkyColumnSelectorContext }, { token: i2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
-SkyColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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", components: [{ type: i2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i2.λ4, selector: "sky-modal-header" }, { type: i2.λ2, selector: "sky-modal-content" }, { type: i1.SkyListComponent, selector: "sky-list", inputs: ["data", "dataProvider", "defaultView", "initialTotal", "selectedIds", "sortFields", "appliedFilters", "search"], outputs: ["selectedIdsChange", "appliedFiltersChange"] }, { type: i1.SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: ["inMemorySearchEnabled", "placeholder", "searchEnabled", "sortSelectorEnabled", "toolbarType", "searchText"] }, { type: i4.SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: ["name", "search", "label", "description", "selectMode", "showOnlySelected"] }, { type: i2.λ3, selector: "sky-modal-footer" }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorComponent, decorators: [{
+SkyColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorComponent, deps: [{ token: SkyColumnSelectorContext }, { token: i2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
+SkyColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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", components: [{ type: i2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i2.λ4, selector: "sky-modal-header" }, { type: i2.λ2, selector: "sky-modal-content" }, { type: i1.SkyListComponent, selector: "sky-list", inputs: ["data", "dataProvider", "defaultView", "initialTotal", "selectedIds", "sortFields", "appliedFilters", "search"], outputs: ["selectedIdsChange", "appliedFiltersChange"] }, { type: i1.SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: ["inMemorySearchEnabled", "placeholder", "searchEnabled", "sortSelectorEnabled", "toolbarType", "searchText"] }, { type: i4.SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: ["name", "search", "label", "description", "selectMode", "showOnlySelected"] }, { type: i2.λ3, selector: "sky-modal-footer" }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-column-selector',
@@ -61,14 +61,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class SkyColumnSelectorModule {
 }
-SkyColumnSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyColumnSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorModule, declarations: [SkyColumnSelectorComponent], imports: [CommonModule,
+SkyColumnSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyColumnSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorModule, declarations: [SkyColumnSelectorComponent], imports: [CommonModule,
         SkyI18nModule,
         SkyModalModule,
         SkyListModule,
         SkyListToolbarModule,
         SkyListViewChecklistModule] });
-SkyColumnSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorModule, imports: [[
+SkyColumnSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorModule, imports: [[
             CommonModule,
             SkyI18nModule,
             SkyModalModule,
@@ -76,7 +76,7 @@ SkyColumnSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             SkyListToolbarModule,
             SkyListViewChecklistModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyColumnSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColumnSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyColumnSelectorComponent],
@@ -95,194 +95,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 /**
  * @internal
  */
-class ListViewDisplayedGridColumnsLoadAction {
-    constructor(columns, refresh = false) {
-        this.columns = columns;
-        this.refresh = refresh;
-    }
-}
-
-class SkyListColumnSelectorButtonComponent {
-    constructor() { }
-}
-SkyListColumnSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListColumnSelectorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyListColumnSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListColumnSelectorButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-list-column-selector-button',
-                    templateUrl: './list-column-selector-button.component.html',
-                    styleUrls: ['./list-column-selector-button.component.scss'],
-                }]
-        }], ctorParameters: function () { return []; } });
-
-/**
- * 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) {
-            let 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) {
-                    let 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));
-                }
-            });
-        }
+class GridStateModel {
+    constructor() {
+        this.columns = new AsyncList();
+        this.displayedColumns = new AsyncList();
     }
 }
-SkyListColumnSelectorActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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: "12.0.0", version: "12.2.13", 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", components: [{ type: i1.λ6, selector: "sky-list-secondary-action" }, { type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4$1.AsyncPipe, "skyLibResources": i5.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListColumnSelectorActionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-list-column-selector-action',
-                    templateUrl: './list-column-selector-action.component.html',
-                }]
-        }], 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,
-                    }]
-            }] } });
-
-class SkyListColumnSelectorActionModule {
-}
-SkyListColumnSelectorActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListColumnSelectorActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListColumnSelectorActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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: "12.2.13", ngImport: i0, type: SkyListColumnSelectorActionModule, imports: [[
-            CommonModule,
-            SkyI18nModule,
-            SkyModalModule,
-            SkyListSecondaryActionsModule,
-            SkyListToolbarModule,
-            SkyIconModule,
-        ], SkyColumnSelectorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListColumnSelectorActionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyListColumnSelectorActionComponent,
-                        SkyListColumnSelectorButtonComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyI18nModule,
-                        SkyModalModule,
-                        SkyListSecondaryActionsModule,
-                        SkyListToolbarModule,
-                        SkyIconModule,
-                    ],
-                    exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule],
-                }]
-        }] });
 
 /**
  * @internal
  */
 class GridStateDispatcher extends StateDispatcher {
 }
-GridStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-GridStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridStateDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridStateDispatcher, decorators: [{
+GridStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+GridStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridStateDispatcher, decorators: [{
             type: Injectable
         }] });
 /**
@@ -319,6 +146,16 @@ class ListViewGridColumnsOrchestrator extends GridStateOrchestrator {
     }
 }
 
+/**
+ * @internal
+ */
+class ListViewDisplayedGridColumnsLoadAction {
+    constructor(columns, refresh = false) {
+        this.columns = columns;
+        this.refresh = refresh;
+    }
+}
+
 /**
  * @internal
  */
@@ -337,16 +174,6 @@ class ListViewDisplayedGridColumnsOrchestrator extends GridStateOrchestrator {
     }
 }
 
-/**
- * @internal
- */
-class GridStateModel {
-    constructor() {
-        this.columns = new AsyncList();
-        this.displayedColumns = new AsyncList();
-    }
-}
-
 /**
  * @internal
  */
@@ -359,9 +186,9 @@ class GridState extends StateNode {
             .begin();
     }
 }
-GridState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridState, deps: [{ token: GridStateModel }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
-GridState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridState });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: GridState, decorators: [{
+GridState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridState, deps: [{ token: GridStateModel }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+GridState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridState, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: GridStateModel }, { type: GridStateDispatcher }]; } });
 
@@ -393,10 +220,10 @@ class SkyListViewGridComponent extends ListViewComponent {
         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
+         * 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
+         * @default "width"
          */
         this.fit = 'width';
         /**
@@ -756,8 +583,8 @@ class SkyListViewGridComponent extends ListViewComponent {
             arrayA.every((value, index) => value === arrayB[index]));
     }
 }
-SkyListViewGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridComponent, deps: [{ token: i1.ListState }, { token: i1.ListStateDispatcher }, { token: GridState }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-SkyListViewGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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: [
+SkyListViewGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridComponent, deps: [{ token: i1.ListState }, { token: i1.ListStateDispatcher }, { token: GridState }, { token: GridStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListViewGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: [
         /* tslint:disable */
         {
             provide: ListViewComponent,
@@ -767,8 +594,8 @@ SkyListViewGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         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"], components: [{ type: i4$2.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"] }, { type: i1$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridComponent, decorators: [{
+    ], 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"], components: [{ type: i4$1.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"] }, { type: i5$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-list-view-grid',
@@ -826,6 +653,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 args: [SkyGridColumnComponent]
             }] } });
 
+class SkyListColumnSelectorButtonComponent {
+    constructor() { }
+}
+SkyListColumnSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListColumnSelectorButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListColumnSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"], components: [{ type: i5$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListColumnSelectorButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-column-selector-button',
+                    templateUrl: './list-column-selector-button.component.html',
+                    styleUrls: ['./list-column-selector-button.component.scss'],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * 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) {
+            let 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) {
+                    let 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: "12.2.16", 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: "12.0.0", version: "12.2.16", 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", components: [{ type: i1.λ6, selector: "sky-list-secondary-action" }, { type: SkyListColumnSelectorButtonComponent, selector: "sky-list-column-selector-button" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe, "skyLibResources": i5.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListColumnSelectorActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-column-selector-action',
+                    templateUrl: './list-column-selector-action.component.html',
+                }]
+        }], 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,
+                    }]
+            }] } });
+
+class SkyListColumnSelectorActionModule {
+}
+SkyListColumnSelectorActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListColumnSelectorActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListColumnSelectorActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyListColumnSelectorActionModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyModalModule,
+            SkyListSecondaryActionsModule,
+            SkyListToolbarModule,
+            SkyIconModule,
+        ], SkyColumnSelectorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListColumnSelectorActionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListColumnSelectorActionComponent,
+                        SkyListColumnSelectorButtonComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyModalModule,
+                        SkyListSecondaryActionsModule,
+                        SkyListToolbarModule,
+                        SkyIconModule,
+                    ],
+                    exports: [SkyListColumnSelectorActionComponent, SkyColumnSelectorModule],
+                }]
+        }] });
+
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
@@ -856,16 +856,16 @@ class SkyListBuilderViewGridsResourcesProvider {
  */
 class SkyListBuilderViewGridsResourcesModule {
 }
-SkyListBuilderViewGridsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListBuilderViewGridsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, exports: [SkyI18nModule] });
-SkyListBuilderViewGridsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, providers: [
+SkyListBuilderViewGridsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListBuilderViewGridsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, exports: [SkyI18nModule] });
+SkyListBuilderViewGridsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyListBuilderViewGridsResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListBuilderViewGridsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -881,21 +881,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class SkyListViewGridModule {
 }
-SkyListViewGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListViewGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridModule, declarations: [SkyListViewGridComponent], imports: [CommonModule,
+SkyListViewGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListViewGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridModule, declarations: [SkyListViewGridComponent], imports: [CommonModule,
         SkyWaitModule,
         SkyGridModule,
         SkyListBuilderViewGridsResourcesModule], exports: [SkyListViewGridComponent,
         SkyListColumnSelectorActionModule,
         SkyGridModule] });
-SkyListViewGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridModule, imports: [[
+SkyListViewGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridModule, imports: [[
             CommonModule,
             SkyWaitModule,
             SkyGridModule,
             SkyListBuilderViewGridsResourcesModule,
         ], SkyListColumnSelectorActionModule,
         SkyGridModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListViewGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListViewGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyListViewGridComponent],