@skyux/data-manager 5.6.2 → 6.0.0-beta.0

package/fesm2020/skyux-data-manager.mjs

@@ -0,0 +1,1038 @@
+import * as i9 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i10 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@skyux/core';
+import { SkyViewkeeperModule } from '@skyux/core';
+import * as i8$1 from '@skyux/forms';
+import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import * as i6 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i4 from '@skyux/layout';
+import { SkyBackToTopMessageType, SkyBackToTopModule, SkyToolbarModule } from '@skyux/layout';
+import * as i8 from '@skyux/lists';
+import { SkyFilterModule, SkyRepeaterModule, SkySortModule } from '@skyux/lists';
+import * as i7 from '@skyux/lookup';
+import { SkySearchModule } from '@skyux/lookup';
+import * as i3 from '@skyux/modals';
+import { SkyModalModule } from '@skyux/modals';
+import * as i4$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
+import { take, takeUntil, filter, map, distinctUntilChanged } from 'rxjs/operators';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-data-manager' schematic.
+ * 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' },
+    },
+};
+class SkyDataManagerResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyDataManagerResourcesModule {
+}
+SkyDataManagerResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDataManagerResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerResourcesModule, exports: [SkyI18nModule] });
+SkyDataManagerResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyDataManagerResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyDataManagerResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class SkyDataViewState {
+    constructor(data) {
+        this.columnIds = [];
+        this.displayedColumnIds = [];
+        this.viewId = data.viewId;
+        this.columnIds = data.columnIds || [];
+        this.displayedColumnIds = data.displayedColumnIds || [];
+        this.additionalData = data.additionalData;
+    }
+    getViewStateOptions() {
+        return {
+            viewId: this.viewId,
+            columnIds: this.columnIds,
+            displayedColumnIds: this.displayedColumnIds,
+            additionalData: this.additionalData,
+        };
+    }
+}
+
+class SkyDataManagerState {
+    constructor(data) {
+        this.views = [];
+        const views = data.views && data.views.map((view) => new SkyDataViewState(view));
+        this.activeSortOption = data.activeSortOption;
+        this.additionalData = data.additionalData;
+        this.filterData = data.filterData;
+        this.onlyShowSelected = data.onlyShowSelected;
+        this.selectedIds = data.selectedIds;
+        this.searchText = data.searchText;
+        this.views = views || [];
+    }
+    getStateOptions() {
+        const viewStates = this.views.map((view) => {
+            return view.getViewStateOptions();
+        });
+        return {
+            activeSortOption: this.activeSortOption,
+            additionalData: this.additionalData,
+            filterData: this.filterData,
+            onlyShowSelected: this.onlyShowSelected,
+            searchText: this.searchText,
+            selectedIds: this.selectedIds,
+            views: viewStates,
+        };
+    }
+    getViewStateById(viewId) {
+        return this.views.find((view) => view.viewId === viewId);
+    }
+    addOrUpdateView(viewId, view) {
+        const existingViewIndex = this.views.findIndex((v) => v.viewId === viewId);
+        if (existingViewIndex !== -1) {
+            this.views[existingViewIndex] = view;
+        }
+        else {
+            this.views.push(view);
+        }
+        return new SkyDataManagerState({
+            activeSortOption: this.activeSortOption,
+            additionalData: this.additionalData,
+            filterData: this.filterData,
+            searchText: this.searchText,
+            selectedIds: this.selectedIds,
+            views: this.views,
+        });
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyDataManagerStateChange {
+    constructor(dataState, source) {
+        this.dataState = new SkyDataManagerState(dataState.getStateOptions());
+        this.source = source;
+    }
+}
+
+/**
+ * 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.
+ * There are methods to get current values, update values, and get subscriptions to the changing values.<br/> <br/>
+ * Provide this service at the component level for each instance of a data manager. Do not
+ * provide it at the module level or in `app-extras`. This allows multiple data
+ * managers to be used and self-contained.
+ */
+class SkyDataManagerService {
+    constructor(uiConfigService) {
+        this.uiConfigService = uiConfigService;
+        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;
+    }
+    ngOnDestroy() {
+        this.activeViewId.complete();
+        this.dataManagerConfig.complete();
+        this.views.complete();
+        this.dataStateChange.complete();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    /**
+     * Initializes the data manager with the given settings and sets `isInitialized` to `true`.
+     * This must be called for the data manager to render.
+     * @param args The initial active view ID, data manager config, and state to use for the data manager.
+     * If a settings key is provided, it checks for a saved data state in the SKY UI config service before using the default data state
+     * and saves any state changes to the service.
+     */
+    initDataManager(args) {
+        if (this.isInitialized) {
+            console.warn('This data manager instance has already been initialized.');
+            return;
+        }
+        const defaultDataState = args.defaultDataState;
+        const settingsKey = args.settingsKey;
+        this.updateActiveViewId(args.activeViewId);
+        this.updateDataManagerConfig(args.dataManagerConfig);
+        if (settingsKey) {
+            this.uiConfigService
+                .getConfig(settingsKey, defaultDataState.getStateOptions())
+                .pipe(take(1))
+                .subscribe((config) => {
+                this.updateDataState(new SkyDataManagerState(config), this.initSource);
+            });
+        }
+        else {
+            this.updateDataState(defaultDataState, this.initSource);
+        }
+        if (settingsKey) {
+            this.getDataStateUpdates(this.initSource)
+                .pipe(takeUntil(this._ngUnsubscribe))
+                .subscribe((state) => {
+                this.uiConfigService
+                    .setConfig(settingsKey, state.getStateOptions())
+                    .pipe(takeUntil(this._ngUnsubscribe))
+                    .subscribe(
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                () => { }, (err) => {
+                    console.warn('Could not save data manager settings.');
+                    console.warn(err);
+                });
+            });
+        }
+    }
+    /**
+     * Initializes a view within the data manager. This must be called for each view for the views to appear within the data manager.
+     * @param viewConfig The SkyDataViewConfig settings for the view being registered.
+     */
+    initDataView(viewConfig) {
+        const currentViews = this.views.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);
+        // 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);
+        });
+        this.dataStateChange
+            .pipe(take(1))
+            .subscribe((change) => {
+            const dataState = change.dataState;
+            const currentViewState = dataState.getViewStateById(viewConfig.id);
+            if (!currentViewState) {
+                const newViewState = new SkyDataViewState({ viewId: viewConfig.id });
+                // 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 displayedColumnIds = viewConfig.columnOptions
+                        .filter((columnOption) => {
+                        return !columnOption.initialHide;
+                    })
+                        .map((columnOption) => {
+                        return columnOption.id;
+                    });
+                    newViewState.columnIds = columnIds;
+                    newViewState.displayedColumnIds = displayedColumnIds;
+                }
+                const newDataState = dataState.addOrUpdateView(viewConfig.id, newViewState);
+                this.updateDataState(newDataState, this.initSource);
+            }
+            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);
+                    });
+                    // Add the column IDs that now exist to the data manager state both as available
+                    // and as shown.
+                    currentViewState.displayedColumnIds =
+                        currentViewState.displayedColumnIds.concat(newColumnIds);
+                }
+                // Add the column IDs that now exist to the data manager state both as available
+                // and as shown.
+                currentViewState.columnIds = currentAvailableColumnIds;
+                const newDataState = dataState.addOrUpdateView(viewConfig.id, currentViewState);
+                this.updateDataState(newDataState, this.initSource);
+            }
+        })
+            .unsubscribe();
+    }
+    /**
+     * Returns an observable of data state changes that views and other data manager entities can subscribe to.
+     * It excludes updates originating from the provided source. This allows subscribers to only respond to
+     * changes they did not create and helps prevent infinite loops of updates and responses.
+     * @param sourceId The ID of the entity subscribing to data state updates. This can be any value you choose
+     * but should be unique within the data manager instance and should also be used when that entity updates the state.
+     */
+    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)));
+        }
+        else {
+            return this.dataStateChange.pipe(filter((stateChange) => sourceId !== stateChange.source), map((stateChange) => stateChange.dataState));
+        }
+    }
+    /**
+     * Updates the data state and emits a new value to entities subscribed to data state changes.
+     * @param state The new `SkyDataManagerState` value.
+     * @param sourceId The ID of the entity updating the state. This can be any value you choose,
+     * but should be unique within the data manager instance and should also be used when that entity
+     * subscribes to state changes from `getDataStateUpdates`.
+     */
+    updateDataState(state, sourceId) {
+        const newState = new SkyDataManagerState(state.getStateOptions());
+        const newStateChange = new SkyDataManagerStateChange(newState, sourceId);
+        this.dataStateChange.next(newStateChange);
+    }
+    /**
+     * Returns the current `SkyDataManagerConfig`.
+     */
+    getCurrentDataManagerConfig() {
+        return this.dataManagerConfig.value;
+    }
+    /**
+     * Returns an observable of data manager config changes that views and other data manager entities can subscribe to.
+     */
+    getDataManagerConfigUpdates() {
+        return this.dataManagerConfig;
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Returns an observable of data view config changes that views and other data manager entities can subscribe to.
+     */
+    getDataViewsUpdates() {
+        return this.views;
+    }
+    /**
+     * Returns an observable of the active view ID that views and other data manager entities can subscribe to.
+     */
+    getActiveViewIdUpdates() {
+        return this.activeViewId;
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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 viewConfig = currentViews.find((view) => view.id === viewId);
+        return viewConfig;
+    }
+    /**
+     * Updates the given view config. The registered view with the same ID is updated to the
+     * provided config, so include all properties regardless of whether they changed. If the
+     * view was not initialized already, no update happens.
+     * @param view The new `SkyDataViewConfig` containing all properties.
+     */
+    updateViewConfig(view) {
+        const currentViews = this.views.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);
+        }
+    }
+    /**
+     * @internal
+     */
+    setViewkeeperClasses(viewId, classes) {
+        const viewkeeperClasses = this.viewkeeperClasses.value;
+        viewkeeperClasses[viewId] = classes;
+        this.viewkeeperClasses.next(viewkeeperClasses);
+    }
+    filterDataStateProperties(state, properties) {
+        const stateProperties = state.getStateOptions();
+        const filteredStateProperties = {};
+        for (const property of properties) {
+            /* istanbul ignore else */
+            if (Object.prototype.hasOwnProperty.call(stateProperties, property)) {
+                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);
+        };
+    }
+}
+SkyDataManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyUIConfigService }]; } });
+
+var SkyDataManagerColumnPickerSortStrategy;
+(function (SkyDataManagerColumnPickerSortStrategy) {
+    SkyDataManagerColumnPickerSortStrategy["None"] = "none";
+    SkyDataManagerColumnPickerSortStrategy["SelectedThenAlphabetical"] = "selectedThenAlphabetical";
+})(SkyDataManagerColumnPickerSortStrategy || (SkyDataManagerColumnPickerSortStrategy = {}));
+
+class SkyDataManagerColumnPickerContext {
+    constructor(columnOptions, displayedColumnIds, columnPickerSortStrategy = SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
+        this.columnOptions = columnOptions;
+        this.displayedColumnIds = displayedColumnIds;
+        this.columnPickerSortStrategy = columnPickerSortStrategy;
+    }
+}
+
+/**
+ * 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';
+    }
+    get currentViewkeeperClasses() {
+        const dataManagerClasses = ['.sky-data-manager-toolbar'];
+        let allClasses = dataManagerClasses;
+        if (this._currentViewkeeperClasses) {
+            allClasses = dataManagerClasses.concat(this._currentViewkeeperClasses);
+        }
+        return allClasses;
+    }
+    set currentViewkeeperClasses(value) {
+        this._currentViewkeeperClasses = value;
+        this.changeDetection.markForCheck();
+    }
+    get isInitialized() {
+        return this._isInitialized;
+    }
+    set isInitialized(value) {
+        this._isInitialized = value;
+        this.changeDetection.markForCheck();
+    }
+    ngOnInit() {
+        this.dataManagerService
+            .getDataStateUpdates(this.sourceId)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => (this.isInitialized = true));
+        this.dataManagerService.viewkeeperClasses
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((classes) => {
+            this.allViewkeeperClasses = classes;
+            this.currentViewkeeperClasses = classes[this.activeViewId];
+        });
+        this.dataManagerService
+            .getActiveViewIdUpdates()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((activeViewId) => {
+            this.activeViewId = activeViewId;
+            this.backToTopController.next({
+                type: SkyBackToTopMessageType.BackToTop,
+            });
+            this.currentViewkeeperClasses =
+                this.allViewkeeperClasses[this.activeViewId];
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyDataManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-manager', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }]; } });
+
+/**
+ * Service that provides the column picker component type so it can be dynamically
+ * created in the toolbar component. This avoids a circular reference between column
+ * picker and toolbar.
+ * https://angular.io/errors/NG3003
+ */
+class SkyDataManagerColumnPickerService {
+}
+SkyDataManagerColumnPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerColumnPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerService, decorators: [{
+            type: Injectable
+        }] });
+
+class SkyDataManagerFilterModalContext {
+}
+
+/**
+ * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`
+ * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,
+ * and `SkyDataManagerToolbarSectionComponent` wrappers.
+ */
+class SkyDataManagerToolbarComponent {
+    constructor(changeDetector, dataManagerService, modalService, columnPickerService) {
+        this.changeDetector = changeDetector;
+        this.dataManagerService = dataManagerService;
+        this.modalService = modalService;
+        this.columnPickerService = columnPickerService;
+        // 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;
+    }
+    get activeView() {
+        return this._activeView;
+    }
+    set activeView(value) {
+        this._activeView = value;
+        this.changeDetector.markForCheck();
+    }
+    get dataManagerConfig() {
+        return this._dataManagerConfig;
+    }
+    set dataManagerConfig(value) {
+        this._dataManagerConfig = value;
+        this.changeDetector.markForCheck();
+    }
+    get dataState() {
+        return this._dataState;
+    }
+    set dataState(value) {
+        this._dataState = value;
+        this.dataManagerService.updateDataState(value, this._source);
+    }
+    get views() {
+        return this._views;
+    }
+    set views(value) {
+        this._views = value;
+        this.changeDetector.markForCheck();
+    }
+    ngOnInit() {
+        this.dataManagerService
+            .getActiveViewIdUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((activeViewId) => {
+            /* istanbul ignore else */
+            if (activeViewId) {
+                this.activeView = this.dataManagerService.getViewById(activeViewId);
+                this.changeDetector.markForCheck();
+            }
+        });
+        this.dataManagerService
+            .getDataViewsUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((views) => {
+            this.views = views;
+        });
+        this.dataManagerService
+            .getDataStateUpdates(this._source)
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((dataState) => {
+            this._dataState = dataState;
+            this.onlyShowSelected = dataState.onlyShowSelected;
+            this.changeDetector.markForCheck();
+        });
+        this.dataManagerService
+            .getDataManagerConfigUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((config) => {
+            this.dataManagerConfig = config;
+        });
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    sortSelected(sortOption) {
+        this.dataState.activeSortOption = sortOption;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+    onViewChange(viewId) {
+        this.dataManagerService.updateActiveViewId(viewId);
+    }
+    searchApplied(text) {
+        this.dataState.searchText = text;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+    filterButtonClicked() {
+        const context = new SkyDataManagerFilterModalContext();
+        const filterModal = this.dataManagerConfig && this.dataManagerConfig.filterModalComponent;
+        context.filterData = this.dataState && this.dataState.filterData;
+        const options = {
+            providers: [
+                { provide: SkyDataManagerFilterModalContext, useValue: context },
+            ],
+        };
+        if (filterModal) {
+            const modalInstance = this.modalService.open(filterModal, options);
+            modalInstance.closed.subscribe((result) => {
+                if (result.reason === 'save') {
+                    this.dataState.filterData = result.data;
+                    this.dataManagerService.updateDataState(this.dataState, this._source);
+                }
+            });
+        }
+    }
+    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);
+            }
+        });
+    }
+    selectAll() {
+        /* istanbul ignore else */
+        if (this.activeView.onSelectAllClick) {
+            this.activeView.onSelectAllClick();
+        }
+    }
+    clearAll() {
+        /* istanbul ignore else */
+        if (this.activeView.onClearAllClick) {
+            this.activeView.onClearAllClick();
+        }
+    }
+    onOnlyShowSelected(event) {
+        this.dataState.onlyShowSelected = event.checked;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+}
+SkyDataManagerToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", 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: "13.2.7", 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDataManagerService }, { type: i3.SkyModalService }, { type: SkyDataManagerColumnPickerService }]; } });
+
+/**
+ * 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();
+    }
+    ngOnInit() {
+        this.dataManagerService
+            .getActiveViewIdUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((activeViewId) => {
+            this.isActive = this.viewId === activeViewId;
+        });
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+}
+SkyDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", 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: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDataManagerColumnPickerComponent {
+    constructor(context, dataManagerService, instance, libResources) {
+        this.context = context;
+        this.dataManagerService = dataManagerService;
+        this.instance = instance;
+        this.libResources = libResources;
+        this.title = 'Choose columns to show in the list';
+        this.viewConfig = {
+            id: 'columnPicker',
+            name: 'Column Picker',
+            searchEnabled: true,
+            searchExpandMode: 'fit',
+            multiselectToolbarEnabled: true,
+            onSelectAllClick: this.selectAll.bind(this),
+            onClearAllClick: this.clearAll.bind(this),
+        };
+        this._dataState = new SkyDataManagerState({});
+        this._ngUnsubscribe = new Subject();
+    }
+    get dataState() {
+        return this._dataState;
+    }
+    set dataState(value) {
+        this._dataState = value;
+        this.displayedColumnData = this.searchColumns(this.columnData.filter((col) => !col.alwaysDisplayed));
+        if (value.onlyShowSelected) {
+            this.displayedColumnData = this.displayedColumnData.filter((col) => col.isSelected);
+        }
+    }
+    ngOnInit() {
+        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,
+        });
+        this.dataManagerService.initDataView(this.viewConfig);
+        this.columnData = this.formatColumnOptions();
+        this.dataManagerService
+            .getDataStateUpdates('columnPicker')
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((state) => {
+            this.dataState = state;
+        });
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    searchColumns(columns) {
+        let searchedColumns = columns;
+        const searchText = this.dataState && this.dataState.searchText?.toUpperCase();
+        if (searchText) {
+            searchedColumns = columns.filter(function (item) {
+                let property;
+                for (property in item) {
+                    if (Object.prototype.hasOwnProperty.call(item, property) &&
+                        (property === 'label' || property === 'description')) {
+                        const propertyText = item[property] && item[property].toUpperCase();
+                        if (propertyText && propertyText.indexOf(searchText) > -1) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            });
+        }
+        return searchedColumns;
+    }
+    selectAll() {
+        this.displayedColumnData.forEach((column) => (column.isSelected = true));
+    }
+    clearAll() {
+        this.displayedColumnData.forEach((column) => (column.isSelected = false));
+    }
+    cancelChanges() {
+        this.instance.cancel();
+    }
+    isSelected(id) {
+        return (this.context.displayedColumnIds.findIndex((colId) => colId === id) !== -1);
+    }
+    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);
+                }
+            }
+            else {
+                formattedColumnOptions.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);
+        }
+        return formattedColumnOptions;
+    }
+}
+SkyDataManagerColumnPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", 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: ["itemName", "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: "13.2.7", 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          >\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"] }]
+        }], ctorParameters: function () { return [{ type: SkyDataManagerColumnPickerContext }, { type: SkyDataManagerService }, { type: i3.SkyModalInstance }, { type: i4$1.SkyLibResourcesService }]; } });
+
+class SkyDataManagerColumnPickerImplService {
+    getComponentType() {
+        return SkyDataManagerColumnPickerComponent;
+    }
+}
+SkyDataManagerColumnPickerImplService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDataManagerColumnPickerImplService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are
+ * rendered after the standard toolbar actions and before the search box. Each item should be
+ * wrapped in its own `sky-data-manager-toolbar-left-item`. The items render in the order they are in in the template.
+ */
+class SkyDataManagerToolbarLeftItemComponent {
+}
+SkyDataManagerToolbarLeftItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarLeftItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-manager-toolbar-left-item', template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n" }]
+        }] });
+
+/**
+ * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are
+ * rendered as the first items in the toolbar and should be standard actions. Each item should be
+ * wrapped in its own `sky-data-manager-toolbar-primary-item`. The items render in the order they are in in the template.
+ */
+class SkyDataManagerToolbarPrimaryItemComponent {
+}
+SkyDataManagerToolbarPrimaryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarPrimaryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-manager-toolbar-primary-item', template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n" }]
+        }] });
+
+/**
+ * A wrapper for an item to be rendered in `SkyDataManagerToolbarComponent`. The contents are
+ * rendered in `sky-toolbar-view-actions` on the right side of the toolbar and before the view
+ * switcher icons (if present). Each item should be wrapped in its own
+ * `sky-data-manager-toolbar-right-item`. The items render in the order they are in in the template.
+ */
+class SkyDataManagerToolbarRightItemComponent {
+}
+SkyDataManagerToolbarRightItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarRightItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDataManagerToolbarRightItemComponent, selector: "sky-data-manager-toolbar-right-item", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-manager-toolbar-right-item', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * A wrapper for items to be rendered in `SkyDataManagerToolbarComponent`. The contents are
+ * rendered in an additional toolbar row beneath the primary toolbar and above the multiselect
+ * toolbar (if present).
+ */
+class SkyDataManagerToolbarSectionComponent {
+}
+SkyDataManagerToolbarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-data-manager-toolbar-section', template: "<sky-toolbar-section>\n  <ng-content></ng-content>\n</sky-toolbar-section>\n" }]
+        }] });
+
+class SkyDataManagerModule {
+}
+SkyDataManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDataManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerModule, declarations: [SkyDataManagerColumnPickerComponent,
+        SkyDataManagerComponent,
+        SkyDataManagerToolbarLeftItemComponent,
+        SkyDataManagerToolbarPrimaryItemComponent,
+        SkyDataManagerToolbarRightItemComponent,
+        SkyDataManagerToolbarSectionComponent,
+        SkyDataManagerToolbarComponent,
+        SkyDataViewComponent], imports: [CommonModule,
+        FormsModule,
+        SkyBackToTopModule,
+        SkyCheckboxModule,
+        SkyDataManagerResourcesModule,
+        SkyFilterModule,
+        SkyIconModule,
+        SkyModalModule,
+        SkyRadioModule,
+        SkyRepeaterModule,
+        SkySearchModule,
+        SkySortModule,
+        SkyToolbarModule,
+        SkyViewkeeperModule], exports: [SkyDataManagerColumnPickerComponent,
+        SkyDataManagerComponent,
+        SkyDataManagerToolbarLeftItemComponent,
+        SkyDataManagerToolbarPrimaryItemComponent,
+        SkyDataManagerToolbarRightItemComponent,
+        SkyDataManagerToolbarSectionComponent,
+        SkyDataManagerToolbarComponent,
+        SkyDataViewComponent] });
+SkyDataManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerModule, providers: [
+        {
+            provide: SkyDataManagerColumnPickerService,
+            useClass: SkyDataManagerColumnPickerImplService,
+        },
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            SkyBackToTopModule,
+            SkyCheckboxModule,
+            SkyDataManagerResourcesModule,
+            SkyFilterModule,
+            SkyIconModule,
+            SkyModalModule,
+            SkyRadioModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkySortModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDataManagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDataManagerColumnPickerComponent,
+                        SkyDataManagerComponent,
+                        SkyDataManagerToolbarLeftItemComponent,
+                        SkyDataManagerToolbarPrimaryItemComponent,
+                        SkyDataManagerToolbarRightItemComponent,
+                        SkyDataManagerToolbarSectionComponent,
+                        SkyDataManagerToolbarComponent,
+                        SkyDataViewComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyBackToTopModule,
+                        SkyCheckboxModule,
+                        SkyDataManagerResourcesModule,
+                        SkyFilterModule,
+                        SkyIconModule,
+                        SkyModalModule,
+                        SkyRadioModule,
+                        SkyRepeaterModule,
+                        SkySearchModule,
+                        SkySortModule,
+                        SkyToolbarModule,
+                        SkyViewkeeperModule,
+                    ],
+                    exports: [
+                        SkyDataManagerColumnPickerComponent,
+                        SkyDataManagerComponent,
+                        SkyDataManagerToolbarLeftItemComponent,
+                        SkyDataManagerToolbarPrimaryItemComponent,
+                        SkyDataManagerToolbarRightItemComponent,
+                        SkyDataManagerToolbarSectionComponent,
+                        SkyDataManagerToolbarComponent,
+                        SkyDataViewComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: SkyDataManagerColumnPickerService,
+                            useClass: SkyDataManagerColumnPickerImplService,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDataManagerColumnPickerSortStrategy, SkyDataManagerFilterModalContext, SkyDataManagerModule, SkyDataManagerService, SkyDataManagerState, SkyDataViewState, SkyDataManagerColumnPickerComponent as λ1, SkyDataManagerComponent as λ2, SkyDataManagerToolbarLeftItemComponent as λ3, SkyDataManagerToolbarPrimaryItemComponent as λ4, SkyDataManagerToolbarRightItemComponent as λ5, SkyDataManagerToolbarSectionComponent as λ6, SkyDataManagerToolbarComponent as λ7, SkyDataViewComponent as λ8 };
+//# sourceMappingURL=skyux-data-manager.mjs.map