@skyux/data-manager 13.5.2 → 13.6.0

package/fesm2022/skyux-data-manager.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, inject, ChangeDetectorRef, isStandalone, ChangeDetectionStrategy, Component, input, computed, HostBinding, Input } from '@angular/core';
+import { NgModule, Injectable, inject, ChangeDetectorRef, isStandalone, ChangeDetectionStrategy, Component, input, computed, HostBinding, Input, DestroyRef, Directive } from '@angular/core';
 import * as i2$2 from '@skyux/indicators';
 import { SkyTextHighlightDirective, SkyStatusIndicatorModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/lists';
-import { SkyFilterModule, SkySortModule, SkyRepeaterModule } from '@skyux/lists';
+import { SkyFilterModule, SkySortModule, SkyRepeaterModule, SkyFilterStateService } from '@skyux/lists';
 import * as i1$2 from '@skyux/modals';
 import { SkyModalService, SkyModalLegacyService, SkyModalInstance, SkyModalModule } from '@skyux/modals';
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
@@ -23,6 +23,7 @@ import { SkyToolbarModule, SkyBackToTopMessageType, SkyBackToTopModule } from '@
 import * as i5 from '@skyux/lookup';
 import { SkySearchModule } from '@skyux/lookup';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 // TODO: In a future breaking change convert this to an interface
 /**
@@ -772,7 +773,7 @@ class SkyDataManagerToolbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDataManagerToolbarComponent, isStandalone: true, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n      @if (activeView?.filterButtonEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-filter\">\n          <sky-filter-button\n            [showButtonText]=\"activeView?.showFilterButtonText\"\n            (filterButtonClick)=\"filterButtonClicked()\"\n          />\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.sortEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-sort\">\n          <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n            @for (item of dataManagerConfig?.sortOptions; track item.id) {\n              <sky-sort-item\n                [active]=\"dataState?.activeSortOption?.id === item.id\"\n                (itemSelect)=\"sortSelected(item)\"\n              >\n                {{ item.label }}\n              </sky-sort-item>\n            }\n          </sky-sort>\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.columnPickerEnabled) {\n        <sky-toolbar-item>\n          <button\n            class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_columns_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n      <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n      @if (activeView?.searchEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-search\">\n          <sky-search\n            [expandMode]=\"activeView?.searchExpandMode\"\n            [placeholderText]=\"activeView?.searchPlaceholderText\"\n            [searchText]=\"dataState?.searchText\"\n            (searchApply)=\"searchApplied($event)\"\n          />\n        </sky-toolbar-item>\n      }\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n        @if (activeView && views && views.length > 1) {\n          <sky-radio-group\n            class=\"sky-switch-icon-group\"\n            [ariaLabel]=\"'data view switcher'\"\n            [(ngModel)]=\"activeView.id\"\n          >\n            @for (view of views; track view.id) {\n              <sky-radio\n                [attr.aria-label]=\"view.name\"\n                [iconName]=\"view.iconName\"\n                [value]=\"view.id\"\n                [label]=\"view.name\"\n                (change)=\"onViewChange(view.id)\"\n              />\n            }\n          </sky-radio-group>\n        }\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\" />\n  </sky-toolbar>\n\n  @if (activeView?.multiselectToolbarEnabled) {\n    <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_select_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_clear_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (click)=\"clearAll()\"\n          >\n            {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n          </button>\n        </sky-toolbar-item>\n        <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n          <sky-checkbox\n            [checked]=\"onlyShowSelected\"\n            [label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_show_selected_option_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (change)=\"onOnlyShowSelected($event)\"\n          >\n            <sky-checkbox-label>\n              {{\n                'skyux_data_manager_show_selected_option_title'\n                  | skyLibResources\n              }}\n            </sky-checkbox-label>\n          </sky-checkbox>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  }\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i5.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i6.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i6.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i7.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDataManagerToolbarComponent, isStandalone: true, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n      @if (activeView?.filterButtonEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-filter\">\n          <sky-filter-button\n            [showButtonText]=\"activeView?.showFilterButtonText\"\n            (filterButtonClick)=\"filterButtonClicked()\"\n          />\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.sortEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-sort\">\n          <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n            @for (item of dataManagerConfig?.sortOptions; track item.id) {\n              <sky-sort-item\n                [active]=\"dataState?.activeSortOption?.id === item.id\"\n                (itemSelect)=\"sortSelected(item)\"\n              >\n                {{ item.label }}\n              </sky-sort-item>\n            }\n          </sky-sort>\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.columnPickerEnabled) {\n        <sky-toolbar-item>\n          <button\n            class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_columns_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n      <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n      @if (activeView?.searchEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-search\">\n          <sky-search\n            [expandMode]=\"activeView?.searchExpandMode\"\n            [placeholderText]=\"activeView?.searchPlaceholderText\"\n            [searchText]=\"dataState?.searchText\"\n            (searchApply)=\"searchApplied($event)\"\n          />\n        </sky-toolbar-item>\n      }\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n        @if (activeView && views && views.length > 1) {\n          <sky-radio-group\n            class=\"sky-switch-icon-group\"\n            [ariaLabel]=\"'data view switcher'\"\n            [(ngModel)]=\"activeView.id\"\n          >\n            @for (view of views; track view.id) {\n              <sky-radio\n                [attr.aria-label]=\"view.name\"\n                [iconName]=\"view.iconName\"\n                [value]=\"view.id\"\n                [label]=\"view.name\"\n                (change)=\"onViewChange(view.id)\"\n              />\n            }\n          </sky-radio-group>\n        }\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\" />\n  </sky-toolbar>\n\n  <ng-content select=\"sky-filter-bar\" />\n  <ng-content select=\"sky-list-summary\" />\n\n  @if (activeView?.multiselectToolbarEnabled) {\n    <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_select_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_clear_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (click)=\"clearAll()\"\n          >\n            {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n          </button>\n        </sky-toolbar-item>\n        <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n          <sky-checkbox\n            [checked]=\"onlyShowSelected\"\n            [label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_show_selected_option_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (change)=\"onOnlyShowSelected($event)\"\n          >\n            <sky-checkbox-label>\n              {{\n                'skyux_data_manager_show_selected_option_title'\n                  | skyLibResources\n              }}\n            </sky-checkbox-label>\n          </sky-checkbox>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  }\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i5.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i6.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i6.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i6.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i6.λ40, selector: "sky-toolbar-view-actions" }, { kind: "pipe", type: i7.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
             type: Component,
@@ -786,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkySearchModule,
                         SkySortModule,
                         SkyToolbarModule,
-                    ], template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n      @if (activeView?.filterButtonEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-filter\">\n          <sky-filter-button\n            [showButtonText]=\"activeView?.showFilterButtonText\"\n            (filterButtonClick)=\"filterButtonClicked()\"\n          />\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.sortEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-sort\">\n          <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n            @for (item of dataManagerConfig?.sortOptions; track item.id) {\n              <sky-sort-item\n                [active]=\"dataState?.activeSortOption?.id === item.id\"\n                (itemSelect)=\"sortSelected(item)\"\n              >\n                {{ item.label }}\n              </sky-sort-item>\n            }\n          </sky-sort>\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.columnPickerEnabled) {\n        <sky-toolbar-item>\n          <button\n            class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_columns_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n      <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n      @if (activeView?.searchEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-search\">\n          <sky-search\n            [expandMode]=\"activeView?.searchExpandMode\"\n            [placeholderText]=\"activeView?.searchPlaceholderText\"\n            [searchText]=\"dataState?.searchText\"\n            (searchApply)=\"searchApplied($event)\"\n          />\n        </sky-toolbar-item>\n      }\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n        @if (activeView && views && views.length > 1) {\n          <sky-radio-group\n            class=\"sky-switch-icon-group\"\n            [ariaLabel]=\"'data view switcher'\"\n            [(ngModel)]=\"activeView.id\"\n          >\n            @for (view of views; track view.id) {\n              <sky-radio\n                [attr.aria-label]=\"view.name\"\n                [iconName]=\"view.iconName\"\n                [value]=\"view.id\"\n                [label]=\"view.name\"\n                (change)=\"onViewChange(view.id)\"\n              />\n            }\n          </sky-radio-group>\n        }\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\" />\n  </sky-toolbar>\n\n  @if (activeView?.multiselectToolbarEnabled) {\n    <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_select_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_clear_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (click)=\"clearAll()\"\n          >\n            {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n          </button>\n        </sky-toolbar-item>\n        <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n          <sky-checkbox\n            [checked]=\"onlyShowSelected\"\n            [label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_show_selected_option_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (change)=\"onOnlyShowSelected($event)\"\n          >\n            <sky-checkbox-label>\n              {{\n                'skyux_data_manager_show_selected_option_title'\n                  | skyLibResources\n              }}\n            </sky-checkbox-label>\n          </sky-checkbox>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  }\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"] }]
+                    ], template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n      @if (activeView?.filterButtonEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-filter\">\n          <sky-filter-button\n            [showButtonText]=\"activeView?.showFilterButtonText\"\n            (filterButtonClick)=\"filterButtonClicked()\"\n          />\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.sortEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-sort\">\n          <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n            @for (item of dataManagerConfig?.sortOptions; track item.id) {\n              <sky-sort-item\n                [active]=\"dataState?.activeSortOption?.id === item.id\"\n                (itemSelect)=\"sortSelected(item)\"\n              >\n                {{ item.label }}\n              </sky-sort-item>\n            }\n          </sky-sort>\n        </sky-toolbar-item>\n      }\n\n      @if (activeView?.columnPickerEnabled) {\n        <sky-toolbar-item>\n          <button\n            class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_columns_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n      <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n      @if (activeView?.searchEnabled) {\n        <sky-toolbar-item class=\"sky-data-manager-search\">\n          <sky-search\n            [expandMode]=\"activeView?.searchExpandMode\"\n            [placeholderText]=\"activeView?.searchPlaceholderText\"\n            [searchText]=\"dataState?.searchText\"\n            (searchApply)=\"searchApplied($event)\"\n          />\n        </sky-toolbar-item>\n      }\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n        @if (activeView && views && views.length > 1) {\n          <sky-radio-group\n            class=\"sky-switch-icon-group\"\n            [ariaLabel]=\"'data view switcher'\"\n            [(ngModel)]=\"activeView.id\"\n          >\n            @for (view of views; track view.id) {\n              <sky-radio\n                [attr.aria-label]=\"view.name\"\n                [iconName]=\"view.iconName\"\n                [value]=\"view.id\"\n                [label]=\"view.name\"\n                (change)=\"onViewChange(view.id)\"\n              />\n            }\n          </sky-radio-group>\n        }\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\" />\n  </sky-toolbar>\n\n  <ng-content select=\"sky-filter-bar\" />\n  <ng-content select=\"sky-list-summary\" />\n\n  @if (activeView?.multiselectToolbarEnabled) {\n    <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_select_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\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            [attr.aria-label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_clear_all_button_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (click)=\"clearAll()\"\n          >\n            {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n          </button>\n        </sky-toolbar-item>\n        <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n          <sky-checkbox\n            [checked]=\"onlyShowSelected\"\n            [label]=\"\n              dataManagerConfig?.listDescriptor\n                ? ('skyux_data_manager_show_selected_option_aria_label'\n                  | skyLibResources: dataManagerConfig?.listDescriptor)\n                : undefined\n            \"\n            (change)=\"onOnlyShowSelected($event)\"\n          >\n            <sky-checkbox-label>\n              {{\n                'skyux_data_manager_show_selected_option_title'\n                  | skyLibResources\n              }}\n            </sky-checkbox-label>\n          </sky-checkbox>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  }\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'];
@@ -1163,6 +1164,102 @@ const SKY_DATA_MANAGER_COLUMN_PICKER_PROVIDERS = [
     },
 ];
 
+/**
+ * Concrete implementation of SkyFilterStateService that manages filter state
+ * for integration between list components and data managers.
+ * @internal
+ */
+class SkyDataManagerFilterStateService {
+    #filterStateChange = new ReplaySubject(1);
+    updateFilterState(data, sourceId) {
+        const nextState = {
+            appliedFilters: data.appliedFilters,
+            selectedFilterIds: data.selectedFilterIds,
+        };
+        this.#filterStateChange.next({
+            filterState: nextState,
+            sourceId: sourceId,
+        });
+    }
+    getFilterStateUpdates(sourceId) {
+        return this.#filterStateChange.pipe(filter((c) => c.sourceId !== sourceId), map((c) => c.filterState));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerFilterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerFilterStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerFilterStateService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * A directive applied to a filtering component that enables integration with a data manager.
+ */
+class SkyDataManagerFilterControllerDirective {
+    #currentDataState = new SkyDataManagerState({});
+    #dataManagerService = inject(SkyDataManagerService);
+    #adapterService = inject(SkyFilterStateService);
+    #destroyRef = inject(DestroyRef);
+    #sourceId = 'skyDataManagerFilterController';
+    ngOnInit() {
+        // Subscribe to data manager state changes to update the adapter
+        this.#dataManagerService
+            .getDataStateUpdates(this.#sourceId)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((dataState) => {
+            this.#currentDataState = dataState;
+            this.#updateAdapterFromDataState(dataState);
+        });
+        // Subscribe to adapter changes (excluding those this controller originated)
+        this.#adapterService
+            .getFilterStateUpdates(this.#sourceId)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((data) => {
+            this.#updateDataManagerFromAdapter(data);
+        });
+    }
+    /**
+     * Updates the adapter's applied filters based on the data manager state.
+     */
+    #updateAdapterFromDataState(dataState) {
+        if (dataState.filterData?.filters) {
+            this.#adapterService.updateFilterState(dataState.filterData.filters, this.#sourceId);
+        }
+    }
+    /**
+     * Updates the data manager state based on adapter changes.
+     */
+    #updateDataManagerFromAdapter(filters) {
+        const filterData = {
+            filtersApplied: !!(filters?.appliedFilters && filters.appliedFilters.length > 0),
+            filters,
+        };
+        this.#currentDataState.filterData = filterData;
+        // Update the data manager state
+        this.#dataManagerService.updateDataState(this.#currentDataState, this.#sourceId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerFilterControllerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: SkyDataManagerFilterControllerDirective, isStandalone: true, selector: "[skyDataManagerFilterController]", providers: [
+            SkyDataManagerFilterStateService,
+            {
+                provide: SkyFilterStateService,
+                useExisting: SkyDataManagerFilterStateService,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerFilterControllerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyDataManagerFilterController]',
+                    providers: [
+                        SkyDataManagerFilterStateService,
+                        {
+                            provide: SkyFilterStateService,
+                            useExisting: SkyDataManagerFilterStateService,
+                        },
+                    ],
+                }]
+        }] });
+
 /**
  * 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
@@ -1223,12 +1320,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class SkyDataManagerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyDataManagerModule, imports: [SkyDataManagerComponent,
+            SkyDataManagerFilterControllerDirective,
             SkyDataManagerToolbarComponent,
             SkyDataManagerToolbarLeftItemComponent,
             SkyDataManagerToolbarPrimaryItemComponent,
             SkyDataManagerToolbarRightItemComponent,
             SkyDataManagerToolbarSectionComponent,
             SkyDataViewComponent], exports: [SkyDataManagerComponent,
+            SkyDataManagerFilterControllerDirective,
             SkyDataManagerToolbarComponent,
             SkyDataManagerToolbarLeftItemComponent,
             SkyDataManagerToolbarPrimaryItemComponent,
@@ -1246,6 +1345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{
                     imports: [
                         SkyDataManagerComponent,
+                        SkyDataManagerFilterControllerDirective,
                         SkyDataManagerToolbarComponent,
                         SkyDataManagerToolbarLeftItemComponent,
                         SkyDataManagerToolbarPrimaryItemComponent,
@@ -1255,6 +1355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     ],
                     exports: [
                         SkyDataManagerComponent,
+                        SkyDataManagerFilterControllerDirective,
                         SkyDataManagerToolbarComponent,
                         SkyDataManagerToolbarLeftItemComponent,
                         SkyDataManagerToolbarPrimaryItemComponent,
@@ -1270,5 +1371,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * 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 };
+export { SkyDataManagerColumnPickerSortStrategy, SkyDataManagerFilterModalContext, SkyDataManagerFilterStateService, 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, SkyDataManagerFilterControllerDirective as λ9 };
 //# sourceMappingURL=skyux-data-manager.mjs.map