@skyux/list-builder 14.6.0 → 14.6.2

package/fesm2022/skyux-list-builder.mjs

@@ -1,24 +1,24 @@
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, ContentChildren, Input, Output, ChangeDetectionStrategy, Component, NgModule, TemplateRef, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
+import { Injectable, inject, EventEmitter, ContentChildren, Input, Output, ChangeDetectionStrategy, Component, NgModule, TemplateRef, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef } from '@angular/core';
+import { SkyLogService } from '@skyux/core';
 import { ListItemModel, getData, compare, StateOrchestrator, StateDispatcher, AsyncList, AsyncItem, StateNode, getValue, isObservable } from '@skyux/list-builder-common';
 import { BehaviorSubject, Observable, Subject, of, combineLatest } from 'rxjs';
 import { map, distinctUntilChanged, take, takeUntil, skip, flatMap, scan } from 'rxjs/operators';
-import * as i3 from '@skyux/core';
-import * as i3$1 from '@skyux/lists';
+import * as i1 from '@skyux/lists';
 import { SkyFilterModule, SkyPagingModule, SkySortModule } from '@skyux/lists';
-import * as i4 from '@skyux/icon';
+import * as i3 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i3$2 from '@skyux/popovers';
+import * as i2 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
-import * as i5 from '@skyux/i18n';
+import * as i4 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import * as i4$1 from '@skyux/forms';
+import * as i2$1 from '@skyux/forms';
 import { SkyCheckboxModule } from '@skyux/forms';
-import * as i5$1 from '@skyux/layout';
+import * as i3$1 from '@skyux/layout';
 import { SkyToolbarModule } from '@skyux/layout';
-import * as i7 from '@skyux/lookup';
+import * as i2$2 from '@skyux/lookup';
 import { SkySearchComponent, SkySearchModule } from '@skyux/lookup';
 
 /**
@@ -1060,8 +1060,8 @@ class ListViewsOrchestrator extends ListStateOrchestrator {
  * @deprecated
  */
 class ListState extends StateNode {
-    constructor(dispatcher) {
-        super(new ListStateModel(), dispatcher);
+    constructor() {
+        super(new ListStateModel(), inject(ListStateDispatcher));
         this.register('filters', ListFiltersOrchestrator)
             .register('items', ListItemsOrchestrator)
             .register('paging', ListPagingOrchestrator)
@@ -1072,12 +1072,12 @@ class ListState extends StateNode {
             .register('selected', ListSelectedOrchestrator)
             .begin();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListState, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListState }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListState, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ListStateDispatcher }] });
+        }], ctorParameters: () => [] });
 
 /**
  * @internal
@@ -1095,9 +1095,7 @@ let idIndex$1 = 0;
  * @deprecated List builder and its features are deprecated. Use data manager instead. For more information, see https://developer.blackbaud.com/skyux/components/data-manager.
  */
 class SkyListComponent {
-    constructor(state, dispatcher, logger) {
-        this.state = state;
-        this.dispatcher = dispatcher;
+    constructor() {
         this.id = `sky-list-cmp-${++idIndex$1}`;
         /**
          * The data to display. The list component requires this property or the
@@ -1127,7 +1125,9 @@ class SkyListComponent {
         this.lastSelectedIds = [];
         this.lastFilters = [];
         this.ngUnsubscribe = new Subject();
-        logger.deprecated('SkyListComponent', {
+        this.state = inject(ListState);
+        this.dispatcher = inject(ListStateDispatcher);
+        inject(SkyLogService).deprecated('SkyListComponent', {
             deprecationMajorVersion: 6,
             moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-manager',
             replacementRecommendation: 'Use data manager instead.',
@@ -1341,7 +1341,7 @@ class SkyListComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListComponent, isStandalone: false, selector: "sky-list", inputs: { data: "data", dataProvider: "dataProvider", defaultView: "defaultView", initialTotal: "initialTotal", selectedIds: "selectedIds", sortFields: "sortFields", appliedFilters: "appliedFilters", searchFunction: ["search", "searchFunction"] }, outputs: { selectedIdsChange: "selectedIdsChange", appliedFiltersChange: "appliedFiltersChange" }, providers: [ListState, ListStateDispatcher], queries: [{ propertyName: "listViews", predicate: ListViewComponent }], usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListComponent, decorators: [{
@@ -1353,7 +1353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], dataProvider: [{
                 type: Input
@@ -1444,9 +1444,9 @@ class SkyListFilterInlineModel {
  * @deprecated
  */
 class SkyListFilterButtonComponent {
-    constructor(dispatcher) {
-        this.dispatcher = dispatcher;
+    constructor() {
         this.filterButtonItemToolbarIndex = 5000;
+        this.dispatcher = inject(ListStateDispatcher);
     }
     ngAfterViewInit() {
         this.dispatcher.toolbarAddItems([
@@ -1457,13 +1457,13 @@ class SkyListFilterButtonComponent {
             }),
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterButtonComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListFilterButtonComponent, isStandalone: false, selector: "sky-list-filter-button", viewQueries: [{ propertyName: "filterButtonTemplate", first: true, predicate: ["filterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #filterButton>\n  <ng-content />\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-filter-button', standalone: false, template: "<ng-template #filterButton>\n  <ng-content />\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: ListStateDispatcher }], propDecorators: { filterButtonTemplate: [{
+        }], propDecorators: { filterButtonTemplate: [{
                 type: ViewChild,
                 args: ['filterButton', {
                         read: TemplateRef,
@@ -1555,10 +1555,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @deprecated
  */
 class SkyListFilterInlineComponent {
-    constructor(dispatcher, state) {
-        this.dispatcher = dispatcher;
-        this.state = state;
+    constructor() {
         this.inlineFilters = [];
+        this.dispatcher = inject(ListStateDispatcher);
+        this.state = inject(ListState);
     }
     ngAfterContentInit() {
         this.inlineFilters = this.filters.map((filter) => {
@@ -1596,13 +1596,13 @@ class SkyListFilterInlineComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListFilterInlineComponent, isStandalone: false, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content />\n\n<sky-filter-inline>\n  @for (filter of inlineFilters; track filter) {\n    <sky-filter-inline-item>\n      <sky-list-filter-inline-item-renderer\n        [template]=\"filter.template\"\n        [filter]=\"filter\"\n      />\n    </sky-filter-inline-item>\n  }\n</sky-filter-inline>\n", dependencies: [{ kind: "component", type: i3$1.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i3$1.λ3, selector: "sky-filter-inline-item" }, { kind: "component", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListFilterInlineComponent, isStandalone: false, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content />\n\n<sky-filter-inline>\n  @for (filter of inlineFilters; track filter) {\n    <sky-filter-inline-item>\n      <sky-list-filter-inline-item-renderer\n        [template]=\"filter.template\"\n        [filter]=\"filter\"\n      />\n    </sky-filter-inline-item>\n  }\n</sky-filter-inline>\n", dependencies: [{ kind: "component", type: i1.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i1.λ3, selector: "sky-filter-inline-item" }, { kind: "component", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterInlineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-filter-inline', standalone: false, template: "<ng-content />\n\n<sky-filter-inline>\n  @for (filter of inlineFilters; track filter) {\n    <sky-filter-inline-item>\n      <sky-list-filter-inline-item-renderer\n        [template]=\"filter.template\"\n        [filter]=\"filter\"\n      />\n    </sky-filter-inline-item>\n  }\n</sky-filter-inline>\n" }]
-        }], ctorParameters: () => [{ type: ListStateDispatcher }, { type: ListState }], propDecorators: { filters: [{
+        }], propDecorators: { filters: [{
                 type: ContentChildren,
                 args: [SkyListFilterInlineItemComponent]
             }] } });
@@ -1615,14 +1615,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @deprecated
  */
 class SkyListFilterSummaryComponent {
-    constructor(state, dispatcher) {
-        this.state = state;
-        this.dispatcher = dispatcher;
+    constructor() {
         /**
          * Emits a `ListFilterModel` when users select a summary item. A common use case is
          * to open a filter modal when this event is received.
          */
         this.summaryItemClick = new EventEmitter();
+        this.state = inject(ListState);
+        this.dispatcher = inject(ListStateDispatcher);
     }
     ngAfterContentInit() {
         // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
@@ -1646,13 +1646,13 @@ class SkyListFilterSummaryComponent {
     filterSummaryItemClick(item) {
         this.summaryItemClick.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListFilterSummaryComponent, isStandalone: false, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n  @for (item of appliedFilters | async; track item; let i = $index) {\n    <sky-filter-summary-item\n      [dismissible]=\"item.dismissible\"\n      (dismiss)=\"filterSummaryItemDismiss(i)\"\n      (itemClick)=\"filterSummaryItemClick(item)\"\n    >\n      {{ item.label || item.value }}\n    </sky-filter-summary-item>\n  }\n</sky-filter-summary>\n", dependencies: [{ kind: "component", type: i3$1.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i3$1.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListFilterSummaryComponent, isStandalone: false, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n  @for (item of appliedFilters | async; track item; let i = $index) {\n    <sky-filter-summary-item\n      [dismissible]=\"item.dismissible\"\n      (dismiss)=\"filterSummaryItemDismiss(i)\"\n      (itemClick)=\"filterSummaryItemClick(item)\"\n    >\n      {{ item.label || item.value }}\n    </sky-filter-summary-item>\n  }\n</sky-filter-summary>\n", dependencies: [{ kind: "component", type: i1.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i1.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-filter-summary', standalone: false, template: "<sky-filter-summary>\n  @for (item of appliedFilters | async; track item; let i = $index) {\n    <sky-filter-summary-item\n      [dismissible]=\"item.dismissible\"\n      (dismiss)=\"filterSummaryItemDismiss(i)\"\n      (itemClick)=\"filterSummaryItemClick(item)\"\n    >\n      {{ item.label || item.value }}\n    </sky-filter-summary-item>\n  }\n</sky-filter-summary>\n" }]
-        }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }], propDecorators: { summaryItemClick: [{
+        }], propDecorators: { summaryItemClick: [{
                 type: Output
             }] } });
 
@@ -1711,8 +1711,8 @@ const listPagingComponentRef = forwardRef(() => SkyListPagingComponent);
  * @deprecated
  */
 class SkyListPagingComponent extends ListPagingComponent {
-    constructor(state, dispatcher, logger) {
-        super(state, dispatcher);
+    constructor() {
+        super(inject(ListState), inject(ListStateDispatcher));
         /**
          * The number of list items per page.
          * @default 10
@@ -1728,7 +1728,7 @@ class SkyListPagingComponent extends ListPagingComponent {
          * @default 1
          */
         this.pageNumber = 1;
-        logger.deprecated('SkyListPagingComponent', {
+        inject(SkyLogService).deprecated('SkyListPagingComponent', {
             deprecationMajorVersion: 6,
             moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-manager',
             replacementRecommendation: 'Use data manager and the paging component instead.',
@@ -1762,17 +1762,17 @@ class SkyListPagingComponent extends ListPagingComponent {
             this.dispatcher.next(new ListPagingSetPageNumberAction(Number(currentPage)));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListPagingComponent, isStandalone: false, selector: "sky-list-paging", inputs: { pageSize: "pageSize", maxPages: "maxPages", pageNumber: "pageNumber" }, providers: [
             { provide: ListPagingComponent, useExisting: listPagingComponentRef },
-        ], usesInheritance: true, ngImport: i0, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: i3$1.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: i1.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListPagingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-paging', providers: [
                         { provide: ListPagingComponent, useExisting: listPagingComponentRef },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n/>\n" }]
-        }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { pageSize: [{
+        }], ctorParameters: () => [], propDecorators: { pageSize: [{
                 type: Input
             }], maxPages: [{
                 type: Input
@@ -1869,21 +1869,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @deprecated
  */
 class SkyListSecondaryActionComponent {
-    constructor(actionService) {
-        this.actionService = actionService;
+    constructor() {
+        this.actionService = inject(SkyListSecondaryActionsService);
     }
     ngAfterContentInit() {
         this.actionService.addSecondaryAction({
             template: this.templateRef,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListSecondaryActionComponent, isStandalone: false, selector: "sky-list-secondary-action", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["listSecondaryAction"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #listSecondaryAction>\n  <ng-content />\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-secondary-action', standalone: false, template: "<ng-template #listSecondaryAction>\n  <ng-content />\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: SkyListSecondaryActionsService }], propDecorators: { templateRef: [{
+        }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: ['listSecondaryAction', {
                         read: TemplateRef,
@@ -1897,12 +1897,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @internal
  */
 class SkyListSecondaryActionsHostComponent {
-    constructor(changeDetector, actionService) {
-        this.changeDetector = changeDetector;
-        this.actionService = actionService;
+    constructor() {
         this.dropdownHidden = false;
         this.actions = [];
         this.ngUnsubscribe = new Subject();
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.actionService = inject(SkyListSecondaryActionsService);
     }
     ngOnInit() {
         this.actionService.actionsStream
@@ -1918,13 +1918,13 @@ class SkyListSecondaryActionsHostComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListSecondaryActionsHostComponent, isStandalone: false, selector: "sky-list-secondary-actions-host", ngImport: i0, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon iconName=\"more-actions\" />\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      @for (action of actions; track action) {\n        <sky-dropdown-item>\n          <ng-container *ngTemplateOutlet=\"action.template\" />\n        </sky-dropdown-item>\n      }\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media(min-width:768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i3$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i3$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i3$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListSecondaryActionsHostComponent, isStandalone: false, selector: "sky-list-secondary-actions-host", ngImport: i0, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon iconName=\"more-actions\" />\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      @for (action of actions; track action) {\n        <sky-dropdown-item>\n          <ng-container *ngTemplateOutlet=\"action.template\" />\n        </sky-dropdown-item>\n      }\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media(min-width:768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-secondary-actions-host', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon iconName=\"more-actions\" />\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      @for (action of actions; track action) {\n        <sky-dropdown-item>\n          <ng-container *ngTemplateOutlet=\"action.template\" />\n        </sky-dropdown-item>\n      }\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media(min-width:768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyListSecondaryActionsService }] });
+        }] });
 
 /**
  * Adds a dropdown to the list toolbar for secondary actions. If the dropdown does not
@@ -1932,10 +1932,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @deprecated
  */
 class SkyListSecondaryActionsComponent {
-    constructor(dispatcher) {
-        this.dispatcher = dispatcher;
+    constructor() {
         this.actions = [];
         this.secondaryActionsItemToolbarIndex = 5000;
+        this.dispatcher = inject(ListStateDispatcher);
     }
     ngAfterViewInit() {
         const secondaryActionItem = new ListToolbarItemModel({
@@ -1946,13 +1946,13 @@ class SkyListSecondaryActionsComponent {
         });
         this.dispatcher.toolbarAddItems([secondaryActionItem]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListSecondaryActionsComponent, isStandalone: false, selector: "sky-list-secondary-actions", providers: [SkyListSecondaryActionsService], viewQueries: [{ propertyName: "secondaryActionsTemplate", first: true, predicate: ["secondaryActions"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content />\n  </sky-list-secondary-actions-host>\n</ng-template>\n", dependencies: [{ kind: "component", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListSecondaryActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-secondary-actions', providers: [SkyListSecondaryActionsService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content />\n  </sky-list-secondary-actions-host>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: ListStateDispatcher }], propDecorators: { secondaryActionsTemplate: [{
+        }], propDecorators: { secondaryActionsTemplate: [{
                 type: ViewChild,
                 args: ['secondaryActions', {
                         read: TemplateRef,
@@ -2029,13 +2029,13 @@ let uniqueId = 0;
  * @deprecated
  */
 class SkyListMultiselectToolbarComponent {
-    constructor(state, dispatcher) {
-        this.state = state;
-        this.dispatcher = dispatcher;
+    constructor() {
         this.showOnlySelected = false;
         this.multiselectToolbarId = `sky-list-multiselect-toolbar-${uniqueId++}`;
         this.selectedIdMap = new Map();
         this.ngUnsubscribe = new Subject();
+        this.state = inject(ListState);
+        this.dispatcher = inject(ListStateDispatcher);
     }
     ngOnInit() {
         this.state
@@ -2147,13 +2147,13 @@ class SkyListMultiselectToolbarComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListMultiselectToolbarComponent, isStandalone: false, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\" />\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.λ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: i4$1.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListMultiselectToolbarComponent, isStandalone: false, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\" />\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ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$1.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i3$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i3$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i3$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i3$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-multiselect-toolbar', standalone: false, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\" />\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\" />\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"] }]
-        }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }], propDecorators: { showOnlySelected: [{
+        }], propDecorators: { showOnlySelected: [{
                 type: Input
             }] } });
 
@@ -2250,20 +2250,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @deprecated
  */
 class SkyListToolbarViewActionsComponent {
-    constructor(logger) {
-        logger.deprecated('SkyListToolbarViewActionsComponent', {
+    constructor() {
+        inject(SkyLogService).deprecated('SkyListToolbarViewActionsComponent', {
             deprecationMajorVersion: 6,
             moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-manager',
             replacementRecommendation: 'Use data manager instead.',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarViewActionsComponent, deps: [{ token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyListToolbarViewActionsComponent, isStandalone: false, selector: "sky-list-toolbar-view-actions", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;align-items:center}:host::ng-deep>:not(:last-child){margin-right:5px}.sky-list-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarViewActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-list-toolbar-view-actions', standalone: false, template: "<ng-content />\n", styles: [":host{display:flex;align-items:center}:host::ng-deep>:not(:last-child){margin-right:5px}.sky-list-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i3.SkyLogService }] });
+        }], ctorParameters: () => [] });
 
 /**
  * @internal
@@ -2344,16 +2344,16 @@ class ListToolbarConfigOrchestrator extends ListToolbarStateOrchestrator {
  * @internal
  */
 class ListToolbarState extends StateNode {
-    constructor(initialState, dispatcher) {
-        super(initialState, dispatcher);
+    constructor() {
+        super(inject(ListToolbarStateModel), inject(ListToolbarStateDispatcher));
         this.register('config', ListToolbarConfigOrchestrator).begin();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListToolbarState, deps: [{ token: ListToolbarStateModel }, { token: ListToolbarStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListToolbarState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListToolbarState }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListToolbarState, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }] });
+        }], ctorParameters: () => [] });
 
 let nextId = 0;
 /**
@@ -2385,12 +2385,7 @@ class SkyListToolbarComponent {
     get filterButtonAriaControls() {
         return this.isFilterBarDisplayed ? this.listFilterInlineId : undefined;
     }
-    constructor(changeDetector, state, dispatcher, toolbarState, toolbarDispatcher, logger) {
-        this.changeDetector = changeDetector;
-        this.state = state;
-        this.dispatcher = dispatcher;
-        this.toolbarState = toolbarState;
-        this.toolbarDispatcher = toolbarDispatcher;
+    constructor() {
         /**
          * Display the search bar in the standard position or in a separate section.
          * To highlight the search bar in a section above all other toolbar items,
@@ -2415,7 +2410,12 @@ class SkyListToolbarComponent {
         this.inlineFiltersItemToolbarIndex = 5000;
         this.sortSelectorItemToolbarIndex = 6000;
         this.ngUnsubscribe = new Subject();
-        logger.deprecated('SkyListToolbarComponent', {
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.state = inject(ListState);
+        this.dispatcher = inject(ListStateDispatcher);
+        this.toolbarState = inject(ListToolbarState);
+        this.toolbarDispatcher = inject(ListToolbarStateDispatcher);
+        inject(SkyLogService).deprecated('SkyListToolbarComponent', {
             deprecationMajorVersion: 6,
             moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/data-manager',
             replacementRecommendation: 'Use data manager instead.',
@@ -2617,12 +2617,12 @@ class SkyListToolbarComponent {
             this.changeDetector.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ListState }, { token: ListStateDispatcher }, { token: ListToolbarState }, { token: ListToolbarStateDispatcher }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyListToolbarComponent, isStandalone: false, selector: "sky-list-toolbar", inputs: { inMemorySearchEnabled: "inMemorySearchEnabled", placeholder: "placeholder", searchEnabled: "searchEnabled", sortSelectorEnabled: "sortSelectorEnabled", toolbarType: "toolbarType", searchText: "searchText" }, providers: [
             ListToolbarState,
             ListToolbarStateDispatcher,
             ListToolbarStateModel,
-        ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: SkySearchComponent, descendants: true, read: SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-list-toolbar-container\">\n  @if ((type | async) !== 'search') {\n    <sky-toolbar>\n      <sky-toolbar-section>\n        @for (item of leftTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of centerTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of rightTemplates; track item) {\n          <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        <ng-content />\n        @if (hasViewActions) {\n          <sky-toolbar-view-actions>\n            <ng-content select=\"sky-list-toolbar-view-actions\" />\n          </sky-toolbar-view-actions>\n        }\n      </sky-toolbar-section>\n      @if (showFilterSummary && (hasAppliedFilters | async)) {\n        <sky-toolbar-section>\n          <ng-content select=\"sky-list-filter-summary\" />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n\n  @if (\n    (type | async) === 'search' &&\n    ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n  ) {\n    <div class=\"sky-list-toolbar-search\">\n      <sky-toolbar>\n        @if (isSearchEnabled | async) {\n          <sky-toolbar-section>\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                sky-cmp-id=\"search\"\n                [template]=\"search\"\n              />\n            </sky-toolbar-item>\n          </sky-toolbar-section>\n        }\n        <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n          @for (item of leftTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of centerTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of rightTemplates; track item) {\n            <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n              @if (item.id !== 'search') {\n                <sky-list-toolbar-item-renderer\n                  [attr.sky-cmp-id]=\"item.id\"\n                  [template]=\"item.template\"\n                />\n              }\n            </sky-toolbar-item>\n          }\n          <ng-content />\n          @if (hasViewActions) {\n            <sky-toolbar-view-actions>\n              <ng-content select=\"sky-list-toolbar-view-actions\" />\n            </sky-toolbar-view-actions>\n          }\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n  }\n  @if (isFilterBarDisplayed) {\n    <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n      <ng-content select=\"sky-list-filter-inline\" />\n    </div>\n  }\n  @if (isMultiselectEnabled | async) {\n    <sky-list-multiselect-toolbar />\n  }\n</div>\n\n<ng-template #search>\n  @if (isSearchEnabled | async) {\n    <div class=\"sky-list-toolbar-search-wrapper\">\n      <sky-search\n        [disabled]=\"isToolbarDisabled\"\n        [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n        [placeholderText]=\"placeholder\"\n        [searchText]=\"searchTextInput | async\"\n        (searchApply)=\"updateSearchText($event)\"\n      />\n      <ng-content select=\"sky-list-toolbar-search-actions\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #sortSelector>\n  @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n    <div class=\"sky-toolbar-item-sort-container\">\n      <sky-sort [showButtonText]=\"true\">\n        @for (item of sortSelectors | async; track item) {\n          <sky-sort-item\n            [active]=\"item.selected\"\n            (itemSelect)=\"setSort(item.sort)\"\n          >\n            {{ item.sort.text }}\n          </sky-sort-item>\n        }\n      </sky-sort>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  />\n</ng-template>\n", styles: [".sky-list-toolbar-container:not(.sky-theme-modern *){--sky-override-list-toolbar-search-background: #eeeeef;--sky-override-list-toolbar-search-disabled-background: #cdcfd2}.sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:var(--sky-override-list-toolbar-search-background, var(--sky-color-background-container-base))}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:var(--sky-override-list-toolbar-search-disabled-background);opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], dependencies: [{ kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: i7.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i3$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i3$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i3$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: SkySearchComponent, descendants: true, read: SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-list-toolbar-container\">\n  @if ((type | async) !== 'search') {\n    <sky-toolbar>\n      <sky-toolbar-section>\n        @for (item of leftTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of centerTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of rightTemplates; track item) {\n          <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        <ng-content />\n        @if (hasViewActions) {\n          <sky-toolbar-view-actions>\n            <ng-content select=\"sky-list-toolbar-view-actions\" />\n          </sky-toolbar-view-actions>\n        }\n      </sky-toolbar-section>\n      @if (showFilterSummary && (hasAppliedFilters | async)) {\n        <sky-toolbar-section>\n          <ng-content select=\"sky-list-filter-summary\" />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n\n  @if (\n    (type | async) === 'search' &&\n    ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n  ) {\n    <div class=\"sky-list-toolbar-search\">\n      <sky-toolbar>\n        @if (isSearchEnabled | async) {\n          <sky-toolbar-section>\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                sky-cmp-id=\"search\"\n                [template]=\"search\"\n              />\n            </sky-toolbar-item>\n          </sky-toolbar-section>\n        }\n        <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n          @for (item of leftTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of centerTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of rightTemplates; track item) {\n            <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n              @if (item.id !== 'search') {\n                <sky-list-toolbar-item-renderer\n                  [attr.sky-cmp-id]=\"item.id\"\n                  [template]=\"item.template\"\n                />\n              }\n            </sky-toolbar-item>\n          }\n          <ng-content />\n          @if (hasViewActions) {\n            <sky-toolbar-view-actions>\n              <ng-content select=\"sky-list-toolbar-view-actions\" />\n            </sky-toolbar-view-actions>\n          }\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n  }\n  @if (isFilterBarDisplayed) {\n    <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n      <ng-content select=\"sky-list-filter-inline\" />\n    </div>\n  }\n  @if (isMultiselectEnabled | async) {\n    <sky-list-multiselect-toolbar />\n  }\n</div>\n\n<ng-template #search>\n  @if (isSearchEnabled | async) {\n    <div class=\"sky-list-toolbar-search-wrapper\">\n      <sky-search\n        [disabled]=\"isToolbarDisabled\"\n        [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n        [placeholderText]=\"placeholder\"\n        [searchText]=\"searchTextInput | async\"\n        (searchApply)=\"updateSearchText($event)\"\n      />\n      <ng-content select=\"sky-list-toolbar-search-actions\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #sortSelector>\n  @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n    <div class=\"sky-toolbar-item-sort-container\">\n      <sky-sort [showButtonText]=\"true\">\n        @for (item of sortSelectors | async; track item) {\n          <sky-sort-item\n            [active]=\"item.selected\"\n            (itemSelect)=\"setSort(item.sort)\"\n          >\n            {{ item.sort.text }}\n          </sky-sort-item>\n        }\n      </sky-sort>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  />\n</ng-template>\n", styles: [".sky-list-toolbar-container:not(.sky-theme-modern *){--sky-override-list-toolbar-search-background: #eeeeef;--sky-override-list-toolbar-search-disabled-background: #cdcfd2}.sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:var(--sky-override-list-toolbar-search-background, var(--sky-color-background-container-base))}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:var(--sky-override-list-toolbar-search-disabled-background);opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], dependencies: [{ kind: "component", type: i3$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i3$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i3$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i3$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: i2$2.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
             type: Component,
@@ -2631,7 +2631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ListToolbarStateDispatcher,
                         ListToolbarStateModel,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-list-toolbar-container\">\n  @if ((type | async) !== 'search') {\n    <sky-toolbar>\n      <sky-toolbar-section>\n        @for (item of leftTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of centerTemplates; track item) {\n          <sky-toolbar-item>\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        @for (item of rightTemplates; track item) {\n          <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n            <sky-list-toolbar-item-renderer\n              [attr.sky-cmp-id]=\"item.id\"\n              [template]=\"item.template\"\n            />\n          </sky-toolbar-item>\n        }\n        <ng-content />\n        @if (hasViewActions) {\n          <sky-toolbar-view-actions>\n            <ng-content select=\"sky-list-toolbar-view-actions\" />\n          </sky-toolbar-view-actions>\n        }\n      </sky-toolbar-section>\n      @if (showFilterSummary && (hasAppliedFilters | async)) {\n        <sky-toolbar-section>\n          <ng-content select=\"sky-list-filter-summary\" />\n        </sky-toolbar-section>\n      }\n    </sky-toolbar>\n  }\n\n  @if (\n    (type | async) === 'search' &&\n    ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n  ) {\n    <div class=\"sky-list-toolbar-search\">\n      <sky-toolbar>\n        @if (isSearchEnabled | async) {\n          <sky-toolbar-section>\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                sky-cmp-id=\"search\"\n                [template]=\"search\"\n              />\n            </sky-toolbar-item>\n          </sky-toolbar-section>\n        }\n        <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n          @for (item of leftTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of centerTemplates; track item) {\n            <sky-toolbar-item>\n              <sky-list-toolbar-item-renderer\n                [attr.sky-cmp-id]=\"item.id\"\n                [template]=\"item.template\"\n              />\n            </sky-toolbar-item>\n          }\n          @for (item of rightTemplates; track item) {\n            <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n              @if (item.id !== 'search') {\n                <sky-list-toolbar-item-renderer\n                  [attr.sky-cmp-id]=\"item.id\"\n                  [template]=\"item.template\"\n                />\n              }\n            </sky-toolbar-item>\n          }\n          <ng-content />\n          @if (hasViewActions) {\n            <sky-toolbar-view-actions>\n              <ng-content select=\"sky-list-toolbar-view-actions\" />\n            </sky-toolbar-view-actions>\n          }\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n  }\n  @if (isFilterBarDisplayed) {\n    <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n      <ng-content select=\"sky-list-filter-inline\" />\n    </div>\n  }\n  @if (isMultiselectEnabled | async) {\n    <sky-list-multiselect-toolbar />\n  }\n</div>\n\n<ng-template #search>\n  @if (isSearchEnabled | async) {\n    <div class=\"sky-list-toolbar-search-wrapper\">\n      <sky-search\n        [disabled]=\"isToolbarDisabled\"\n        [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n        [placeholderText]=\"placeholder\"\n        [searchText]=\"searchTextInput | async\"\n        (searchApply)=\"updateSearchText($event)\"\n      />\n      <ng-content select=\"sky-list-toolbar-search-actions\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #sortSelector>\n  @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n    <div class=\"sky-toolbar-item-sort-container\">\n      <sky-sort [showButtonText]=\"true\">\n        @for (item of sortSelectors | async; track item) {\n          <sky-sort-item\n            [active]=\"item.selected\"\n            (itemSelect)=\"setSort(item.sort)\"\n          >\n            {{ item.sort.text }}\n          </sky-sort-item>\n        }\n      </sky-sort>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  />\n</ng-template>\n", styles: [".sky-list-toolbar-container:not(.sky-theme-modern *){--sky-override-list-toolbar-search-background: #eeeeef;--sky-override-list-toolbar-search-disabled-background: #cdcfd2}.sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:var(--sky-override-list-toolbar-search-background, var(--sky-color-background-container-base))}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:var(--sky-override-list-toolbar-search-disabled-background);opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { inMemorySearchEnabled: [{
+        }], ctorParameters: () => [], propDecorators: { inMemorySearchEnabled: [{
                 type: Input
             }], placeholder: [{
                 type: Input