@skyux/data-manager 5.0.0 → 5.0.3

package/fesm2015/skyux-data-manager.js

@@ -30,7 +30,19 @@ import { take, takeUntil, filter, map, distinctUntilChanged } from 'rxjs/operato
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
-    'EN-US': { "skyux_data_manager_column_picker_title": { "message": "Choose columns to show in the list" }, "skyux_data_manager_apply_changes_button_title": { "message": "Apply changes" }, "skyux_data_manager_cancel_button_title": { "message": "Cancel" }, "skyux_data_manager_select_all_button_title": { "message": "Select all" }, "skyux_data_manager_clear_all_button_title": { "message": "Clear all" }, "skyux_data_manager_show_selected_option_title": { "message": "Show only selected items" }, "skyux_data_manager_columns_button_title": { "message": "Columns" } },
+    'EN-US': {
+        skyux_data_manager_column_picker_title: {
+            message: 'Choose columns to show in the list',
+        },
+        skyux_data_manager_apply_changes_button_title: { message: 'Apply changes' },
+        skyux_data_manager_cancel_button_title: { message: 'Cancel' },
+        skyux_data_manager_select_all_button_title: { message: 'Select all' },
+        skyux_data_manager_clear_all_button_title: { message: 'Clear all' },
+        skyux_data_manager_show_selected_option_title: {
+            message: 'Show only selected items',
+        },
+        skyux_data_manager_columns_button_title: { message: 'Columns' },
+    },
 };
 class SkyDataManagerResourcesProvider {
     getString(localeInfo, name) {
@@ -42,22 +54,26 @@ class SkyDataManagerResourcesProvider {
  */
 class SkyDataManagerResourcesModule {
 }
-SkyDataManagerResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDataManagerResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerResourcesModule, exports: [SkyI18nModule] });
-SkyDataManagerResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerResourcesModule, providers: [{
+SkyDataManagerResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDataManagerResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerResourcesModule, exports: [SkyI18nModule] });
+SkyDataManagerResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyDataManagerResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyDataManagerResourcesProvider,
-                            multi: true
-                        }]
+                            multi: true,
+                        },
+                    ],
                 }]
         }] });
 
@@ -75,7 +91,7 @@ class SkyDataViewState {
             viewId: this.viewId,
             columnIds: this.columnIds,
             displayedColumnIds: this.displayedColumnIds,
-            additionalData: this.additionalData
+            additionalData: this.additionalData,
         };
     }
 }
@@ -83,7 +99,7 @@ class SkyDataViewState {
 class SkyDataManagerState {
     constructor(data) {
         this.views = [];
-        let views = data.views && data.views.map(view => new SkyDataViewState(view));
+        let views = data.views && data.views.map((view) => new SkyDataViewState(view));
         this.activeSortOption = data.activeSortOption;
         this.additionalData = data.additionalData;
         this.filterData = data.filterData;
@@ -93,7 +109,7 @@ class SkyDataManagerState {
         this.views = views || [];
     }
     getStateOptions() {
-        let viewStates = this.views.map(view => {
+        let viewStates = this.views.map((view) => {
             return view.getViewStateOptions();
         });
         return {
@@ -103,14 +119,14 @@ class SkyDataManagerState {
             onlyShowSelected: this.onlyShowSelected,
             searchText: this.searchText,
             selectedIds: this.selectedIds,
-            views: viewStates
+            views: viewStates,
         };
     }
     getViewStateById(viewId) {
-        return this.views.find(view => view.viewId === viewId);
+        return this.views.find((view) => view.viewId === viewId);
     }
     addOrUpdateView(viewId, view) {
-        const existingViewIndex = this.views.findIndex(v => v.viewId === viewId);
+        const existingViewIndex = this.views.findIndex((v) => v.viewId === viewId);
         if (existingViewIndex !== -1) {
             this.views[existingViewIndex] = view;
         }
@@ -123,7 +139,7 @@ class SkyDataManagerState {
             filterData: this.filterData,
             searchText: this.searchText,
             selectedIds: this.selectedIds,
-            views: this.views
+            views: this.views,
         });
     }
 }
@@ -183,7 +199,8 @@ class SkyDataManagerService {
         this.updateActiveViewId(args.activeViewId);
         this.updateDataManagerConfig(args.dataManagerConfig);
         if (settingsKey) {
-            this.uiConfigService.getConfig(settingsKey, defaultDataState.getStateOptions())
+            this.uiConfigService
+                .getConfig(settingsKey, defaultDataState.getStateOptions())
                 .pipe(take(1))
                 .subscribe((config) => {
                 this.updateDataState(new SkyDataManagerState(config), this.initSource);
@@ -196,7 +213,8 @@ class SkyDataManagerService {
             this.getDataStateUpdates(this.initSource)
                 .pipe(takeUntil(this._ngUnsubscribe))
                 .subscribe((state) => {
-                this.uiConfigService.setConfig(settingsKey, state.getStateOptions())
+                this.uiConfigService
+                    .setConfig(settingsKey, state.getStateOptions())
                     .pipe(takeUntil(this._ngUnsubscribe))
                     .subscribe(() => { }, (err) => {
                     console.warn('Could not save data manager settings.');
@@ -219,10 +237,12 @@ class SkyDataManagerService {
         this.views.next(currentViews);
         // When the initial activeViewId is set there are no views registered. We have to re-emit
         // the activeId so the newly registered view is notified that it is active.
-        this.activeViewId.pipe(take(1)).subscribe(id => {
+        this.activeViewId.pipe(take(1)).subscribe((id) => {
             this.activeViewId.next(id);
         });
-        this.dataStateChange.pipe(take(1)).subscribe(change => {
+        this.dataStateChange
+            .pipe(take(1))
+            .subscribe((change) => {
             var _a;
             const dataState = change.dataState;
             const currentViewState = dataState.getViewStateById(viewConfig.id);
@@ -231,10 +251,16 @@ class SkyDataManagerService {
                 // Ensure that the view state's available columns match with the view config. Also,
                 // add columns to the `displayedColumnIds` as long as they are not `initialHide`
                 if (viewConfig.columnOptions) {
-                    const columnIds = viewConfig.columnOptions.map(columnOptions => { return columnOptions.id; });
+                    const columnIds = viewConfig.columnOptions.map((columnOptions) => {
+                        return columnOptions.id;
+                    });
                     const displayedColumnIds = viewConfig.columnOptions
-                        .filter(columnOption => { return !columnOption.initialHide; })
-                        .map(columnOption => { return columnOption.id; });
+                        .filter((columnOption) => {
+                        return !columnOption.initialHide;
+                    })
+                        .map((columnOption) => {
+                        return columnOption.id;
+                    });
                     newViewState.columnIds = columnIds;
                     newViewState.displayedColumnIds = displayedColumnIds;
                 }
@@ -242,19 +268,22 @@ class SkyDataManagerService {
                 this.updateDataState(newDataState, this.initSource);
             }
             else {
-                const currentAvailableColumnIds = (_a = viewConfig.columnOptions) === null || _a === void 0 ? void 0 : _a.map(columnOptions => { return columnOptions.id; });
+                const currentAvailableColumnIds = (_a = viewConfig.columnOptions) === null || _a === void 0 ? void 0 : _a.map((columnOptions) => {
+                    return columnOptions.id;
+                });
                 // Ensure that the view state's available columns match with the view config. Also,
                 // add new columns to the `displayedColumnIds` as long as they are not `initialHide`.
                 // We only add columns to `displayedColumnsIds` if we had previously tracked
                 // `columnIds` to avoid breaking changes.
                 if (currentViewState.columnIds.length > 0) {
-                    let newColumnIds = currentAvailableColumnIds.filter(id => currentViewState.columnIds.indexOf(id) < 0);
-                    newColumnIds = newColumnIds.filter(columnId => {
-                        return viewConfig.columnOptions.find(columnOption => columnOption.id === columnId && !columnOption.initialHide);
+                    let newColumnIds = currentAvailableColumnIds.filter((id) => currentViewState.columnIds.indexOf(id) < 0);
+                    newColumnIds = newColumnIds.filter((columnId) => {
+                        return viewConfig.columnOptions.find((columnOption) => columnOption.id === columnId && !columnOption.initialHide);
                     });
                     // Add the column IDs that now exist to the data manager state both as available
                     // and as shown.
-                    currentViewState.displayedColumnIds = currentViewState.displayedColumnIds.concat(newColumnIds);
+                    currentViewState.displayedColumnIds =
+                        currentViewState.displayedColumnIds.concat(newColumnIds);
                 }
                 // Add the column IDs that now exist to the data manager state both as available
                 // and as shown.
@@ -262,7 +291,8 @@ class SkyDataManagerService {
                 const newDataState = dataState.addOrUpdateView(viewConfig.id, currentViewState);
                 this.updateDataState(newDataState, this.initSource);
             }
-        }).unsubscribe();
+        })
+            .unsubscribe();
     }
     /**
      * Returns an observable of data state changes that views and other data manager entities can subscribe to.
@@ -274,12 +304,12 @@ class SkyDataManagerService {
     getDataStateUpdates(sourceId, updateFilter) {
         // filter out events from the provided source and emit just the dataState
         if (updateFilter) {
-            return this.dataStateChange.pipe(filter(stateChange => sourceId !== stateChange.source), map(stateChange => stateChange.dataState), updateFilter.comparator ?
-                distinctUntilChanged(updateFilter.comparator) :
-                distinctUntilChanged(this.getDefaultStateComparator(updateFilter.properties)));
+            return this.dataStateChange.pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState), updateFilter.comparator
+                ? distinctUntilChanged(updateFilter.comparator)
+                : distinctUntilChanged(this.getDefaultStateComparator(updateFilter.properties)));
         }
         else {
-            return this.dataStateChange.pipe(filter(stateChange => sourceId !== stateChange.source), map(stateChange => stateChange.dataState));
+            return this.dataStateChange.pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState));
         }
     }
     /**
@@ -338,7 +368,7 @@ class SkyDataManagerService {
      */
     getViewById(viewId) {
         const currentViews = this.views.value;
-        const viewConfig = currentViews.find(view => view.id === viewId);
+        const viewConfig = currentViews.find((view) => view.id === viewId);
         return viewConfig;
     }
     /**
@@ -349,7 +379,7 @@ class SkyDataManagerService {
      */
     updateViewConfig(view) {
         let currentViews = this.views.value;
-        const existingViewIndex = currentViews.findIndex(currentView => currentView.id === view.id);
+        const existingViewIndex = currentViews.findIndex((currentView) => currentView.id === view.id);
         if (existingViewIndex === -1) {
             console.error('A view with the id {id} does not exist.', view.id);
         }
@@ -385,9 +415,9 @@ class SkyDataManagerService {
         };
     }
 }
-SkyDataManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDataManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerService, decorators: [{
+SkyDataManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyUIConfigService }]; } });
 
@@ -414,7 +444,7 @@ class SkyDataManagerComponent {
         this.dataManagerService = dataManagerService;
         this.backToTopController = new Subject();
         this.backToTopOptions = {
-            buttonHidden: true
+            buttonHidden: true,
         };
         this._isInitialized = false;
         this.allViewkeeperClasses = {};
@@ -444,20 +474,23 @@ class SkyDataManagerComponent {
         this.dataManagerService
             .getDataStateUpdates(this.sourceId)
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => this.isInitialized = true);
+            .subscribe(() => (this.isInitialized = true));
         this.dataManagerService.viewkeeperClasses
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(classes => {
+            .subscribe((classes) => {
             this.allViewkeeperClasses = classes;
             this.currentViewkeeperClasses = classes[this.activeViewId];
         });
         this.dataManagerService
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(activeViewId => {
+            .subscribe((activeViewId) => {
             this.activeViewId = activeViewId;
-            this.backToTopController.next({ type: SkyBackToTopMessageType.BackToTop });
-            this.currentViewkeeperClasses = this.allViewkeeperClasses[this.activeViewId];
+            this.backToTopController.next({
+                type: SkyBackToTopMessageType.BackToTop,
+            });
+            this.currentViewkeeperClasses =
+                this.allViewkeeperClasses[this.activeViewId];
         });
     }
     ngOnDestroy() {
@@ -465,14 +498,14 @@ class SkyDataManagerComponent {
         this.ngUnsubscribe.complete();
     }
 }
-SkyDataManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerComponent, selector: "sky-data-manager", ngImport: i0, template: "<div\n  *ngIf=\"isInitialized\"\n  class=\"sky-data-manager\"\n  [skyBackToTop]=\"backToTopOptions\"\n  [skyBackToTopMessageStream]=\"backToTopController\"\n  [skyViewkeeper]=\"currentViewkeeperClasses\"\n  #dataManager\n>\n  <ng-content></ng-content>\n</div>\n", directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
+SkyDataManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerComponent, selector: "sky-data-manager", ngImport: i0, template: "<div\n  *ngIf=\"isInitialized\"\n  class=\"sky-data-manager\"\n  [skyBackToTop]=\"backToTopOptions\"\n  [skyBackToTopMessageStream]=\"backToTopController\"\n  [skyViewkeeper]=\"currentViewkeeperClasses\"\n  #dataManager\n>\n  <ng-content></ng-content>\n</div>\n", directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager',
                     templateUrl: './data-manager.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }]; } });
 
@@ -487,9 +520,9 @@ class SkyDataManagerFilterModalContext {
  */
 class SkyDataManagerColumnPickerService {
 }
-SkyDataManagerColumnPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDataManagerColumnPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerService, decorators: [{
+SkyDataManagerColumnPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerColumnPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerService, decorators: [{
             type: Injectable
         }] });
 
@@ -542,30 +575,34 @@ class SkyDataManagerToolbarComponent {
         this.changeDetector.markForCheck();
     }
     ngOnInit() {
-        this.dataManagerService.getActiveViewIdUpdates()
+        this.dataManagerService
+            .getActiveViewIdUpdates()
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(activeViewId => {
+            .subscribe((activeViewId) => {
             /* istanbul ignore else */
             if (activeViewId) {
                 this.activeView = this.dataManagerService.getViewById(activeViewId);
                 this.changeDetector.markForCheck();
             }
         });
-        this.dataManagerService.getDataViewsUpdates()
+        this.dataManagerService
+            .getDataViewsUpdates()
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(views => {
+            .subscribe((views) => {
             this.views = views;
         });
-        this.dataManagerService.getDataStateUpdates(this._source)
+        this.dataManagerService
+            .getDataStateUpdates(this._source)
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(dataState => {
+            .subscribe((dataState) => {
             this._dataState = dataState;
             this.onlyShowSelected = dataState.onlyShowSelected;
             this.changeDetector.markForCheck();
         });
-        this.dataManagerService.getDataManagerConfigUpdates()
+        this.dataManagerService
+            .getDataManagerConfigUpdates()
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(config => {
+            .subscribe((config) => {
             this.dataManagerConfig = config;
         });
     }
@@ -589,7 +626,9 @@ class SkyDataManagerToolbarComponent {
         const filterModal = this.dataManagerConfig && this.dataManagerConfig.filterModalComponent;
         context.filterData = this.dataState && this.dataState.filterData;
         const options = {
-            providers: [{ provide: SkyDataManagerFilterModalContext, useValue: context }]
+            providers: [
+                { provide: SkyDataManagerFilterModalContext, useValue: context },
+            ],
         };
         if (filterModal) {
             const modalInstance = this.modalService.open(filterModal, options);
@@ -606,10 +645,13 @@ class SkyDataManagerToolbarComponent {
         const viewState = this.dataState.getViewStateById(this.activeView.id);
         const context = new SkyDataManagerColumnPickerContext(columnOptions, viewState.displayedColumnIds);
         if (this.activeView.columnPickerSortStrategy) {
-            context.columnPickerSortStrategy = this.activeView.columnPickerSortStrategy;
+            context.columnPickerSortStrategy =
+                this.activeView.columnPickerSortStrategy;
         }
         const options = {
-            providers: [{ provide: SkyDataManagerColumnPickerContext, useValue: context }]
+            providers: [
+                { provide: SkyDataManagerColumnPickerContext, useValue: context },
+            ],
         };
         const modalInstance = this.modalService.open(this.columnPickerService.getComponentType(), options);
         modalInstance.closed.subscribe((result) => {
@@ -637,15 +679,15 @@ class SkyDataManagerToolbarComponent {
         this.dataManagerService.updateDataState(this.dataState, this._source);
     }
 }
-SkyDataManagerToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }, { token: i3.SkyModalService }, { token: SkyDataManagerColumnPickerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n<sky-toolbar>\n  <sky-toolbar-section>\n\n    <ng-content select=\"sky-data-manager-toolbar-primary-item\"></ng-content>\n\n    <sky-toolbar-item *ngIf=\"activeView?.filterButtonEnabled\">\n      <sky-filter-button\n        [showButtonText]=\"activeView?.showFilterButtonText\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      >\n      </sky-filter-button>\n    </sky-toolbar-item>\n\n    <sky-toolbar-item *ngIf=\"activeView?.sortEnabled\">\n      <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n        <sky-sort-item\n          *ngFor=\"let item of dataManagerConfig?.sortOptions\"\n          [active]=\"activeSortOptionId && activeSortOptionId === item.id\"\n          (itemSelect)=\"sortSelected(item)\"\n        >\n          {{item.label}}\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n\n    <sky-toolbar-item *ngIf=\"activeView?.columnPickerEnabled\">\n      <button\n        class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_data_manager_columns_button_title' | skyLibResources\"\n        [attr.title]=\"'skyux_data_manager_columns_button_title' | skyLibResources\"\n        (click)=\"openColumnPicker()\"\n      >\n        <sky-icon\n          icon=\"columns\"\n        ></sky-icon>\n        <span\n          class=\"sky-column-selector-action-btn-text\"\n        >\n          {{'skyux_data_manager_columns_button_title' | skyLibResources}}\n        </span>\n      </button>\n    </sky-toolbar-item>\n\n    <ng-content select=\"sky-data-manager-toolbar-left-item\"></ng-content>\n\n    <sky-toolbar-item *ngIf=\"activeView?.searchEnabled\">\n      <sky-search\n        [expandMode]=\"activeView?.searchExpandMode\"\n        [placeholderText]=\"activeView?.searchPlaceholderText\"\n        [searchText]=\"dataState?.searchText\"\n        (searchApply)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n\n    <sky-toolbar-view-actions>\n      <ng-content select=\"sky-data-manager-toolbar-right-item\"></ng-content>\n      <sky-radio-group *ngIf=\"activeView && views && views.length > 1\"\n        [ariaLabel]=\"'data view switcher'\"\n        class=\"sky-switch-icon-group\"\n      >\n        <sky-radio *ngFor=\"let view of views\"\n          [attr.name]=\"view.name\"\n          [attr.aria-label]=\"view.name\"\n          [icon]=\"view.icon\"\n          [value]=\"view.id\"\n          [label]=\"view.name\"\n          [(ngModel)]=\"activeView.id\"\n          (change)=\"onViewChange(view.id)\"\n        >\n        </sky-radio>\n      </sky-radio-group>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <ng-content select=\"sky-data-manager-toolbar-section\"></ng-content>\n</sky-toolbar\n>\n\n<sky-toolbar *ngIf=\"activeView?.multiselectToolbarEnabled\"\n  class=\"sky-data-manager-multiselect-toolbar\"\n>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <button\n      class=\"sky-btn sky-btn-link sky-data-manager-select-all-btn\"\n      type=\"button\"\n      (click)=\"selectAll()\"\n      >\n        {{'skyux_data_manager_select_all_button_title' | skyLibResources}}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-link sky-data-manager-clear-all-btn\"\n        type=\"button\"\n        (click)=\"clearAll()\"\n      >\n        {{'skyux_data_manager_clear_all_button_title' | skyLibResources}}\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <sky-checkbox\n        [checked]=\"onlyShowSelected\"\n        (change)=\"onOnlyShowSelected($event)\"\n      >\n        <sky-checkbox-label>\n          {{'skyux_data_manager_show_selected_option_title' | skyLibResources}}\n        </sky-checkbox-label>\n      </sky-checkbox>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n</div>\n", styles: [":host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}\n"], components: [{ type: i4.λ37, selector: "sky-toolbar" }, { type: i4.λ38, selector: "sky-toolbar-section" }, { type: i4.λ39, selector: "sky-toolbar-item" }, { type: i8.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { type: i8.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i8.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i7.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4.λ40, selector: "sky-toolbar-view-actions" }, { type: i8$1.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i8$1.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
+SkyDataManagerToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }, { token: i3.SkyModalService }, { token: SkyDataManagerColumnPickerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar>\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.filterButtonEnabled\">\n        <sky-filter-button\n          [showButtonText]=\"activeView?.showFilterButtonText\"\n          (filterButtonClick)=\"filterButtonClicked()\"\n        >\n        </sky-filter-button>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.sortEnabled\">\n        <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n          <sky-sort-item\n            *ngFor=\"let item of dataManagerConfig?.sortOptions\"\n            [active]=\"activeSortOptionId && activeSortOptionId === item.id\"\n            (itemSelect)=\"sortSelected(item)\"\n          >\n            {{ item.label }}\n          </sky-sort-item>\n        </sky-sort>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.columnPickerEnabled\">\n        <button\n          class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          [attr.title]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          (click)=\"openColumnPicker()\"\n        >\n          <sky-icon icon=\"columns\"></sky-icon>\n          <span class=\"sky-column-selector-action-btn-text\">\n            {{ 'skyux_data_manager_columns_button_title' | skyLibResources }}\n          </span>\n        </button>\n      </sky-toolbar-item>\n\n      <ng-content select=\"sky-data-manager-toolbar-left-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.searchEnabled\">\n        <sky-search\n          [expandMode]=\"activeView?.searchExpandMode\"\n          [placeholderText]=\"activeView?.searchPlaceholderText\"\n          [searchText]=\"dataState?.searchText\"\n          (searchApply)=\"searchApplied($event)\"\n        >\n        </sky-search>\n      </sky-toolbar-item>\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\"></ng-content>\n        <sky-radio-group\n          *ngIf=\"activeView && views && views.length > 1\"\n          [ariaLabel]=\"'data view switcher'\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.name]=\"view.name\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\n            [(ngModel)]=\"activeView.id\"\n            (change)=\"onViewChange(view.id)\"\n          >\n          </sky-radio>\n        </sky-radio-group>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\"></ng-content>\n  </sky-toolbar>\n\n  <sky-toolbar\n    *ngIf=\"activeView?.multiselectToolbarEnabled\"\n    class=\"sky-data-manager-multiselect-toolbar\"\n  >\n    <sky-toolbar-section>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-select-all-btn\"\n          type=\"button\"\n          (click)=\"selectAll()\"\n        >\n          {{ 'skyux_data_manager_select_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-clear-all-btn\"\n          type=\"button\"\n          (click)=\"clearAll()\"\n        >\n          {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-view-actions>\n        <sky-checkbox\n          [checked]=\"onlyShowSelected\"\n          (change)=\"onOnlyShowSelected($event)\"\n        >\n          <sky-checkbox-label>\n            {{\n              'skyux_data_manager_show_selected_option_title' | skyLibResources\n            }}\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n  </sky-toolbar>\n</div>\n", styles: [":host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}\n"], components: [{ type: i4.λ37, selector: "sky-toolbar" }, { type: i4.λ38, selector: "sky-toolbar-section" }, { type: i4.λ39, selector: "sky-toolbar-item" }, { type: i8.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { type: i8.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i8.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i7.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4.λ40, selector: "sky-toolbar-view-actions" }, { type: i8$1.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i8$1.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-toolbar',
                     templateUrl: './data-manager-toolbar.component.html',
                     styleUrls: ['./data-manager-toolbar.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }, { type: i3.SkyModalService }, { type: SkyDataManagerColumnPickerService }]; } });
 
@@ -669,9 +711,10 @@ class SkyDataViewComponent {
         this.changeDetector.markForCheck();
     }
     ngOnInit() {
-        this.dataManagerService.getActiveViewIdUpdates()
+        this.dataManagerService
+            .getActiveViewIdUpdates()
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(activeViewId => {
+            .subscribe((activeViewId) => {
             this.isActive = this.viewId === activeViewId;
         });
     }
@@ -680,14 +723,14 @@ class SkyDataViewComponent {
         this._ngUnsubscribe.complete();
     }
 }
-SkyDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataViewComponent, selector: "sky-data-view", inputs: { viewId: "viewId" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n  <ng-content></ng-content>\n</ng-container>\n", directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataViewComponent, decorators: [{
+SkyDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataViewComponent, selector: "sky-data-view", inputs: { viewId: "viewId" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n  <ng-content></ng-content>\n</ng-container>\n", directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-view',
                     templateUrl: './data-view.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }]; }, propDecorators: { viewId: [{
                 type: Input
@@ -710,7 +753,7 @@ class SkyDataManagerColumnPickerComponent {
             searchExpandMode: 'fit',
             multiselectToolbarEnabled: true,
             onSelectAllClick: this.selectAll.bind(this),
-            onClearAllClick: this.clearAll.bind(this)
+            onClearAllClick: this.clearAll.bind(this),
         };
         this._dataState = new SkyDataManagerState({});
         this._ngUnsubscribe = new Subject();
@@ -720,25 +763,28 @@ class SkyDataManagerColumnPickerComponent {
     }
     set dataState(value) {
         this._dataState = value;
-        this.displayedColumnData = this.searchColumns(this.columnData.filter(col => !col.alwaysDisplayed));
+        this.displayedColumnData = this.searchColumns(this.columnData.filter((col) => !col.alwaysDisplayed));
         if (value.onlyShowSelected) {
-            this.displayedColumnData = this.displayedColumnData.filter(col => col.isSelected);
+            this.displayedColumnData = this.displayedColumnData.filter((col) => col.isSelected);
         }
     }
     ngOnInit() {
-        this.libResources.getString('skyux_data_manager_column_picker_title').subscribe((value) => {
+        this.libResources
+            .getString('skyux_data_manager_column_picker_title')
+            .subscribe((value) => {
             console.log(value);
         });
         this.dataManagerService.initDataManager({
             activeViewId: this.viewConfig.id,
             dataManagerConfig: {},
-            defaultDataState: this.dataState
+            defaultDataState: this.dataState,
         });
         this.dataManagerService.initDataView(this.viewConfig);
         this.columnData = this.formatColumnOptions();
-        this.dataManagerService.getDataStateUpdates('columnPicker')
+        this.dataManagerService
+            .getDataStateUpdates('columnPicker')
             .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe(state => {
+            .subscribe((state) => {
             this.dataState = state;
         });
     }
@@ -754,7 +800,8 @@ class SkyDataManagerColumnPickerComponent {
             searchedColumns = columns.filter(function (item) {
                 let property;
                 for (property in item) {
-                    if (item.hasOwnProperty(property) && (property === 'label' || property === 'description')) {
+                    if (item.hasOwnProperty(property) &&
+                        (property === 'label' || property === 'description')) {
                         const propertyText = item[property] && item[property].toUpperCase();
                         if (propertyText && propertyText.indexOf(searchText) > -1) {
                             return true;
@@ -767,19 +814,19 @@ class SkyDataManagerColumnPickerComponent {
         return searchedColumns;
     }
     selectAll() {
-        this.displayedColumnData.forEach(column => column.isSelected = true);
+        this.displayedColumnData.forEach((column) => (column.isSelected = true));
     }
     clearAll() {
-        this.displayedColumnData.forEach(column => column.isSelected = false);
+        this.displayedColumnData.forEach((column) => (column.isSelected = false));
     }
     cancelChanges() {
         this.instance.cancel();
     }
     isSelected(id) {
-        return this.context.displayedColumnIds.findIndex(colId => colId === id) !== -1;
+        return (this.context.displayedColumnIds.findIndex((colId) => colId === id) !== -1);
     }
     applyChanges() {
-        this.instance.save(this.columnData.filter(col => col.isSelected || col.alwaysDisplayed));
+        this.instance.save(this.columnData.filter((col) => col.isSelected || col.alwaysDisplayed));
     }
     formatColumnOptions() {
         const allColumnOptions = this.context.columnOptions;
@@ -794,11 +841,12 @@ class SkyDataManagerColumnPickerComponent {
                 id: columnOption.id,
                 label: columnOption.label,
                 description: columnOption.description,
-                isSelected: colIndex !== -1
+                isSelected: colIndex !== -1,
             };
             // if column picker sorting is currently enabled sort columns by order displayed then alphabetical
             // else display column in order they were specified in the columnOptions
-            if (this.context.columnPickerSortStrategy === SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
+            if (this.context.columnPickerSortStrategy ===
+                SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
                 if (formattedColumn.isSelected) {
                     formattedColumnOptions[colIndex] = formattedColumn;
                 }
@@ -812,23 +860,24 @@ class SkyDataManagerColumnPickerComponent {
         }
         // if column picker sorting is enabled, sort the columns that are not currently displayed
         // and add them after the currently displayed options
-        if (this.context.columnPickerSortStrategy === SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
+        if (this.context.columnPickerSortStrategy ===
+            SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
             unselectedColumnOptions.sort((col1, col2) => col1.label.localeCompare(col2.label));
             formattedColumnOptions = formattedColumnOptions.concat(unselectedColumnOptions);
         }
         return formattedColumnOptions;
     }
 }
-SkyDataManagerColumnPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [{ token: SkyDataManagerColumnPickerContext }, { token: SkyDataManagerService }, { token: i3.SkyModalInstance }, { token: i4$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerColumnPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerColumnPickerComponent, selector: "sky-data-manager-column-picker", providers: [SkyDataManagerService], ngImport: i0, template: "\n<sky-modal>\n  <sky-modal-header>\n    {{'skyux_data_manager_column_picker_title' | skyLibResources}}\n  </sky-modal-header>\n  <sky-modal-content\n    class=\"sky-data-manager-column-picker-content\"\n  >\n    <sky-data-manager>\n      <sky-data-manager-toolbar>\n      </sky-data-manager-toolbar>\n\n      <sky-data-view\n      [viewId]=\"viewConfig.id\"\n      >\n        <sky-repeater\n          expandMode=\"none\"\n        >\n          <sky-repeater-item\n            *ngFor=\"let column of displayedColumnData\"\n            [selectable]=\"true\"\n            [(isSelected)]=\"column.isSelected\"\n          >\n            <sky-repeater-item-title>\n              {{column.label}}\n            </sky-repeater-item-title>\n            <sky-repeater-item-content>\n              {{column.description}}\n            </sky-repeater-item-content>\n          </sky-repeater-item>\n        </sky-repeater>\n      </sky-data-view>\n    </sky-data-manager>\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_data_manager_apply_changes_button_title' | skyLibResources}}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{'skyux_data_manager_cancel_button_title' | skyLibResources}}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}\n"], components: [{ type: i3.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i3.λ4, selector: "sky-modal-header" }, { type: i3.λ2, selector: "sky-modal-content" }, { type: SkyDataManagerComponent, selector: "sky-data-manager" }, { type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { type: i8.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i8.λ10, selector: "sky-repeater-item", inputs: ["inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i8.λ12, selector: "sky-repeater-item-title" }, { type: i8.λ8, selector: "sky-repeater-item-content" }, { type: i3.λ3, selector: "sky-modal-footer" }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerComponent, decorators: [{
+SkyDataManagerColumnPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [{ token: SkyDataManagerColumnPickerContext }, { token: SkyDataManagerService }, { token: i3.SkyModalInstance }, { token: i4$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerColumnPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerColumnPickerComponent, selector: "sky-data-manager-column-picker", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>\n    {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}\n  </sky-modal-header>\n  <sky-modal-content class=\"sky-data-manager-column-picker-content\">\n    <sky-data-manager>\n      <sky-data-manager-toolbar> </sky-data-manager-toolbar>\n\n      <sky-data-view [viewId]=\"viewConfig.id\">\n        <sky-repeater expandMode=\"none\">\n          <sky-repeater-item\n            *ngFor=\"let column of displayedColumnData\"\n            [selectable]=\"true\"\n            [(isSelected)]=\"column.isSelected\"\n          >\n            <sky-repeater-item-title>\n              {{ column.label }}\n            </sky-repeater-item-title>\n            <sky-repeater-item-content>\n              {{ column.description }}\n            </sky-repeater-item-content>\n          </sky-repeater-item>\n        </sky-repeater>\n      </sky-data-view>\n    </sky-data-manager>\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_data_manager_apply_changes_button_title' | skyLibResources }}\n    </button>\n    <button\n      sky-cmp-id=\"cancel\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"cancelChanges()\"\n    >\n      {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}\n"], components: [{ type: i3.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i3.λ4, selector: "sky-modal-header" }, { type: i3.λ2, selector: "sky-modal-content" }, { type: SkyDataManagerComponent, selector: "sky-data-manager" }, { type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { type: i8.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i8.λ10, selector: "sky-repeater-item", inputs: ["inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i8.λ12, selector: "sky-repeater-item-title" }, { type: i8.λ8, selector: "sky-repeater-item-content" }, { type: i3.λ3, selector: "sky-modal-footer" }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-column-picker',
                     templateUrl: './data-manager-column-picker.component.html',
                     styleUrls: ['./data-manager-column-picker.component.scss'],
                     providers: [SkyDataManagerService],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: SkyDataManagerColumnPickerContext }, { type: SkyDataManagerService }, { type: i3.SkyModalInstance }, { type: i4$1.SkyLibResourcesService }]; } });
 
@@ -839,13 +888,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
  */
 class SkyDataManagerToolbarLeftItemComponent {
 }
-SkyDataManagerToolbarLeftItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarLeftItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerToolbarLeftItemComponent, selector: "sky-data-manager-toolbar-left-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", components: [{ type: i4.λ39, selector: "sky-toolbar-item" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, decorators: [{
+SkyDataManagerToolbarLeftItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarLeftItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerToolbarLeftItemComponent, selector: "sky-data-manager-toolbar-left-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", components: [{ type: i4.λ39, selector: "sky-toolbar-item" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-toolbar-left-item',
-                    templateUrl: './data-manager-toolbar-left-item.component.html'
+                    templateUrl: './data-manager-toolbar-left-item.component.html',
                 }]
         }] });
 
@@ -856,13 +905,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
  */
 class SkyDataManagerToolbarPrimaryItemComponent {
 }
-SkyDataManagerToolbarPrimaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarPrimaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerToolbarPrimaryItemComponent, selector: "sky-data-manager-toolbar-primary-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", components: [{ type: i4.λ39, selector: "sky-toolbar-item" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, decorators: [{
+SkyDataManagerToolbarPrimaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarPrimaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerToolbarPrimaryItemComponent, selector: "sky-data-manager-toolbar-primary-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", components: [{ type: i4.λ39, selector: "sky-toolbar-item" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-toolbar-primary-item',
-                    templateUrl: './data-manager-toolbar-primary-item.component.html'
+                    templateUrl: './data-manager-toolbar-primary-item.component.html',
                 }]
         }] });
 
@@ -874,13 +923,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
  */
 class SkyDataManagerToolbarRightItemComponent {
 }
-SkyDataManagerToolbarRightItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarRightItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerToolbarRightItemComponent, selector: "sky-data-manager-toolbar-right-item", ngImport: i0, template: "<ng-content></ng-content>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, decorators: [{
+SkyDataManagerToolbarRightItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarRightItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerToolbarRightItemComponent, selector: "sky-data-manager-toolbar-right-item", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-toolbar-right-item',
-                    templateUrl: './data-manager-toolbar-right-item.component.html'
+                    templateUrl: './data-manager-toolbar-right-item.component.html',
                 }]
         }] });
 
@@ -891,13 +940,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
  */
 class SkyDataManagerToolbarSectionComponent {
 }
-SkyDataManagerToolbarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyDataManagerToolbarSectionComponent, selector: "sky-data-manager-toolbar-section", ngImport: i0, template: "<sky-toolbar-section>\n  <ng-content></ng-content>\n</sky-toolbar-section>\n", components: [{ type: i4.λ38, selector: "sky-toolbar-section" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, decorators: [{
+SkyDataManagerToolbarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDataManagerToolbarSectionComponent, selector: "sky-data-manager-toolbar-section", ngImport: i0, template: "<sky-toolbar-section>\n  <ng-content></ng-content>\n</sky-toolbar-section>\n", components: [{ type: i4.λ38, selector: "sky-toolbar-section" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-data-manager-toolbar-section',
-                    templateUrl: './data-manager-toolbar-section.component.html'
+                    templateUrl: './data-manager-toolbar-section.component.html',
                 }]
         }] });
 
@@ -906,16 +955,16 @@ class SkyDataManagerColumnPickerImplService {
         return SkyDataManagerColumnPickerComponent;
     }
 }
-SkyDataManagerColumnPickerImplService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerImplService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDataManagerColumnPickerImplService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerImplService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerColumnPickerImplService, decorators: [{
+SkyDataManagerColumnPickerImplService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerImplService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerColumnPickerImplService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerImplService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerColumnPickerImplService, decorators: [{
             type: Injectable
         }] });
 
 class SkyDataManagerModule {
 }
-SkyDataManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDataManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerModule, declarations: [SkyDataManagerColumnPickerComponent,
+SkyDataManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDataManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerModule, declarations: [SkyDataManagerColumnPickerComponent,
         SkyDataManagerComponent,
         SkyDataManagerToolbarLeftItemComponent,
         SkyDataManagerToolbarPrimaryItemComponent,
@@ -943,11 +992,11 @@ SkyDataManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         SkyDataManagerToolbarSectionComponent,
         SkyDataManagerToolbarComponent,
         SkyDataViewComponent] });
-SkyDataManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerModule, providers: [
+SkyDataManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerModule, providers: [
         {
             provide: SkyDataManagerColumnPickerService,
-            useClass: SkyDataManagerColumnPickerImplService
-        }
+            useClass: SkyDataManagerColumnPickerImplService,
+        },
     ], imports: [[
             CommonModule,
             FormsModule,
@@ -962,9 +1011,9 @@ SkyDataManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             SkySearchModule,
             SkySortModule,
             SkyToolbarModule,
-            SkyViewkeeperModule
+            SkyViewkeeperModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0, type: SkyDataManagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDataManagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -975,7 +1024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
                         SkyDataManagerToolbarRightItemComponent,
                         SkyDataManagerToolbarSectionComponent,
                         SkyDataManagerToolbarComponent,
-                        SkyDataViewComponent
+                        SkyDataViewComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -991,7 +1040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
                         SkySearchModule,
                         SkySortModule,
                         SkyToolbarModule,
-                        SkyViewkeeperModule
+                        SkyViewkeeperModule,
                     ],
                     exports: [
                         SkyDataManagerColumnPickerComponent,
@@ -1001,17 +1050,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImpor
                         SkyDataManagerToolbarRightItemComponent,
                         SkyDataManagerToolbarSectionComponent,
                         SkyDataManagerToolbarComponent,
-                        SkyDataViewComponent
-                    ],
-                    entryComponents: [
-                        SkyDataManagerColumnPickerComponent
+                        SkyDataViewComponent,
                     ],
+                    entryComponents: [SkyDataManagerColumnPickerComponent],
                     providers: [
                         {
                             provide: SkyDataManagerColumnPickerService,
-                            useClass: SkyDataManagerColumnPickerImplService
-                        }
-                    ]
+                            useClass: SkyDataManagerColumnPickerImplService,
+                        },
+                    ],
                 }]
         }] });