@skyux/data-manager 9.0.0-alpha.0 → 9.0.0-alpha.10

package/fesm2022/skyux-data-manager.mjs

@@ -1,28 +1,29 @@
-import * as i4 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 i5 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i1 from '@skyux/core';
-import { SkyViewkeeperModule } from '@skyux/core';
-import * as i6 from '@skyux/forms';
-import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
-import * as i8 from '@skyux/indicators';
+import { NgModule, Injectable, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@skyux/indicators';
 import { SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i10 from '@skyux/layout';
-import { SkyBackToTopMessageType, SkyBackToTopModule, SkyToolbarModule } from '@skyux/layout';
-import * as i5$1 from '@skyux/lists';
-import { SkyFilterModule, SkyRepeaterModule, SkySortModule } from '@skyux/lists';
-import * as i9 from '@skyux/lookup';
-import { SkySearchModule } from '@skyux/lookup';
-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 * as i4$1 from '@skyux/lists';
+import { SkyFilterModule, SkySortModule, SkyRepeaterModule } from '@skyux/lists';
+import * as i3$1 from '@skyux/modals';
+import { SkyModalService, SkyModalInstance, SkyModalModule } from '@skyux/modals';
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
 import { take, takeUntil, filter, map, distinctUntilChanged } from 'rxjs/operators';
+import * as i4 from '@skyux/i18n';
+import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@skyux/forms';
+import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import * as i8 from '@skyux/layout';
+import { SkyToolbarModule, SkyBackToTopMessageType, SkyBackToTopModule } from '@skyux/layout';
+import * as i7 from '@skyux/lookup';
+import { SkySearchModule } from '@skyux/lookup';
+import * as i1 from '@skyux/core';
+import { SkyViewkeeperModule } from '@skyux/core';
 
+/* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
@@ -47,6 +48,7 @@ const RESOURCES = {
         },
     },
 };
+SkyLibResourcesService.addResources(RESOURCES);
 class SkyDataManagerResourcesProvider {
     getString(localeInfo, name) {
         return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
@@ -56,9 +58,9 @@ class SkyDataManagerResourcesProvider {
  * Import into any component library module that needs to use resource strings.
  */
 class SkyDataManagerResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerResourcesModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerResourcesModule, providers: [
             {
                 provide: SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyDataManagerResourcesProvider,
@@ -66,7 +68,7 @@ class SkyDataManagerResourcesModule {
             },
         ], imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -80,6 +82,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+/**
+ * These options specify the sorting strategy applied to columns when `columnPickerEnabled` is enabled.
+ */
+var SkyDataManagerColumnPickerSortStrategy;
+(function (SkyDataManagerColumnPickerSortStrategy) {
+    /**
+     * No sorting is applied to the columns.
+     */
+    SkyDataManagerColumnPickerSortStrategy["None"] = "none";
+    /**
+     * If `sortEnabled` is set to `true`, then the selected columns are displayed before the unselected columns. Unselected columns are sorted alphabetically.
+     * If `sortEnabled` is set to `false`, then the columns are displayed in the order specified by `columnOptions`.
+     */
+    SkyDataManagerColumnPickerSortStrategy["SelectedThenAlphabetical"] = "selectedThenAlphabetical";
+})(SkyDataManagerColumnPickerSortStrategy || (SkyDataManagerColumnPickerSortStrategy = {}));
+
+class SkyDataManagerColumnPickerContext {
+    constructor(columnOptions, displayedColumnIds, columnPickerSortStrategy = SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
+        this.columnOptions = columnOptions;
+        this.displayedColumnIds = displayedColumnIds;
+        this.columnPickerSortStrategy = columnPickerSortStrategy;
+    }
+}
+
+/**
+ * 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerService, decorators: [{
+            type: Injectable
+        }] });
+
+// TODO: In a future breaking change convert this to an interface
+/**
+ * Sets the state of the filters.
+ */
+class SkyDataManagerFilterModalContext {
+}
+
 /**
  * Provides options for defining how data is displayed, such as which columns appear.
  */
@@ -461,138 +508,13 @@ class SkyDataManagerService {
             return JSON.stringify(filteredState1) === JSON.stringify(filteredState2);
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerService, deps: [{ token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyUIConfigService }]; } });
 
-/**
- * These options specify the sorting strategy applied to columns when `columnPickerEnabled` is enabled.
- */
-var SkyDataManagerColumnPickerSortStrategy;
-(function (SkyDataManagerColumnPickerSortStrategy) {
-    /**
-     * No sorting is applied to the columns.
-     */
-    SkyDataManagerColumnPickerSortStrategy["None"] = "none";
-    /**
-     * If `sortEnabled` is set to `true`, then the selected columns are displayed before the unselected columns. Unselected columns are sorted alphabetically.
-     * If `sortEnabled` is set to `false`, then the columns are displayed in the order specified by `columnOptions`.
-     */
-    SkyDataManagerColumnPickerSortStrategy["SelectedThenAlphabetical"] = "selectedThenAlphabetical";
-})(SkyDataManagerColumnPickerSortStrategy || (SkyDataManagerColumnPickerSortStrategy = {}));
-
-class SkyDataManagerColumnPickerContext {
-    constructor(columnOptions, displayedColumnIds, columnPickerSortStrategy = SkyDataManagerColumnPickerSortStrategy.SelectedThenAlphabetical) {
-        this.columnOptions = columnOptions;
-        this.displayedColumnIds = displayedColumnIds;
-        this.columnPickerSortStrategy = columnPickerSortStrategy;
-    }
-}
-
-const VIEWKEEPER_CLASSES_DEFAULT = ['.sky-data-manager-toolbar'];
-/**
- * The top-level data manager component. Provide `SkyDataManagerService` at this level.
- */
-class SkyDataManagerComponent {
-    get currentViewkeeperClasses() {
-        return this.#_currentViewkeeperClasses;
-    }
-    set currentViewkeeperClasses(value) {
-        this.#_currentViewkeeperClasses = [
-            ...VIEWKEEPER_CLASSES_DEFAULT,
-            ...(value || []),
-        ];
-        this.#changeDetection.markForCheck();
-    }
-    get isInitialized() {
-        return this.#_isInitialized;
-    }
-    set isInitialized(value) {
-        this.#_isInitialized = value;
-        this.#changeDetection.markForCheck();
-    }
-    #activeViewId;
-    #allViewkeeperClasses;
-    #ngUnsubscribe;
-    #sourceId;
-    #changeDetection;
-    #dataManagerService;
-    #_isInitialized;
-    #_currentViewkeeperClasses;
-    constructor(changeDetection, dataManagerService) {
-        this.backToTopController = new Subject();
-        this.backToTopOptions = {
-            buttonHidden: true,
-        };
-        this.#allViewkeeperClasses = {};
-        this.#ngUnsubscribe = new Subject();
-        this.#sourceId = 'dataManagerComponent';
-        this.#_isInitialized = false;
-        this.#_currentViewkeeperClasses = VIEWKEEPER_CLASSES_DEFAULT;
-        this.#changeDetection = changeDetection;
-        this.#dataManagerService = dataManagerService;
-    }
-    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 = this.#activeViewId
-                ? classes[this.#activeViewId]
-                : undefined;
-        });
-        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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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", 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: "16.1.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 }]; } });
-
-// TODO: In a future breaking change convert this to an interface
-/**
- * Sets the state of the filters.
- */
-class SkyDataManagerFilterModalContext {
-}
-
-/**
- * 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 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`
  * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,
@@ -630,22 +552,16 @@ class SkyDataManagerToolbarComponent {
         this.#changeDetector.markForCheck();
     }
     #ngUnsubscribe = new Subject();
-    #changeDetector;
-    #dataManagerService;
-    #modalService;
-    #columnPickerService;
     // the source to provide for data state changes
     #_source = 'toolbar';
     #_activeView;
     #_dataManagerConfig;
     #_dataState;
     #_views = [];
-    constructor(changeDetector, dataManagerService, modalService, columnPickerService) {
-        this.#changeDetector = changeDetector;
-        this.#dataManagerService = dataManagerService;
-        this.#modalService = modalService;
-        this.#columnPickerService = columnPickerService;
-    }
+    #changeDetector = inject(ChangeDetectorRef);
+    #columnPickerService = inject(SkyDataManagerColumnPickerService);
+    #dataManagerService = inject(SkyDataManagerService);
+    #modalService = inject(SkyModalService);
     ngOnInit() {
         this.#dataManagerService
             .getActiveViewIdUpdates()
@@ -766,13 +682,104 @@ class SkyDataManagerToolbarComponent {
             this.#dataManagerService.updateDataState(this.dataState, this.#_source);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDataManagerService }, { token: i3.SkyModalService }, { token: SkyDataManagerColumnPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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]=\"!!(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          [(ngModel)]=\"activeView.id\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\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", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerToolbarComponent, isStandalone: true, 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          [(ngModel)]=\"activeView.id\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i3.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i4$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i3.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i3.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i7.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i4$1.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { kind: "component", type: i4$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ37, selector: "sky-toolbar" }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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]=\"!!(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          [(ngModel)]=\"activeView.id\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\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 }]; } });
+            args: [{ standalone: true, selector: 'sky-data-manager-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyCheckboxModule,
+                        SkyDataManagerResourcesModule,
+                        SkyIconModule,
+                        SkyFilterModule,
+                        SkyRadioModule,
+                        SkySearchModule,
+                        SkySortModule,
+                        SkyToolbarModule,
+                    ], 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          [(ngModel)]=\"activeView.id\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\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"] }]
+        }] });
+
+const VIEWKEEPER_CLASSES_DEFAULT = ['.sky-data-manager-toolbar'];
+/**
+ * The top-level data manager component. Provide `SkyDataManagerService` at this level.
+ */
+class SkyDataManagerComponent {
+    constructor() {
+        this.backToTopController = new Subject();
+        this.backToTopOptions = {
+            buttonHidden: true,
+        };
+        this.#allViewkeeperClasses = {};
+        this.#ngUnsubscribe = new Subject();
+        this.#sourceId = 'dataManagerComponent';
+        this.#_isInitialized = false;
+        this.#_currentViewkeeperClasses = VIEWKEEPER_CLASSES_DEFAULT;
+        this.#changeDetection = inject(ChangeDetectorRef);
+        this.#dataManagerService = inject(SkyDataManagerService);
+    }
+    get currentViewkeeperClasses() {
+        return this.#_currentViewkeeperClasses;
+    }
+    set currentViewkeeperClasses(value) {
+        this.#_currentViewkeeperClasses = [
+            ...VIEWKEEPER_CLASSES_DEFAULT,
+            ...(value || []),
+        ];
+        this.#changeDetection.markForCheck();
+    }
+    get isInitialized() {
+        return this.#_isInitialized;
+    }
+    set isInitialized(value) {
+        this.#_isInitialized = value;
+        this.#changeDetection.markForCheck();
+    }
+    #activeViewId;
+    #allViewkeeperClasses;
+    #ngUnsubscribe;
+    #sourceId;
+    #_isInitialized;
+    #_currentViewkeeperClasses;
+    #changeDetection;
+    #dataManagerService;
+    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 = this.#activeViewId
+                ? classes[this.#activeViewId]
+                : undefined;
+        });
+        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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i8.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-data-manager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyBackToTopModule, SkyViewkeeperModule], 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" }]
+        }] });
 
 /**
  * A data view is rendered within a data manager component.
@@ -789,12 +796,8 @@ class SkyDataViewComponent {
     }
     #_isActive = false;
     #ngUnsubscribe = new Subject();
-    #dataManagerService;
-    #changeDetector;
-    constructor(dataManagerService, changeDetector) {
-        this.#dataManagerService = dataManagerService;
-        this.#changeDetector = changeDetector;
-    }
+    #dataManagerService = inject(SkyDataManagerService);
+    #changeDetector = inject(ChangeDetectorRef);
     ngOnInit() {
         this.#dataManagerService
             .getActiveViewIdUpdates()
@@ -807,13 +810,13 @@ class SkyDataViewComponent {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataViewComponent, deps: [{ token: SkyDataManagerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataViewComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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: SkyDataManagerService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewId: [{
+            args: [{ standalone: true, selector: 'sky-data-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<ng-container *ngIf=\"isActive\">\n  <ng-content></ng-content>\n</ng-container>\n" }]
+        }], propDecorators: { viewId: [{
                 type: Input
             }] } });
 
@@ -821,19 +824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * @internal
  */
 class SkyDataManagerColumnPickerComponent {
-    get dataState() {
-        return this.#_dataState;
-    }
-    set dataState(value) {
-        this.#_dataState = value;
-        this.updateData();
-    }
-    #ngUnsubscribe;
-    #_dataState;
-    constructor(context, dataManagerService, instance) {
-        this.context = context;
-        this.dataManagerService = dataManagerService;
-        this.instance = instance;
+    constructor() {
         this.columnData = [];
         this.displayedColumnData = [];
         this.viewConfig = {
@@ -848,7 +839,19 @@ class SkyDataManagerColumnPickerComponent {
         this.isAnyDisplayedColumnSelected = false;
         this.#ngUnsubscribe = new Subject();
         this.#_dataState = new SkyDataManagerState({});
+        this.context = inject(SkyDataManagerColumnPickerContext);
+        this.dataManagerService = inject(SkyDataManagerService);
+        this.instance = inject(SkyModalInstance);
+    }
+    get dataState() {
+        return this.#_dataState;
+    }
+    set dataState(value) {
+        this.#_dataState = value;
+        this.updateData();
     }
+    #ngUnsubscribe;
+    #_dataState;
     ngOnInit() {
         this.dataManagerService.initDataManager({
             activeViewId: this.viewConfig.id,
@@ -953,22 +956,31 @@ class SkyDataManagerColumnPickerComponent {
         }
         return formattedColumnOptions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [{ token: SkyDataManagerColumnPickerContext }, { token: SkyDataManagerService }, { token: i3.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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            (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: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerColumnPickerComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyDataManagerComponent, selector: "sky-data-manager" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "component", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { kind: "component", type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3$1.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i3$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i3$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4$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: i4$1.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4$1.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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"] }]
-        }], ctorParameters: function () { return [{ type: SkyDataManagerColumnPickerContext }, { type: SkyDataManagerService }, { type: i3.SkyModalInstance }]; } });
+            args: [{ standalone: true, selector: 'sky-data-manager-column-picker', providers: [SkyDataManagerService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        SkyDataManagerComponent,
+                        SkyDataManagerResourcesModule,
+                        SkyDataManagerToolbarComponent,
+                        SkyDataViewComponent,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                        SkyStatusIndicatorModule,
+                    ], 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"] }]
+        }] });
 
 class SkyDataManagerColumnPickerImplService {
     getComponentType() {
         return SkyDataManagerColumnPickerComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerImplService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerImplService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerColumnPickerImplService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerColumnPickerImplService, decorators: [{
             type: Injectable
         }] });
 
@@ -978,12 +990,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * wrapped in its own `sky-data-manager-toolbar-left-item`. The items render in the order they are in in the template.
  */
 class SkyDataManagerToolbarLeftItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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", dependencies: [{ kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerToolbarLeftItemComponent, isStandalone: true, selector: "sky-data-manager-toolbar-left-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", dependencies: [{ kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarLeftItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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" }]
+            args: [{ standalone: true, selector: 'sky-data-manager-toolbar-left-item', imports: [SkyToolbarModule], template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n" }]
         }] });
 
 /**
@@ -992,12 +1004,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * wrapped in its own `sky-data-manager-toolbar-primary-item`. The items render in the order they are in in the template.
  */
 class SkyDataManagerToolbarPrimaryItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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", dependencies: [{ kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerToolbarPrimaryItemComponent, isStandalone: true, selector: "sky-data-manager-toolbar-primary-item", ngImport: i0, template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n", dependencies: [{ kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ39, selector: "sky-toolbar-item" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarPrimaryItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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" }]
+            args: [{ standalone: true, selector: 'sky-data-manager-toolbar-primary-item', imports: [SkyToolbarModule], template: "<sky-toolbar-item>\n  <ng-content></ng-content>\n</sky-toolbar-item>\n" }]
         }] });
 
 /**
@@ -1007,12 +1019,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * `sky-data-manager-toolbar-right-item`. The items render in the order they are in in the template.
  */
 class SkyDataManagerToolbarRightItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyDataManagerToolbarRightItemComponent, selector: "sky-data-manager-toolbar-right-item", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerToolbarRightItemComponent, isStandalone: true, selector: "sky-data-manager-toolbar-right-item", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarRightItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-data-manager-toolbar-right-item', template: "<ng-content></ng-content>\n" }]
+            args: [{ standalone: true, selector: 'sky-data-manager-toolbar-right-item', template: "<ng-content></ng-content>\n" }]
         }] });
 
 /**
@@ -1021,104 +1033,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * toolbar (if present).
  */
 class SkyDataManagerToolbarSectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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", dependencies: [{ kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDataManagerToolbarSectionComponent, isStandalone: true, selector: "sky-data-manager-toolbar-section", ngImport: i0, template: "<sky-toolbar-section>\n  <ng-content></ng-content>\n</sky-toolbar-section>\n", dependencies: [{ kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8.λ38, selector: "sky-toolbar-section" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerToolbarSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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" }]
+            args: [{ standalone: true, selector: 'sky-data-manager-toolbar-section', imports: [SkyToolbarModule], template: "<sky-toolbar-section>\n  <ng-content></ng-content>\n</sky-toolbar-section>\n" }]
         }] });
 
 class SkyDataManagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerModule, declarations: [SkyDataManagerColumnPickerComponent,
-            SkyDataManagerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerModule, imports: [SkyDataManagerComponent,
+            SkyDataManagerToolbarComponent,
             SkyDataManagerToolbarLeftItemComponent,
             SkyDataManagerToolbarPrimaryItemComponent,
             SkyDataManagerToolbarRightItemComponent,
             SkyDataManagerToolbarSectionComponent,
+            SkyDataViewComponent], exports: [SkyDataManagerComponent,
             SkyDataManagerToolbarComponent,
-            SkyDataViewComponent], imports: [CommonModule,
-            FormsModule,
-            SkyBackToTopModule,
-            SkyCheckboxModule,
-            SkyDataManagerResourcesModule,
-            SkyFilterModule,
-            SkyIconModule,
-            SkyModalModule,
-            SkyRadioModule,
-            SkyRepeaterModule,
-            SkySearchModule,
-            SkyStatusIndicatorModule,
-            SkySortModule,
-            SkyToolbarModule,
-            SkyViewkeeperModule], exports: [SkyDataManagerColumnPickerComponent,
-            SkyDataManagerComponent,
             SkyDataManagerToolbarLeftItemComponent,
             SkyDataManagerToolbarPrimaryItemComponent,
             SkyDataManagerToolbarRightItemComponent,
             SkyDataManagerToolbarSectionComponent,
-            SkyDataManagerToolbarComponent,
             SkyDataViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerModule, providers: [
             {
                 provide: SkyDataManagerColumnPickerService,
                 useClass: SkyDataManagerColumnPickerImplService,
             },
-        ], imports: [CommonModule,
-            FormsModule,
-            SkyBackToTopModule,
-            SkyCheckboxModule,
-            SkyDataManagerResourcesModule,
-            SkyFilterModule,
-            SkyIconModule,
-            SkyModalModule,
-            SkyRadioModule,
-            SkyRepeaterModule,
-            SkySearchModule,
-            SkyStatusIndicatorModule,
-            SkySortModule,
-            SkyToolbarModule,
-            SkyViewkeeperModule] }); }
+        ], imports: [SkyDataManagerComponent,
+            SkyDataManagerToolbarComponent,
+            SkyDataManagerToolbarLeftItemComponent,
+            SkyDataManagerToolbarPrimaryItemComponent,
+            SkyDataManagerToolbarSectionComponent,
+            SkyDataViewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDataManagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDataManagerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyDataManagerColumnPickerComponent,
+                    imports: [
                         SkyDataManagerComponent,
+                        SkyDataManagerToolbarComponent,
                         SkyDataManagerToolbarLeftItemComponent,
                         SkyDataManagerToolbarPrimaryItemComponent,
                         SkyDataManagerToolbarRightItemComponent,
                         SkyDataManagerToolbarSectionComponent,
-                        SkyDataManagerToolbarComponent,
                         SkyDataViewComponent,
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SkyBackToTopModule,
-                        SkyCheckboxModule,
-                        SkyDataManagerResourcesModule,
-                        SkyFilterModule,
-                        SkyIconModule,
-                        SkyModalModule,
-                        SkyRadioModule,
-                        SkyRepeaterModule,
-                        SkySearchModule,
-                        SkyStatusIndicatorModule,
-                        SkySortModule,
-                        SkyToolbarModule,
-                        SkyViewkeeperModule,
-                    ],
                     exports: [
-                        SkyDataManagerColumnPickerComponent,
                         SkyDataManagerComponent,
+                        SkyDataManagerToolbarComponent,
                         SkyDataManagerToolbarLeftItemComponent,
                         SkyDataManagerToolbarPrimaryItemComponent,
                         SkyDataManagerToolbarRightItemComponent,
                         SkyDataManagerToolbarSectionComponent,
-                        SkyDataManagerToolbarComponent,
                         SkyDataViewComponent,
                     ],
                     providers: [