@skyux/data-manager 7.0.0-beta.11 → 7.0.0-beta.13

package/fesm2020/skyux-data-manager.mjs

@@ -20,6 +20,7 @@ import * as i3 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 import * as i11 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil, filter, map, distinctUntilChanged } from 'rxjs/operators';
 
@@ -191,6 +192,7 @@ class SkyDataManagerStateChange {
     }
 }
 
+var _SkyDataManagerService_instances, _SkyDataManagerService_activeViewId, _SkyDataManagerService_dataManagerConfig, _SkyDataManagerService_views, _SkyDataManagerService_dataStateChange, _SkyDataManagerService_isInitialized, _SkyDataManagerService_ngUnsubscribe, _SkyDataManagerService_initSource, _SkyDataManagerService_uiConfigService, _SkyDataManagerService_filterDataStateProperties, _SkyDataManagerService_getDefaultStateComparator;
 /**
  * The data manager service provides ways for data views, toolbar items, and more to stay up to date
  * with the active view ID, data manager config, registered views and their configs, and data state.
@@ -201,23 +203,25 @@ class SkyDataManagerStateChange {
  */
 class SkyDataManagerService {
     constructor(uiConfigService) {
-        this.uiConfigService = uiConfigService;
+        _SkyDataManagerService_instances.add(this);
         this.viewkeeperClasses = new BehaviorSubject({});
-        this.activeViewId = new ReplaySubject(1);
-        this.dataManagerConfig = new BehaviorSubject(undefined);
-        this.views = new BehaviorSubject([]);
-        this.dataStateChange = new ReplaySubject(1);
-        this._ngUnsubscribe = new Subject();
-        this.initSource = 'dataManagerServiceInit';
-        this.isInitialized = false;
+        _SkyDataManagerService_activeViewId.set(this, new ReplaySubject(1));
+        _SkyDataManagerService_dataManagerConfig.set(this, new BehaviorSubject({}));
+        _SkyDataManagerService_views.set(this, new BehaviorSubject([]));
+        _SkyDataManagerService_dataStateChange.set(this, new ReplaySubject(1));
+        _SkyDataManagerService_isInitialized.set(this, void 0);
+        _SkyDataManagerService_ngUnsubscribe.set(this, new Subject());
+        _SkyDataManagerService_initSource.set(this, 'dataManagerServiceInit');
+        _SkyDataManagerService_uiConfigService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDataManagerService_uiConfigService, uiConfigService, "f");
     }
     ngOnDestroy() {
-        this.activeViewId.complete();
-        this.dataManagerConfig.complete();
-        this.views.complete();
-        this.dataStateChange.complete();
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDataManagerService_activeViewId, "f").complete();
+        __classPrivateFieldGet(this, _SkyDataManagerService_dataManagerConfig, "f").complete();
+        __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").complete();
+        __classPrivateFieldGet(this, _SkyDataManagerService_dataStateChange, "f").complete();
+        __classPrivateFieldGet(this, _SkyDataManagerService_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDataManagerService_ngUnsubscribe, "f").complete();
     }
     /**
      * Initializes the data manager with the given settings and sets `isInitialized` to `true`.
@@ -227,32 +231,33 @@ class SkyDataManagerService {
      * and saves any state changes to the service.
      */
     initDataManager(args) {
-        if (this.isInitialized) {
+        if (__classPrivateFieldGet(this, _SkyDataManagerService_isInitialized, "f")) {
             console.warn('This data manager instance has already been initialized.');
             return;
         }
+        __classPrivateFieldSet(this, _SkyDataManagerService_isInitialized, true, "f");
         const defaultDataState = args.defaultDataState;
         const settingsKey = args.settingsKey;
         this.updateActiveViewId(args.activeViewId);
         this.updateDataManagerConfig(args.dataManagerConfig);
         if (settingsKey) {
-            this.uiConfigService
+            __classPrivateFieldGet(this, _SkyDataManagerService_uiConfigService, "f")
                 .getConfig(settingsKey, defaultDataState.getStateOptions())
                 .pipe(take(1))
                 .subscribe((config) => {
-                this.updateDataState(new SkyDataManagerState(config), this.initSource);
+                this.updateDataState(new SkyDataManagerState(config), __classPrivateFieldGet(this, _SkyDataManagerService_initSource, "f"));
             });
         }
         else {
-            this.updateDataState(defaultDataState, this.initSource);
+            this.updateDataState(defaultDataState, __classPrivateFieldGet(this, _SkyDataManagerService_initSource, "f"));
         }
         if (settingsKey) {
-            this.getDataStateUpdates(this.initSource)
-                .pipe(takeUntil(this._ngUnsubscribe))
+            this.getDataStateUpdates(__classPrivateFieldGet(this, _SkyDataManagerService_initSource, "f"))
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerService_ngUnsubscribe, "f")))
                 .subscribe((state) => {
-                this.uiConfigService
+                __classPrivateFieldGet(this, _SkyDataManagerService_uiConfigService, "f")
                     .setConfig(settingsKey, state.getStateOptions())
-                    .pipe(takeUntil(this._ngUnsubscribe))
+                    .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerService_ngUnsubscribe, "f")))
                     .subscribe(
                 // eslint-disable-next-line @typescript-eslint/no-empty-function
                 () => { }, (err) => {
@@ -267,19 +272,19 @@ class SkyDataManagerService {
      * @param viewConfig The SkyDataViewConfig settings for the view being registered.
      */
     initDataView(viewConfig) {
-        const currentViews = this.views.value;
+        const currentViews = __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").value;
         if (this.getViewById(viewConfig.id)) {
             console.warn(`A data manager view with the id ${viewConfig.id} has already been initialized.`);
             return;
         }
         currentViews.push(viewConfig);
-        this.views.next(currentViews);
+        __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").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.next(id);
+        __classPrivateFieldGet(this, _SkyDataManagerService_activeViewId, "f").pipe(take(1)).subscribe((id) => {
+            __classPrivateFieldGet(this, _SkyDataManagerService_activeViewId, "f").next(id);
         });
-        this.dataStateChange
+        __classPrivateFieldGet(this, _SkyDataManagerService_dataStateChange, "f")
             .pipe(take(1))
             .subscribe((change) => {
             const dataState = change.dataState;
@@ -303,20 +308,20 @@ class SkyDataManagerService {
                     newViewState.displayedColumnIds = displayedColumnIds;
                 }
                 const newDataState = dataState.addOrUpdateView(viewConfig.id, newViewState);
-                this.updateDataState(newDataState, this.initSource);
+                this.updateDataState(newDataState, __classPrivateFieldGet(this, _SkyDataManagerService_initSource, "f"));
             }
             else {
                 const currentAvailableColumnIds = viewConfig.columnOptions?.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.
@@ -327,7 +332,7 @@ class SkyDataManagerService {
                 // and as shown.
                 currentViewState.columnIds = currentAvailableColumnIds;
                 const newDataState = dataState.addOrUpdateView(viewConfig.id, currentViewState);
-                this.updateDataState(newDataState, this.initSource);
+                this.updateDataState(newDataState, __classPrivateFieldGet(this, _SkyDataManagerService_initSource, "f"));
             }
         })
             .unsubscribe();
@@ -342,12 +347,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
+            return __classPrivateFieldGet(this, _SkyDataManagerService_dataStateChange, "f").pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState), updateFilter.comparator
                 ? distinctUntilChanged(updateFilter.comparator)
-                : distinctUntilChanged(this.getDefaultStateComparator(updateFilter.properties)));
+                : distinctUntilChanged(__classPrivateFieldGet(this, _SkyDataManagerService_instances, "m", _SkyDataManagerService_getDefaultStateComparator).call(this, updateFilter.properties)));
         }
         else {
-            return this.dataStateChange.pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState));
+            return __classPrivateFieldGet(this, _SkyDataManagerService_dataStateChange, "f").pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState));
         }
     }
     /**
@@ -360,52 +365,52 @@ class SkyDataManagerService {
     updateDataState(state, sourceId) {
         const newState = new SkyDataManagerState(state.getStateOptions());
         const newStateChange = new SkyDataManagerStateChange(newState, sourceId);
-        this.dataStateChange.next(newStateChange);
+        __classPrivateFieldGet(this, _SkyDataManagerService_dataStateChange, "f").next(newStateChange);
     }
     /**
      * Returns the current `SkyDataManagerConfig`.
      */
     getCurrentDataManagerConfig() {
-        return this.dataManagerConfig.value;
+        return __classPrivateFieldGet(this, _SkyDataManagerService_dataManagerConfig, "f").value;
     }
     /**
      * Returns an observable of data manager config changes that views and other data manager entities can subscribe to.
      */
     getDataManagerConfigUpdates() {
-        return this.dataManagerConfig;
+        return __classPrivateFieldGet(this, _SkyDataManagerService_dataManagerConfig, "f");
     }
     /**
      * Updates the data manager config and emits a new value to entities subscribed to data config changes.
      * @param value The new `SkyDataManagerConfig` value.
      */
     updateDataManagerConfig(value) {
-        this.dataManagerConfig.next(value);
+        __classPrivateFieldGet(this, _SkyDataManagerService_dataManagerConfig, "f").next(value);
     }
     /**
      * Returns an observable of data view config changes that views and other data manager entities can subscribe to.
      */
     getDataViewsUpdates() {
-        return this.views;
+        return __classPrivateFieldGet(this, _SkyDataManagerService_views, "f");
     }
     /**
      * Returns an observable of the active view ID that views and other data manager entities can subscribe to.
      */
     getActiveViewIdUpdates() {
-        return this.activeViewId;
+        return __classPrivateFieldGet(this, _SkyDataManagerService_activeViewId, "f");
     }
     /**
      * Updates the active view ID. The data manager changes the displayed view.
      * @param id The new active view ID.
      */
     updateActiveViewId(id) {
-        this.activeViewId.next(id);
+        __classPrivateFieldGet(this, _SkyDataManagerService_activeViewId, "f").next(id);
     }
     /**
      * Returns the `SkyDataViewConfig` for the given view ID.
      * @param viewId The ID of the view config to get.
      */
     getViewById(viewId) {
-        const currentViews = this.views.value;
+        const currentViews = __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").value;
         const viewConfig = currentViews.find((view) => view.id === viewId);
         return viewConfig;
     }
@@ -416,14 +421,14 @@ class SkyDataManagerService {
      * @param view The new `SkyDataViewConfig` containing all properties.
      */
     updateViewConfig(view) {
-        const currentViews = this.views.value;
+        const currentViews = __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").value;
         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);
         }
         else {
             currentViews[existingViewIndex] = view;
-            this.views.next(currentViews);
+            __classPrivateFieldGet(this, _SkyDataManagerService_views, "f").next(currentViews);
         }
     }
     /**
@@ -434,25 +439,25 @@ class SkyDataManagerService {
         viewkeeperClasses[viewId] = classes;
         this.viewkeeperClasses.next(viewkeeperClasses);
     }
-    filterDataStateProperties(state, properties) {
-        const stateProperties = state.getStateOptions();
-        const filteredStateProperties = {};
+}
+_SkyDataManagerService_activeViewId = new WeakMap(), _SkyDataManagerService_dataManagerConfig = new WeakMap(), _SkyDataManagerService_views = new WeakMap(), _SkyDataManagerService_dataStateChange = new WeakMap(), _SkyDataManagerService_isInitialized = new WeakMap(), _SkyDataManagerService_ngUnsubscribe = new WeakMap(), _SkyDataManagerService_initSource = new WeakMap(), _SkyDataManagerService_uiConfigService = new WeakMap(), _SkyDataManagerService_instances = new WeakSet(), _SkyDataManagerService_filterDataStateProperties = function _SkyDataManagerService_filterDataStateProperties(state, properties) {
+    const stateProperties = state.getStateOptions();
+    const filteredStateProperties = {};
+    if (properties) {
         for (const property of properties) {
-            /* istanbul ignore else */
-            if (Object.prototype.hasOwnProperty.call(stateProperties, property)) {
+            if (property in stateProperties) {
                 filteredStateProperties[property] = stateProperties[property];
             }
         }
-        return filteredStateProperties;
     }
-    getDefaultStateComparator(properties) {
-        return (state1, state2) => {
-            const filteredState1 = this.filterDataStateProperties(state1, properties);
-            const filteredState2 = this.filterDataStateProperties(state2, properties);
-            return JSON.stringify(filteredState1) === JSON.stringify(filteredState2);
-        };
-    }
-}
+    return filteredStateProperties;
+}, _SkyDataManagerService_getDefaultStateComparator = function _SkyDataManagerService_getDefaultStateComparator(properties) {
+    return (state1, state2) => {
+        const filteredState1 = __classPrivateFieldGet(this, _SkyDataManagerService_instances, "m", _SkyDataManagerService_filterDataStateProperties).call(this, state1, properties);
+        const filteredState2 = __classPrivateFieldGet(this, _SkyDataManagerService_instances, "m", _SkyDataManagerService_filterDataStateProperties).call(this, state2, properties);
+        return JSON.stringify(filteredState1) === JSON.stringify(filteredState2);
+    };
+};
 SkyDataManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyDataManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerService, decorators: [{
@@ -483,69 +488,76 @@ class SkyDataManagerColumnPickerContext {
     }
 }
 
+var _SkyDataManagerComponent_activeViewId, _SkyDataManagerComponent_allViewkeeperClasses, _SkyDataManagerComponent_ngUnsubscribe, _SkyDataManagerComponent_sourceId, _SkyDataManagerComponent_changeDetection, _SkyDataManagerComponent_dataManagerService, _SkyDataManagerComponent__isInitialized, _SkyDataManagerComponent__currentViewkeeperClasses;
+const VIEWKEEPER_CLASSES_DEFAULT = ['.sky-data-manager-toolbar'];
 /**
  * The top-level data manager component. Provide `SkyDataManagerService` at this level.
  */
 class SkyDataManagerComponent {
     constructor(changeDetection, dataManagerService) {
-        this.changeDetection = changeDetection;
-        this.dataManagerService = dataManagerService;
         this.backToTopController = new Subject();
         this.backToTopOptions = {
             buttonHidden: true,
         };
-        this._isInitialized = false;
-        this.allViewkeeperClasses = {};
-        this.ngUnsubscribe = new Subject();
-        this.sourceId = 'dataManagerComponent';
+        _SkyDataManagerComponent_activeViewId.set(this, void 0);
+        _SkyDataManagerComponent_allViewkeeperClasses.set(this, {});
+        _SkyDataManagerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDataManagerComponent_sourceId.set(this, 'dataManagerComponent');
+        _SkyDataManagerComponent_changeDetection.set(this, void 0);
+        _SkyDataManagerComponent_dataManagerService.set(this, void 0);
+        _SkyDataManagerComponent__isInitialized.set(this, false);
+        _SkyDataManagerComponent__currentViewkeeperClasses.set(this, VIEWKEEPER_CLASSES_DEFAULT);
+        __classPrivateFieldSet(this, _SkyDataManagerComponent_changeDetection, changeDetection, "f");
+        __classPrivateFieldSet(this, _SkyDataManagerComponent_dataManagerService, dataManagerService, "f");
     }
     get currentViewkeeperClasses() {
-        const dataManagerClasses = ['.sky-data-manager-toolbar'];
-        let allClasses = dataManagerClasses;
-        if (this._currentViewkeeperClasses) {
-            allClasses = dataManagerClasses.concat(this._currentViewkeeperClasses);
-        }
-        return allClasses;
+        return __classPrivateFieldGet(this, _SkyDataManagerComponent__currentViewkeeperClasses, "f");
     }
     set currentViewkeeperClasses(value) {
-        this._currentViewkeeperClasses = value;
-        this.changeDetection.markForCheck();
+        __classPrivateFieldSet(this, _SkyDataManagerComponent__currentViewkeeperClasses, [
+            ...VIEWKEEPER_CLASSES_DEFAULT,
+            ...(value || []),
+        ], "f");
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_changeDetection, "f").markForCheck();
     }
     get isInitialized() {
-        return this._isInitialized;
+        return __classPrivateFieldGet(this, _SkyDataManagerComponent__isInitialized, "f");
     }
     set isInitialized(value) {
-        this._isInitialized = value;
-        this.changeDetection.markForCheck();
+        __classPrivateFieldSet(this, _SkyDataManagerComponent__isInitialized, value, "f");
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_changeDetection, "f").markForCheck();
     }
     ngOnInit() {
-        this.dataManagerService
-            .getDataStateUpdates(this.sourceId)
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_dataManagerService, "f")
+            .getDataStateUpdates(__classPrivateFieldGet(this, _SkyDataManagerComponent_sourceId, "f"))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerComponent_ngUnsubscribe, "f")))
             .subscribe(() => (this.isInitialized = true));
-        this.dataManagerService.viewkeeperClasses
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_dataManagerService, "f").viewkeeperClasses
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerComponent_ngUnsubscribe, "f")))
             .subscribe((classes) => {
-            this.allViewkeeperClasses = classes;
-            this.currentViewkeeperClasses = classes[this.activeViewId];
+            __classPrivateFieldSet(this, _SkyDataManagerComponent_allViewkeeperClasses, classes, "f");
+            this.currentViewkeeperClasses = __classPrivateFieldGet(this, _SkyDataManagerComponent_activeViewId, "f")
+                ? classes[__classPrivateFieldGet(this, _SkyDataManagerComponent_activeViewId, "f")]
+                : undefined;
         });
-        this.dataManagerService
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_dataManagerService, "f")
             .getActiveViewIdUpdates()
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerComponent_ngUnsubscribe, "f")))
             .subscribe((activeViewId) => {
-            this.activeViewId = activeViewId;
+            __classPrivateFieldSet(this, _SkyDataManagerComponent_activeViewId, activeViewId, "f");
             this.backToTopController.next({
                 type: SkyBackToTopMessageType.BackToTop,
             });
             this.currentViewkeeperClasses =
-                this.allViewkeeperClasses[this.activeViewId];
+                __classPrivateFieldGet(this, _SkyDataManagerComponent_allViewkeeperClasses, "f")[__classPrivateFieldGet(this, _SkyDataManagerComponent_activeViewId, "f")];
         });
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDataManagerComponent_ngUnsubscribe, "f").complete();
     }
 }
+_SkyDataManagerComponent_activeViewId = new WeakMap(), _SkyDataManagerComponent_allViewkeeperClasses = new WeakMap(), _SkyDataManagerComponent_ngUnsubscribe = new WeakMap(), _SkyDataManagerComponent_sourceId = new WeakMap(), _SkyDataManagerComponent_changeDetection = new WeakMap(), _SkyDataManagerComponent_dataManagerService = new WeakMap(), _SkyDataManagerComponent__isInitialized = new WeakMap(), _SkyDataManagerComponent__currentViewkeeperClasses = new WeakMap();
 SkyDataManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
 SkyDataManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
@@ -567,12 +579,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
+// TODO: In a future breaking change convert this to an interface
 /**
  * Sets the state of the filters.
  */
 class SkyDataManagerFilterModalContext {
 }
 
+var _SkyDataManagerToolbarComponent_ngUnsubscribe, _SkyDataManagerToolbarComponent_changeDetector, _SkyDataManagerToolbarComponent_dataManagerService, _SkyDataManagerToolbarComponent_modalService, _SkyDataManagerToolbarComponent_columnPickerService, _SkyDataManagerToolbarComponent__source, _SkyDataManagerToolbarComponent__activeView, _SkyDataManagerToolbarComponent__dataManagerConfig, _SkyDataManagerToolbarComponent__dataState, _SkyDataManagerToolbarComponent__views;
 /**
  * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`
  * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,
@@ -580,102 +594,111 @@ class SkyDataManagerFilterModalContext {
  */
 class SkyDataManagerToolbarComponent {
     constructor(changeDetector, dataManagerService, modalService, columnPickerService) {
-        this.changeDetector = changeDetector;
-        this.dataManagerService = dataManagerService;
-        this.modalService = modalService;
-        this.columnPickerService = columnPickerService;
+        _SkyDataManagerToolbarComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDataManagerToolbarComponent_changeDetector.set(this, void 0);
+        _SkyDataManagerToolbarComponent_dataManagerService.set(this, void 0);
+        _SkyDataManagerToolbarComponent_modalService.set(this, void 0);
+        _SkyDataManagerToolbarComponent_columnPickerService.set(this, void 0);
         // the source to provide for data state changes
-        this._source = 'toolbar';
-        this._ngUnsubscribe = new Subject();
-        this._views = [];
-    }
-    get activeSortOptionId() {
-        const activeSortOption = this.dataState && this.dataState.activeSortOption;
-        return activeSortOption && activeSortOption.id;
+        _SkyDataManagerToolbarComponent__source.set(this, 'toolbar');
+        _SkyDataManagerToolbarComponent__activeView.set(this, void 0);
+        _SkyDataManagerToolbarComponent__dataManagerConfig.set(this, void 0);
+        _SkyDataManagerToolbarComponent__dataState.set(this, void 0);
+        _SkyDataManagerToolbarComponent__views.set(this, []);
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent_dataManagerService, dataManagerService, "f");
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent_modalService, modalService, "f");
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent_columnPickerService, columnPickerService, "f");
     }
     get activeView() {
-        return this._activeView;
+        return __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__activeView, "f");
     }
     set activeView(value) {
-        this._activeView = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent__activeView, value, "f");
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
     }
     get dataManagerConfig() {
-        return this._dataManagerConfig;
+        return __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__dataManagerConfig, "f");
     }
     set dataManagerConfig(value) {
-        this._dataManagerConfig = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent__dataManagerConfig, value, "f");
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
     }
     get dataState() {
-        return this._dataState;
+        return __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__dataState, "f");
     }
     set dataState(value) {
-        this._dataState = value;
-        this.dataManagerService.updateDataState(value, this._source);
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent__dataState, value, "f");
+        if (value) {
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateDataState(value, __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"));
+        }
     }
     get views() {
-        return this._views;
+        return __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__views, "f");
     }
     set views(value) {
-        this._views = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent__views, value, "f");
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
     }
     ngOnInit() {
-        this.dataManagerService
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f")
             .getActiveViewIdUpdates()
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f")))
             .subscribe((activeViewId) => {
             /* istanbul ignore else */
             if (activeViewId) {
-                this.activeView = this.dataManagerService.getViewById(activeViewId);
-                this.changeDetector.markForCheck();
+                this.activeView = __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").getViewById(activeViewId);
+                __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
             }
         });
-        this.dataManagerService
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f")
             .getDataViewsUpdates()
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f")))
             .subscribe((views) => {
             this.views = views;
             if (this.activeView) {
-                this.activeView = this.dataManagerService.getViewById(this.activeView.id);
+                this.activeView = __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").getViewById(this.activeView.id);
             }
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
         });
-        this.dataManagerService
-            .getDataStateUpdates(this._source)
-            .pipe(takeUntil(this._ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f")
+            .getDataStateUpdates(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f")))
             .subscribe((dataState) => {
-            this._dataState = dataState;
+            __classPrivateFieldSet(this, _SkyDataManagerToolbarComponent__dataState, dataState, "f");
             this.onlyShowSelected = dataState.onlyShowSelected;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_changeDetector, "f").markForCheck();
         });
-        this.dataManagerService
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f")
             .getDataManagerConfigUpdates()
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f")))
             .subscribe((config) => {
             this.dataManagerConfig = config;
         });
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_ngUnsubscribe, "f").complete();
     }
     sortSelected(sortOption) {
-        this.dataState.activeSortOption = sortOption;
-        this.dataManagerService.updateDataState(this.dataState, this._source);
+        if (this.dataState) {
+            this.dataState.activeSortOption = sortOption;
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateDataState(this.dataState, __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"));
+        }
     }
     onViewChange(viewId) {
-        this.dataManagerService.updateActiveViewId(viewId);
+        __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateActiveViewId(viewId);
     }
     searchApplied(text) {
-        this.dataState.searchText = text;
-        this.dataManagerService.updateDataState(this.dataState, this._source);
+        if (this.dataState) {
+            this.dataState.searchText = text;
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateDataState(this.dataState, __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"));
+        }
     }
     filterButtonClicked() {
         const context = new SkyDataManagerFilterModalContext();
         const filterModal = this.dataManagerConfig && this.dataManagerConfig.filterModalComponent;
-        context.filterData = this.dataState && this.dataState.filterData;
+        context.filterData = this.dataState?.filterData;
         const options = {
             providers: [
                 { provide: SkyDataManagerFilterModalContext, useValue: context },
@@ -683,102 +706,107 @@ class SkyDataManagerToolbarComponent {
             size: 'large',
         };
         if (filterModal) {
-            const modalInstance = this.modalService.open(filterModal, options);
+            const modalInstance = __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_modalService, "f").open(filterModal, options);
             modalInstance.closed.subscribe((result) => {
-                if (result.reason === 'save') {
+                if (this.dataState && result.reason === 'save') {
                     this.dataState.filterData = result.data;
-                    this.dataManagerService.updateDataState(this.dataState, this._source);
+                    __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateDataState(this.dataState, __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"));
                 }
             });
         }
     }
     openColumnPicker() {
-        const columnOptions = this.activeView && this.activeView.columnOptions;
-        const viewState = this.dataState.getViewStateById(this.activeView.id);
-        const context = new SkyDataManagerColumnPickerContext(columnOptions, viewState.displayedColumnIds);
-        if (this.activeView.columnPickerSortStrategy) {
-            context.columnPickerSortStrategy =
-                this.activeView.columnPickerSortStrategy;
-        }
-        const options = {
-            providers: [
-                { provide: SkyDataManagerColumnPickerContext, useValue: context },
-            ],
-        };
-        const modalInstance = this.modalService.open(this.columnPickerService.getComponentType(), options);
-        modalInstance.closed.subscribe((result) => {
-            if (result.reason === 'save') {
-                const displayedColumnIds = result.data.map((col) => col.id);
-                viewState.displayedColumnIds = displayedColumnIds;
-                this.dataState = this.dataState.addOrUpdateView(this.activeView.id, viewState);
+        if (this.dataState && this.activeView && this.activeView.columnOptions) {
+            const viewState = this.dataState.getViewStateById(this.activeView.id);
+            if (viewState) {
+                const context = new SkyDataManagerColumnPickerContext(this.activeView.columnOptions, viewState.displayedColumnIds);
+                if (this.activeView.columnPickerSortStrategy) {
+                    context.columnPickerSortStrategy =
+                        this.activeView.columnPickerSortStrategy;
+                }
+                const options = {
+                    providers: [
+                        { provide: SkyDataManagerColumnPickerContext, useValue: context },
+                    ],
+                };
+                const modalInstance = __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_modalService, "f").open(__classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_columnPickerService, "f").getComponentType(), options);
+                modalInstance.closed.subscribe((result) => {
+                    if (result.reason === 'save') {
+                        const displayedColumnIds = result.data.map((col) => col.id);
+                        viewState.displayedColumnIds = displayedColumnIds;
+                        if (this.dataState && this.activeView) {
+                            this.dataState = this.dataState.addOrUpdateView(this.activeView.id, viewState);
+                        }
+                    }
+                });
             }
-        });
+        }
     }
     selectAll() {
         /* istanbul ignore else */
-        if (this.activeView.onSelectAllClick) {
+        if (this.activeView?.onSelectAllClick) {
             this.activeView.onSelectAllClick();
         }
     }
     clearAll() {
         /* istanbul ignore else */
-        if (this.activeView.onClearAllClick) {
+        if (this.activeView?.onClearAllClick) {
             this.activeView.onClearAllClick();
         }
     }
     onOnlyShowSelected(event) {
-        this.dataState.onlyShowSelected = event.checked;
-        this.dataManagerService.updateDataState(this.dataState, this._source);
+        if (this.dataState) {
+            this.dataState.onlyShowSelected = !!event.checked;
+            __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent_dataManagerService, "f").updateDataState(this.dataState, __classPrivateFieldGet(this, _SkyDataManagerToolbarComponent__source, "f"));
+        }
     }
 }
+_SkyDataManagerToolbarComponent_ngUnsubscribe = new WeakMap(), _SkyDataManagerToolbarComponent_changeDetector = new WeakMap(), _SkyDataManagerToolbarComponent_dataManagerService = new WeakMap(), _SkyDataManagerToolbarComponent_modalService = new WeakMap(), _SkyDataManagerToolbarComponent_columnPickerService = new WeakMap(), _SkyDataManagerToolbarComponent__source = new WeakMap(), _SkyDataManagerToolbarComponent__activeView = new WeakMap(), _SkyDataManagerToolbarComponent__dataManagerConfig = new WeakMap(), _SkyDataManagerToolbarComponent__dataState = new WeakMap(), _SkyDataManagerToolbarComponent__views = new WeakMap();
 SkyDataManagerToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }, { token: i3.SkyModalService }, { token: SkyDataManagerColumnPickerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i6.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i8.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i6.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { kind: "component", type: i9.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i5$1.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { kind: "component", type: i5$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDataManagerToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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]=\"!!(dataState?.activeSortOption?.id === 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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i6.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i8.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i6.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { kind: "component", type: i9.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i5$1.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { kind: "component", type: i5$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-data-manager-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'sky-data-manager-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"!!(dataState?.activeSortOption?.id === 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }, { type: i3.SkyModalService }, { type: SkyDataManagerColumnPickerService }]; } });
 
+var _SkyDataViewComponent_ngUnsubscribe, _SkyDataViewComponent_dataManagerService;
 /**
  * A data view is rendered within a data manager component.
  * It can subscribe to data state changes from `SkyDataManagerService` and apply the filters,
  * search text, and more to the data it displays.
  */
 class SkyDataViewComponent {
-    constructor(changeDetector, dataManagerService) {
-        this.changeDetector = changeDetector;
-        this.dataManagerService = dataManagerService;
-        this._isActive = false;
-        this._ngUnsubscribe = new Subject();
-    }
-    get isActive() {
-        return this._isActive;
-    }
-    set isActive(value) {
-        this._isActive = value;
-        this.changeDetector.markForCheck();
+    constructor(dataManagerService) {
+        _SkyDataViewComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDataViewComponent_dataManagerService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDataViewComponent_dataManagerService, dataManagerService, "f");
     }
     ngOnInit() {
-        this.dataManagerService
+        __classPrivateFieldGet(this, _SkyDataViewComponent_dataManagerService, "f")
             .getActiveViewIdUpdates()
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataViewComponent_ngUnsubscribe, "f")))
             .subscribe((activeViewId) => {
             this.isActive = this.viewId === activeViewId;
         });
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDataViewComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDataViewComponent_ngUnsubscribe, "f").complete();
     }
 }
-SkyDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+_SkyDataViewComponent_ngUnsubscribe = new WeakMap(), _SkyDataViewComponent_dataManagerService = new WeakMap();
+SkyDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyDataViewComponent, selector: "sky-data-view", inputs: { viewId: "viewId", isActive: "isActive" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n  <ng-content></ng-content>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-data-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isActive\">\n  <ng-content></ng-content>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }]; }, propDecorators: { viewId: [{
+        }], ctorParameters: function () { return [{ type: SkyDataManagerService }]; }, propDecorators: { viewId: [{
+                type: Input
+            }], isActive: [{
                 type: Input
             }] } });
 
+var _SkyDataManagerColumnPickerComponent_instances, _SkyDataManagerColumnPickerComponent_ngUnsubscribe, _SkyDataManagerColumnPickerComponent__dataState, _SkyDataManagerColumnPickerComponent_formatColumnOptions;
 /**
  * @internal
  */
@@ -787,6 +815,9 @@ class SkyDataManagerColumnPickerComponent {
         this.context = context;
         this.dataManagerService = dataManagerService;
         this.instance = instance;
+        _SkyDataManagerColumnPickerComponent_instances.add(this);
+        this.columnData = [];
+        this.displayedColumnData = [];
         this.viewConfig = {
             id: 'columnPicker',
             name: 'Column Picker',
@@ -796,14 +827,15 @@ class SkyDataManagerColumnPickerComponent {
             onSelectAllClick: this.selectAll.bind(this),
             onClearAllClick: this.clearAll.bind(this),
         };
-        this._dataState = new SkyDataManagerState({});
-        this._ngUnsubscribe = new Subject();
+        this.isAnyDisplayedColumnSelected = false;
+        _SkyDataManagerColumnPickerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDataManagerColumnPickerComponent__dataState.set(this, new SkyDataManagerState({}));
     }
     get dataState() {
-        return this._dataState;
+        return __classPrivateFieldGet(this, _SkyDataManagerColumnPickerComponent__dataState, "f");
     }
     set dataState(value) {
-        this._dataState = value;
+        __classPrivateFieldSet(this, _SkyDataManagerColumnPickerComponent__dataState, value, "f");
         this.updateData();
     }
     ngOnInit() {
@@ -813,17 +845,17 @@ class SkyDataManagerColumnPickerComponent {
             defaultDataState: this.dataState,
         });
         this.dataManagerService.initDataView(this.viewConfig);
-        this.columnData = this.formatColumnOptions();
+        this.columnData = __classPrivateFieldGet(this, _SkyDataManagerColumnPickerComponent_instances, "m", _SkyDataManagerColumnPickerComponent_formatColumnOptions).call(this);
         this.dataManagerService
             .getDataStateUpdates('columnPicker')
-            .pipe(takeUntil(this._ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDataManagerColumnPickerComponent_ngUnsubscribe, "f")))
             .subscribe((state) => {
             this.dataState = state;
         });
     }
     ngOnDestroy() {
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDataManagerColumnPickerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDataManagerColumnPickerComponent_ngUnsubscribe, "f").complete();
     }
     updateData() {
         this.displayedColumnData = this.searchColumns(this.columnData.filter((col) => !col.alwaysDisplayed));
@@ -840,7 +872,7 @@ class SkyDataManagerColumnPickerComponent {
                 for (const property in item) {
                     if (Object.prototype.hasOwnProperty.call(item, property) &&
                         (property === 'label' || property === 'description')) {
-                        const propertyText = item[property] && item[property].toUpperCase();
+                        const propertyText = item[property]?.toUpperCase();
                         if (propertyText && propertyText.indexOf(searchText) > -1) {
                             return true;
                         }
@@ -871,48 +903,48 @@ class SkyDataManagerColumnPickerComponent {
     applyChanges() {
         this.instance.save(this.columnData.filter((col) => col.isSelected || col.alwaysDisplayed));
     }
-    formatColumnOptions() {
-        const allColumnOptions = this.context.columnOptions;
-        const visibleColumnIds = this.context.displayedColumnIds;
-        let formattedColumnOptions = [];
-        const unselectedColumnOptions = [];
-        for (const columnOption of allColumnOptions) {
-            // format the column with the properties the column picker needs
-            const colIndex = visibleColumnIds.indexOf(columnOption.id);
-            const formattedColumn = {
-                alwaysDisplayed: columnOption.alwaysDisplayed,
-                id: columnOption.id,
-                label: columnOption.label,
-                description: columnOption.description,
-                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 (formattedColumn.isSelected) {
-                    formattedColumnOptions[colIndex] = formattedColumn;
-                }
-                else {
-                    unselectedColumnOptions.push(formattedColumn);
-                }
+}
+_SkyDataManagerColumnPickerComponent_ngUnsubscribe = new WeakMap(), _SkyDataManagerColumnPickerComponent__dataState = new WeakMap(), _SkyDataManagerColumnPickerComponent_instances = new WeakSet(), _SkyDataManagerColumnPickerComponent_formatColumnOptions = function _SkyDataManagerColumnPickerComponent_formatColumnOptions() {
+    const allColumnOptions = this.context.columnOptions;
+    const visibleColumnIds = this.context.displayedColumnIds;
+    let formattedColumnOptions = [];
+    const unselectedColumnOptions = [];
+    for (const columnOption of allColumnOptions) {
+        // format the column with the properties the column picker needs
+        const colIndex = visibleColumnIds.indexOf(columnOption.id);
+        const formattedColumn = {
+            alwaysDisplayed: columnOption.alwaysDisplayed,
+            id: columnOption.id,
+            label: columnOption.label,
+            description: columnOption.description,
+            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 (formattedColumn.isSelected) {
+                formattedColumnOptions[colIndex] = formattedColumn;
             }
             else {
-                formattedColumnOptions.push(formattedColumn);
+                unselectedColumnOptions.push(formattedColumn);
             }
         }
-        // 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) {
-            unselectedColumnOptions.sort((col1, col2) => col1.label.localeCompare(col2.label));
-            formattedColumnOptions = formattedColumnOptions.concat(unselectedColumnOptions);
+        else {
+            formattedColumnOptions.push(formattedColumn);
         }
-        return formattedColumnOptions;
     }
-}
+    // 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) {
+        unselectedColumnOptions.sort((col1, col2) => col1.label.localeCompare(col2.label));
+        formattedColumnOptions = formattedColumnOptions.concat(unselectedColumnOptions);
+    }
+    return formattedColumnOptions;
+};
 SkyDataManagerColumnPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [{ token: SkyDataManagerColumnPickerContext }, { token: SkyDataManagerService }, { token: i3.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
-SkyDataManagerColumnPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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            (isSelectedChange)=\"onIsSelectedChange()\"\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    <div\n      class=\"sky-data-manager-column-picker-footer-stacked-indicator\"\n      *ngIf=\"!isAnyDisplayedColumnSelected\"\n    >\n      <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n        {{\n          'skyux_data_manager_select_column_status_indicator_title'\n            | skyLibResources\n        }}\n      </sky-status-indicator>\n    </div>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!isAnyDisplayedColumnSelected\"\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}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i3.λ4, selector: "sky-modal-header" }, { kind: "component", type: i5$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i5$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i5$1.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i5$1.λ12, selector: "sky-repeater-item-title" }, { kind: "component", type: i8.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { kind: "component", type: SkyDataManagerComponent, selector: "sky-data-manager" }, { kind: "component", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { kind: "component", type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDataManagerColumnPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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            (isSelectedChange)=\"onIsSelectedChange()\"\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    <div\n      class=\"sky-data-manager-column-picker-footer-stacked-indicator\"\n      *ngIf=\"!isAnyDisplayedColumnSelected\"\n    >\n      <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n        {{\n          'skyux_data_manager_select_column_status_indicator_title'\n            | skyLibResources\n        }}\n      </sky-status-indicator>\n    </div>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!isAnyDisplayedColumnSelected\"\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}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i3.λ4, selector: "sky-modal-header" }, { kind: "component", type: i5$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i5$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i5$1.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i5$1.λ12, selector: "sky-repeater-item-title" }, { kind: "component", type: i8.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { kind: "component", type: SkyDataManagerComponent, selector: "sky-data-manager" }, { kind: "component", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { kind: "component", type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId", "isActive"] }, { kind: "pipe", type: i11.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDataManagerColumnPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-data-manager-column-picker', providers: [SkyDataManagerService], changeDetection: ChangeDetectionStrategy.OnPush, 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            (isSelectedChange)=\"onIsSelectedChange()\"\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    <div\n      class=\"sky-data-manager-column-picker-footer-stacked-indicator\"\n      *ngIf=\"!isAnyDisplayedColumnSelected\"\n    >\n      <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n        {{\n          'skyux_data_manager_select_column_status_indicator_title'\n            | skyLibResources\n        }}\n      </sky-status-indicator>\n    </div>\n    <button\n      sky-cmp-id=\"apply-changes\"\n      class=\"sky-btn sky-btn-primary\"\n      [disabled]=\"!isAnyDisplayedColumnSelected\"\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}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"] }]